Tuesday, March 6, 2012

Website icons.

Icons for navigation and each section of the site were made, keeping in mind the brand of the logo I've chosen (pictured top left). All of the major icons involve hands in some way, and use the orange of the GS logo torch to stand out on the blues of the proposed website.
The buttons (bottom section) step away from the font choices involved in the rest of the web design in order to stand out more and match the bold nature of the rounded buttons.



EDIT: Buttons were revised to accommodate new content and just to look better in general, really.

Header exploration.

I messed around with different header combination revolving around the basic layout I decided on in the wireframe (last post). I thought the grid of faces brought a sense of ethos and personality to the header and had a higher possibility of establishing viewer relation more quickly. I decided to stick navigation on the right, mainly thinking about mobile accessibility.






I tried gray backgrounds under the assumption that the board would find it too dark...
But they weren't nearly as visually appealing.




I liked the following one the best, due to its ability to be contained in a 100% width-spanning div and scale down easily without requiring extra code or images.

Sunday, March 4, 2012

Website wireframes.

I started working on some wireframes that let me begin to understand how website content would work together visually. I decided on using a 1140css grid system, allowing me to design simultaneously for iPad and mobile, and using 10 of the 12 columns so that the page is not crowded when fullscreened.
There was a lot of information to include, and so it was sorted in sections based on relevance and importance that corresponded with GS's preexisting color palette.

Website planning.

While meeting with Roice around a week ago, we talked about components of the GS advocacy website, page contents, and visual language. I took horribly written notes on the page I used to sketch logo/text relationships.



I compiled them to be easier to read and used them as a basic rulesheet while doing my initial planning.



I then broke down the page structure and attempted to design icons for each section to promote easy visual navigation.


Logo revisions.

After sending off the last logo and receiving feedback from Roice and the GSF board, I learned that the logo I sent reminded too many people of anti-war posters and that the background was too harsh for a lot of people. The feedback I received was along the lines of:

"...put me in mind of some of the stark imagery used in the 50s and 60s to stir up sentiment for or against the Soviet Union."

"...it would help if it educated us a bit about the value of GS when we looked at it..."

"...once you get all those arms merged in together, it's hard to tell they were originally arms."

My answer to this was to return to my previous designs, make the human element of the hands more evident, and play around with different colors already in the Governor's School visual language.





Pairing text with the designs also helped to kill the stark nature of the original logos. I used a transitional serifed typeface to speak to GS's timelessness and mimic the typeforms in the original logo. Lowecase makes the word "save" accessible, while petite caps denote the importance of NCGS.