The UI & UX Cheatsheet PDF [PDF]

Citation preview

The UI & UX Cheatsheet 21 Quick, and Easy Tips to help you improve your designs fast By Marc Andrew



1



Creating beautiful, usable, and efficient UIs takes time, with many design revisions along the way. Making those constant tweaks to produce something that your clients, users, and yourself are truly happy with. I know. I’ve been there many times before myself. But what I’ve discovered over the years is that by making some simple adjustments you can quickly improve the designs you're trying to create. In this handy little Cheatsheet, I’ve put together a quick, and easy to put into practice selection of UI & UX Tips that can, with little effort help both improve your designs (UI), and the user experience (UX). Let’s dive on in...



2



1. Make your elements appear more defined



Use Multiple Drop Shadows, or a very subtle border (just a shade darker than your actual shadow) around certain elements to make them appear a little sharper, more defined, and help avoid those muddy shadows.



3



2. Using just the one typeface in your design is all good



It’s absolutely fine to just opt for the 1 Typeface when creating your designs, and sometimes doing this can help you produce much stronger, and consistent results. Ignore the ‘Always use 2 Typefaces minimum’ crowd. Using a combination of Weights, Sizes, and Colours you can still produce perfectly acceptable results.



4



3. Creating long-form content? Give 20pt and up a try



For long-form content (ie; Blog Posts, Product Descriptions etc...), try opting for 20pt (or even a little more) with your Body copy. Of course this is dependant on the Typeface chosen, but a good majority of popular Body Typefaces work great at 20pt, and bring a much better reading experience for the user when faced with a wall of text. 18pt is sooo last decade.



5



4. Improve your users onboarding experience



Enable users to skip your App Onboarding sequence at any time, and place that Skip link within easy thumb reach. Thumbs still rule in 2020 remember!



6



5. 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, and sometimes goes unnoticed mistake to make. We don't live in a land of a thousand suns remember.



7



6. Improve contrast between text and images with a subtle, but simple overlay



Depending on where the text may be positioned over your image, you can either go for a tried, and tested full image overlay, or a more subtle; bottom to top, or top to bottom gradient overlay to achieve a simple, effective contrast between the two elements.



8



7. Use centred text in moderation



Try to only used Centred Text for Headlines/Titles and small blocks of Text. For pretty much everything else keep that text content left-aligned.



9



8. Whitespace is your friend. Use it generously



Ah, good ol’ Whitespace. Use it generously, or in moderation, but use it well. Even just small amounts of the white stuff can allow your designs to breathe, and look more polished. One of the fastest, and simplest ways to improve your designs.



10



9. Darken up your text on light backgrounds



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, and want to create more accessible interfaces right?



11



10. Check out these great Typefaces, perfect for Headlines in your designs



Here’s a selection of Serif, and Sans-Serif Typefaces that I’ve used many time before, and found they work really well for Headlines, bringing a bit of warmth, and character to any design. You can find them at fonts.adobe.com (No, I'm not getting any commission).



12



11. Check out these great Typefaces, perfect for Body copy in your designs



Behold a small selection of both Serif, and Sans-Serif Typefaces that I’ve used consistently for long-form Body text, and highly recommend. You can find them over at fonts.adobe.com (No, I’m still not getting any commission).



13



12. Lighten up your text if it looks a little on the heavy side



When it comes to long-form content, certain Regular weight Typefaces can still look a little too heavy, and stark. Easily fix this by opting for something like a Dark Grey (ie; #4F4F4F) to make that text a little easier on the eye.



14



13. The smaller the font size, the more generous the line height



As your font size decreases, increase the line height for better legibility. The same applies to when your font size increases. Simply decrease the line height.



15



14. Choose a Base Colour, and then use Tints & Shades to add uniformity



You don't always have to stuff your design with an abundance of colours. If the project allows it, simply using a restricted colour palette, by choosing a Base Colour and then using Tints and Shades, can add uniformity to your designs in the simplest of ways.



16



15. Give prominence to the most important elements



By using a combination of Font Sizes, Weights, and Colour, you can easily give prominence to the most important elements in your UI. These simple adjustments can greatly improve the user experience.



17



16. For Consistency, make sure your Icons share the same visual style



When implementing Icons in your UI, try to keep things consistent. Make sure they all share the same visual style; the same weight, and are either filled, or outlined. Don’t mix and match those Icons.



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 your ‘Call to Action’ is as prominent as possible, via the use of colour contrast, size, and labels. Don't always rely on just Icons alone . If you can, use Text Labels too. This enables much easier user comprehension.



19



18. 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 short Forms inside of your site, or app. Every little helps right?



20



19. Give Prominence to the most frequently used action in a Menu



When designing a Menu to use inside of an application, make sure to give the most frequently used action (ie; Upload Image, Add File etc...) the most prominence on the screen.



21



20. Try to create generous Tappable areas on Mobile



When designing for Mobile try to create Tappable Areas large enough for fingers to, well, tap successfully. Things can be challenging for Buttons, and Links that consist only of Text so try to go for an Icon with a Label whenever possible. Here’s the minimum recommended Tap Areas for both iOS and Android... 44 x 44pt for iOS 48 x 48dp for Android



22



21. 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.



23



I hope with this Cheatsheet you've gained a little more understanding on how the smallest tweaks to your UI can produce a much better end-result, for both yourself, and your user. If you have any questions, please get in touch - [email protected] Many thanks Marc Andrew https://marcandrew.me https://twitter.com/@mrcndrw



24