Tweet

@PracticalUI

@PracticalUi

@PracticalUI

More from @AdhamDannaway

Adham Dannaway

@AdhamDannaway

Mar 14

@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👇

1. Use space to group related elements

The lack of space between content makes the design look cluttered and difficult to understand. Increasing spacing helps to clearly group content, making it more organised and easier to understand.

2. Be consistent

Similar elements should look and work in a similar way. This should be true both within your product and when compared with others.

This predictable functionality improves usability and reduces errors, as people don't need to keep learning how things work.

Read 28 tweets

Adham Dannaway

@AdhamDannaway

Mar 14

@PracticalUi

🚨 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…

@PracticalUi

@PracticalUi @ProductHunt Going up against all the AI app companies on Product Hunt is tough 😮

Here's how things are going after the first hour. Wish me luck and/or send me tips/advice 😅 Thanks

4 hours in and I've dropped to 7th position.

The AI tool in 1st position has over 400 upvotes already 🤯 Looks like their whole company is behind the launch.

Tough to compete as a company of 1 😅

Read 4 tweets

Adham Dannaway

@AdhamDannaway

Feb 12

@vitalyf

Usability pitfalls of disabled buttons

Disabled buttons can cause users to get blocked without knowing why, causing abandonment and frustration.

Tips on how to deal with disabled buttons from @vitalyf's video course - Smart Interface Design Patterns 👇

#design #ui #ux #uxui

Always keep buttons enabled by default

Always keep buttons enabled by default and allow users to interact with them. Disabled buttons can cause users to get blocked without knowing why causing abandonment and frustration.

Point to errors on submit

On submit, explain to users why they can’t proceed, and how to fix errors:

• For a single error, point users to the invalid input via a text link.
• For multiple errors, display an error summary at the top and link to it.

Read 8 tweets

Adham Dannaway

@AdhamDannaway

Dec 20, 2022

@robhope

🔥 100 Landing page hot tips
By @robhope

Improve your landing page designs with these quick and actionable tips.

Here are a few of my faves 👇

#landingpagedesign #design #uxdesign #webdesign #uxui

🔥 Spice up those Call-To-Action (CTA) buttons.

You are excited to share your product/service.

🚫 Click Here
🚫 Sign Up

Use actionable phrases.

✅ Discover the wonders of science
✅ Request a call from our agents
✅ Unlock creativity for only $19

🔥 When in doubt, double the padding.

"Whitespace" is not just breathing room for your content but breathing room for the visitor.

Digestible content improves focus and allows for a better understanding of your offering.

Read 6 tweets

Adham Dannaway

@AdhamDannaway

Nov 23, 2022

⚡️ UI design tip

I’ve been doing buttons wrong! 😱 Have you? 🤔

After nearly 2 decades looking at buttons, I've noticed that most of them have usability and accessibility issues.

Here are some quick and practical tips to avoid common mistakes 👇

#design #uidesign #uxdesign

✅ Define 3 buttons styles (primary, secondary and tertiary) to display actions of varying importance.

✅ Ensure buttons have a clear visual hierarchy that isn't reliant on colour alone.

✅ Ensure contrast ratio of the button shape is at least 3:1 to meet WCAG 2.1 level AA accessibility requirements.

✅ Ensure button text contrast ratio is at least 4.5:1.

✅ Use a large target area (at least 48pt by 48pt) to ensure people can easily select buttons.

Read 4 tweets

Adham Dannaway

@AdhamDannaway

Nov 21, 2022

⚡️ UI design tip - Use the inverted pyramid

The inverted pyramid is a writing structure in which the most important information is placed at the start, followed by supporting information and smaller background details.

Learn why it's great for interface text 👇

#uidesign #uxui

✅ It gets to the point quickly, helping people understand information and make decisions faster.

✅ People who quickly skim the first sentence will still get the main point.

✅ Additional information is there for those who need it.

📘 PS If you like this tip, you’ll like my UI design book.

It's being released on 28 Nov 2022 (8am ET) 🥳.

Subscribe to get a discount code once the book's released
👉 practical-ui.com

Read 4 tweets

Share this page!

Adham Dannaway

People who liked this thread also liked...

Try unrolling a thread yourself!

More from @AdhamDannaway

Adham Dannaway

Adham Dannaway

Adham Dannaway

Adham Dannaway

Adham Dannaway

Adham Dannaway

Did Thread Reader help you today?

Don't want to be a Premium member but still want to support us?

Send Email!