Project Background
The website was made using the Bootstrap 3 framework. CSS Media queries determined the art direction for small, medium, and large screens. The project had two main design challenges: to brightening up the dark color theme, and overly complex social media icons.
Media Icons
Initially, media icon 'windows' were integrated in the responsive design. The containing element holding the windows was sized based on percent of browser width:
For medium screens, the window icons expanded in size.
The windows float left and were stacked for large screens.
The responsive media icons worked well in all but one browser; a simpler design was needed.
Pulling the design together
Removing the icon windows would contribute to more dark space on the website. Helping to balance things out, a new orange vector image also acts as a focal point.
Pallate