When you create efficient, accessible and beautiful user interfaces, it only takes the smallest tweaks to improve your designs. Tips that, with little effort, can help improve both your designs and the user experience. Make sure your shadows are always cast by one light source, which, surprise, surprise, is usually from above.
Creating shadows that are cast at different angles is a simple mistake to make, but it can make your designs look sloppy. Too little white space can completely erase visual hierarchy and leave the user feeling overwhelmed and distracted. Make sure they all share the same visual style; the same weight, and either filled, or outlined.
It's absolutely fine to use just one font when creating your designs, and doing so can even help you achieve much stronger and more consistent results. Even subtle amounts of the white stuff can help your designs breathe and look more polished.
Choose a Base Colour, and then use Tints & Shades to add uniformity
Use Superfamilies when you're looking for great font combinations,
Improve contrast between your text and images with a subtle overlay
Use Centred Text in moderation
Too much of it makes for a sub-par user experience
When choosing a multi-use Type- face, try to find one with plenty of
Try and make sure it does if you intend to use it for a few of your projects. Even if you decide to use only two or three weights or styles, give yourself some breathing room if you need to call for more later in the design process.
Lighten up your text if it looks a lit- tle on the heavy side
Always make your ‘Call to Action’
- The smaller the font size, the more generous your line height should be
- Use the x-height or Il1 test to de- termine readability of your chosen
- Give Prominence to the most fre- quently used action in a Menu
- Colour-Pick from your images, and bring your products to life
- Give prominence to the most im- portant elements
- Add an extra visual aid to your Form Errors
- Try to use All-caps on short titles only, such as Kickers
- Take a look at these great Fonts;
Use the x-height or the Il1 test to determine the readability of the selected final legibility of the selected font. When designing a menu for use in an app, make sure the most frequently used action (ie Upload Image, Add File, etc.) is the most prominent on the screen. Simply picking colors from your product images and then applying different shades and hues of your chosen color to your background, text, icons or more can add a lot of visual interest and character to your designs.
By using a combination of font sizes, weights, color and layout, you can easily give prominence to the most important elements in your UI. Adding an error message near the action the user just took can be a simple, but useful, extra visual aid when they're filling out forms of any kind. If you want to use all-caps on your titles, make sure they are fairly short when possible, preferably one line.
These are those short sentences, usually just a few words, that can appear above your titles and are perfect if you want to put capitalization into practice. And like the Tip before, adding a subtle amount of letter spacing to titles that have capitalization applied can help them breathe and look better visually.
Perfect for Headlines in your designs
Take a look at these great Fonts;
Perfect for Body copy in your designs
- For Download Indicators, try to be as informative as possible
- Choose the right Typeface to give the correct ‘voice’ to your design
- Choose a suitable Line Length for your body text, and improve Readabil-
- It’s OK to use purely decorative el- ements from time to time, but keep
- Make elements in your UIs distin- guishable from one another
- Just subtle amounts of shadow are all you need
- Using All Caps? Choose a font suit- able to achieve optical clarity
- Make Breadcrumbs stand out and easy to interpret for the user
- Using highly saturated colours? Try and tone things down with a Tint or
If you can, and if it's appropriate, keep your headlines short, snappy, and to the point. People scan and keeping these headlines short and sharp helps them digest the information much faster. Remember that this way can come across as quite unexpected and you need to consider the type of project you are working on and the target audience to decide if this method is appropriate, as opposed to the more standard format.
Choose an appropriate line length for your body text and improve Readabil- your body text and improve readability. Working with Body text and trying to find an appropriate line length can be a bit of a balancing act. 45 to 75 characters is widely considered a satisfactory line length for a single-column page, with a line of 66 characters (including letters and spaces) found to be the sweet spot.
Of course, font size and line height also play a role in determining readability, but for line length, stick to the 45 to 75 character guidelines and you're good to go. It's fine to throw in an element every now and then purely for decorative reasons, as long as not having that element 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 invoke those ARIA roles, such as aria-hidden=“true”.
If you can, always try to make sure your users can quickly and easily tell them apart when they scan your site or app. Buttons will take priority in most cases, so make sure they are the most prominent item on the screen and can be easily distinguished from other elements (i.e. notifications). Applying All Caps to certain text elements can help you achieve some variation, contrast between other text elements in your design and enhance the overall visual image you are trying to present.
If you decide to style things with a fair dose of all fonts, try and make sure you choose a suitable typeface with a long x-height and a heavier font weight to enable optical clarity for the user. Always try and make sure the last item in the chain is visually different from the rest. Try turning things down a Tint or and turning things down a Tint or.
Shade
Use established icons in your UIs to avoid confusion for the user
When adding icons to your designs, try to choose an established icon that represents the action being performed. Choose an icon that conveys the correct meaning and functionality, as anything else invites confusion and becomes a cognitive obstacle for the user.
Use Proximity to signal relation- ships between elements
When working with type, using a 4pt baseline along with the ever-versatile 8pt grid can bring a much more harmonious vertical rhythm to your designs.
It’s all good to reduce the line- height on your Headings
Having trouble picking a colour scheme? Go Analogous on the Colour
Try and maximise the Signal-to- Noise ratio in your designs
Want to speak in a more informal tone? Try going all lowercase
Use weight, size, and colour to in- dicate hierarchy within your type
Light Text on dark? Fatten up that font-weight for the best legibility
Create the right emotional re- sponse with your typeface choices
If you (have to) use multiple type- faces, try to stick to the 2 max rule
All-Uppercase + Letter-Spacing = Better Legibility
Be consistent with your design ele- ments
White Space. Use it generously
Style that opening paragraph, and draw the user in
Design for scanners. Use short paragraphs
Define a colour palette, and create uniformity in your designs
Lay out your icons consistently when using the 8pt Grid System
It’s ok the bend the rules some- times when it comes to Type Scales
Make those error messages on your forms helpful and easy to under-
Try and assure the user that some- thing is happening when loading up
Inform the user on what’s going to happen if they apply a certain action
Make sure your most important screens get priority in the Tab Bar
Try to keep the Tab Bar a constant within your Mobile App
Using only Weight can create Em- phasis and Hierarchy within your Type
Try and create generous tappable areas on Mobile
Make your site's navigation as con- sistent as possible
Content-heavy site? Make that Search a prominent feature
Don't just choose font sizes at ran- dom. Use a Type Scale
Keep your messages short and sweet. Cut out the fluff
Give 20pt a try when you’re creat- ing long-form content
Don’t rely on just colour alone to convey information with error mes-
Create a harmonious vertical rhythm with the 4pt Baseline & 8pt
Decrease the letter spacing, and line height on those Headings
Use multiple shadows, or a subtle border to make those elements pop!
Start your messages with the goal first, not the action
Improve readability by choosing the right line length for your body
Prompt initial user action with helpful empty states
Set your line-height based on the Typeface’s x-height for optimal read-
White space is as important a design element as typography, color and images to clearly convey the message of your site or app and provide the user with a much better experience.
Maintain a suitable contrast ratio between light text and images
Get the perfect Vertical Rhythm for your Headlines and Body Text
Depending on the size of the text block you use, adjust your line-height
And when your text block is nice and short (only 3 or 4 lines) and with a much shorter line length, you can go ahead and stick to the standard line height or reduce it a bit without worrying about issues of readability.
Keep your text colour palette sim- ple and just use Tints & Shades