Case Study: Tartan Fashion

***To save time for concurrent projects, this website was optimised for Desktop and Mobile view-ports only***

This was a conceptual project, which was also part of a self-initiated learning process of learning the complete Web Design process completely from start to finish.

To anyone reading this, DO NOT design horizontal scrolling websites for clients. I have built this purely out of curiosity as I find this style of website intriguing. but for the most part, These types of websites are not SEO friendly and will be de-ranked by Google (according to the numerous articles I have have read).

This website provides a simple overview of the history Tartan fashion. As the viewer scrolls downwards, the website progresses further down the chronological timeline.

In addition, to timeline information, I also managed to implement a 3D museum section in the latter section of the website (3D museum section can be viewed from 0:16s in the video below).

Constraints encountered during this project included being able to use the CSS rule “Background-attachment: fixed;”. When this rule is applied, full-screen images lose scalability on mobile view-ports, yet when the rule is removed, full cross-device compatibility returns. Another constraint includes CSS rules failing to execute when HTML is written semantically. Removing semantic HTML tags allows for normal execution of CSS rules.

Website code: www.github.com/asadxawan

Video Preview (3D museum @ 0:16s):


Screenshots: