Adham Dannaway – Practical UI – User interface design book
Learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines.
Gain years of design experience in a matter of hours.
A whole UI design course squeezed into a quick and easy read, packed with actionable guidelines and examples.
Use a system of logical guidelines, rather than just gut feeling.
Interface design might appear to be a magical art form, but a lot of it is made up from logical rules or guidelines.
Much more than just making an interface look pretty.
Learn the how and why behind UI design to ensure that every design detail has a logical purpose behind it.
Who’s this book for?
Beginner or intermediate designers, developers, user researchers, or product managers looking to design informed and professional website and mobile applications.
No vague, impractical theory. Just quick, actionable advice.
Rather than comprehensively detailing countless chapters of tedious, high-level design theory, I’ve created 8 concise chapters of the most important things you need to know about interface design, usability, and accessibility.
1. Fundamentals
Overarching UI design principles that form the foundation of the guidelines
2. Less is more
Practical techniques to simplify interfaces by removing unnecessary details
3. Colour
Learn how to use colour sparingly and purposefully to add meaning to an interface
4. Layout and spacing
Create a consistent spacing system and learn about alignment and layout
5. Typography
Learn a system of logical guidelines to make text beautiful and easy to read
6. Copywriting
Practical guidelines on how to write interface text that clearly communicates with people
7. Forms
Form patterns and principles to help people complete forms more quickly and easily
8. Buttons
Learn how to design descriptive and accessible buttons with a clear visual hierarchy
A few guidelines from the book
Here are 2 of 100+ design guidelines you’ll find in the book. Each guideline comes with visual examples and a clear rationale.
Break up content using descriptive headings and bullets
Break up large pieces of information into multiple smaller ones. This makes it easier and faster for people to understand.
Highlight key information using descriptive headings. This allows people to quickly scan information and get a better idea of the structure and organisation of content.
Some won’t read supporting text, so make sure headings make sense when read out of context. This also helps screen reader users, as they often listen to a list of all headings on a page before skipping to the information they’re after.
Problems with the original design
- Icon contrast is too low. Following WCAG 2.1 level AA guidelines, UI elements should have a contrast ratio of at least 3:1 to help ensure people with vision impairments can clearly see them.
- The white space around the image adds unnecessary visual complexity which can increase cognitive load.
- Text contrast is too low, so those with low vision could find it difficult to read. Small text (18px and under) needs a minimum contrast of 4.5:1.
- Colour usage lacks purpose. Blue is used to indicate links, which makes the heading seem interactive. The typeface is also a bit difficult to read due to its complexity.
- Location text is difficult to read as it’s uppercase, low contrast, and has a thin weight.
- It could be unclear to the colour blind that “reviews” is a link, as it’s relying on colour alone as an indicator.
- Icon styles are inconsistent, as some are filled and others aren’t. Icons aren’t labelled, making their meaning unclear. The icon containers also have a similar visual style to the “book now” button, which misleadingly makes them seem interactive.
- The lack of space between groups of content makes the design look cluttered and difficult to understand.
- Multiple issues combine to reduce the readability of the description text: centre alignment, short line height, pure black colour, and short x-height.
- Button contrast is too low, so people with low vision might not identify it as a button. This also confuses the visual hierarchy, as the primary action should be the most prominent element.
Rationale behind the updated design
- Adding a shadow to the icon and a gradient overlay on the top of the image gives the icon sufficient 3:1 contrast.
- Unnecessary visual complexity was removed to decrease cognitive load (the amount of brain power required to use an interface).
- The contrast ratio was increased to 4.5:1 to help ensure it’s legible to those with low vision.
- Blue was removed and the darkest colour shade was used instead for prominence. The typeface was also simplified to a sans serif, as they’re generally the most legible, neutral, and simple.
- To improve readability the location text was changed to sentence case, contrast was increased above 4.5:1, and the font weight was increased to regular.
- Colour and an underline were used to clearly indicate the link to people who are colour blind. Blue was used consistently to indicate interactive elements.
- Icons were outlined with 2pt stroke weight and rounded corners for consistency. They were also labelled for clarity. The blue colour and button styling was removed, so they’re not mistaken for being interactive.
- Increased spacing and borders help to clearly group content, simplifying it and making it easier to understand.
- To improve readability, body text was left aligned, line height was increased above 1.5, and the typeface was changed to one with a tall x-height. Instead of pure black, a lighter colour shade helps to reduce eye strain and correct the visual hierarchy.
- The button contrast ratio was increased above 3:1, which also corrects the visual hierarchy. Blue was used consistently to indicate interactive elements.
That’s a wrap
I hope this small case study has shown you how quick and easy it is to make informed design decisions based on logical guidelines. The above guidelines and hundreds more are explained in detail in the book.
UI design doesn’t have to be so hard. It might appear to be a magical art form, but a lot of it is made up from logical rules or guidelines. Using objective logic, rather than subjective opinion, makes it faster and easier to design intuitive, accessible, and beautiful interfaces.
Reviews
There are no reviews yet.