Home Projects Devops Odyssey Design Task

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

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.

Background Colors

#171F24
#373737
#212121
#18242B
#616161
#15232b
#424242
#111111

Foreground Colors

#CF6679
#3700B3
#f6ee8c
#BB8CF6
#03DAC5
#FFFFFF
#9980ff
#84C9FB

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