Shop Mobile More Submit  Join Login


Journal Entry: Mon Aug 10, 2009, 1:37 AM
Daily Deviation what now?!

Wow. Woke up this morning to find a daily deviation awarded to both me and nuaHs for our distraction wallpaper... I'm speechless. Still I think nuaHs deserves a lot more limelight imo. :) He's the main one responsible for not only my inspiration but for refining and teaching me things I never learnt during my design classes. YOU THA MAN NUAHS wherever you are!!

Nonetheless, a major thank-you to everybody who has ever watched me, favorited my work, commented on my work and to all those who have believed in me :) Now I don't have the time right now to go through and thank-you all individually so do not feel bad if I don't but thank-you thank-you thank-you on behalf of me & nuaHs :D

A humungous thank-you to ~afzalnaj for suggesting the piece and ^splintered13 for featuring us.

The Art of Layout Design - Part 1

Journal Entry: Sat Aug 18, 2007, 6:24 AM

A large number of websites fail by lacking a comprehensive idea of page layout. The central role of a layout, regardless of its context, is to ensure effective communication of the designated information you are displaying. How you convey this information is very important as you have to appeal to the audience and persuade them to remain focused on your content. You have to consider audience specifics such as gender, sex, age, background etc. In this article, I will be exploring how to gain an understanding into effective layout design.

So you're looking at this article, reading my every word or perhaps you're skimming the page considering whether this article is worth the read. One thing you notice at a sub-conscious level is the layout of the content. All aspects of a layout can be narrowed down into 4 categories: colour, images, space & typography. The content can also be categorised: appearance, context, process and purpose. In theory, design is all about principles and adapting these principles to make sure all of these categories in both areas are well-thought out. This is to ensure your output design is successful, free from design flaws and negative feedback. With that in mind, everything should be a piece of cake.

Colour Theory

The use of colour plays an important part with audiences. People are able to identify colour more than any of the other 3 layout attributes I have acknowledged. It's due to the fact colour has a basic law of magnetism with it. Either the viewer is attracted to the colours or they are repelled to them. Some people are unable to comprehend why they like a site consisting of colours outside of their favorite colours spectrum yet they just know they like it. This is similar to that of magnets. You can't quite ‘see’ why a north-pole facing magnet repels another north-pole facing magnet and why a north-pole facing magnet attracts a south-pole facing magnet but you observe that it does and you accept it. Taking this idea of attractive/repellent colours, I can now move onto colour theory.

Balancing colours can be difficult to achieve. Balancing colours while maintaining a purpose in your selection can also be quite perplexing when devising a scheme. I often pick colours depending on my mood, what I am experiencing at that moment in time and so fourth. This is taken on an artistic idea that it's possible to have a painting of different sized and different coloured circles, reflect your personality and character. Colours can say an awful lot about your character and I enforce this with every piece of work I produce. Like the clichéd saying goes, "Actions speak louder than words". The action in the example of a layout is the colour choice and the words refer to the content obviously. All of that aside, it's important to have a basic understanding of colours and how they can work together effectively.

For this part of the article, you will need to refer to the colour wheel below.

If you cannot view the image, then here is a list of all the colours included: Red, reddy orange, orange, yellowy orange, yellow, yellowy green, green, bluey green, blue, bluey violet, violet and reddy violet.

Out of those, it’s obvious to know which are primary (red, yellow, blue), which are secondary (green, violet, orange) and which are tertiary (mixed colours such as reddy orange, bluey green etc.). You also have warm hues (reddy violet, red, oranges and yellow) and then cool hues (violet, bluey violet, blues & greens). Those are the basics behind colour composites. However, these are on the basic side of colour theory and do not help much with this article. Understanding colour harmonies is the essential requirement I am going to be explaining.

I’ll start with the most basic of all colour concepts, complimentary colours. These are any 2 colours opposite each other in the colour chart. No matter what the tone of either colour is, whether it’s a reddy violet or a bluey green, the following concept still applies. Complimentary colours follow this mixing principle: red and green, yellow and violet, blue and orange. Take a light blue shade and it will compliment with a light orange shade etc.

Complimentary concepts aren’t limited to 2 colours which is useful to know when you have a site that will not be limiting itself to 2 colours. This principle is known as split complimentary selection. Rather than being the one directly opposite the colour being the complimentary one, a split complimentary selection follows the basis where-by the split complimentary colours are either side of the directly opposite one (i.e. yellow is split complimented by a bluey violet and a reddy violet).

Incongruous colour choices are basically the split complimentary colour assumption except as opposed to including 2 colours either side of the complimentary colour, you just pick one (i.e. red and yellowy orange or red and a bluey green – but never both as that’s the idea behind the split complimentary colour theory).

Slightly related to the “hues” colour selection mentioned a few paragraphs ago are analogous colour selections. These are any 3 consecutive colours. For example, blue, violet & bluey violet. Another example is blue, bluey violet and bluey green. Get the picture?

Going back to the same paragraph and although this is mainly irrelevant, it helps to know. Primary colours, secondary and tertiary colours in their respective groups work together well because they relate to the triad harmony theory. This has been formulated on the understanding that if placed on top of each other, they do not clash. If colours do not clash, you’ve successfully achieved an understanding into a general aspect of colour theory that enables information to be interpreted with ease, in respective to the colours of course.

Last but not least, is the area of colour contrasts. Most people do not fully understand to a high degree why contrasting colours have the effects they do. Some use contrasts in their designs but do not a conscious level, acknowledge the concept. They work on the basis of hue, saturation and value. They are the 3 dimensions to colour selections in relation to light and shadows. HSV contrasts can create a scenario where a colour will look lighter or darker depending on the background it is sitting on. Contrasts can make text easier to read and make it easier to stand out, which is crucial when you want to subtly have a piece of information stand out to some extent.

If you believe every bit of what I have expressed so far was too complicated, I have a solution for you. Head over to… and you can read a less-word orientated colour theory which includes a colour wheel (not 100% accurate but gives you the idea none the less).