34. Using highly saturated colours? Try
and tone things down with a Tint or
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 prominent role and giving your user's eyes a little rest.
Always remember though, that readability and accessibility should be the top prior- ity when choosing colours.
Don’t forget to reach for a WCAG colour contrast checker such as Contrast when you’re looking at trying out colour alternatives.
35. Use established icons in your UIs to avoid confusion for the user.
When adding icons to your designs, try and choose an established icon that rep- resents the action that's about to be taken.
Choose an icon that conveys the correct meaning and functionality, as anything else invites confusion and becomes a cognitive obstacle for the user.
36. 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 user’s cognition when scanning through your Site or App.
37. 4pt Baseline Grid + 8pt Grid = Har- monious Vertical Rhythm.
When working with Type, using a 4pt Baseline alongside the ever-versatile 8pt Grid can bring a much more harmonious vertical rhythm to your designs.
You need to align your Type to a Baseline Grid of 4, using a line-height value that is a multiple of 4 (16, 20, 24, 28 etc...)
38. 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.
Go line-height-light with your Headings.
39. Having trouble picking a colour scheme? Go Analogous on the Colour Wheel.
Analogous colours, also referred to as adjacent or neighbouring hues, are among the most harmonious of colour schemes and can help you greatly if you're having trouble picking colours that play together nicely.
40. 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 efficiently, and irrelevant information (noise) is reduced or removed altogether.
Cut out the fluff. Make things clearer. Increase your signal-to-noise ratio.
41. 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.
Try choosing all-lowercase and a lighter font-weight.
42. 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.
But they do need to have a balanced hierarchy in place.
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- sion in the process.
43. 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…
44. 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 when it’s not.
The correct choice of typeface is vital in making your content speak to them dir- ectly and on an emotional level.
45. If you (have to) use multiple type- faces, try to stick to the 2 max rule.
For me, I try to stick to the 1 Typeface rule whenever possible.
But.
If the project demands it, I recommend maxing out those typeface-combos at 2.
Using a maximum of 2 and a combination of weight, size, and colour can bring in- stant visual harmony to your designs.
46. All-Uppercase + Letter-Spacing = Better Legibility.
Are you working with short lines of text in all-uppercase?
Well…
It’s a good idea to increase the spacing between those letters to achieve better
47. Be consistent with your design ele- ments.
We're creatures of habit and expect products to be presented in a familiar way.
We expect consistency throughout when navigating a site or app, and it's an essen- tial design principle to implement.
Be that with Layout, Icons, Colours, and Buttons, to name but a few.
Be consistent. Reduce confusion, and improve that user experience.
48. White Space. Use it generously.
Whitespace. Negative Space.
Same thing. Different titles.
My advice to you. Use it generously or in moderation, but use it well.
Adding whitespace to your designs is one of the simplest ways to instantly improve
49. Style that opening paragraph, and draw the user in.
If you’re working with long-form content, such as blog posts/articles, it’s essential to draw the reader into the content.
The appearance of the opening paragraph can be just as important as the content itself in achieving this.
Simple tweaks such as different font size, line height, weight and colour are all it takes to make an improved first impression.
50. Design for scanners. Use short paragraphs.
When working with long-form content, and it’s practical, try and keep those para- graphs short and punchy.
We’re all scanners now and want to digest information as quickly as possible.
51. Define a colour palette, and create uniformity in your designs.
Want to create more professional-looking UIs? Define that colour palette.
Don’t overstuff your design with an abundance of random colour choices and hope for the best.
Build a strong colour palette from the start and stick with it. Doing this will avoid headaches and add uniformity throughout your designs.
52. Lay out your icons consistently when using the 8pt Grid System.
When working with icons and the 8pt Grid System, you’ll find that most well-built icon sets have icons that sit inside frames that are multiples of 8 (, i.e. 16x16, 24x24, 32x32 etc.)
Sometimes, just sometimes, that’s not always the case.
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- awesome 8pt Grid system.
But sometimes, it’s good to divert from what a Scale or Grid is rigidly telling you to do and present something that looks better, optically.
Remember that rules are there to be bent, and on occasion, broken.
Be a rule-breaking rebel.
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 what went wrong and how to remedy things.
Always keep the user informed, even with something as commonplace as a regular
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 the layout and assure the user that something is happening.
System status visibility is an important principle to follow and allows the user to be informed about what's going on.
Don't have the user playing a guessing game. Keep them informed right from the very start.
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 can have consequences.
This especially applies to actions with irreversible consequences, such as perman- ently deleting something.
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- ondary screens inside a More icon.
There’s only room for the important stuff inside of that teeny-tiny Tab Bar.
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 away in a Dropdown that they may not even navigate to.
59. Try to keep the Tab Bar a constant within your Mobile App.
If the user is going more than two levels deep into your app, make sure the Tab Bar is there to help them get back to where they need to quickly.
Too many taps aren’t cool and will bring frustration to any user.
Try to keep the Tab Bar a constant within your mobile app, and avoid those unne- cessary tap backs.
60. Using only Weight can create Em- phasis and Hierarchy within your Type.
Emphasis and Hierarchy using only Weight? Oh yes!
Staying within the same type family and simply varying the family member's Weight can signal a shift in Hierarchy even when the point size is unchanged.
61. Try and create generous tappable areas on Mobile.
When designing for mobile, try to make Tappable Areas large enough for fingers to tap successfully.
The minimum recommended Tap Areas for both iOS and Android are - 44 x 44pt for iOS
48 x 48dp for Android
Our fingers come in various sizes, so give ‘em some room and make it easy for the user to tap accurately without too much frustration.
62. Make your site's navigation as con- sistent as possible.
Follow best practices and try to keep your navigation consistent across your site.
Even minor changes can cause cognitive dissonance and frustration for the user.
There may be minor exceptions to the rule on certain types of sites but keep that
63. Content-heavy site? Make that Search a prominent feature.
Whenever possible, aim to make Search a prominent feature on your content- heavy site, especially when viewed on desktop.
Try not to hide your search feature solely behind some teeny-tiny symbol as it plays an essential role on content-heavy sites, and demands a little more attention.
Make it prominent and visible on desktop and you're good to go!
64. Don't just choose font sizes at ran- dom. Use a Type Scale.
When you need to define a collection of font sizes fast, practically, and without any guesswork, use a Type Scale.
As the name implies, a Type Scale operates on a scale factor (say, 1.25).
65. Keep your messages short and sweet. Cut out the fluff.
Always try to keep those messages short and to the point, and talk to the user in a voice they’ll easily understand.
If there’s no requirement for any jargon-speak, then cut it out. Avoid the fluff.
Presenting clear and concise messages to the user will assist them better in achiev- ing their desired goals.
66. Give 20pt a try when you’re creat- ing long-form content.
For long-form content (i.e., articles, project descriptions, etc.), use 20pt (or even a little more) for your Body copy.
This depends, of course, on the Typeface used, but most popular Body Typefaces look great at 20pt and provide a significantly better reading experience for your
67. Don’t rely on just colour alone to convey information with error mes- sages.
As powerful as colour can be in your designs, don’t always rely on colour alone to convey important information to the user.
For example, with form error states, choosing the ‘imagination-free’ red border isn’t helpful enough for a large section of users.
Bringing something like an icon and descriptive text into the mix will convey your message in more detail and aid accessibility at the same time.
68. Create a harmonious vertical rhythm with the 4pt Baseline & 8pt Grid.
When it comes to Type, combining the 4pt Baseline Grid with the 8pt Grid results in a much more harmonious vertical rhythm across your designs.
Align type to a 4pt Baseline Grid, which employs a line-height value that is a mul-
69. Decrease the letter spacing, and line height on those Headings.
As opposed to long-form body text, headings are typically much shorter, allowing you to reduce the line height spacing a little.
They’re also most likely to be a much bigger font size, with the spacing between the letters appearing optically larger, so reducing the letter-spacing will help your headings look more visually balanced.
Go ahead and decrease that letter spacing and line height on your headings for optimal readability.
70. Use multiple shadows, or a subtle border to make those elements pop!
Using multiple drop shadows or a very subtle 1px border (just a shade or two dark- er than your actual shadow) around certain elements can make them appear sharp- er and more defined.
Following this simple method can make your elements pop a little more, help
71. Start your messages with the goal first, not the action.
Always try and construct your messages to the user in the correct order.
When describing a goal, and the action required to achieve it, begin the sentence with the goal.
Constructing your messages in this format will make them more easily understand- able and help reduce user error at the same time.
72. Improve readability by choosing the right line length for your body text.
Working with Body text and determining a suitable line length can be a balancing act.
A line length of 45 to 75 characters is widely regarded as adequate for a single-
73. Prompt initial user action with helpful empty states.
Empty states. Highly beneficial in improving the user experience, but so often neg- lected.
Use empty states as an opportunity for the user to quickly discover features that will benefit them, get them to accomplish their goals sooner, and use the site or app as you intended.
Please don’t leave your user at a loss on what to do first, and start them off on the right foot.
74. Set your line-height based on the Typeface’s x-height for optimal read- ability.
Typefaces with differing x-heights need, well, different line-height measurements to achieve optimal readability and legibility.
Merriweather, for example, is a Typeface with a large x-height, and as such requires
75. Yup. Whitespace is a design ele- ment. So use it well.
Don’t overstuff your designs. Let both your design and user breathe.
Whitespace is as important a design element as typography, colour and imagery to communicate your site or apps message clearly and bring a much better experi- ence for the user.
Just because you have all that screen space available to you doesn’t mean you need to fill every part of it. Use Whitespace well, as you would any other design element.
76. Maintain a suitable contrast ratio between light text and images.
Always check that light text is legible against lighter image backgrounds.
Something as simple as using a slightly opaque dark background behind your text will maintain a nice contrast ratio between those elements.
77. Get the perfect Vertical Rhythm for your Headlines and Body Text.
When you want to achieve an excellent Vertical Rhythm, as well as a solid Visual Hierarchy between text elements in your designs, you need to get your Margins just right.
I've seen a lot of designs, most typically in article lists, where they've applied equal top and bottom margins to headings and, as a result, lost the connection with the body text below it.
I'll always give more top margin to my headings and a little less at the bottom in cases like these. This makes the connection between the headline and content be-
neath more robust, and an excellent Vertical Rhythm and Visual Hierarchy is pre- served between all articles in a list.
78. Depending on the size of the text block you use, adjust your line-height accordingly.
Not all line-heights are equal.
When working with text blocks of varying sizes, you need to find the line-height suitable to a specific block.
With a large block of text, for example, adding extra line-height allows the eye to easily distinguish the end of one line from the beginning of the next and move smoothly through the larger passage of text.
And when your text block is nice and short (just 3 or 4 lines) and of a much shorter line length, you can go ahead and stick with its standard line-height or reduce it slightly without worrying about legibility issues.
Tweak those line-heights to fit.
79. Keep your text colour palette sim- ple and just use Tints & Shades.
If the project allows, don’t feel that you need to use a crazy amount of different text colour choices to present your message well.
For some, especially when not working from project specs of any kind, finding dif- ferent colour combinations that work well together can be a struggle.
Save yourself all the stress and look at using tried, and tested Tints (lighter variants) and Shades (darker variants) of something like your Primary colour, for example.
Check out maketintsandshades.com to see how you can make this whole Tints &
Shades process even quicker.