Adham Dannaway – Practical UI – User interface design book

Description

Adham Dannaway – Practical UI – User interface design book download, Adham Dannaway – Practical UI – User interface design book review, Adham Dannaway – Practical UI – User interface design book free

Adham Dannaway – Practical UI – User interface design book

UI design is hard
just got easier
Learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines.

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.

No tedious, impractical, or vague interface design theory.
Just quick and actionable guidelines with examples and a logical rationale to help back up your design decisions.

Don’t just move stuff around until it looks pretty
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.

TARGET AUDIENCE
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.

BOOK CHAPTERS
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

WHAT’S INSIDE
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.

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

TYPOGRAPHY
Ensure ideal line length
To improve readability, ensure text is 40 – 80 characters per line (including spaces). If lines are too long, it makes it harder for people to gauge where the line starts and ends.

If lines are too short, your eyes get stressed from having to travel back too often. A comfortable line length is especially important for long body text.

APPLYING GUIDELINES
A quick case study
Let’s quickly redesign an example interface using some practical guidelines from the book.

The following 2 designs are for the property details page of a short-term property rental app. The first one is the original design. The second is the result of applying some quick guidelines from the book.

Even without much UI design experience, you’ll probably notice that the original design feels messy, complicated, and difficult to use. This is because it contains many problematic design details that pose a risk to usability. Perhaps you can already spot a few?

Minimise usability risks
How do you find these problematic design details? In a perfect world, you’d perform thorough usability testing on every little design detail, but that’s not realistic or economical.

Instead, you can quickly and easily minimise risks using tried and tested guidelines that are based on conventional best practices. This saves costly usability testing for higher risk design concepts that you’re less confident with.

Below, I’ve pointed out the problems with the original design and outlined the rationale (logical reasons) behind the updated design. You’ll find all of these guidelines, and hundreds more, in the book.

Problems with the original design

1. Icon contrast is too low. UI elements should have a contrast ratio of at least 3:1 to help people with vision impairments see them.
2. The white space around the image adds unnecessary visual complexity, which can increase cognitive load.
3. Text is inaccessible as the contrast ratio is less than 4.5:1.
4. Colour usage lacks purpose. Blue is also used to indicate links, which makes the heading seem interactive. The typeface is also difficult to read due to its complexity.
5. Uppercase text can be difficult to read. The shape of words helps you recognise the word more quickly. Uppercase words all have the same rectangular shape. Also, pure black text against white can cause eye strain.
6. It could be unclear to the colour blind that ‘reviews’ is a link, as it’s relying on colour alone as an indicator.
7. 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 makes them seem interactive, even though they’re not.
8. The lack of space between groups of content makes the design look cluttered and harder to understand.
9. Multiple issues combine to reduce the readability of the body text: centre alignment, short line height, low contrast, short x-height, and a thin font weight.
10. Button contrast is too low, so people with low vision might not identify it as a button. This also breaks the visual hierarchy, as the primary action should be the most prominent element on the screen.

Rationale behind the updated design

1. A shadow on the icon and gradient overlay on the top third of the image gives the icon sufficient 3:1 contrast.
2. Unnecessary visual complexity was removed by spanning the image from edge to edge, simplifying the design.
3. The contrast ratio is increased to 4.5:1 to make the text accessible. You’ll learn more about accessibility requirements in the book.
4. Blue is removed as the heading isn’t interactive. Instead, the darkest colour shade is used to make the heading prominent. The typeface is simplified to a sans serif to improve readability and make it neutral.
5. Sentence case is used to improve readability and a lighter colour shade helps reduce eye strain and correct the visual hierarchy. Secondary text should be less prominent than headings.
6. Colour and an underline are used to clearly indicate the link to people who are colour blind. Blue is used consistently to indicate interactive elements.
7. Icons are outlined with 2pt stroke weight and rounded corners for consistency. They’re also labelled for clarity and accessibility. The blue colour and button styling is removed, so they’re not mistaken for being interactive.
8. Increased spacing and borders help to clearly group content, simplifying it and making it easier to understand.
9. To improve readability, body text is left aligned, line height is increased to 1.6, contrast is increased above 4.5:1, typeface is changed to one with a tall x-height, and font weight is increased to regular.
10. The button contrast ratio is increased above 3:1, which also corrects the visual hierarchy. Blue is 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. Using objective logic, rather than subjective opinion, makes it faster and easier to design intuitive, accessible, and beautiful interfaces.

THE AUTHOR
Hi, I’m Adham
I’m a product designer from sunny Sydney, Australia. I specialise in UI design and design systems. For nearly 2 decades, I’ve enjoyed working on products used by millions of people around the world.

TESTIMONIALS
More kind words
My goal is that you’ll gain years of experience in a matter of hours. Here’s what some are saying.

Garron Engstrom – Product designer at Meta    
Garron Engstrom
Product designer
“I’ve never found a single resource that I can share with people to help them improve their UI design skillset. That just changed.”

Jake Shelley – Engineer    
Jake Shelley
Software engineer
“Wow, this book is 🔥. Probably the most actionable design advice I’ve ever seen. A quick and easy read with lots of stunning examples.“

Elliot Rylands – Product designer    
Elliot Rylands
Product designer
“A must have for anyone of any level within UX, UI, product, & even engineering. An excellent resource of design principles that will be my point of reference from here onwards.”

Buy the book
Video courses can cost thousands, making them inaccessible to many. A book format is a fraction of the price.

Frequently Asked Questions:

1. Innovative Business Model:
   • Embrace the reality of a genuine business! Our approach involves forming a group buy, where we collectively share the costs among members. Using these funds, we purchase sought-after courses from sale pages and make them accessible to individuals facing financial constraints. Despite potential reservations from the authors, our customers appreciate the affordability and accessibility we provide.
2. The Legal Landscape: Yes and No:
   • The legality of our operations falls into a gray area. While we lack explicit approval from the course authors for resale, there’s a technicality at play. When procuring the course, the author didn’t specify any restrictions on resale. This legal nuance presents both an opportunity for us and a boon for those seeking budget-friendly access.
3. Quality Assurance: Unveiling the Real Deal:
   • Delving into the heart of the matter – quality. Acquiring the course directly from the sale page ensures that all documents and materials are identical to those obtained through conventional means. However, our differentiator lies in going beyond personal study; we take an extra step by reselling. It’s important to note that we are not the official course providers, meaning certain premium services aren’t included in our package:
     • No coaching calls or scheduled sessions with the author.
     • No access to the author’s private Facebook group or web portal.
     • No entry to the author’s exclusive membership forum.
     • No direct email support from the author or their team.

   We operate independently, aiming to bridge the affordability gap without the additional services offered by official course channels. Your understanding of our unique approach is greatly appreciated.

Refund is acceptable:

• Firstly, item is not as explained
• Secondly, Item do not work the way it should.
• Thirdly, and most importantly, support extension can not be used.

Thank you for choosing us! We’re so happy that you feel comfortable enough with us to forward your business here.