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



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 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 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 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.



Research: Inspiration

I’ve been paying more attention to the websites I visit this week to have a look at the types of themes and layouts that I find visually appealing and thought it would be useful to curate them into a single post for future reference.

– – –

I really like Slack‘s website – it looks really professional and visually appealing, and presents information well (which works great as a webpage with a fluid width). The graphics look sophisticated, and the use of a picture at the top gives the viewer an idea about the website topic.

Screen Shot 2014-03-19 at 4.05.28 pm

Mohiomap also utilises a large header image, however unlike Slack it has a top menu. I like how it also has information in a box on top of the image. The site uses blue and green as main colours and I think this works really well. It is very dynamic (scrolling down, the menu changes to white) which would be a bit complicated.

Screen Shot 2014-03-19 at 4.12.16 pm

Cloudcannon is styled similarly (I guess horizontal “stripes” separating content is a current website trend?). This site uses typography really effectively. It’s not too cluttered or busy. It’s simplistic, with easy to read information.

Screen Shot 2014-03-19 at 4.16.57 pm

Again with the horizontal stripes. I think The Appreciation Engine‘s “Meet the Team” page layout is really interesting. It’s a bit different to anything else I’ve seen. I like the layering of images. The colourisation of the site is really effective too and compliments the logo.

Screen Shot 2014-03-19 at 4.20.44 pm

One of my friends Charli is a graphic designer who coded her own website, which I really like. It’s simplistic and uses white space efficiently, plus the simple use of colours looks sophisticated and visually appealing. I like the social media links in the form of graphics down the bottom too! Unlike the previous websites it’s also fixed width.

Screen Shot 2014-03-19 at 3.58.00 pm

– – –

I think for my fluid layout I want to try to design something similar to the horizontal striped webpages above. They look modern and professional, and the graphics don’t look too complicated either. I just need to brainstorm a layout that will fit with my parenting theme. I don’t want to create a webpage that is too cluttered. These webpages don’t have advertising, unlike the parenting sites I looked at, which makes them more visually appealing (to me anyway).

Research: Website Design – Colour

Colour is an important aspect of many website because “research has shown that it has the power to alter the physiology and mental states of a person” (Fitzvillafuerte). Viewers can use colour to get an idea about the website within the first couple of seconds of viewing it. Therefore colour is an important decision regarding website design.

Pastel colours I may choose to use

As previously investigated, parenting sites commonly use pastel colours – which is something that I find appealing. It is an easy visual cue regarding site content. Blue and pink are used often because they are stereotypical baby boy and baby girl colours – for example, Plunket and PBS/parents use blues

Screen Shot 2014-03-14 at 12.52.23 pm Screen Shot 2014-03-14 at 12.54.17 pm

Wpmudev recommends using three main colours in a website, because the more colours used the harder it is to create harmony, or make the site look consistent.

    They also recommend using the 60 – 30 – 10 ratio rule.

  • 60% of a website should be a primary colour – it is safer for this to be neutral (white, grey, beige) because it goes with anything.
  • 30% should contrast with the 60% to “create a visually striking effect”
  • 10% is an accent to complement the primary or secondary site

The above sites somewhat follow this rule, however todaysparent (below) doesn’t. The above sites look a little bit boring, as they only use blues. I prefer todaysparent site – I don’t think it looks too unorganised or inconsistent, I think certain colours correspond to certain categories which is a nice visual categorisation. It does look a bit busy when hovering over the main menu – because each is a different colour.

Screen Shot 2014-03-14 at 12.56.36 pm

I hadn’t come across this website before, and I quite like the design of it. Ads are incorporated nicely into the site, rather than looking out of place, and it uses white space nicely. It doesn’t look too complicated to create using HTML/CSS.

– – – – – – –

I think I want to do a bit more research, and do planning about the design of my sites, before I choose the final colours I’ll use.

Research: Target Subject Selection

In order to determine my target subject I brainstormed two possibilites I was considering – parenting, mothers of young children in particular, and news.

The parenting sites:

  • Used basic, pastel colours
  • Had top menus
    • All above sites had top menus. Some had drop down menus.
    • had both top and side menus, as well as drop down choices in the top menu.
  • Had simple, easy to read typography
    • Plunket used bold and regular variations of the same sans serif font with average kearning
    • Essentialmums had less kearning (letters were closer together) but also used a sans serif font
    • Modernmom used a variety of fonts which I personally don’t find visually appealing. Some fonts used small caps, others didn’t, some titles were italicised or bolded.
    • BabyCenter also used small caps, however it isn’t as obnoxious. They use two fonts – one with small caps for titles, and Times New Roman for bulk text and links.
  • Stylization
    • Plunket and Parents has small vector graphics of “baby” objects. I like this style
    • Most of the websites run through adrevenue so they can look quite cluttered with advertising
    • ModernMom, Plunket and EssentialMoms had a main image spot that displayed looped images
    • All were easy to use and navigate

The news sites:

  • Were very simplistic
  • Had plain backgrounds
    • BBC and NZHerald have plain white backgrounds as the news stories are the main attraction
    • Stuff and TVNZ had ads embedded in the background of the landing site, obviously this is necessary to finance the site but I think it’s distracting and gross
  • Typography wise
    • Used easy to read sans serif fonts, with average kerning (see: Stuff, BBC, FoxNews)
Initial brainstorm
Initial brainstorm

Ultimately I decided to make “Parenting: Mothers of young children” my target subject for Brief One. There is a greater variety of adjustments that can be make, as there is not such a huge focus on the content (like news sites).