Graphic Design Tutorial

Basic things that anyone can do to make their things look better.

Introduction

This is a basic introduction to graphic design. You won't be a pro designer after reading through this but you will be armed with a few simple things you can do to make anything you are working on look much better.

I won't go into detail on these topics. Instead I'll introduce them and give you enough information to put them into practice. It can be a good idea to do further research on these topics as there are many good pages out there that go into much more detail.

Theory

When most people think about good design they think about making something that looks amazing and mistakenly think they can achieve this with bells and whistles. This can actually work against you. Well designed and stylish items present material in a way that best suits how our subconscious takes in information and draws meaning from it. What you will find is that things which look stunning are normally very simple but in a way that makes it crisp and clear.

Whenever we look at anything (a web page, a photo, a plant, a person, a garden etc) our subconscious immediately starts trying to understand and draw meaning from what it can see. It wants to know what is important and what is less important and what is related to what and by how much. This happens largely without us even realising it and we have little control over it. Our subconscious will do this whether we like it or not.

Our minds have evolved to do this over many many thousands of years and is hard wired to do it in particular ways. For the vast majority of those years we have existed out in the real physical world and so our minds are best suited to interpreting physical things and environments. This is why it is often relaxing to sit in a garden or go on a bushwalk. The mind is surrounded by things it is naturally suited to understanding so it has to do little work and is thus happy.

The modern world is quite removed from this however. The presentation of material on paper and computer screens etc is very recent and quite different from what our minds are evolved to work with. The subconscious has to go to a lot more effort to interpret what it sees. We don't normally notice it but over time it will drain us.

Good design aims to work with the minds natural ways of interpreting information and thus reduce the amount of work it has to do. The concepts presented below aim to achieve this.

Colour

The first thing we should think about with our material is colour. Most people tend to just throw colours in as needed and the end result ends up being disjointed. If you pick a limited and complementary colour scheme up front then stick with only those colours your content will be much more coherent.

Picking a colour scheme is easy. Picking a good colour scheme is hard. A good colour scheme will make your work shine.

Colour is an important aspect of our minds deriving meaning from what they see. We instinctively know that red means danger or warning for instance. Blues and greens make up our natural surroundings and are calming. Things that are closer to us are brighter and more vivid in colour but as they get further away those colours tend to fade. We should aim to translate these characteristics of colour in the real world into our own material.

Premade Colour Schemes

A colour scheme is a set of colours that you select for your design. All aspects of the design should then use only these colours. The number of colours you will need will depend on your work and its complexity. Typically you would want a base set of colours, then a few that are richer or brighter in colour and a few that are lighter in colour (these could be variations of your base colours or complementary).

There are many sites out there with heaps of pre made colour schemes from people that know what they are doing. They can be good to use directly or as a base to tweak and get just how you want.

color schemes

The Colour Wheel

The Colour Wheel is a basic tool that designers use to create colour schemes. Two quite good ones are Kuler by Adobe and Color Scheme Designer. The basic idea is that the 3 primary colours (red, green and blue) are spaced out around a wheel and evenly transitioned between. You then pick your colour scheme by picking points evenly spaced around the wheel.

Colour Wheel

Like most of these things, with practice you will get better so don't be put off if your first few attempts at creating colour schemes aren't that good. It is not uncommon to spend 1/2 an hour or more experimenting and tweaking with different colour schemes before finding one that works. A good approach is to look at other work to find inspiration and get an idea of what general colour scheme you may want. Then go to the premade colour scheme sites mentioned above and pick a few you like. Then head over to the Colour Wheel tools and tweak and experiment further.

color wheel theory

Depth

We can use the idea of depth mentioned above (that closer items are more vivid and further items are faded) to convey importance. Our minds treat closer items as more important than further away items. A threat for instance that is closer is much more important to deal with than a threat that is further away. Use bolder colours for important items and lighter colours for less important items.

This is less important

This is important

This is irrelevant

Typography

Once we have our colours sorted out, the next thing to consider is how our text will look. For most material, the text conveys the majority of the information. As such, easier to read text (legibility) can play a huge part in how your material is considered.

Typography is a big area. Typography is about how we organise and display text. There are many aspects of the text in our material that we can influence including:

  • Font
  • Font size - size of text
  • Leading - Spacing between lines of text
  • Tracking - Spacing of characters within a word
  • Display of characters, bold, italic etc
  • Column width, ie how many words per line
  • and more...

Your aim is to create text that is as easy as possible to read. Doing so involves getting the right mix of all of these. You will probably need to experiment a bit go get it right.

Font

There are many different fonts out there and they can have a big impact on legibility. A general rule is that on the screen sans serif fonts are easier to read and printed serif fonts are easier to read. Feel free to mix and match however. A common combination is to use a sans serif font for the content and a serif font for headings. Keep your use of fonts limited too. Most designers like to work with only 2 fonts on a piece of work. They may touch 3 but only as a last resort.

Font Size

Too small and your readers will find it hard to read. Too large and it just doesn't look right. Don't be afraid to try your text a little bit larger than normal. You may be surprised by how it turns out (this is both for headings and main body text).

Leading

If the lines are too close to each other then it makes the content cramped and your mind has to put more effort in to keep on the right line. If the lines are too far apart then if can have the affect of making your text seem disjointed. I find that the default leading is typically not bad but can be improved by making it slightly further apart.

Tracking

As you're probably guessing, there's a pattern forming here. Again too close and it's hard to read and too far apart breaks the flow. Sometimes, headings being a good example, playing about with tracking can actually create some nice effects.

Display

Bold, italics and underline are good for highlighting important parts of your content. Like other aspects, keep it to a minimum for best effect. Ideally use only one of these or two at most.

Column Width

This will largely be affected by the overall design of your work but is something you should consider. The recommended number of words per line is between 9 - 15 but you can generally get away with a bit more than this if you get your other aspects (font, font size, leading and tracking) in balance. One think to keep in mind, if you're designing web pages particularly, is lines that adjust to the width of the screen. This is especially so nowadays with larger widescreen monitors being common. You want to make sure your lines don't become too long and unwieldly.

Let's put it into practice

Experiment with the sample paragraph below. For example you'll find that if you increase the character spacing it will look a bit odd, until we increase the line height to match it.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line Height:

Character Spacing :

Font :

Look at other peoples works to find examples of good typography. Graphic design websites are a particularly good place to start as these people tend to be particularly good at their craft.

typography basics

Structure

Next on the agenda is the structure of our material. You should think about where you will place different items such as headings, menus and so on, what shape they will be and what size.

The following ideas relate to the ways that our minds naturally percieve information and the world around us. When things are designed to fit in with the way our minds work then they can absorb and understand what is being presented with much less effort. When we can do that we are happy and that is good design.

Gestalt Theories of Perception

These are general observations about how our minds draw meaning from what our eyes see. Understanding them allows you to organise your material so that people can very easily understand it. It is quite a big area so I will cover some of the main points here but encourage you to do some further reading.

Closure

This involves taking visual hints from several separate objects or shapes that imply continuity and then combining them into one object.

Closure

In the image above we see a square rather than 4 circles with a chunk taken out.

It does this because a square is more common to us than 4 circles with chunks taken out of them and it's simpler. The mind always seeks the simplest explanation.

A good page layout will be seen as one coherent item.

Simplicity

Sometimes the opposite occurs. We have a complex shape but the mind can break it down into a series of simple shapes.

Simplicity

In the image to the left do you see 4 lines, 2 overlapping lines or 1 item with 4 blades? In the image to the right do you see one complex shape or 3 simple shapes?

The mind is happy when it can easily make out simple regular shapes in what it is seeing. Although you don't need to restrict yourself to only using them, incorporating them into your overall design in subtle ways can add style.

Relationships

Many people like to group things together using boxes. The problem is, the natural world around us doesn't tend to relate things by putting them in boxes. As such, it's not a natural way for our minds to see relationships. It takes a lot more effort for the mind to process boxes.

The mind much prefers to draw relationships by way of similar characteristics. These could be:

  • Items that are arranged close to each other
  • Items that are a similar colour
  • Items that are similar size

Relationships

In the set of dots above I'm sure you can easily make out 3 different groupings.

Find natural ways to illustrate the relationships between different items in your content and it will become crisp and elegant.

Sometimes it is a case of using these principles to your advantage. Other times it's making sure you haven't set up your material to inadvertently invoke one of these and introduce confusion.

gestalt theories of perception

Quiet Structure

As we saw with Gestalt Theories above, our minds naturally seek to draw meaning from what they see. They want to know what is important and what is not, what is related and the order in which they should work through the information. Quiet structure seeks to prevent our minds doing this in areas where it is not needed. We achieve this by having even spacing around the different sections of our design.

When spacings are uneven our mind decides that this must mean relationships are present between the items and our subconscious takes to trying to understand them. When we space everything out evenly we are telling our subconscious that there is no inherent meaning here to derive so focus instead on other areas. The amount of work our mind has to do is reduced and it is happy.

Quiet Structure

page layout quiet structure

Vertical Rhythm

Vertical Rhythm is similar in theory to Quiet Structure. We are aiming to introduce a consistency that reduces the effort the mind has to go to to take in information. This time we are focusing on text however.

Imagine a set of horizontal lines, evenly spaced, drawn down the page. If all the text on your page lies on one of these lines then you have achieved Vertical Rhythm.

It can be a lot of work to achieve this but when you do the result can be dramatic.

vertical rhythm

Golden Ratio

The Golden Ratio is one of those things that 'just works'. It's found in nature all over the place and if you use it in your designs it has a tendency to make things balanced and pleasing. We don't really know why but it does so just accept it and benefit from it.

The Golden Ratio is 1 : 1.61

The Golden Ratio can be applied in many areas of your design including:

  • Images - make the height and width follow the ratio (in either portrate or landscape).
  • Typography - make headings larger according to the ratio.
  • Layout - for example the menu column in relation to the content column.

graphic design golden ratio

Golden Ratio Calculator

 
 
 

(Values rounded to whole numbers)

Other Tips

Here are a few more tips to help you along the way:

  • Keep it Simple - When in doubt, find the main points and focus on those. Bells and whistles seem cool at the time but you have to ask if it really adds value and if it's just cluttering things up.
  • Imitate others - Don't just blatantly copy, that's not cool. To draw inspiration from others though is fine.
  • Always keep on the lookout for good design. Ask yourself why it works. Also keep an eye out for bad design and ask why it doesn't work.
  • The graphic design concepts discussed here should be used as guides, not as absolutes. Implement your design using the concepts but don't be afraid to bend or break them in areas where they don't quite work. For instance on these pages I have used vertical rhythm for the majority of the content but it made the menu and major heading look awkward so I broke vertical rhythm there in favor of spacing that looked neater.