RECOMMENDED

All Tips

Padding On Rounded Cards
Padding On Rounded Cards

Padding On Rounded Cards

visual effect
ui
card

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.

←Previous Tip

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

Next Tip →

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

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