RECOMMENDED

UI Design Tips by Jim Raptis

Learn how to design better user interfaces with 100+ practical UI design tips and real examples — covering spacing, color, typography, buttons, and cards. Every tip is tested in real-life products.

Social Login
Social login boosts conversion since users can easily join your platform. Then, it's a good practice to put your social login on top of the page and place the email password authentication below. Beware that privacy-oriented people prefer not to use social login then it's always good to have another option for them.
ux
login
auth
Design Better Menus
Menus have readability issues very often A quick hack to make them look and function better is to add an icon next to every action. In that way, you help users visually identify actions without having to read the whole copy. Also, it's a good practice to highlight the active tab, if it's applicable to the menu's use case.
ui
visual effect
menu
The Gutenberg Principle
## What is The Gutenberg Principle or Z-pattern layout in UI design? The Gutenberg Principle (aka Z-Pattern Layout) states that users' eyes travel according to a Z-shaped path from the top-left area to the bottom-right area. ## How the Gutenberg Principle can help us It's a good practice to place your CTA at the end of this flow to lead users to take action.
cta
ux
ux-laws
Delete Modal
Pay extra attention to your buttons' copies. Avoid generic out-of-context copies, like 'Yes' or 'No'. Instead, use a sentence to communicate clearly the button's actions.
cta
dangerous actions
ux
Align Uneven Elements
In many cases, you have to align uneven in size elements. Even if you set the spacing between the elements to be the same, the visual result seems off. The best way to fix this visual issue is by setting the same width for all the elements. *Hint:* Pick the width of the biggest element and apply it to all the other items.
ui
alignment
De-emphasize Dangerous Actions
Always try to de-emphasize dangerous actions like deletion. You have to prioritize the default action instead of the dangerous/irreversible one. Also, use more than one trait to make the element look like a secondary action (color, size, type, placement, etc).
ui
ux
visual effect
dangerous actions
Always Have A CTA
Always have a CTA button on your website's above the fold section Many of your visitors might never scroll down your landing page So you need to offer them an option to convert immediately.
ux
conversions
The Perfect Header
A good header needs to put attention on the title and then lead the reader to the description, which must be readable. A few quick hacks to achieve this hierarchy include: 1. Stronger font-weight for the title 2. A consistent type scale system. The most common is x1.25, which means that if the title is 40px, the subtitle must be 40/1.25 = 32px. 3. Lower contrast for the subtitle 4. Proper line-height for the description text. 5. Left alignment, since it boosts readability
hierarchy
ui
ux
visual effect
header
Validate Deletion
Never allow the user to delete something without validation. People misclick all the time, and losing information forever hurts and creates a bad memory related to your product! Make sure your UI supports (inline or popup) deletion validation. Even the undo functionality is useful in these scenarios, although it's impossible sometimes due to engineering restrictions.
dangerous actions
ux
Empty State With Templates
Upgrade your UI empty states with templates! Instead of redirecting people to create content from scratch, make their lives easier. Use pre-made templates to help them experience your product's value quicker and boost your product adoption at the same time.
on-boarding
ux
Inform Users Beforehand
Never let users guess what's the next step on your user journey. Have in mind that conversions might be low because people are afraid to press a button. A strong message (like "Reserve") adds stress and makes people wonder whether they'll be charged or not.
ux
on-boarding
cta
How to Align Uneven Items
Aligning uneven items can become weird Even if the spacing between them is the same, the visual result seems off sometimes. A super-quick fix is to set the same width for all the elements. Pick the width of the biggest element and apply it to all the other items.
alignment
ui
visual effect
Fallback for Transparent Avatars 1
Many platforms (like Twitter) allow PNG avatars that can cause UI inconsistencies To avoid this problem add a subtle border and background color to the avatar that is the same as the app's background.
avatar
visual effect
ui
Fallback for Transparent Avatars 2
Another visual hack to ensure consistency for transparent avatars is by adding a subtle border around them, the same color as the background. The border looks like it's part of the background and distinguishes it from the cover section.
avatar
visual effect
ui
Consistent Border-Radius
Round images usually look weird when they're included in a card with a small border-radius. Use the simple rule of thumb: 𝙊𝙪𝙩𝙚𝙧 𝙍𝙖𝙙𝙞𝙪𝙨 = 2 * 𝙄𝙣𝙣𝙚𝙧 𝙍𝙖𝙙𝙞𝙪𝙨 * The precise formula is more complicated since you need to take into account the spacing between the two borders, so let's it simple!
card
ui
visual effect
How to Apply the Brand Color
Colors are a core element for any user interface. One of the most common mistakes in UI design is the over usage of the brand color. Avoid it by highlighting only the most important elements of your interface with your primary color. For the rest of the elements, combine tints & shades of your main color.
color
ui
visual effect
hierarchy
Distinguish Selected Items
Always make sure that your selected items are easily identified at a glance. Changing the background color is a simple and accessible way to achieve it! It makes the user experience better since the user can easily figure out which elements are already selected.
ux
ui
visual effect
hierarchy
Use Better Link Button
Links are important and you need to treat their appearance nicely. Many times a traditional button works better than a single link. Especially if the link is not on a header, footer, or the body of an article. Always make the copy actionable and hint at the action they initiate.
button
cta
ux
ui
Use Consistent Buttons
Your design, and mostly your buttons, need to be consistent thought the user interface. Keep this in mind especially for the header (hero) section. Don't confuse your visitors with different buttons in styles and copy. For almost all cases, you only need **a single primary CTA** for your top screen.
button
cta
ux
ui
conversions
Direct User Attention with Media
Leverage visuals to direct user's attention As humans, we tend to follow another person's line of sight. Take advantage of this effect, by prompting people to focus on individual elements (A) or scroll (B).
attention
ux
conversions
visual effect
Prompt User to Scroll
Your website needs to prompt users to scroll to communicate your product's value better. Especially when the header content is not enough to describe your product's value. A simple hack to prompt users to scroll is by showing them a glimpse of the next section. In that way, the user knows there is more information on the site and becomes curious to explore it further.
landing page
conversions
ux
visual effect
Highlight The Best Offer
Always highlight your best pricing plan and make it pop out. In that way, you help users identify the most used plan and you promote your top offer. It's a win-win situation. To highlight the plan, use more than one design ways, eg. color, size, elevation (aka shadow)!
hierarchy
ux
ui
conversions
pricing
Avoid Fullwidth Paragraphs
Long lines can bore users and create readability problems. Fix it by limiting the line's width between 500px and 700px. Instead of pixels, you can restrict the character number per line as well. In CSS, it's easy to set this up by using the "ch" unit: `10ch is x10 times the width of the character 0`
text
readability
ux
ui
Make Cards Look Clickable
In many cases, cards fail to indicate that they're clickable. Designers omit CTA buttons and only count on the user's experience or/and, hover effects. **In design, it's always a good practice to never leave things on user imagination.** Instead use an actionable button to prompt clickability and describe the action.
cta
button
card
ui
ux
Make Inputs Self-Explanatory
The two "secret" weapons to enhance your input fields are the placeholder text & its type.⠀ ⠀ 1. Leverage the placeholder text to guide users instead of just repeating the label. ⠀ ⠀ 2. Limit the wrong input source (eg add country code) by using predefined values for common inputs.⠀
forms
input
ui
ux
Pick The Correct Element
Make it as simple as possible for users to enter their information.⠀ ⠀ Choosing the right UI element plays a huge part in upgrading UX.⠀ ⠀ For example, use a number picker for integer numeric values instead of a generic text field. In eCommerce carts, most users will buy 1, or 2 items maximum. The -/+ buttons make their input process quicker.
conversions
forms
input
cta
ux
ui
How To Enhance Hierarchy
Visual hierarchy is important in design because it boosts the user experience and leads the user attention Your No.1 priority is to make your primary action (aka CTA) prominent. In this case, the button that initiates the booking process is the main CTA. Then you need to make text readable & distinguish element types. eg. Tags must not look like the primary button. Play with text attributes (weight, size, line height) to hack visual attention & hierarchy.
visual effect
how
cta
ux
ui
Make Tooltips Responsive
The classic tooltip is activated once the user hovers over the element... On desktop, this works perfectly! However mobile devices don't support the hover effect To deal with this, add a clickable help icon next to your button. When the mobile user taps on the icon, show the complementary tooltip text.
mobile
ux
tooltip
accessibility
Choose Chart Types Carefully
Line charts might look trendier but they don't apply to every case. When the x-axis has limited options, a bar chart is the most appropriate graph type. Plus, the line chart might introduce false intermediate values. For the specific example, let's say that you only had data for the total monthly orders (not individual days) The line chart makes the data look daily, which is incorrect!
chart
ux
ui
Padding On Rounded Cards
The left cards use the same padding around the card. Yet the visual result seems off. A quick fix is to make the padding larger when the element on the edge is not round - like icons and text. The rule of thumb is to use **double the padding** on the edge which is not round.
visual effect
ui
card
Visually Distinguish Elements
Visually distinguish elements by applying unique shapes, colors, copies, and/or icons. In that way, you ensure that visual hierarchy works perfectly and you avoid accessibility issues. To boost the strength of the visual effect use multiple attributes (color + icon) and not a single one (only color). The latter helps you avoid accessibility issues as well. Color blind people won't notice the color changes.
visual effect
ui
ux
button
Support Icons With Labels
Icons can often confuse users or get misinterpreted by different people due to their experience level or even due to their culture. Fix this accessibility issue is by adding a subtle text label near the icon which will describe its usage. Keep this information in mind especially for mobile interfaces which don't support hover effects.
icon
accessibility
ux
ui
mobile
Use Labels Cleverly 2
A smart use case for labels is on color pickers with predefined values. Depending on the app's context you can even omit labels. Consider keeping them for color-blind people who struggle to identify colors though.
accessibility
labels
forms
ux
Use Labels Cleverly 1
Complement your link copy with a visual representation of the selected value. In this example, the labels show you how capitalization will look. It's not always possible to do this hack, so go all into it when the opportunity presents itself.
labels
ux
forms
Display Useful Shortcuts
Keyboard shortcuts boost productivity and save time for power users. Yet it's sometimes difficult to remember them. Take advantage of Fitts's law* and place your shortcut keys next to the action button. In that way, the user doesn't need to remember the action. *The time to acquire a target is a function of the distance to and size of the target.
ux-laws
cta
ux
on-boarding
ui
User Hate Surprises
With a simple UX copy adjustment, you can avoid misunderstandings and upgrade your product experience.⠀ ⠀ This is a real-life example from the voice messaging app [Yac](https://www.yac.com/).⠀ ⠀ I literally spend 30' wondering if the app will auto-post my voice message in the channel or allow me to hear and edit it first.⠀ ⠀ In the end, I recorded it on my phone and hit the "Record" button with the recorded message ⠀ A tiny detail can introduce so much friction!⠀
ux
cta
Prioritize UX
Instagram recently launched Shop. The decision to place it at the position of the Activity tab is not random... 1. More reachable since it's in the Thumb Zone 2. More accidental clicks bc users will reach for the activity tab This might lead to better conversions but make the user experience x10 worse. 10 annoyed users are far worse than an extra customer.
conversions
ux
Hack Visual Hierarchy
Hack visual hierarchy with these simple hacks: • Reduce the opacity of secondary info • Use bold font-weight to emphasize • Scale your title's size by a fixed ratio (eg x1.25) • Arrange elements to the left side (for LTR users) • Group together relevant elements
how
visual effect
hierarchy
ux
ui
Visually Separate Elements
Prefer to visually separate menu sections with whitespace. Whitespace makes the UI look cleaner and request less cognitive effort from the user. In the example below: - A uses dividers for everything - B uses a divider between sections - C uses only whitespace A is too complex and distracts the user, but both B & C can be used on real-life user interfaces. B puts more attention on differentiating the sections. C makes the UI look cleaner.
visual effect
hierarchy
ui
ux
whitespace

Frequently asked questions about UI design tips

What are UI design tips?

UI design tips are short, practical guidelines that help you design clearer, more usable interfaces — covering spacing, color, typography, hierarchy, buttons, and cards. Each tip targets one common mistake and shows a before/after example you can apply immediately.

How can I improve my UI design skills?

Improve your UI design by studying real product examples, applying one focused principle at a time, and reviewing your work against consistent rules for spacing, alignment, contrast, and visual hierarchy. Practicing with small, tested tips builds intuition faster than redesigning everything at once.

What is the difference between UI and UX design?

UI design focuses on the visual interface — layout, color, typography, and components — while UX design focuses on the overall experience, flows, and how easily users reach their goals. Great products need both: a clear interface and a smooth experience.

Are these UI tips suitable for beginners?

Yes. Every tip is byte-sized and example-driven, so beginners can apply it right away, while experienced designers can use the collection as a quick reference and checklist.

Become a Better Designer.
The Fun way.

Join 100s of developers, entrepreneurs & junior designers who strive to become better in UI & UX design with byte-sized, practical tips & examples!

Get notified about new tips & articles before anyone else!

"
I love these little tips. It’s like Dribbble but actually useful.
Martin LeBlanc
CEO of Iconfinder
"
I love UX & UI tips. Especially, when they are practical and presented in a very good way. Yours are meeting both criteria.
Lisa Dziuba
Head of Marketing at Abstract

UI Design Tips by Jim Raptis

Learn how to design better user interfaces with 100+ practical UI design tips and real examples — covering spacing, color, typography, buttons, and cards. Every tip is tested in real-life products.

Social Login

Design Better Menus

The Gutenberg Principle

Delete Modal

Align Uneven Elements

De-emphasize Dangerous Actions

Always Have A CTA

The Perfect Header

Validate Deletion

Empty State With Templates

Inform Users Beforehand

How to Align Uneven Items

Fallback for Transparent Avatars 1

Fallback for Transparent Avatars 2

Consistent Border-Radius

How to Apply the Brand Color

Distinguish Selected Items

Use Better Link Button

Use Consistent Buttons

Direct User Attention with Media

Prompt User to Scroll

Highlight The Best Offer

Avoid Fullwidth Paragraphs

Make Cards Look Clickable

Make Inputs Self-Explanatory

Pick The Correct Element

How To Enhance Hierarchy

Make Tooltips Responsive

Choose Chart Types Carefully

Padding On Rounded Cards

Visually Distinguish Elements

Support Icons With Labels

Use Labels Cleverly 2

Use Labels Cleverly 1

Display Useful Shortcuts

User Hate Surprises

Prioritize UX

Hack Visual Hierarchy

Visually Separate Elements