Design Crash Course

TIPS AND TRICKS FOR BETTER GRAPHIC DESIGN

Do you sometimes have the feeling that your graphical designs could look better? This eBook teaches you how you can make them more attractive. You will automatically get a much better-looking result if you keep these guidelines in mind.

COMPOSITION AND LAYOUT

Use your available space in an efficient and creative way. It is important in this respect that you give the eyes of the user sufficient rest by providing enough white space. If you fail to do so, your design will look very busy. It is also possible to use the white space as a ‘negative space’ that is part of the image – just like in the yin-yang symbol.

Use a system for size and space in which you limit yourself to a number of predetermined pixel values. You start with a base value, such as 16 pixels, and keep multiplying these by a larger figure. The further along the scale, the further the values will be apart.

Start with too much white space. It is better to start with a lot of white space to which you add elements until it looks good than the other way around. White space makes the image look calmer.

The rule of three: divide your canvas or image into three rows and three columns to create four intersections. The main object of your design or picture should be on one of the intersections.

Balance: if the free space next to your design is the same, your eyes will automatically be drawn to the centre of your canvas.

The relationship between elements is expressed visually by placing objects closer together or farther apart. When they are closer, these objects belong together, while they will not belong together if they are farther apart.

Grid design is a type of skeleton used to determine where you will place your objects on your canvas or page. The grid contains various elements: the ‘format’ (the entire page), the margin (the surrounding space), columns (one or more where content is placed), and the ‘gutter’ (the space between the columns).

There are various types of grids. The most common one is the ‘manuscript’ or the ‘single column grid’. It only contains one column, which is useful for large blocks of text, like in a book or blog post. The focus is drawn fully to the text. You also have grids with multiple columns. The more columns in your grid, the greater your flexibility in structuring the page. These multi-column grids are often used for web design. You also have modular grids that contain several equal rows and columns, like a roster. Such a grid is typical for the start screens of operating systems, for example.

Web design mainly uses a grid of 12 columns. But this is not necessarily the case. Make sure not to get stuck on this but let the content determine the number of columns.

COLOUR

You can use a colour system of efficient and aesthetic colour use. There are various colour systems. HSV/HSL is recommended, especially for starting designers. HSV stands for hue, saturation, and value, and is primarily used for printed materials like paper flyers. HSL stands for hue, saturation, and lightness, and is especially useful when designing apps and websites.

What is HSV/HSL?

Hue is the shade or colour you will use and is referred to using the number of degrees on the colour wheel. 0% is red.

Saturation is the saturation level; the amount of pigment in the colour. You will not have any colour, but grey, at a level of 0%, while 100% creates a very bright colour.

Value/lightness refers to the amount of light in your colour. 0% is very dark and creates black, 50% is your regular colour, and 100% is extremely bright and will always create white.

Types of colour palettes

A colour palette is a combination of various colours. You can create such a combination yourself, but you can also use a specific system:

Monochrome. If you want to use a monochrome colour palette, you choose one shade and change the saturation and lightness. This is a ‘safe’ choice – all colour variations are sure to match. However, there is a risk of it looking boring.

Analogue. An analogue colour palette contains shades that are close to each other on the colour wheel. You can also supplement these using monochromatic colours. Stick to two or three colours, however.

Complementing colours: shades that are opposite each other on the colour wheel, such as red and green. These, too, can be supplemented using monochromatic colours.

Complementary divide: a version in which you use shades just next to the complementary colours. This will create contrast, but you will have more colours to work with.

The trio: three shades that are a precise distance from each other on the colour wheel. If you draw lines between the three shares, these connecting lines will form an equilateral triangle. This often creates striking combinations, like purple, green, and red.

The square: two complementary colour pairs. The connecting lines form a square on the colour wheel. This approach works best using one main colour and three accents.

What are good colour combinations?

You cannot simply combine all colours. This is precisely why it is useful to stick to a certain palette. Some colour combinations truly hurt your eyes. This is the case if there is too little contrast between the colours. You can solve this by adjusting the saturation of one of the colours. You can make the background darker, for example. The best option may be not using any colour or using less colour because this makes things clearer.

Are you still looking for ideas for beautiful colour combinations? You can look for inspiration in paintings, pictures, or nature.

Or you can use a useful tool like Adobe Color at color.adobe.com. You can create a colour palette based on a base colour. You can use the same tool to find inspiration in existing colour palettes and palettes that are currently popular in graphic design and illustrations.

TYPOGRAPHY

Typography concerns everything that has to do with fonts and placing these letters on a canvas.

Types of fonts

Serif fonts: Fonts with serif – small lines at the end of the letters. These types of fonts create a classical, formal look. These also make a text easier to read because you create visual reading lines. The serif fonts are mainly used on paper, for example, in newspapers and magazines.

Sans-serif fonts do not have lines at the ends and look cleaner and more modern. They make the text more legible on a screen.

Display fonts are decorative and should only be used for small bits of text that must stand out, such as a title or a slogan.

Forbidden fonts. The Comic Sans MS, Jokerman, Curlz, and Papyrus fonts should never be used. They will make your design look childish. WordArt text effects should also be avoided.

Less is more: do not use more than two or three fonts in your design. More variation will not look professional. If you want more variety, you can use various sizes, font spacing, letter spacing, italics, and bold.

Which fonts can you combine?

It is not easy to find a suitable combination of different fonts yourself. You can try to combine complementary fonts with, for example, a contrast between decorative and simple, serif and non-serif, short and long letter shapes, bold and light, or with the letters spaced closely (condensed) or far apart (wide). These types of combinations can also be found through the fontpair.co tool. The Google Fontstool is very useful for web designers.

The line spacing is the white space between the text lines. This is very important for the legibility of your text. The larger the font, the smaller the line spacing you need. The wider the line, the greater the line spacing.

Alignment is also very important to keep your text visually clear. Align your text the way in which it should be read. This is often from left to right, so make sure to align your text to the left by default. You can align your text in the middle, but only when you have very small texts of no more than a few lines.

Figures are an exception to the rule of aligning text to the left: you should align these to the right, especially if they are part of a table or invoice. This makes sure the units are placed below each other.

IMAGES

A good image is essential to your design. It is very important to always work with a high-quality image: crisps, clear, and with a high resolution.

Where can you find good images?

Make sure not to simply use an image you found on Google. Not only is the quality usually lacking, but these images are often also subject to copyright. Look for an image on websites with a range of free, high-quality photographs and pictures not covered by copyright. Good sites are:

www.pexels.com

www.unsplash.com

www.pixabay.com

www.stocksnap.io

What size should pictures be?

You must realise that the quality of a picture will deteriorate if you increase its size. In the worst case, you will have a ‘blocky’ image with visible and enlarged pixels. Reducing the size of your image or cutting it is not an issue.

Vector files are an exception: you can increase their size without a loss of quality. Such files are often used by designers of logos or illustrations.

Text on images

You can use an image as a background for your text, but you must make sure there is sufficient contract to keep the text legible. You can use transparency, for example, or make the image lighter or darker or give it a different shade.

TIPS FOR WEB OR APP DESIGN

Always think about the goal or the feature you want to offer when designing a website or app. Use this as the point of departure for your design and do not focus on the layout in itself. Elements like the menu or the logo come secondary, especially in the starting phase.

Visual hierarchy

Not all elements are as important. Make sure to create a visual distinction to ensure that the user is visually led to the essence straight away. You can do this in a number of ways:

• Using the font weight (thickness of the letters) and the colour. Try to stick to two or three font weights and two or three different colours. Do not make things too bright to ensure that everything will remain clear. Use the darkest fonts for the primary content, like titles. The grey but still properly legible fonts should be used for secondary content such as the body of the text, and the very light fonts for content such as copyright information at the bottom of the page.
• Play with the saturation of your text colour – make it a bit brighter or darker. Do not use grey on coloured backgrounds, as this would leave you with insufficient contrast.
• You can also create emphasis by removing emphasis. Instead of making the theme of the opening page darker in the main menu of your website, you can also make the tabs of the other pages brighter.

Labels are often useless. For example, the contact details do not require you to explicitly place ‘email address’, ‘telephone number’, and ‘address’ in front of the information. This will be clear to your users without them. The design will also be more attractive if you leave the labels. You will also have the option of greater variation in fonts to emphasise certain data, for example, by making the name larger than the email address.

However, if you really need labels, such as in a dashboard with a lot of similar data with different meanings, you can make your label secondary by visual means, for example, by using a smaller font.

A label must be given emphasis if you know that the user will scan the page for this information. Make sure to certainly use the ‘height’ and ‘width’ labels when indicating sizes in a technical brochure, for example.

CHOOSE A PERSONALITY FOR YOUR SITE

Each website needs its own appearance. A bank primarily wants to look reliable and secure, while a start-up wants a website that looks fun and playful.

How to create the right appearance?

Font selection

A serif font is more classical and stylish, a sans-serif with round edges is playful, and a regular sans-serif font has a neutral look.

Colours

See how a colour feels. Blue is associated with ‘safe and secure’, pink is ‘fun and less serious’, and gold feels luxurious.

Border radius

These are the round edges of frames and buttons, for example. They look playful when they are fully rounded, a small round edge looks neutral, and hard edges look serious.

You need more colours than you think

You can divide the colours you need into three categories:

Grey values: for the majority of your application. Take eight to ten different colours, but avoid pure white and black because these look too ‘cheap’.

Primary colours: for actions and important matters. Choose five to ten different shades: dark for text, light for the background.

Highlights: to draw attention to non-essential matters like new features or announcements.

Semantic highlights

A colour has a meaning in itself. For example, you can link red to destructive actions like ‘delete’, negative matters, or mistakes, use yellow for warnings, and green for good things like ‘publish’. Be aware that you must always visually emphasise the most important action.

Keep users that may be colour blind in mind. They absolutely require contrast. If necessary, use additional visual support by means of an icon. There are also tools that allow you to check what your page looks like to someone who is colour blind.