Skip to content

Latest commit

 

History

History
85 lines (68 loc) · 4.16 KB

README.md

File metadata and controls

85 lines (68 loc) · 4.16 KB
Raw

Screenshot 2024-09-02 142110# Evolution of UI/UX Trends
Design Timeline (Project code : Design-Discus_013)

Introduction

This is a website that illustrates the evolution of UI/UX design, featuring different layouts and styles from various decades, from 1990s to 2030s.

Project Type

Frontend

Deployed App

https://design-timeline.netlify.app/

Directory Structure

./
├─ index.html
├─ era_navigation/
    ├─ index.html
    ├─ era_pages/
        ├─ 1990s/
        ├─ index.html
        ├─ layouts/
            ├─ amazon/
                ├─ xyz.html
            ├─ apple/
                ├─ ..
            ├─ google/
            ├─ microsoft/
        ├─ 2000s
        ├─ index.html
        ├─ layouts/
            ├─ amazon/
                ├─ xyz.html
            ├─ apple/
            ├─ google/
            ├─ microsoft/
            ├─ facebook/
        ├─ 2010s
            ├─ ..
        ├─ 2020s
            ├─ ..
        ├─ 2030s
            ├─ ..
├─ summery/
    ├─ index.html

Video Walkthrough of the project

https://youtu.be/ctD-cxAJdGM

Features

  • Responsiveness added over era navigation slider in Explore eras page. era_navigation

  • Dark/light mode switch in Era UI showcase page.

design decisions or assumptions

  • In 1990s layouts, we've mostly used HTML and a minimum inline CSS, just for text formatting & preventing UI from crashing out in different screen sizes. 1990s

  • In 2000s layouts, incorporated CSS standards like pseudo classes, media queries to make UI a little interactive to user activities. 2000s

  • In 2010s layouts, we've used CSS frameworks like Tailwind, as they've come into existence in that era only. Also we've made the layouts responsive, for different screen sizes. 2010s

  • In 2020s layouts, incorporated some CSS animations/keyframes, minimalism into layouts. Also used some custom fonts from sources like Google Fonts. 2030s

  • In 2030s layouts, we've tried to use futuristic design concepts such as paper morphism, high contrast, etc. 2030s

Usage

  • The website starts from the landing page, which is an attempt to showcase the UI evolution from 1990s to 2020s & future. homepage
  • Then, you can navigate to exploring different era layouts (from Explore more button), or the corresponding link in navbar.
  • Or, you can also navigate to About page to see an overview of the UI evolution. about

Technology Stack

  • HTML
  • CSS
  • JavaScript
  • Tailwind CSS