The images below represent the Visual Designs for the Home Page and The Board Page, respectively. Please click on the images to enlarge them.
My main objective in redesigning the Section Seven site was to create a warm and inviting atmosphere. Also, I wanted the site to be easily navigated and the pages to be clearly defined. I wanted the look to be simple and clean with little scrolling. The primary users of this site are upper middle class parents. Their knowledge and experience with websites is average. They look for information, find it and move on from there.
This site is an information site so readability is a concern. I used large bulky fonts so the sections of the page are clearly defined. I used Arial Black for the logo in the upper left hand corner of the page. I chose this font for its thick stroke weight and solid appearance. I wanted the users to know exactly where they are, which is the Section Seven website. For the headers of each section I used the font, Myriad. I used a bold text decoration for this font, again so the section would be clearly defined. For the descriptive parts of the page I also used Myriad to be consistent with the headings. Myriad is easily read and has only a hint of a serif.
I've attached a color swatch above of the colors used in this design. As stated previously, I wanted to convey a sense of community with this site. I did this by using colors, though not vibrant, that are warm in appearance. For the background I chose a slightly textured khaki(r221, g208, b170) color. It is simple and stylish and warm. It is light enough to provide contrast with the colors on top of it but not so bright as to overpower the page. On top of this I put a medium shade of blue(r80, g119 b175) and an earthy green(r176 g168 b81). These colors help to add warmth and natural colors to the space. This combination of colors is meant to create a comforting and warm space, a space that the users will find inviting and want to visit again.
For the middle of the page I used a yellowish(r252 g218 b116) band which holds the global navigation. I chose this color to help separate the green at the top of the page and the blue at the bottom. The yellow provides a dividing point between logo and content and also a splash of brightness so the page isn't dull. It is meant to evoke sunshine on a blue sky. The color of the text in this section is a dark neutral green(r79, g79, b79). This color was chosen for its contrast to the yellow, making the navigation clearly legible. The color of the content text on the Home Page is a neutral brown/green(r176, g159, b81). This color was chosen for its contrast to the blue background and for the consistent look and tone of earth tones.
I wanted a simple layout for this site. Again, the primary users are members of the community and they are there looking for specific information. The page is broken up into squares of information, easily read and digested. I chose a two column layout to keep things simple and easy to find. On pages that requre subnavigation the left column will have that. The subnav is there because that is primarily where the user expects it. The global navigation is at the top of every page. I used images of members of the community on each page. This is to provide the users who are not a part of the community a sense of what the people are like. It also makes the site more personal and inviting to the current members of Section Seven.
I designed the page so that it will easily fit into the two most commonly used resolutions, 1024 x 768 and 800 x 600. This is so it is easily viewable by as many users as possible.
The strategy behind my navigation is simple. I wanted all labels to clearly designate what type of information the user would be accessing. The types of navigation implemented are Untabbed and Left Navigation. Below is an example of the Untabbed navigation.
Note that there is an indicator on the Board text. The font is blue and underlined showing that this is the page that we are currently viewing. This also serves as the rollover state for the global links.
The next image shows the Left Navigation. This navigation is used on the pages that have a second layer of navigation. There are symbols placed to the left of the text to indicate that these are links. To indicate a hover state for the links, I darkened the text just a bit and added an underline. This aids the user in realizing that this is a clickable link.
If, for example, the user comes to the site hoping to find out the minutes from the previous Board Meetings, the selections he/she would make are clear. First he would click on the Board link in the global navigation.
Then upon arriving at the Board Page, he would see the secondary navigation appear to the left.
At this point it is easy for him to identify where to go to find the minutes from the last Board Meeting. He clicks on the Minutes link and arrives at this desired destinatioin.
For indicating local navigation I chose to lighten the font color just a bit an underline it. This lets the user know that this particular bit of text is a link and will take them to another page on the site.
When the user decides that he would like to navigate away from the secondary pages, the global navigation and secondary navigation are in close proximity to one another and to the content of the page, so that this is easily handled.
This site was created with its primary use in mind, the community member. These are the people who come to the site with a specific purpose and are looking for a specific bit of information. I wanted to achieve a site design that was welcoming, comforting and easy to navigate. I accomplished this through the use of colors that evoke a natural setting and by creating navigation that is clearly labeled and easily seen. Also, by displaying images of members of Section Seven I gave the site a sense of place and an identity the users will recognize.
.