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

UI design book by Adham Dannaway

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.

Adham Dannaway
Pushing pixels since 2005

Some pages from the book

2 pages from the UI design book
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 quick and practical UI design guidelines and tips with examples. 

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

Visual examples

A picture is worth a thousand words

Following guidelines from the book, I designed hundreds of pixel perfect visual examples to clearly and quickly demonstrate concepts. If you don’t like heavy reading, you’ll love this book.

Visual UI design examples from the UI design book
Visual UI design examples from the UI design book
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.

Example of a large block of text
Example of a large block of text broken into smaller pieces
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.

Examples of different lengths of text
Applying guidelines

A quick case study

Let’s apply some of the UI design guidelines from the book to improve an interface design.

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

Many designers would look at the original design without seeing any issues. Some might make subjective comments based on aesthetics. Only a few would notice that there are numerous objective risks that could negatively affect usability and accessibility. Even fewer would be able to explain why. 

Let’s take a look at the “why” behind the updated design.

Original property details page design with usability issues highlighted
Updated property details page design with usability issues fixed

Rationale for the updated design

I didn’t update the design just to make it look better. How it looks is important, but so is how it works. The goal was to apply the guidelines from the book to find and fix potential usability risks. You might be thinking, isn’t that what usability testing is for?

In a perfect world, every detail of your product would be rigorously tested with a diverse range of real users. In reality, that’s simply not practical or economical. This is why reducing usability risks using tried and tested guidelines is so powerful.

Below, I’ve pointed out the problems with the original design and outlined the rationale (logical reasons) behind the updated design.

Original property details page design with usability issues highlighted

Problems with the original design

  1. Icon contrast is too low. UI elements should have a contrast ratio of at least 3:1 to be accessible. You’ll learn more about accessibility requirements in the book.
  2. Colour usage lacks purpose. Blue is also used for links, which makes the heading seem interactive even though it’s not.
  3. Icon styles are inconsistent, as some are filled and others aren’t. This can be confusing, as filled icons often indicate a selected state.
  4. 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.
  5. Centre aligned body text can be difficult to read. The line height should also be at least 1.5 and contrast increased to at least 4.5:1 to aid readability.
  6. Icons aren’t labelled and the blue colour makes them seem interactive which could be confusing.
  7. It could be unclear to the colour blind that ‘reviews’ is a link, as it’s relying on colour alone as an indicator.
  8. It’s unclear how many photos there are and the contrast is too low.
Updated property details page design with usability fixes highlighted

Rationale behind the updated design

  1. A drop shadow on the icon and gradient overlay on the top third of the image gives the icon sufficient 3:1 contrast.
  2. Blue is removed as the heading isn’t interactive. Instead, the darkest colour shade is used to make the heading prominent. Text is left aligned for consistency with the body text.
  3. Icons are all outlined with 1.5pt stroke weight and rounded corners for consistency.
  4. Contrast ratio is increased above 3:1 for accessibility, which also corrects the visual hierarchy. Blue is used consistently to indicate interactive elements.
  5. To improve readability, text is left aligned, line height is increased to 1.6, and contrast is increased above 4.5:1.
  6. Icons are labelled for clarity and accessibility. The blue colour is removed, as the icons aren’t interactive.
  7. 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.
  8. The number of photos is clearly indicated with a sufficient 4.5:1 contrast ratio.

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 globally. Check out my portfolio.

70,000+ followers

Adham Dannaway - UI designer
Qantas logo
Campaign Monitor logo
Australian Government logo
Westpac logo
Freelancer logo
NSW Government logo
Featured

Featured here & there

I’ve been lucky enough to have my work featured in books, magazines and websites around the world. 

Adham Dannaway in Smashing Book 2

Smashing Magazine’s popular second book

Adham Dannaway speaking at a design event

A global design event by General Assembly

Adham Dannaway featured in Web Designer Magazine

A flagship publication for designers globally

Testimonials

Kind words

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

Adrian Ciaschetti
UX designer

Such a useful and practical book by one of the best in the game 👏 Love this logic-driven approach to UI design. Surprisingly powerful.

5/5
Jon Alport
Engineer

As an engineer, I found the book to be really hands-on and easy to follow. Breaking down interface design into logical rules is genius.

5/5
Jake Shelley
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.

5/5

Frequently asked questions

If you have any other questions or feedback, please contact me and I’ll get back to you shortly. 

This book is best suited to those in the product design and development space with an interest in improving their UI design skills. You might know some of the basics, and may have dabbled in design, but still struggle to design an informed and professional interface:

  • Beginner/intermediate designers looking to quickly improve their UI designs.
  • User researchers who want to start designing interfaces.
  • Developers who no longer want to rely on a designer.
  • Experienced designers who design based on gut feeling but can’t explain why.
  • Product managers who want to better understand their products.

There are lots of different types of digital interfaces. This book mostly focuses on web and mobile applications.

That being said, the design guidelines are universal and also apply to marketing websites, e-commerce websites, software applications, and more.

The focus of this book is user interface (UI) design, which is made up of visual and interaction design. UI design is a large part of user experience (UX) design. 

You’ll learn how to design the interface that people interact with when they use a digital product. The actual pixels on a screen that make up a website or app. What it looks like, how it works, and why it works that way.

User research is another key part of UX design, but isn’t covered in this book.

No, you won’t learn how to use design tools, like Figma or Sketch. You also won’t learn how to write code or develop websites and apps. You’ll learn universal and timeless guidelines that will help you design better interfaces, regardless of the tools you use.

No. The book only comes in digital PDF format for now. If you’re interested in a printed book, subscribe to be notified if one becomes available.

I’d recommend getting the digital PDF either way, as there are lots of detailed visual design examples in the book. A digital version allows you to zoom in to see the detail.

If a printed option becomes available, I’ll make sure that those who already have the digital version can also get a physical copy for a cheaper price.

  • Low price: Video courses on UI design can cost you thousands of dollars. This makes them inaccessible to many. With a book format, you get the same information for a fraction of the price.
  • Faster to learn: I designed this book with efficiency in mind. Each guideline is quick to scan with lots of visual examples. 
  • Quick reference: A book format makes it quicker and easier for you to refer back to the design guidelines regularly.