PracticalUi's profile picture. A book to learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines.

PracticalUI

@PracticalUi

A book to learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines.

PracticalUI 님이 재게시함

😓 UI design is hard, but it doesn't have to be 🥳 A lot of what makes up an intuitive, accessible, and beautiful interface design can be learned. Let’s quickly redesign an example interface using 16 logical design tips 👇

AdhamDannaway's tweet image. 😓 UI design is hard, but it doesn't have to be 🥳

A lot of what makes up an intuitive, accessible, and beautiful interface design can be learned.

Let’s quickly redesign an example interface using 16 logical design tips 👇

PracticalUI 님이 재게시함

⚡️ UI design tip - Use a typeface with taller lowercase letters The height of lowercase letters in a typeface is known as the x-height. Typefaces with a taller x-height and greater letter spacing are generally easier to read. 👇

AdhamDannaway's tweet image. ⚡️ UI design tip - Use a typeface with taller lowercase letters

The height of lowercase letters in a typeface is known as the x-height. 

Typefaces with a taller x-height and greater letter spacing are generally easier to read.

👇

PracticalUI 님이 재게시함

❖ Component interactive states in my @PracticalUI Figma design system. • Default • Hover • Press • Focus • Disabled #ux #designsystem


PracticalUI 님이 재게시함

📸 Photographer profile page - Made with @PracticalUi

AdhamDannaway's tweet image. 📸 Photographer profile page

- Made with @PracticalUi

PracticalUI 님이 재게시함

⚡️ UI design tip - Ensure interface elements have a 3:1 contrast ratio Star ratings, like the following example, often lack sufficient contrast. Simply adding a darker border gives them sufficient 3:1 contrast, which means more people will be able to see the rating 🙌 #ux #a11y

AdhamDannaway's tweet image. ⚡️ UI design tip - Ensure interface elements have a 3:1 contrast ratio

Star ratings, like the following example, often lack sufficient contrast. Simply adding a darker border gives them sufficient 3:1 contrast, which means more people will be able to see the rating 🙌

#ux #a11y

PracticalUI 님이 재게시함

⚡️ UI design tip: Ensure similar looking elements function similarly In this example, the “verified” badges look similar to the primary “follow all” button. They’re not interactive elements, so they should look different to the primary button to help avoid confusion. Thoughts?

AdhamDannaway's tweet image. ⚡️ UI design tip: Ensure similar looking elements function similarly

In this example, the “verified” badges look similar to the primary “follow all” button. They’re not interactive elements, so they should look different to the primary button to help avoid confusion.

Thoughts?

PracticalUI 님이 재게시함

🙅‍♂️ Avoid form placeholder text 1. It disappears on focus so you forget what the field is for. 2. It can look like the field is filled. 3. Low contrast / inaccessible. Display label and hint above inputs so they're always visible and aren't covered by autocomplete menus.

AdhamDannaway's tweet image. 🙅‍♂️ Avoid form placeholder text 

1. It disappears on focus so you forget what the field is for.
2. It can look like the field is filled. 
3. Low contrast / inaccessible.

Display label and hint above inputs so they're always visible and aren't covered by autocomplete menus.

PracticalUI 님이 재게시함

UI design isn't magic ✨ Over nearly 2 decades working as a product designer, I’ve realised that most of my UI design decisions are governed by a system of logical guidelines. Here's a quick example of some logic-driven design guidelines in action 👇


PracticalUI 님이 재게시함

⚡️ UI design tip: Ensure spacing looks balanced for buttons with icons Handy little Figma button trick I learned from Jordan Amblin 👇 ✅ Wrap the label in an auto layout frame with 4px padding. ✅ Apply 12px padding to the button. ✅ Apply a boolean to the icon.

AdhamDannaway's tweet image. ⚡️ UI design tip: Ensure spacing looks balanced for buttons with icons

Handy little Figma button trick I learned from Jordan Amblin 👇

✅ Wrap the label in an auto layout frame with 4px padding.
✅ Apply 12px padding to the button.
✅ Apply a boolean to the icon.

PracticalUI 님이 재게시함

🎨 UI design tip: Name colours based on how they're used Here's my simple but powerful token naming structure to keep colours organised 👇 [element.tone.emphasis.state] This is just 1 of 100+ guidelines from my @PracticalUI design book. Get 40% off this Black Friday week 🙌

AdhamDannaway's tweet image. 🎨 UI design tip: Name colours based on how they're used

Here's my simple but powerful token naming structure to keep colours organised 👇

[element.tone.emphasis.state]

This is just 1 of 100+ guidelines from my @PracticalUI design book. Get 40% off this Black Friday week 🙌

PracticalUI 님이 재게시함

❖ How to create typography variables in Figma👇 Text styles use variables for: ◆ Font family ◆ Font weight ◆ Font size ◆ Line height Makes it faster & easier to customise typography. From my @PracticalUi Figma design system. What do yours look like?

AdhamDannaway's tweet image. ❖ How to create typography variables in Figma👇

Text styles use variables for:  

◆ Font family 
◆ Font weight 
◆ Font size 
◆ Line height  

Makes it faster & easier to customise typography.

From my @PracticalUi Figma design system.

What do yours look like?

PracticalUI 님이 재게시함

🚨 40% off my UI design book @PracticalUI this week only 🥳 Ends Monday 27 November at midnight EST Link below 👇 PS I'm working on adding some free updates to the book as well as a Figma design system that follows the book's guidelines 🙌 #ux #uxdesign

AdhamDannaway's tweet image. 🚨 40% off my UI design book @PracticalUI this week only 🥳

Ends Monday 27 November at midnight EST

Link below 👇

PS I'm working on adding some free updates to the book as well as a Figma design system that follows the book's guidelines 🙌

#ux #uxdesign

PracticalUI 님이 재게시함

💥 16 little UI design rules that make a big impact UI design might appear to be a magical art form, but a lot of it is made up from logical rules or guidelines. We’ll redesign an example interface using 16 of 100+ guidelines from my book - @PracticalUI A mega thread👇

AdhamDannaway's tweet image. 💥 16 little UI design rules that make a big impact

UI design might appear to be a magical art form, but a lot of it is made up from logical rules or guidelines. 

We’ll redesign an example interface using 16 of 100+ guidelines from my book - @PracticalUI

A mega thread👇

🚨 Launch alert 🚀 My UI design book @PracticalUI 📘 is live on @ProductHunt 🥳 I spent thousands of hours over 1.5 years crafting a book to teach anyone how to design user interfaces using logical rules. I'd love your support and feedback. Thanks 🙏 👉 producthunt.com/posts/practica…

AdhamDannaway's tweet image. 🚨 Launch alert 🚀

My UI design book @PracticalUI 📘 is live on @ProductHunt 🥳

I spent thousands of hours over 1.5 years crafting a book to teach anyone how to design user interfaces using logical rules.

I'd love your support and feedback. Thanks 🙏
👉 producthunt.com/posts/practica…


Loading...

Something went wrong.


Something went wrong.