-rw-r--r-- jubeen human 3 min odyssey-initial-design.md
Design Tasks
Design Considerations
In this section of the project, I would be focussing on some of the design considerations that were taken for the project.
- Color Scheme
- Design Illustrations
- Animations
Video Summary
Color Scheme
For the colors selected for the project I studied the color theory to understand what colors would go well for the website. One of the major rules I followed was the minimum contrast ratio. According to the ratio, there should be a minimum ratio of 4.5 between the background and the foreground color.
I also wanted to give subconscious clues to associate colors with the different project. Turquoise is used for Devops, Pale Red is used for Security, and Pastely Purple is used for IoT projects.
Below are listed all of the colors that have been used as Background and Foreground colors for the project. Eventually, I want to give the project a Dark and Light mode toggle, which would appeal to different demographics with different color preference. Also, I want to utilize the ‘prefers-color-scheme’ functionality to automatically set the color theme according to the users device preferences on colors.
Design Illustrations
For the design illustrations on the website, I wanted to design illustrations that relate to the topics under considerations. It gives me not only the opportunity to learn new skills, but also the freedom to seperate the design into multiple layers and use them to give a parallax effect while scrolling.
{ “items”: [ { “width”: 672, “caption”: “”, “height”: 494, “fileName”: “5ed0acf5592a1f4d0db3bcc9_infrastructure-tools.png”, “origFileName”: “infrastructure-tools.png”, “url”: “https://project-odyssey.s3.us-east-2.amazonaws.com/9e27bf0382944aa66e5e702bc04bfb2b.png”, “_id”: “5ed0acf5592a1f4d0db3bcc9”, “type”: “image”, “fileSize”: 271008 } ], “group”: “illustration” }
{ “items”: [ { “width”: 671, “caption”: “”, “height”: 493, “fileName”: “5ed0acf48d2394e93ce1ff08_Design-Tools.png”, “origFileName”: “Design-Tools.png”, “url”: “https://project-odyssey.s3.us-east-2.amazonaws.com/f598dc9c3f67beda905aefe8332bb5d6.png”, “_id”: “5ed0acf48d2394e93ce1ff08”, “type”: “image”, “fileSize”: 168278 } ], “group”: “illustration” }
Animations
For animations I wanted to give the website a minimalist look without going too overboard. One of the animations that I personally really like is the DevOps pipeline animation on the home page (not visible on mobile screen). Initially I used only CSS to animate the individual elements while scrolling, but quickly realized that it would get too difficult down the lane for different screen sizes. Hence resorted to After Effects for creating the animations.
There are a few more animations that are available like the one on the ‘under construction page’ or the ‘404 page’.
Other animations are much more subtle, like the ‘next/previous page’ button animation (that can be found on this page before the footer), and the ‘scroll down’ animation that can be found on the home page.
Using animations I wanted to give certain life to the website, which would otherwise not have been possible