Design Principles
Introduction
Your design should be visually appealing to your audience and should complement the overall message of your project, but ultimately it is up to you to decide what looks best. This section on visuals includes some tips to consider for your overall design.
What's on this page?
Visuals and Design
It is good to consider the overall design and visuals for your project to make choices that will help you convey your message. We will touch on a few ideas, but specifically colour, font, contrast, images, and layout.
Colour
Colour Psychology
Colour is one of the easiest ways to make your website or project stand out, and a good use of colour is a great way to create meaning in a subtle way.
There are a lot of articles online about the psychology of colour in marketing. Cool colours tend to be calming and friendly; warm colours may be welcoming and positive. Bold colours can be passionate, while lighter tones convey thoughtfulness. When choosing colours, consider using these hidden meanings to your advantage, but be sure to take accessibility into account.
How Do You Choose a Palette?
With colour, the important thing is to keep it consistent.
Sticking to a colour palette will help make your work stand out and will keep your message on track.
You can choose colours you like, or use the colour wheel to choose similar or opposite colours. If you have an image you really want to use, you could pick colours from the image. There are a lot of choices you can make!
If you are not sure what colours look good together, many tools offer themes and colour variants that you can choose from. There are also free tools that offer colour palette suggestions.
If you are not confident in your design skills, choose between two and five colours for your palette and designate one as your main colour and one as your secondary colour. These will be the colours you use most. Any others you choose should be used sparingly to add interest.
Watch
This short video talks about the basics of colour theory and dives into simple colour schemes and the message colours may convey.
Websites to help you find your palette
Contrast
If a background colour and the text or images on top are too similar, they may blend into one another and will be harder to see. You want your content to stand out, and that is where contrast comes in.
The general rule is when using light coloured content use a dark background and when using dark coloured content use a light background (straightforward, right?). If you are adding text and you do not want to change your background, consider using coloured shapes behind the text to make it more visible.
If you're not sure your colour choices provide enough contrast, you can always check your colours with a contrast checker. In fact, it's highly recommended to take contrast into consideration for accessibility purposes!
Watch
This video discusses colour contrast and how it can help your design stand out. Knowing how to create visually accessible content will help your entire audience see your message.
Font
In general, sans serif fonts are preferred over serif fonts (think Calibri vs. Times New Roman), but you can use any font you like. Try not to overuse fun or complex fonts; your viewers will get tired of them quickly.
Limit yourself to no more than two or three fonts and be consistent in their use; e.g. one for headings, one for body text, and one for emphasis or notes.
Font Size
Play with font size to show emphasis or scale. It is a great way to create a visual cue without needing a graphic. Otherwise, be consistent when applying size across headings and body text, and make sure your smallest text is still legible for your reader.
Watch
Learn about the different types of fonts and how to choose fonts for your project. This video also talks about common typography terms, and fonts to avoid.
Read more about choosing fonts
Images and Graphics
Studies have shown that using images can help your audience retain information. You can use photos, or try icons and illustrations in order to keep the visuals simple and appealing to the eye.
For an infographic, you should always aim to replace as much text as you can with a visual element.
Choosing Images
Look for .png or .jpg file types as they will be suited to most projects, and choose images that:
Relate to Your Message
Are Consistent In Look and Feel
Are a High Resolution
Remember that too many images can create clutter, and distract your audience. If you are not sure why you are including an image, consider leaving it out. It is ok to have white space.
As for filetype, look for .jpg or .png file types as they will be suited to most projects. Animated .gif files may not work as intended, in all software.
Watch
This video offers a basic overview of choosing and using images for your design projects.
Read more about choosing images
Find free images and graphics
Layout and Wireframing
Wireframing is the practice of sketching out the layout of your project and can be applied to websites, infographics and more. This will usually be the start of your planning process, after you know all your content and before choosing things like colours and images.
Watch
Want to perfect your website layout? Watch this video on wireframing for tips to help you get your structure down.