Practical UI - 2nd Edition

Learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines. Interface design is hard. Having endless design possibilities sounds great in theory, but in practice, it can be frustrating and time consuming. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder. Luckily, UI design doesn’t have to be so hard. Over the years, I’ve realised that most of my UI design decisions are governed by a system of logical guidelines. Not artistic flair or magical intuition, just simple guidelines. Sure, artistic talent helps, but a lot of what makes up an intuitive, accessible, and beautiful interface design can be learned. Having a system of logical guidelines helps you efficiently make informed design decisions. Without a logical system, you’re just using gut feeling to move stuff around until it looks pretty. I wish I knew these guidelines when I first started out. They're a culmination of nearly 2 decades working as a product designer on websites and apps used by millions of people. My hope is that they’ll help you gain years of experience in a matter of hours. Introduction Hi, I’m Adham UI design doesn’t have to be so hard A tutorial to apply what you’ve learned 1. Fundamentals Minimise usability risks Have a logical reason for every design detail Minimise interaction cost Minimise cognitive load Create a design system Ensure an interface is accessible Use common design patterns Use the 80/20 Rule to prioritise Keep costs in mind Be consistent Clearly indicate interaction states Tutorial - Fundamentals Chapter summary 2. Less is more Remove unnecessary information Remove unnecessary styles Not all links need to be underlined Use progressive disclosure Don’t confuse minimalism with simplicity Make sure important content is visible Design for the smallest screen first Reduce choice to speed up decision making Tutorial - Less is more Chapter summary 3. Colour Ensure sufficient contrast Don’t rely on colour alone to convey meaning Use system colours to indicate status Use colour to define a clear visual hierarchy Use black and white for a timeless aesthetic Add a tinge of colour to black and white Use 1 brand colour Apply the brand colour to interactive elements Create a colour palette with rules that govern its usage Use the HSB colour system 5 colour variations is often all you need Create a dark colour palette Add depth using colour and shadows Consider using transparent colours Create a transparent colour palette Use transparent layers for interaction states Name colours to keep them organised Adjust photo colour temperature to match the colour palette Tutorial - Colour Chapter summary 4. Layout and spacing Group related elements Create a clear visual hierarchy Test visual hierarchy using The Squint Test Use depth to create visual hierarchy Understand the box model Design @1x using points Create a set of predefined spacing options Space elements based on how closely related they are Be generous with white space Align the main layout to a 12 column grid Align text to improve readability Try to avoid using multiple alignments Keep related actions close Ensure an interface is unbreakable Use the Rule of Thirds for photos Tutorial - Layout and spacing Chapter summary 5. Typography Use a single sans serif typeface Evoke emotion using a second typeface for headings Use regular and bold font weights only Use a type scale to set font sizes Make long body text bigger Use at least 1.5 line height for long body text Decrease line height as font size increases Ensure ideal line length Left align text Decrease letter spacing for large text Ensure text on photos is legible Avoid light grey and pure black text Tutorial - Typography Chapter summary 6. Copywriting Be concise Use sentence case Use plain and simple language Front-load text Use the inverted pyramid Limit the use of abbreviations and acronyms Limit the use of UPPERCASE Break up content using descriptive headings and bullets Avoid using “my” on form labels Use vocabulary consistently Use numerals for numbers Avoid full stops if possible Ensure text length is similar across similar interface elements Ensure text links describe their destination Write clear error messages Tutorial - Copywriting Chapter summary 7. Buttons Define 3 button weights Use a single primary button for the most important action Use secondary buttons for less important actions Use tertiary buttons for the least important actions Try to avoid disabled buttons Left align buttons Ensure button text describes the action Ensure buttons have a sufficient target size Balance icon and text pairs Add friction to destructive actions Tutorial - Buttons Chapter summary 8. Forms Stack forms in a single column layout Minimise the number of form fields Mark optional fields Try to avoid optional fields by using opt-ins Mark both required and optional fields Match field width to the intended input Stick with conventional form field styles Display hints above form fields Don’t use placeholder text instead of a label Ensure form field labels are close to their fields Try to use radio buttons instead of dropdowns Use an autocomplete instead of a long dropdown Use steppers for numeric fields instead of dropdowns Use a checkbox or toggle switch for 2 options Use positive phrasing for checkboxes Break up long forms into multiple steps Group related fields under headings Ensure form field borders are high contrast Choose your form validation approach Chapter summary Conclusion Closing thoughts Learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines. Interface design is hard. Having endless design possibilities sounds great in theory, but in practice, it can be frustrating and time consuming. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder. Luckily, UI design doesn't have to be so hard. Over the years, I've realised that most of my visual and interaction design decisions are governed by a system of logical rules. Not artistic flair or magical intuition, just simple rules. Sure, artistic talent helps, but a lot of what makes up an intuitive, accessible, and beautiful interface design can be learned. Having a system of logical rules helps you efficiently make informed design decisions. Without a logical system, you're just using gut feeling to move stuff around until it looks pretty. I love rules and logic, but design decisions are rarely black and white. Rather than strict rules that you must follow, think of the advice in this book as helpful guidelines that work well in most cases. I wish I'd known these guidelines when I first started out. They're a culmination of nearly 2 decades working as a product designer on products used by millions of people. My hope is that they'll help you gain years of experience in a matter of hours.