Professional Documents
Culture Documents
mate Collection
By Marc Andrew
1
When creating efficient, accessible, and beautiful UIs for your projects sometimes it
takes only the smallest of adjustments to help quickly improve the designs you're
trying to create.
In this short, and easily digestible guide I’ve put together a selection of easy to put
into practice micro-tips that can, with little effort, help improve both your designs,
2
1. Make your elements appear more
defined with a subtle border.
Using Multiple Drop Shadows or a very subtle border (just a shade darker than
your actual shadow) around certain elements can make those elements appear a
little sharper, more defined, and help you avoid those muddy-looking shadows.
3
2. Reduce Letter-spacing on your
Headings to give a better optical bal-
ance.
Your Headings are most likely going to be much larger, and heavier than their
Body text companions, so the spacing between the letters can sometimes appear
optically larger, which is not always what you want when you're looking for that per-
fect aesthetic.
Reducing the Letter-spacing, just by small amounts, can make your Headings more
optically balanced, more readable, and generally more pleasant to look at.
4
3. For consistency, make sure your
icons share the same visual style.
Make sure they all share the same visual style; the same weight, and either filled, or
outlined.
5
4. Using just one typeface in your de-
sign is all good. Ignore the haters.
It’s absolutely fine to just go with a single Typeface when creating your designs,
and doing so can actually help you produce much stronger, and consistent results.
Weights, Sizes, and Colour you can still produce perfectly acceptable results with
6
5. Whitespace is your UI design friend.
Use it generously. Use it well.
Good old Whitespace, Negative Space, you know the one. Use it generously, or in
Even just subtle amounts of the white stuff can allow your designs to breathe, and
One of the fastest, and simplest ways to improve your designs, no doubt.
7
6. Creating long-form content? Give
20pt a try.
For long-form content (ie; Blog Posts, Project Descriptions etc...), try going with
Of course this is dependent on the Typeface chosen, but a good majority of popu-
lar Body Typefaces work great at 20pt, and bring a much better reading experience
8
7. Use a Type Scale to define a harmo-
nious set of font sizes.
Using a Type Scale helps you define a set of font sizes easily, practically, and
As the name suggests, a Type Scale works based on a scale factor (say 1.25). The
idea is that you start with a Base font size (18px) and multiply (or divide) it with the
scale factor to get font sizes of either a higher (ie; H₁, H₂, etc...), or lower hierarchy
A Type Scale will help you produce texts that look harmonious because their sizes
9
8. Choose a Base Colour, and then use
Tints & Shades to add uniformity.
Guess what? You don’t always have to stuff your design with a mass of colours.
If the project allows it, simply using a restricted colour palette by choosing a Base
Colour and then using Tints and Shades of your chosen colour can add uniformity
10
9. Improve your user’s onboarding ex-
perience. Thumbs rule remember.
Enable users to skip your Mobile App Onboarding sequence at any time, and
Just a simple adjustment that can enable a much better experience for your users...
11
10. Your shadows are coming from one
light source right?
Make sure your shadows always come from just the one light source.
It’s a simple mistake to make, but one that can leave your designs looking less than
polished.
12
11. Use Superfamilies when you're
looking for great font combinations,
but fast.
When you're looking to improve your typeface-combining skills and feel a little
daunted when faced with 1000s of Typefaces to choose from, just go with a Super-
family!
Superfamilies are collections of Typefaces that can come in both Serif, and Sans-
Serif variants for example, and are created to work together in close visual harmo-
ny.
A few that I highly recommend are Merriweather & Merriweather Sans, and Roboto
& Roboto Slab which you can find here at Google Fonts.
13
If you want to combine Typefaces effectively, and without the worry of picking out
Depending on where the text may be positioned over your image, you can either
go with a tried, and tested full image overlay, or a more subtle (bottom to top, or
top to bottom) gradient overlay to achieve a simple contrast between the two ele-
ments.
Nothing too elaborate is required to achieve a good contrast between your text
and images.
14
13. Use Centred Text in moderation.
Too much of it makes for a sub-par
user experience.
Try to only use Centred Text for Headlines and small passages of Text if possible.
For pretty much everything else keep that text left-aligned. Your users will thank
15
14. When choosing a multi-use Type-
face, try to find one with plenty of
weights.
Does the Typeface you've been searching for come with a generous selection of
Try and make sure it does if you intend on using it for a few of your projects.
Just the one weight, or style. Nah. I recommend steering clear of those if you can.
There are exceptions of course, and certain projects will require that ‘one style only’
more elaborate typeface, but for the vast majority of projects you want Typefaces
Even if you decide on using just two or three weight or styles, give yourself the
breathing room if you need to call on more at a later stage in the design process.
16
15. Darken up your text on light back-
grounds. Ignore the ‘cool kids’.
Don’t make your text too light when working against a light background.
It can look like all the cool kids are (still) doing it, but you’re much smarter than that,
17
16. Lighten up your text if it looks a lit-
tle on the heavy side.
When it comes to long-form content, certain Regular weight Typefaces can still look
You can easily fix this by choosing something like a Dark Grey (ie; #4F4F4F) to tone
18
17. Always make your ‘Call to Action’
the most prominent item on the
screen.
You think this would be common-sense right? Erm. Not always I’m afraid.
Make sure that ‘Call to Action’ is as prominent as possible, via the use of colour con-
Don’t always rely on Icons alone if you can. If you can use Text Labels too, use ’em,
19
18. The smaller the font size, the more
generous your line height should be.
As your font size decreases, increase the line height for better, all-round legibility.
The same applies to when your font size increases. Simply Decrease the line height.
20
19. Use the x-height or Il1 test to de-
termine readability of your chosen
Typeface.
Basically, the x-height is the height of a lower-case ‘x’ relative to an upper-case let-
If your font has a large x-height, then this will generally make for much better read-
Another way to determine the readability of a Typeface, and to narrow things down
if you have a few Typefaces that you can’t decide between, is to do the Il1 Test
Here you compare three characters from a specific Typeface; Uppercase i (I),
21
How different the letterforms look against one another can help determine readab-
Always aim for the best legibility, either via x-height, Il1, or both, when choosing a
When designing a Menu to use inside an application, make sure to give the most
frequently used action (ie; Upload Image, Add File etc…) the most prominence on
the screen.
22
21. Colour-Pick from your images, and
bring your products to life.
Simply colour-picking from your product images, and then applying various tints
and shades of your chosen colour to your background, text, icons or more, can add
23
22. Set your line height based on the
Typeface’s x-height.
Typefaces with differing x-heights need, well, different line height measurements to
Even though you may have 2 Typefaces with the same font size (ie; 18px) their x-
heights can differ greatly, and this plays a big part in choosing the right kind of line
height to implement.
Merriweather for example is a Typeface with a large x-height, and as such requires
a larger line height, whereas something like Mr Eaves Sans with its small x-height
24
23. Give prominence to the most im-
portant elements.
By using a combination of Font Sizes, Weights, Colour, and Layout, you can easily
Just simple, but subtle adjustments to make the user experience that bit better.
25
24. Add an extra visual aid to your
Form Errors.
Adding an Error Message close to the action that the user has just taken can be a
simple, but helpful, extra visual aid for when they’re filling out forms of any kind.
26
25. Try to create generous Tappable ar-
eas on Mobile.
When designing for Mobile try to create Tappable Areas large enough for fingers
Things can be challenging for Buttons, and Links that consist only of Text so try to
Here’s the minimum recommended Tap Areas for both iOS and Android...
27
26. Try to use All-caps on short titles
only, such as Kickers.
If you want to use All-caps on your Titles make sure they’re pretty short whenever
possible, preferably one line. Using them for longer texts is a terrible idea.
One of the best places is on Kickers (sometimes known as Overlines). These are
those short phrases, only a few words usually, that can appear above your titles,
and are perfect when you want to put All-caps into practice.
And like the Tip previously, adding a subtle amount of Letter-spacing to titles with
All-caps applied can also allow them to breathe, and look better optically.
28
27. Keep the contrast ratio acceptable
between light text, and images.
Always make sure light text is legible against, well, lighter image backgrounds.
Simply applying a slightly opaque darkened background behind your text will keep
It also allows you to easily switch between dark, and light images without the hassle
29
28. Take a look at these great Fonts;
Perfect for Headlines in your designs.
Here’s a selection of Serif, and Sans-Serif Commercial Fonts that I’ve used many
times before, and found they work really well for headlines, bringing a bit of
You can find them at fonts.adobe.com (No, I'm not getting any commission).
30
29. Take a look at these great Fonts;
Perfect for Body copy in your designs.
Behold a small selection of both Serif, and Sans-Serif Commercial Fonts that I’ve
You can find them over at fonts.adobe.com (No, I’m still not getting any commis-
sion).
31
30. Get that Vertical Rhythm just right
for your Headlines and Body Text.
When you want to achieve a good Vertical Rhythm, as well as a strong Visual Hier-
archy between text elements in your designs it pays to get your Margins in order.
I’ve seen many designs, most commonly in lists of articles, where they've applied
equal top and bottom margins to headings, and in doing so, have lost that connect
In cases like this, I’ll always give more top margin to my headings, and a little less at
the bottom so the connection between the headline and content beneath is
32
31. For Download Indicators, try to be
as informative as possible.
The one time you don't want to go with the super ‘Minimal’ look is when it comes
to Download Indicators.
For the user, try to make your Download Indicators as informative, and user-friendly
as possible.
You can achieve this via the use of colour, a percentage figure to show the current
progress, and a simple icon giving them the ability to cancel the download at any
time.
33
32. If you can keep your titles short,
and concise... ‘Just do it’.
If you can, and if it’s suitable, keep titles short, snappy and to the point.
For example. Instead of ‘It’s your style, and your way’, simply use something like
People scan, and keeping those titles short, and punchy helps them digest the in-
Remember that it can come across quite abrupt this way, and you need to consider
the type of project you're working on, and the intended audience to decide if this
34
33. Choose the right Typeface to give
the correct ‘voice’ to your design.
When working with text on a project, choosing the right Typeface will influence the
kind of voice that your text is spoken in. Be that loud, or soft, friendly or formal, seri-
ous, or fun.
Each Typeface has its own distinctive voice, and it's about finding the appropriate
When you're new to working with Typefaces this can seem like a daunting task, so
don't be afraid to be inspired by similar projects out there, and take ideas from
them to help both influence your decisions, and improve your understanding of
what is suitable.
35
34. Choose a suitable Line Length for
your body text, and improve Readabil-
ity.
Working with Body text, and trying to find a suitable line length can be a bit of a
balancing act.
column page, with a 66 character line (which includes both letters, and spaces)
Of course font size, and line height also play a role when deciding on readability,
but for line length keep between the 45 to 75 character guidelines, and you'll be
good to go.
36
35. It’s OK to use purely decorative el-
ements from time to time, but keep
things accessible.
Yes. The majority of text content on the screen should adhere to usability best prac-
But. There are times when you want to add text purely for decorative purposes, and
that's all good. We don't want all of our designs falling into the realms of bland-
land.
It's OK to pop in the odd element purely for decorative reasons as long as not hav-
ing that element there at all would affect the user experience in any way.
When using decorative elements that are purely visual and not important to the
user experience make sure to call on those ARIA Roles such as aria-hidden=“true”
37
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Tech-
niques/Using_the_aria-hidden_attribute
If you can, always try and make sure that your users can tell them apart quickly and
Buttons, in most cases, will take priority, so make sure they’re the most prominent
item on the screen and easily distinguished between other elements (i.e. notifica-
tions).
38
37. Just subtle amounts of shadow are
all you need.
They can serve as subtle but powerful visual cues within your designs when used in
moderation.
Shadows in the real world are, the majority of the time, almost unnoticeable, and
Lay off the heavy and dark shadows, and dial down the opacity to achieve some-
39
38. Using All Caps? Choose a font suit-
able to achieve optical clarity.
Applying All Caps to certain text elements can help you achieve some variety, and
contrast between other text elements in your design and enhance the overall visu-
If you decide to style things up with a handy dose of All Caps, try and make sure
you choose a suitable Typeface with a tall x-height and in a heavier font-weight to
40
39. Make Breadcrumbs stand out and
easy to interpret for the user.
Used frequently on content-heavy sites, but not always shown the love they de-
serve.
With the smallest of tweaks, you can make sure that the user can quickly pinpoint
where they are in a site and where else they may need to go.
This is especially useful if they've jumped to somewhere deep in a site via the use
Always try and make sure that the last item in the chain is visually different from the
rest. And the links, well, try and make them look like so.
41
40. Using highly saturated colours? Try
and tone things down with a Tint or
Shade.
Highly saturated colours (brilliant blues, reds, greens etc.) can look great on a site,
but when overused, they can be tiring for the user's eyes, mainly when used with
text-heavy content.
Use them in moderation when you can, and try to combine with muted colours (a
tint or shade variant) of the saturated colour to avoid that dreaded eye fatigue.
Using this method can also direct attention to the saturated colour and make the
most important content front and centre, with the more muted colours taking a less
Always remember though, that readability and accessibility should be the top prior-
42
Don’t forget to reach for a WCAG colour contrast checker such as Contrast when
When adding icons to your designs, try and choose an established icon that rep-
Choose an icon that conveys the correct meaning and functionality, as anything
else invites confusion and becomes a cognitive obstacle for the user.
43
42. Use Proximity to signal relation-
ships between elements.
Among the many tried and tested Design Principles available (Contrast, Space, Re-
petition etc.), there is one that is key in helping you produce clearer UIs for your
users.
Proximity.
Proximity is simply the process of ensuring related design elements are placed to-
gether, signalling a relationship between one another, which helps speed up the
44
43. 4pt Baseline Grid + 8pt Grid = Har-
monious Vertical Rhythm.
When working with Type, using a 4pt Baseline alongside the ever-versatile 8pt Grid
You need to align your Type to a Baseline Grid of 4, using a line-height value that is
Why 4? Well, I’ve found that scaling in multiples of 8 in the past is just not as versat-
45
44. It’s all good to reduce the line-
height on your Headings.
As opposed to the long-form body text, which needs ample line-height for in-
creased legibility, headings are usually much shorter, so you can ease back on the
spacing a little.
The recommended line-height for headings is usually around 1 to 1.3 times the
size of the text, and the larger you go, well, the less line-height you need to add to
the mix.
46
45. Having trouble picking a colour
scheme? Go Analogous on the Colour
Wheel.
the most harmonious of colour schemes and can help you greatly if you're having
A set of adjoining hues consisting of primary, secondary, and tertiary colours can
Go Analogous when you need to bring colour harmony into the mix fast.
47
46. Try and maximise the Signal-to-
Noise ratio in your designs.
You can achieve clarity and usability within your designs by maximising the signal
and minimising the noise, which in turn produces a high signal-to-noise ratio.
You can accomplish this by ensuring that relevant information (signal) is presented
Cut out the fluff. Make things clearer. Increase your signal-to-noise ratio.
48
47. Want to speak in a more informal
tone? Try going all lowercase.
Using a heavier font-weight and caps can come across a little formal and shouty
occasionally.
Using something like all-lowercase copy can present a more informal, and ap-
Always remember though to use some kind of colour overlay between the image
49
48. Use weight, size, and colour to in-
dicate hierarchy within your type.
When working with type, elements don’t need to scream “Look at me!” all the time.
Just subtle adjustments via weight, size, and colour are all it takes to achieve this.
Doing this allows the user to scan and find essential elements, avoiding any confu-
50
49. Light Text on dark? Fatten up that
font-weight for the best legibility.
When setting dark text against a light background, you can, occasionally, opt for a
lighter font-weight.
But…
It would be best to look at fattening up the font-weight a little, especially for long-
form copy.
Aim for the best legibility, and avoid straining your user’s eyes.
51
50. Create the right emotional re-
sponse with your typeface choices.
Try to choose the appropriate typeface for the content you’re presenting.
Users are savvy and have an intuitive sense when content is talking to them and
The correct choice of typeface is vital in making your content speak to them dir-
52
51. If you (have to) use multiple type-
faces, try to stick to the 2 max rule.
But.
No more.
Go easy on yourself, and don’t just add another typeface just because you can.
Using a maximum of 2 and a combination of weight, size, and colour can bring in-
53
52. All-Uppercase + Letter-Spacing =
Better Legibility.
Well…
It’s a good idea to increase the spacing between those letters to achieve better
Doing so makes the words easier to read and process because the letters are more
Just small increases in spacing between letters are all that’s needed to improve
54
53. It’s ok the bend the rules some-
times when it comes to Type Scales
and Grids.
I’m a big advocate of following rules such as a Type Scale of some kind or the ever-
But sometimes, it’s good to divert from what a Scale or Grid is rigidly telling you to
Be a rule-breaking rebel.
55
54. Make those error messages on
your forms helpful and easy to under-
stand.
When working with Forms, try and make sure that your error messages explain
Always keep the user informed, even with something as commonplace as a regular
ol’ Form.
Make those error messages useful, and don’t leave your users in the dark.
56
55. Try and assure the user that some-
thing is happening when loading up
your App.
Displaying a skeleton of your app's elements can help you quickly communicate
System status visibility is an important principle to follow and allows the user to be
Don't have the user playing a guessing game. Keep them informed right from the
very start.
57
56. Inform the user on what’s going to
happen if they apply a certain action.
Always try and inform the user, in detail, before applying a particular action that
Let the user know what’s going to happen and ask them for confirmation before
they go pressing that big, red button labelled ‘Delete The Internet’.
58
57. Make sure your most important
screens get priority in the Tab Bar.
The Tab Bar in your app is a prime price of screen real estate, so use it wisely.
Reserve the Tab Bar for the most frequently used screens of your App and hide sec-
There’s only room for the important stuff inside of that teeny-tiny Tab Bar.
59
58. Don’t hide important actions away
inside of a Dropdown. Front and Cen-
ter people!
Yup. I still see this happening from time to time on Desktop views.
Essential actions that a user needs to take (i.e., Sign Up or Log In) solely hidden
Keep those important actions accessible and in a place where they’re most expect-
ed.
60
I hope with this collection of micro-tips, you've realised how the smallest of adjust-
ments to your designs can produce better results for both yourself and your users.
Many thanks
Marc Andrew
By the way, did you know you can improve your designs even more with my Best-
61