The header graphic for the Birthmothers home page layout has been changed to more closely reflect the newsletter header provided to Studio4Squared.

An updated newsletter has been provided to us, we've sampled color directly from the newsletter itself and have also changed the logotype to match the font used in the newsletter.  ...the font appears to be a stretched version of Times, so we've vertically stretched our logotype to closely match.

The revised home page layout for the Birthmothers Web site has taken a much more simplified and less feminine approach.  The colors used in the header graphic and "on-state" for the main navigation may not reflect the needed colors for the new Birthmothers brand identity, these have been set up in Photoshop to be changed out very fast / easily as needed before moving on to the sub page layout. 

The home page layout for www.birthmothers.org has been designed with several things in mind.  The first and most important bit of information is that there will actually be two sites built from this overall site design.

www.birthmothers.org and www.birthmotherministries.com

Studio4Squared will be swapping out the header graphics in order to identify the two sites from one another as well as changing the links in the main and side navigation as outlined by the client.

As with all our site designs, a lot of attention was paid to coming up with a successful color scheme.  After a lot of research, we found that for the subject matter of both sites - a pastel color scheme would work best and truly reach out to the target audience.

Another important element we had to keep in mind during the initial layout process was that these two sites would be built upon the NEATO ES framework.  This means that Studio4Squared will create the overall site design, code the blank pages and have them ready online for the client to then enter in all of the content completely on their own.  Because of the fairly large site map provided to us, we had to create a navigation that would be a little more flexible than usual.

Below you will find four screenshots, each showing different stages of the same layout.

The first screenshot shows the home page as a visitor would see it after the initial load.  Because visitors would be greeted by the home page, they would notice that the "Home" button in the main navigation remains in it's "ON" state.

Below the main navigation is the "self promo", a series of images which would subtly transition from one to the next.

Directly below the "self promo" is the area where content would be displayed.  In the screenshot shown, we've copied/pasted the content from the existing Web site.  This can be changed very easily within NEATO once the site is coded, these screenshots do not represent the final copy to be used and are only meant to show how the overall aesthetics would be handled.

At the bottom of the page is a copyright line followed by a text based duplicate of the main navigation.  This would allow visitors to quickly access any link from the main navigation without having to scroll back to the top of the page.

In the left hand column of the page is the side bar which consists of additional navigational links as well as a log-in form, a place for possible latest news entries, a link to the donation page, and at the bottom of both sites would be the "Birthmothers" logo mark.

The second screenshot simply shows a second image being displayed within the "self promo".

The third screenshot shows a visitor moving their mouse over the "Who We Are" button on the main navigation.  As you can see, a drop down menu would appear displaying additional categories available under the "Who We Are" section.

In the fourth screenshot we can see the visitor has now placed their mouse over the link titled "Facts and Information".  A new menu has appeared which is very similar to the previous drop down menu shown in screenshot #3.  Accept this menu would appear from the side, the visitor can now access additional categories within the "Facts and Information" section.

Again, none of the information displayed is meant to be proofread, and the items seen along the sidebar can be removed, changed, etc...  These screenshots are simply to show how the overall look and feel of the Web site design would be handled.