Web Development

Week 7: 10.11 to 10.17


In week 7, we decided on which mockup to use, and started designing the top-level pages of the site. I went with Mockup #1, and wrote out a Style Guide to follow. I also reworked the logo into something that could be used more widely throughout the site.

I chose Mockup #1, because both the layout and design felt less heavy, and the colors were more nature-centric. Mockup #2 had a nice apple red, but it felt more aggressive in comparison. Seeds of Solidarity's content came across to me as more focused, but relaxed. I wanted something that echoed a clear sky and the green of new seedlings in the ground, with a layout that wasn't afraid to use empty space.

a revised logo, now in a circle, with seeds of solidarity on the bottom half and a garden on the top half
Montserrat
Source Sans Pro

Background Gradient

#e8fdfd, #d1fbe7, #98ddfb

Navigation and Footer Background

#087576

Nav Link #f5e0e0

Nav Link Hover #efcdcd

2nd Level Menu Background

#0a8d83

3rd Level Menu Background

#0ca5a6

Page Background

#fff

Border

#d0fbfb

Page Text

#1f1a1a

Link Box Background

#0ba4a6

Border

#087576

Link Box Text

#fff

Aside Background

#fbf3f3

Border

#f7e5e5

Aside Text

#1f1a1a

Article Background #1

#f5e0f5

Border

#efcdef

Article Background #2

#f5f5e0

Border

#efefcd

Article Background #3

#f5ebe0

Border

#f0e2cf

Article Background #4

#e0ebf5

Border

#c8dbec

Article Background #5

#e0ebf5

Border

#c8dbec

Article Background #6

#e0ebf5

Border

#c8dbec