# Evolution of UI/UX Trends
Design Timeline (Project code : Design-Discus_013)
This is a website that illustrates the evolution of UI/UX design, featuring different layouts and styles from various decades, from 1990s to 2030s.
Frontend
https://design-timeline.netlify.app/
./
├─ 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
-
Responsiveness added over era navigation slider in Explore eras page.
-
Dark/light mode switch in Era UI showcase page.
-
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.
-
In 2000s layouts, incorporated CSS standards like pseudo classes, media queries to make UI a little interactive to user activities.
-
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.
-
In 2020s layouts, incorporated some CSS animations/keyframes, minimalism into layouts. Also used some custom fonts from sources like Google Fonts.
-
In 2030s layouts, we've tried to use futuristic design concepts such as paper morphism, high contrast, etc.
- The website starts from the landing page, which is an attempt to showcase the UI evolution from 1990s to 2020s & future.
- 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.
- HTML
- CSS
- JavaScript
- Tailwind CSS