Regardless of what application you are using to wireframe or design, there are certain elements or tools you need to use when learning how to design and convey powerful messages.
We have highlighted many elements here and by no means are they exhaustive but are the foundations to identify some of the design pitfalls we see every day.
Learning how to design a user interface, flyer or business plan takes some planning. Not even a seasoned designer will jump straight into Photoshop without doing some foundation work. Whether you are a designer, developer, marketer or just trying to lay down an idea before you speak to a freelancer, there are simple steps to complete that will really help you get your message across successfully.
1. Typography
Picking a font to use or in particular a font ‘pairing’ (two fonts throughout a UI or design) is not that straight forward. Serif fonts (like Times Roman) have little feet (the serifs) which can fill in and look messy at small sizes. For screen use, choose a good clean font for headings and an alternative, complimentary font for body copy.
Great websites to find font pairings:
https://fontpair.co
https://www.typography.com/techniques/
Also if you like a font that someone has used and want to know what it is (or the closest match) use What The Font which you can download as an App. Simply take a photo of the copy, crop it and then find out the possible results!
https://www.myfonts.com/WhatTheFont/
EDIT
A contributor contacted us about a list of fonts that can be combined and used for free during commercial productions on a similar blog, so we encourage you to follow this link should you wish to explore font-pairings further…
2. Grids
Grids are one of the most essential elements in the designer’s toolbox. Learning how to design with grids is probably the most important over any feature. It creates a construct to hold and frame your designs. Even though you will not see the actual grids in the final design, you do, however, see their vital influence when adding in text and images.
Every designer will have a different approach to their grids, but personally, we prefer odd numbers of columns. 3, 5 or 7 columns depending on the orientation, be it portrait or landscape. The balance of an odd number of columns gives you plenty of space to work with, and you can span 2 or more gridded columns or even sub-divide these columns further.
An effective grid keeps all of your elements organised and clean. They encourage alignment and a structure to assign parts. Learning how to design grids will make your job much quicker, and once you have your grid structure and typography established, any designer can use those as a core and design to your style.
3. Golden Ratio
Closely related to the Fibonacci Sequence (which is simply the sum of the two preceding number (1, 1, 2, 3, 5, 8, 13, etc.), the golden ratio describes the perfectly balanced relationship between two proportions. The approximate ratio is 1:1.618 so as a proportion, we should all take note of this when designing grids. The golden ratio fits perfectly into the grids on this document so we can realise the dimensions and proportions are convenient to work with.
To make it easier to work with when learning how to design, use the converted ratio percentages of 38.2%, 50%, and 61.8% in your designs.
Further Reading:
https://www.creativebloq.com/design/designers-guide-golden-ratio-12121546
4. Hierarchy (of type)
Once you have your grid established, you will find quickly that your visual hierarchy will just slot into place.
A first headline, quote or call to action can span two columns in a larger version of the font which will enable you to cut up your text into bite-size portions so the reader can consume your text at their pace.
A clear introduction will let the reader determine whether they want to read on or whether their ‘scan’ of your text is enough for them to realise they understand, or it’s not for them.
The second combination of type and grids is the usually invisible baseline grid. These are horizontal lines the same as a notebook which you write your text on. For each column, your baselines should be aligned, which avoids a ‘step-up’ or ‘step-down’ of the lines between columns.
Learning how to design is not just to make it look great but also to make it easy to use and convey the message. When using text in columns, it is best practise to create a column where 7-10 words are visible on a line. If you use more, then you will need to increase your leading (line-space) which will stop the reader from needing to use their finger to trace your text to find where the next line is. More words in a line mean you should increase the leading.
As a standard rule to start the leading or line height, we prefer to use roughly 150% of the font size. If you’re using 12pt text, then the leading would be 18pt. This can then be increased or decreased slightly to fit better within the space.
5. Colour (and Palettes)
Creating a colour palette is a long process and should never be taken lightly. It is usually completed when creating an original brand. The colour references can just be picked from the original logo design. However, when you wish to expand your original logo colours and learn how to design and develop them into a suite of colours, you need to understand the different ways of combining colour.
Analogous
Analogous colour schemes use colours that are next to each other on the colour wheel. Analogous colour schemes are often found in nature and are harmonious and pleasing to the eye. Make sure you have enough contrast when choosing an analogous colour scheme.
Triadic
A triadic colour scheme uses colours that are evenly spaced around the colour wheel. Triadic colour harmonies tend to be quite vibrant. Let one colour dominate and use the others for accent.
Complimentary
Colours that are opposite each other on the colour wheel are considered to be complementary colours (for example: red and green).
The high contrast (or sometimes called clashing) of complementary colours creates a vibrant look mainly when used at full saturation.
Create Custom Palettes:
https://color.adobe.com/
6. Breathing Space (or white space)
A robust design requires careful attention to both what is there and also what isn’t there. Allow your components to breathe by ensuring there is enough white space around crucial elements to not only focus the onlooker’s attention but also to not clutter the page to keep your design clean.
Less is more, and the key to suitable compositions when learning how to design is to remove all elements until the message is still visible but now in a more focused way. Just because you have spent time creating something doesn’t mean it needs to stay. Learn discipline in removing what you have done to ensure the message is clear and distinct.
7. Balance
Balance is how the elements of a design are distributed throughout a layout. If the balance is right, then stability is guaranteed.
The visual ‘balance’ of a page can take several forms. We like to think of it in several ways but is mainly down to the visual ‘weight’ of the products on the page. A block of a lot of text uses a lot of white around it so a smaller chunk of the dark colour can compliment and balance without taking over the page.
Balance can be achieved through shapes, colours, textures and lines as well as the combined block or direction that certain elements behave together.
Balance though is purely visual and open to interpretation. Therefore, balance is one of the lesser importance of how to design rules.
8. Contrast
Having enough contrast between elements makes sure that some of them stand out more than others. This can focus on attention and highlight important information.
Contrast can be made through opposing colour but also through font weights, typography and texture.
Using contrast can highlight Call-to-Actions on print and websites but also actionable buttons on apps and interfaces.
Finally when we remove our gridlines we see our completed document in its true form…
