The BarbLog

Design, front-end dev and other random thoughts

Design

All of the posts under the "Design" category.

Barbara February 3, 2014 Leave A Comment Permalink

Sketches and mockup for ‘Warm Bean Coffee’

This project involves building a website for an imaginary small business in a town in south-east England. I started out with a vague idea of something warm, inviting and slightly retro, but also professional. I started by simple sketches on my tablet using my finger – helped me focus on the wireframe and colour palette rather than smaller details. I then played around developing those ideas in Photoshop and also created a logo.

Sketch6322488 Sketch63222727

This is what I worked from – it’s not pixel perfect and it’s not complete yet but I think I have the colour scheme and branding more of less defined now. The below also doesn’t show the responsive version which I designed in the browser as I went along. Check my coursework website (link in the right sidebar) for more details.

warm-bean-wip

Barbara November 12, 2013 Leave A Comment Permalink

3 websites with bad typography

1. pixyland.org

pixyland.org

pixyland.org

I’m not quite sure what the purpose of this website is, but the typeface is unimaginative, the lines are too long, body copy is in bold (why??), italics are used excessively and there are some random extra typefaces on the Peter Pan images.

2. Bedknobs Bed and Breakfast

www.bedknobs.co.uk

www.bedknobs.co.uk

I remembered the assignment when we had to find inspiration for a Cornwall B&B website and how I found many ugly ones, so I went back to that search term and found this one. It’s unbalanced and all over the place – doesn’t seem to be well thought out at all. The mix of center-aligned text with left-aligned text doesn’t look good at all, and the bold heading running over 3 lines is not pleasant to read despite their probable intentions to make it so.

3. A.S.K. Tattoo and Piercing

www.asktattooandpiercing.co.uk

www.asktattooandpiercing.co.uk

On first count I think I can see 4 different typefaces on this page, liberal use of font-weight:bold, and some unpleasant 3D text effects. I definitely wouldn’t trust a tattoo artist with my precious skin if they can’t see how ugly that website looks!

Barbara November 5, 2013 Leave A Comment Permalink

3 websites with good typography

1. Chris Wilhite Design

http://chriswilhitedesign.com/

chriswilhitedesign.com

Chris combines the serif and sans serif fonts on this site very well, making it look cohesive but varied. I especially like his choice of fonts in the first picture – he is using 3 different ones but it doesn’t look like it’s too much. One of them, which is also used in the top navigation, is Grotesque MT while the serif is Pistilli.

2. Squared Eye (old website)

squared eye matthew smith

Unfortunately this site is no longer online – it redirects to Matthew Smith’s homepage which is nowhere near as fun and nice to look at as this whale-themed one! The slab serif is attention grabbing and slightly playful, so full of character that a simple sans serif to complement it is a good choice, plus a simple serif used on the buttons only. Looks like Verdana and Georgia for the latter two, but as the site is not online I can’t check.

3. Knuckles Industries

http://www.knucklesindustries.com/

www.knucklesindustries.com

The typography is what makes this site more than just some pictures with a bit of info – the typography is like part of the picture, complementing the vintage feel. Very apt to use that particular font for the word ‘tradition’, while ‘skill’ stands out due to both its colour and the font size to emphasise it even more. Here too, a combination of several different fonts, including the logo, works well but of course this is not a content-heavy site where such a bold combination wouldn’t work at all.

Barbara November 5, 2013 Leave A Comment Permalink

Colour schemes, Part 2: The Good

Now let’s heal our poor eyes by looking at some nice colours. A good colour scheme can be many things I think; if a site is properly legible with correct contrast ratios and colours adhering to colour theory, we can say it has a good (i.e. successful) colour scheme from a functional point of view. But I like to go beyond that and when I think of nice colours I think of something harmonious that pulls the whole site together and gives it personality – so things like news websites, Facebook and the like are out, because their colour schemes are purely functional as far as I can see, not particularly pretty. Whereas the below have both in my opinion:

1. www.cottoncandyweddings.co.uk

www.cottoncandyweddings.co.uk

This is just so so pretty. I love it. It’s just how a wedding photography site should look, with subtle, chic colours with a hint of vintage to complement the photography style (of course if the team took edgy modern photos this wouldn’t be suitable, but that’s not the case). The pale pink goes wonderfully with the cream and grey and I can read everything – the choice of that curly font is debatable but we are talking colour here, and that is perfect in my opinion. (the menu looks wrong but only because I took the screenshot on a tablet)

2. uk.escada.com

uk.escada.com

Escada is a luxury brand and the colours here show that – gold implies luxury in itself, and teamed with white and a subtle grey it’s all very sophisticated and sleek. No bright tackiness here!

3. www.csszengarden.com/?cssfile=/209/209.css

http://www.csszengarden.com/?cssfile=/209/209.css

I’m sure you’ve all seen this one – I think it’s my favourite out of the currently available themes due to the colour scheme. Orange and black go very well together, and here orange is used well to separate the left nav from the main content, and it’s also used as an accent colour in that section. White text on a black background is often hard to read, so here the designer used grey instead which makes it look much more pleasant.

Barbara October 27, 2013 Leave A Comment Permalink

get_footer() ?>