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.

 

Advertisements

Final Mock-ups (finally)

 

Fixed:

theme-2.-fixed

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.

Fluid:

3theme-one.-fluid

Browser Test Report

FLUID

Tested in Safari Version 7.0.3 on Mac OSX 10.9.2.

safari

Tested in Firefox 28.0 on Mac OSX 10.9.2.

firefoxfluid

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.

 

FIXED

Safari Version 7.0.3 on Mac OSX 10.9.2.

fixedsafari

Tested in Firefox 28.0 on Mac OSX 10.9.2.

fixedfirefox

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.

Research: Fixed Layout

  (Let’s pretend this post was earlier, I had forgotten to post it).

Before designing my fixed layout I looked at other websites to get a feel of what looked good and what doesn’t in terms of fixed layouts.

Note to self, not to do: Too many borders and shadows. As shown below.

Screen Shot 2014-04-17 at 1.36.00 pm

 

 

Note to self, not to do: Text that is not horizontal. Just because you can move it, doesn’t mean you should. Also text on a patterned background is hard to read.

Screen Shot 2014-04-17 at 1.40.05 pm

Note to self, remember to do: Easy layout of text. Boxes not too small. Just because you can move and fix them anywhere, doesn’t mean you should. Also background of outside fixed area merges nicely into the main area of website.

Screen Shot 2014-04-17 at 1.38.07 pm

 

Work In Progress: Actual Progress

Includes: Final fluid Mock up, inital fixed mock up, first finished working screenshot of fluid layout (no way? yes way.)

Final Fluid Layout mock up

fluidI moved a couple of the images (rather than being next to the text to being underneath it). Ignore the font change at the end, that was unintentional, I just couldn’t be bothered to install the font onto this computer because it’s working on my CSS anyway. I may change the bottom image but for now I want to complete my fixed layout first.

Speaking of fixed layout: First fixed layout mock up (it lives).

FixedStill not sure about this as it is the first mock up. Those squares with crosses are for images that need re-editing from the fluid layout. I may try and encorporate the triangle dividers that are in the fluid layout. Also I discovered that opacity in CSS is fun because if you put it on a body{} it then applies to all of the children automatically without being able to be turned off?? So this is still in progress.

Speaking of progress: I have coded my fluid layout (mostly)!!??

I know, I know, pics or it didn’t happen.Screen Shot 2014-04-15 at 9.36.24 pm

Screen Shot 2014-04-15 at 9.33.48 pm Screen Shot 2014-04-15 at 9.34.37 pm Screen Shot 2014-04-15 at 9.34.55 pm

(Feel free to speak your criticism now before it is too late or forever hold your peace)

Research: Fonts

I have been putting off looking at fonts because I think it is something that is easy to change once the layout is in place and works. At this stage, however, I wanted to know the general size of text that I will be using (since fonts can be different heights and lengths). I have looked at other baby sites and these use quite simplistic fonts.

Screen Shot 2014-04-14 at 9.10.19 AM

The text on forbaby.com uses separate heading and body text fonts. The header text doesn’t look very clear or strong though. I think this makes the site look slightly ammatureish. Maybe it’s just my screen.

Screen Shot 2014-04-14 at 9.09.30 AM

Ohbaby.com uses capitals to signify headers – it looks like the same font is used for both the headers, text, and logo. I like this. ‘Forced’ capitals is easy enough to do in CSS, while maintaining consistency if the same font is used.

Screen Shot 2014-04-14 at 9.28.59 AM

 

babycenter.com combines font characteristics from both previous sites, using capitals for headers and a different font for the body text (represented by the links in this screenshot)

Screen Shot 2014-04-14 at 9.17.56 AM

After spending far too much time on google fonts I found an easy to read but not incredibly boring font – Raleway. It has a range of font weights and sizes. I want to take a leaf out of OHbaby’s site and maintain font consistency by using the same font but using different weights and capitals for headers and text, as well as different colors where appropriate. After completing coding of the site I may decide it looks too boring having the same font, however, rather than nice and consistent. But that would be a minor change to make if I decided to add an extra font.

 

 

Work In Progress: A baby update. No pun intended.

(My theme is a baby site. I am very proud of that unintentional pun). 

As of right now I am in the process of finalising the mock up for my fluid layout – I am still deciding on colours and the specific layout. I am also about to start designing my fixed layout. I currently have 250 words of CSS code for my fluid layout, having placed and sized the menu and header, background image, title and subtitle, and applied a few general style rules. I spent the day at uni and have realised too much code makes nicole cranky. Furthermore in terms of progress I am about to publish my research post on the font I have decided to use, and a research post on fixed layout as I have been focusing on the fluid layout since I would rather tackle the more difficult layout first.

Work In Progress: Mostly finalised fluid layout

 

This week I edited my fluid layout, making it more visually appealing. These colours are not the final colours, but a general idea of what colours will be where. Now I am going to work on creating a fixed layout and choosing fonts. Comments and criticism welcome!

Initially I was going to use this general colour pallet (see last post)

layout

However I’ve decided to use the second colour pallet, which I think also fits the theme of a website for mothers of young girls better.

updated layout

 

 

(Initial fluid layout for reference of changes)

layoutone - first edit