Practical UI

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. Introduction Hi, I’m Adham UI design doesn’t have to be so hard 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 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 Design for the smallest screen first Break up choices to speed up decision making 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 Understand light and dark interfaces 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 monochromatic colour palette Use the HSB colour system Create a light colour palette with rules that govern its usage Create a dark colour palette with rules that govern its usage Adjust photo colour temperature to match the colour palette 4. Layout and spacing Group related elements Create a clear visual hierarchy Test visual hierarchy using The Squint Test Use depth to create a 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 Make sure important content is visible Ensure an interface is unbreakable Use the Rule of Thirds for photos 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 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 7. 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 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 Write clear error messages Ensure form field labels are close to their fields Validate on submit rather than inline 8. 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 Conclusion Thanks for reading Don't just move stuff around until it looks prettyUser 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.