The BarbLog

Design, front-end dev and other random thoughts

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:


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)


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!


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

Colour schemes, Part 1: The Bad and The Ugly

This week we have to find three examples of good and bad colour schemes used on websites. Let’s start with the bad part, to get it out of the way.

It was surprisingly difficult to think of websites with bad colour choices, mainly because whenever I see one I try to delete it from my brain straight away… so I had to resort to some googling which led to random but nevertheless sufficiently ugly specimens. Behold:


I just… I don’t even…


They are already using 5 different colours and you haven’t even scrolled down to see the rest. There’s some red in there too, and the body copy is a wonderfully eye-watering mix of all 6 colours in a seemingly random order. If the residents of Ohio Valley don’t die from being struck by lighting they will still probably go blind thanks to this website.


These guys too seem to like cyan for body copy, I wonder if it has a strange appeal to people with certain degrees of colour blindness perhaps? The saturation of the background colour is too much, the cyan text hurts my eyes and the whole palette isn’t harmonious at all – individually the red and orange, and the blue and yellow could work, but all together it really doesn’t. Let’s not mention the background image which adds green and brown to the mix…

Barbara October 27, 2013 Leave A Comment Permalink

What I learned this week (23/10/13)

Webpage design:

  • When saving images for the web in PS, best option is to choose 2-Up, zoom to 150% and check quality there (check for artefacts appearing when reducing quality settings) in order to choose the best one.
  • Two things to reduce file size before saving for web: 1. Blur parts of the image that can be blurred, and 2. Reduce the number of colours where possible.
  • CSS shorthand for background properties: some browsers, even Firefox, can have problems displaying it so if in doubt, use longhand code.
  • Line-height settings: rule of thumb is 1.4x line height per 1 unit text size, but can vary, e.g. light text on a dark background is harder to read so increase line height.
  • Link colours: best to define them in the CSS right at the top of the stylesheet below the body settings, to ensure the links all render in the correct colour – also include various states eg. a:hover etc.

Useful tools:

Barbara October 23, 2013 Leave A Comment Permalink

First attempt at responsive design

I was working happily on my CSS for the ‘profile page’ assignment, thinking it would lend itself nicely to any screen size without major issues due to the mainly centered layout I chose (not intentionally I must say). But after James asked me if I was going to make it responsive it occurred to me that actually there is one thing in there that definitely won’t work on smaller screens… a table. Granted, it’s only a small and very simple table with 4 headings and one cell each for the content, but it still stopped looking good below a width of approx. 880 pixels.

It goes from this...

It goes from this… this!

…to this!

My first thought was to shove some JavaScript in there to change the HTML below 880px to make my table headings become the far left cells of every row and thus only have 2 columns, but this is not a JS exercise.  Plus that would have been the easy way out, right? So I browsed around for possible CSS solutions and of course CSS Tricks was where I found my answer. It’s not the most elegant solution in the world, but using the code in the article and tweaking it to my preferences eventually worked and my table now resizes. I spent a few minutes just stretching and shrinking the window to see the results… oh the small joys in life. My suspicion is that my markup is all over the place and could be simplified, but I’m not particularly used to working with tables so for now it’ll have to do.

I thought I would share this in case anyone else is looking for a solution to their table woes and more. Not only did I solve my problem but also learned a bit more about the :before pseudo-element which I haven’t tried to use before. It seems to be really handy! I might tweak the table further if I can to have 2×2 columns between 880 and around 550px, and only have the fully stacked version on really narrow screens – but first, spurred on by the enjoyment of learning new stuff, I think I might actually venture into more RWD and tweak my navigation a bit.

Barbara October 17, 2013 Leave A Comment Permalink

What I learned this week (9/10/13)

A list of random useful things I picked up during today’s classes.

Applied Art for the Web – Photoshop

  • For design mockups it’s a good idea to start with an 1024×768 px document size, with a 960 px width for the actual site content (although it’s even more recommended to design in the browser if possible)
  • Mark layers that are to be coded with CSS (and not exported as images from the PSD) to help the developer out
  • GIFs and PNG8s can’t display half transparent pixels so we need to know the colour of the background that will be behind the image we’re exporting so we can set the matte to that colour
  • Aim to work with existing content – be assertive with client – use analogy that you wouldn’t just ask an architect how much a house costs, they have to know what you want the house to be made of!

Webpage Design – The structural layer

  • Best practice: use HTML5 elements with the stricter XHTML syntax
  • the <b> and <i> tags are back, with a different meaning: to mark up text that is somehow different (but not necessarily emphasised more) than its surroundings.
  • Whether or not the above tags should still be used is debatable but could be useful for example in text containing latin names etc; and they are less verbose than span classes
  • XHTML: use “id” instead of “name” that was valid in HTML4; “name” now deprecated

Barbara October 10, 2013 Leave A Comment Permalink