Site Map

I have finalised my site map, which will be the following. There is an extra page or two but that’s because the calendar page might or might not work, it’s very dependent on being hosted on a server which I couldn’t test. That’s cool.


I have also included this fun little site map as it is easier to read than the above site map



Concept Statement

The theme “brand”of my website is ‘baby girl’. A lot of the baby websites I visited were gender neutral or used a lot of blue and green, and I wanted to do something different to this.


Thus I decided to create a site using vector images or baby related images and colorize the site pink, using different hues and brightnesses for the images and headers. I added yellow as a complementary color to make the website title and menu (in fixed layout) more distinguishable. I also used white to break up the pink, and black as the body text so it was easy to read.


I chose the font “Raleway” on Google Fonts because it is easy to read, but not super boring. I wanted to maintain consistency by only using one font. I added differentiation between headers by putting them in uppercase and increasing font width. This is a design tactic that I have seen on a few websites and like. I think it adds a little bit more character to the site.


In regards to layout I wanted to make the text very easy to read. I did not want to center the titles because I do not like how this looks visually. Instead I have aligned my title and subtitle left on both the fixed and fluid sites. I have centered the blocks of text in the middle of the page for both sites, but not centered the paragraph text. All blocks of text have consistent margins so that down the page the text is easy to read and the viewers eyes do not have to move as much. The information is presented logically.


For my fluid layout I decided to move the menu bar to the top of the page. I am envisioning a ‘home’ button would be present. I also included a “logo” in the menu bar, however I didn’t add it to my fixed layout because it made the site look too cluttered. A lot of the baby sites I looked at had a lot of pictures and advertisements on, however I was careful using a patterned background not to overcrowd the site.


Final Mock-ups (finally)




Please ignore stretched text. It looks better on my website – I wanted to communicate that the text goes all the way across the middle, with 50px margins on either side without having to re edit the text. Also the font is not the correct font because it wasn’t installed on my computer. It does display the elements and where they’re going. The black lines are signify shadows. Easier to do on CSS than photoshop.



Browser Test Report


Tested in Safari Version 7.0.3 on Mac OSX 10.9.2.


Tested in Firefox 28.0 on Mac OSX 10.9.2.


Please ignore the bad photoshop job. Safari displays the header text bolder than on Firefox. On the other hand, firefox adds a slightly larger line height so content is pushed 1 or 2 px down the page in comparison to Safari. This does not affect the layout of the content though. It looks like opacity loads differently on the two web browsers, as the color background behind the title, subtitle and footer looks brighter on Firefox than in safari.



Safari Version 7.0.3 on Mac OSX 10.9.2.


Tested in Firefox 28.0 on Mac OSX 10.9.2.


Again, safari displays the header text more bold than firefox. Firefox also displays the colours set in CSS brighter than safari. Neither difference affects the layout or alignment.