(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.
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.
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.
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.
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.
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.
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)
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.
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.
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.
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.
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.
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.
– – –
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).
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.
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
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.
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.
Had top menus (all previously listed, only found one news site TechDay.co.nz with a side navigational menu)
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
Used easy to read sans serif fonts, with average kerning (see: Stuff, BBC, FoxNews)
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).