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.
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
User 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.
Some pages from the book
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.
“I’ve been following Adham for years, he’s always been a big inspiration. His book is clear, concise, and packed full of visual and interaction design tips.”
“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.“
“Such a useful and practical book by one of the best in the game. Love this logic-driven approach to UI design. Surprisingly powerful.“
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 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 UI design book.
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.
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.
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, clearly explained in the book.
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.
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. Check out my portfolio.
100,000+ followers
Featured here & there
I’ve been lucky enough to have my work featured in books, magazines and websites around the world.
Loved by thousands
My goal is that you’ll gain years of experience in a matter of hours. Here’s what some are saying.
“I’ve never found a single resource that I can share with people to help them improve their UI design skillset. That just changed.”
“Wow, this book is 🔥. Probably the most actionable design advice I’ve ever seen. A quick and easy read with lots of stunning examples.“
“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.”
“A great reference that includes numerous examples, clear language, and actionable advice. I’d highly recommend it to anyone looking to improve their UI design skills.”
“As a self-taught designer, I’m blown away by this book! It’s concise and well-written with lots of visuals, making professional concepts so easy to learn.”
“Adham doesn’t waste time and gets straight to business. This book is full of brilliant advice, backed by great visuals and a reason behind each piece of UI.”
Buy the book
Video courses can cost thousands, making them inaccessible to many. A book format is a fraction of the price.
Free preview
Try it before you buy it
$0
- Preview in PDF format
- 3 free guidelines
- 28 pages
Buy the book
Individual licence for 1 person
$99$79USD+ tax
- Book in PDF format
- 282 pages
- 8 concise chapters
- Lifetime updates
Buying for your team?
View team pricing options
- Secure payment with Gumroad
Frequently asked questions
If you have any other questions or feedback, please contact me and I’ll get back to you shortly.
Who is this UI design book for?
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.
While the book wasn’t created for experienced designers, some may find it useful. Especially if you design based on gut feeling and can’t explain why.
The book is best suited to:
- 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.
- Product managers who want to better understand their products.
Does this book cover UI design for apps or websites?
There are lots of different types of digital interfaces. This UI design 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.
Is UX design covered too?
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.
Will I learn how to use Figma or write code?
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.
Is there a printed version of the book?
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.
Why a book and not a video course?
- Low price: Video courses on UI design can cost thousands of dollars, making them inaccessible to many. A book format is a fraction of the price.
- Faster to learn: Video courses can take a long time to get through. I designed this book with efficiency in mind. It’s 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.
How do team licences work?
Please purchase a team licence if the book will be read by more than 1 person.
You can save up to 40% when you buy the book for your team. The discount depends on the number of people in your team and you’ll receive a single invoice.
If the team pricing options aren’t suitable, contact me and I’ll send you a discount code to share with your team.
Each team member can use the discount code to buy the book and receive their own invoice. Let me know how many team members you have, so I can send you the right amount of discount codes.
Do you have an affiliate program?
Yes. Becoming an affiliate is a quick and easy way to make money from referring people to buy Practical UI. You receive 20% of every sale you refer. There’s no limit.
- Create a free Gumroad account
- Apply to become an affiliate
- Once approved you can start sharing your unique affiliate link
Since team prices are already discounted, you’ll earn 10% for team referrals. Learn more about Gumroad’s affiliate program.
Do you offer refunds?
Yes. If you’re unhappy with your purchase please contact me within 30 days and I’ll refund you in full.
I spent thousands of hours creating Practical UI, so please let me know why it wasn’t a good fit for you. This will help me improve it.
To make sure the book is right for you, please carefully read this page and download the free preview before buying the book. Let me know if you have any questions.
Can I get an invoice?
Yes, you’ll be able to quickly generate an invoice from your Gumroad email receipt.
What payment options are available?
Payment is securely handled by Gumroad. They accept the majority of credit cards and PayPal. Payment options include: PayPal, Apple and Google Pay, Visa, Mastercard, AMEX, Discover, Maestro, and Diner’s Club.
Do you offer student pricing?
Yes, just email me from your student email and I’ll send you a discount code to get 50% off the retail price of the book.
Student pricing can’t be used in conjunction with parity pricing or other discounts.
Do you support purchasing power parity?
Yes. Purchasing power parity helps make the book equally affordable across different countries. If you’re located in a country that qualifies, you’ll see a banner at the top of the website with a special discount code. Apply the code during checkout.