Work In Progress: Fluid Site

I have taken the hand-drawn pencil sketch and made it into a pencil mock up, while paying more attention to the actual content we have to include. I noticed that the last content box was made up of three substantial paragraphs so have decided to split them up and add accompanying pictures (probably). This is unlikely to be my final design for the fluid layout, however it is more-or-less the theme and flow of content that I’m going for. I think it will be very easy to read, and the content will be fluid to a point, where it will be fixed, so that the content doesn’t break.


layoutone - first edit

Now I am going to think more about the design and pictures that I will include. The colours on the wireframe are not the colour scheme that I want to use, they are merely a design split up. I want to use vector illustrations as a stylistic approach, rather than taking realistic pictures. At this stage I am thinking that I may increase the size of my header as it seems a bit small at the moment, although the type of site I am creating is more focused on the content rather than header and menu, so I will decide once I have created some images.


– Edit – 

After Jess’ comment I noticed how the site may be a bit left-side heavy, so may change the layout slightly by moving the second image to the right hand side. This would make the text more dominant because people naturally read from left to right.

Screen Shot 2014-03-28 at 3.59.03 pm


Work In Progress: Update Two

Alternatively titled: Slow and steady wins the race? 

This week I have been focusing on other assignments, however, am mostly decided on the layout for my fluid theme. Bellow is a sketch up and I will get this made into a pixel specific mock up in the next couple of days, as well as decide on my fixed layout, the colour themes, and start designing the graphics.


Work In Progress: Update One

Alternatively titled: How do I make my mock layouts not look like sh*t

This week after paying attention to the aspects of websites that I like the layout of I decided to draw a couple of potential layouts. Turns out that it’s not as easy as it looks. I’m still working on this, but here are a couple of sketch ups thus far.


This was my first draw up. Basic, but user friendly. The more you scroll down, the more you read. Easy. I like the horizontal “stripe” look across the entire site that for a consistent feel in both the header/footer (see previous post for this in action on websites I like).


I tried something different out with this layout. With the information in three adjacent columns I am afraid it might be hard to read, though. Also wordpress has a fixed menu as you scroll down the reader. This is kinda nifty. Can I steal it? That was the thought process for part of this design.


I had no idea where this was going when it began, but I kinda like the different sized boxes in a fixed area. This layout would also break the 80-10-10 colour “rule” (see a previous post for more explanation). At this point in brainstorming I also remembered that images exist on websites alongside text sometimes.


Unlike previous layouts this text would be straight on the background instead of in it’s own little boxes. Not sure if I like that idea, though. It seems naked.

– – –

At this stage I’m still brainstorming themes. I’m not sure if I like the menu above the or below the title and subtitle yet. Visually my brain likes the idea of content being in boxes, and also fluid menu, header and footer banners are taking my fancy at this point.

I’m a little hesitant about these website themes fitting my subject topic (site for young parents) but I would use pastel colours to emphasise it, and perhaps a logo or additional vector images of “typical” baby things. This needs more thought.

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