Design Principles

Contrast in Design

Contrast is the difference between two elements. Here are some elements you can use to boost contrast:

Big elements and small elements

Light colours and dark colours

Serif and Sans-serif

Thick and thin

Negative Space

Often non-designers see negative (or white) space as unused potential but viewers need space to breathe to not feel over-burdened when looking at your website.

Good places to throw in negative space include thick margin, bigger spaces between headers, and space around your logo for it to breathe.

Balance in your design

Balance is how your website tends to feel when someone looks at it. How about looking at your design and thinking about whether it feels lop-sided?

One thing to note is that you can have an asymmetrical design and still have balance, occasionally, it depends on your content or navigation on the right side to balance out heavy graphics on the left.

Some things you can do to help balance your website are to determine how you’ll be aligning images in your content section and to centre your website horizontally on the page.

Repetition

Repetition can be used to describe the repetition of design elements. This can be through the repetition of specific graphics, line widths, general shapes, etc. It’s also worth noting that Repetition and Contrast need to be balanced effectively to truly have a great impact.

Design with Proximity

Proximity refers to the distance between design elements.

“If you’re going to move it there, either don’t do it at all, or go all the way” – A wise designer

If design elements (or anything for that matter) are too close together, it creates a “tension spot” that makes it unconsciously uncomfortable to look at.

Allow me to illustrate my example. You have the following 3 images, each with 2 elements:

One of these is uncomfortable to look at. Can you guess which one? If you guessed the first one, you’re right. The tight spots between the objects and the border create tension for the viewer.

Unity

Unity is how well your website appears as a single unit. Having a consistent template hierarchy and grid system is a good idea.

Have a Focal Point in your Design

Your website needs a focal point just as much as a print ad needs one. When a newcomer looks at your website and has a feeling that he’s direction-less, chances are, he’ll be navigating to a different site where he’ll have visual direction.

Contrast plays a big role in creating a focal point through the use of big images and big headers. Also, this is harder to explain, but if your line flow generally points to the same element on your website, that helps in creating a focal point. Here are some visual examples that help illustrate what I mean:

That’s all for applying design principles to web design. But here are 3 additional tips. 🙂

Originality

There’s something to be said about originality, you will get noticed. By no means do I mean you should blatantly avoid design principles because you want to be a pioneer, but try to design something new, something original. If that doesn’t work out, the most you’ll have lost is your time, but if it does work out, it can me a whole lot more website visitors or a whole lot more clients.

Never Stop Learning

Web Design, like many other types of design, has fads. You may be the type of person that wouldn’t touch a fad with a ten foot pole, but even if you won’t do that, you still need to understand why it’s a fad and why it’s working for a lot of people right now.

Who is Dieter Rams?

Dieter Rams is an industrial designer, born in Germany back in 1932. As an industrial designer, he is most famous for his work with Braun and his “Ten Principles for Good Design”. Dieter Rams has a strong belief of “less is better” and this could stem from him admiring his grandfather’s carpentry work at a young age. Below you’ll find the much celebrated Ten Principles for Good Design, by this award-winning designer.

1. Good Design is innovative

It does not copy existing product forms, nor does it produce any kind of novelty for the sake of it. The essence of innovation must be clearly seen in all functions of a product. The possibilities in this respect are by no means exhausted. Technological development keeps offering new chances for innovative solutions.

2. Good Design makes a product useful

A product is bought in order to be used. It must serve a defined purpose – in both primary and additional functions. The most important task of design is to optimise the utility of a product.

3. Good Design is aesthetic

The aesthetic quality of a product – and the fascination it inspires – is an integral part of the its utility. Without doubt, it is uncomfortable and tiring to have to put up with products that are confusing, that get on your nerves, that you are unable to relate to. However, it has always been a hard task to argue about aesthetic quality, for two reasons.

It is difficult to talk about anything visual, since words have a different meaning for different people.

Aesthetic quality deals with details, subtle shades, harmony and the equilibrium of a whole variety of visual elements. A good eye is required, schooled by years and years of experience, in order to be able to draw the right conclusion.

4. Good Design helps a product be understood

It clarifies the structure of the product. Better still, it can make the product talk. At best, it is self-explanatory and saves you the long, tedious perusal of the operating manual.

5. Good Design is unobtrusive

Products that satisfy this criterion are tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained leaving room for the user’s self-expression.

6. Good Design is honest

An honestly-designed product must not claim features it does not have – being more innovative, more efficient, of higher value. It must not influence or manipulate buyers and users.

7. Good Design is durable

It is nothing trendy that might be out-of-date tomorrow. This is one of the major differences between well-designed products and trivial objects for a waste-producing society. Waste must no longer be tolerated.

8. Good Design is thorough to the last detail

Thoroughness and accuracy of design are synonymous with the product and its functions, as seen through the eyes of the user

9. Good Design is concerned with environment

Design must contribute towards a stable environment and a sensible use of raw materials. This means considering not only actual pollution, but also the visual pollution and destruction of our environment.