This week I’ve been studying up on Visual Design and Branding basics, progressing through the course of the same name produced by creative course platform SuperHi. I’ve come across a few tips I’d like to share which I think are extraordinarily useful. Now, I’m speaking as someone who didn’t go to a university to study Graphic Design (my degree instead was in Illustration), so I’m unsure as to how many “Duh! Everybody knows that!” reactions this is likely to cause. I have, however, worked for the last four and half-ish years as a Graphic Designer for a few companies and I found these tips to be some pretty tasty jazz.
Anyway, enough gabbling on my part, here are some tips for designing websites and apps. The tips covered focus around designing with Figma, though their fundamental essence is universal. Figma is a free professional design program that works through your browser.
1 ) Design in related multiples of pixels for visual consistency when spacing text elements.
Consistent use of white space between objects can help to set visual style and reading rhythm for all of your components (page sections, tiles, cards, etc.). It can also be used as a style guide for making new components. While not only setting a style for one project, this measurement system can be used universally as a branding tool for all of your work, generating a consistent visual aesthetic.
During my experimentation I used a system based on multiples of 8 pixels* (8, 16, 24, 32… etc.) as this was the example system used by the course I had enrolled on. However, you can choose any set of multiples depending on your own sense of aesthetics as a Designer. You will need to bear in mind that the important thing here is limiting yourself to using one scale per project for a cohesive design (only multiples of 5, or 8, or whatever number you choose). You’re not going to get that sense of unity between all the components if you switch up the measuring system you use for different pages and components. Furthermore, these measurement systems can be applied to pretty much anything and everything: layout grid; type sizes; icon stroke weight; icon spacing; margins; padding…
*Edit: Google and Apple both prefer designers to use an 8pt grid system when designing everything from typography and icons to layouts for device applications. This Medium article by Vitsky explains why, it also goes on to provide an amazing wealth of related information, so please do check it out. Choosing your own system of multiples is still a valid suggestion to try out particularly when it comes to type-size though as with icons, and visual rhythm of the layout, it is strongly suggested you base your line heights on the 8pt grid system.
2) Create a type system first before designing anything else.
I mean it, stop pushing shapes around and pay attention. Before doing this you will need to pick the typefaces you’re going to use for your project. You should try to limit the selection to two, or three at most — remember, each typeface has all those nifty font weights to help you with variation.
When building websites there are 6 values for header text (headers, sub-headers, section titles, etc.) available to us in the code. These are numbered H1 to H6. H1 is the largest size of header that will appear in your project, with H6 being the smallest. Additionally, you will need a size for body copy, a smaller body copy size for when you need to fit text into tiles or cards, and sizes/styles for navigation links for nav, body hyperlinks, footer and any tags that may appear within components as labels.
There are sites you can use to help you put together your type system*, such as type-scale.com. Unfortunately, there is no one-stop shop approach to determining type scaling as it’s all down to the typefaces you choose. However, bear this tip in mind to make life a little easier. A good rule of thumb for setting line height is between 1.2 and 1.5 times (x) the type size, depending on the typeface selected. In Figma you can achieve these values by simply clicking on a text box and in the right hand design properties pane click into the entry field for line height and type 120% or 150% as you desire. Modify as you wish to find a value you feel more comfortable with. Increasing line height will help with legibility up to a certain point, beyond which you move into inhibiting territory where the gaps between the text cause the lines to feel floaty and disconnected as a cohesive grouping. As another rule of thumb you will usually find that by increasing the type size you will also need to decrease the line height. This is vice versa for small text. You may find that the lines of text need a little more separation from each other to help with readability.
So… hold on, we were talking about making a type system, not line height. What gives? Here’s the trick, you can use similar values from 1.01 upwards to create your type system, if you look at type-scale.com some nice values which create a decent array of diminishing sizes from your H1 (let’s say set at a size of 72 pixels) are Major Third — 1.250 and Perfect Fourth — 1.333, slap bang in the sweet spot zone between the 1.2 and 1.5 value range for tweaking line height.
Hey, that’s a lot of numbers, I get it. So here it is basically. To make your type system make a text box and type in a few words in the typeface you want to use for headers. Make that type a size you would want to use as the biggest size on your website or app, let’s say 72 pixels. Now duplicate that text box (copy and paste) and drag it below the first, or hit alt and drag the box for a duplicate. All you have to do now is pick a number between 1.2 and 1.5, in this case we will go with 1.3 (what type-scale.com calls a Perfect Fourth, rounded down to the nearest single decimal place). Now divide 72 by 1.3. Stop, you don’t need a calculator. Make sure your text box is selected and go into the design properties pane on the right hand side of the screen in Figma. Click into the type size entry field making sure the cursor sits at the end of the number and type /1.3, now hit enter or return, and that’s it. Figma does all the calculation for you. Now it’s just a process of repeating the steps. Duplicate the text box, drag it down, resize it by the same value, 1.3. The results will return numbers with multiple decimal places. There’s nothing wrong with using numbers with lots of decimal places in your measurements. For my own designing I feel that rounding text sizes up or down to one or two decimal places is much simpler to work with (1.3, or, 1.33 rather than 1.33333). You may ask yourself “I want a H3 larger than this”, which is totally fine. Bop it up or down in size a few pixels depending on your judgement — this is your design, alter the system how you will, do it your way. When you have 6 boxes of descending type sizes step back and brush off your hands, you’re done.
If you want more of a difference in the scaling between sizes increase the decimal value (e.g. 1.4, 1.5), if however you desire a more subtle scaling lower the decimal value (1.2, 1.1). Keep in mind that if you want to do this you will have to start over from the beginning with the largest type size (H1) making fresh duplicates as you scale down to have a type system of related scaling, but you get what I’m saying). And that’s it.
Now, here are some quick pointers for the rest of the elements you may want reference sizes for. The Internet standard for body copy is 16 pixels but in contemporary designs these sizes generally bump up to around 18, 20, or in some cases 22 pixels to aid in accessibility, as a boost to readability. Small body copy is usually sized within a few pixels of the main body type size. Links for navs and footers are usually capitalised. To help match capitalised links with body size to ensure they don’t unbalance the design, resize them until they feel more balanced (not too big or small). You may find lightening the shade of links may also help when you’re later finessing the type hierarchy within the components.
If the size of the link text is pulling attention away from where it needs to be, e.g. from headers, copy, imagery or call-to-action, then that’s probably a good sign you need to reduce the size a bit. Hyperlinks for the body copy can be identified by simply giving them a unique colour, or shade, and using this consistently across the project. This is to ensure that hyperlinks are discernible from their surroundings, encouraging interaction. Try to limit the use of colour in your project so that these elements stand out and are not confused for any other element. Depending on the colours and/or shade you have selected there may well be people with colour blindness or a visual impairment that could struggle to see it. Keep this in mind for when you’re conducting user testing.
To round-off this tip (phew!) here are a few words of advice. Try to keep your hands away from letter spacing. Your biggest text may need the spacing decreased and your capitalised links may benefit from a slight widening of their spacing. Try to avoid going in and arbitrarily editing the letter spacing for every little thing. Limit the fiddling to where it is necessary. When you have your type system ready add it to the Text Styles of your Figma document for ease of applying to you design.
*Edit: in addition to type-scale.com I’ve come across a plugin called Font Scale which is easily found browsing the plugins list inside Figma. It does the same job as typescale, looks and functions very similarly and allows you to have a customisable type system generated instantly direct to your Figma project. Awesome! For those looking for more please also check out the extremely useful tool Gridlover.
3) Design in greyscale.
As soon as you have your type system, create a palette of swatches. Use the H/S/L colour selector and start by choosing a black. Pick a very dark grey over a pure black as the contrast with pure black, especially against white, is very sharp and it can unbalance your design (since you’re most likely starting things off with a blank white frame). When you do this steer clear of picking a completely desaturated shade. Instead, choose a colour with a small amount of hue to create a palette which is softer on the eye and visually pleasing. Next, make a shape, make it the black you’ve chosen, duplicate it, increase the lightness value by say ten, then repeat. For each new duplicate add another 10, or whatever increment you chose, and carry on making duplicates until you end up with white. Add these swatches to the colour library in Figma for ease of use when building your design.
Hopefully these tips will provide some guidance for preparing your next design project and may help reduce some of the fear of staring at a blank canvas wondering where to start. Until next time folks!
