10 Principles
of Good UI

A visual guide for non-designers.

← All guides Press → to begin

The premise

Good UI makes the right things obvious.

BeforeBefore
Checkout
3 items in your basket, total $64.80 with delivery
Delivery standard, 3 to 5 days
Send to 14 Bridge Street, Leeds
Pay with Visa ending 4417
Pay now Edit basket Save for later
AfterAfter

Order total

$64.80 with delivery

3 items in your basket

DeliveryStandard, 3 to 5 days
Send to14 Bridge Street, Leeds
Pay now Edit basket

01

Visual
Hierarchy

Make the important things easy to notice.

Everything looks equalOrder of importance Press →

Electricity bill

March statement
$84.20
Due 12 May
Account4471 0022
Used310 kWh
Meter read4 May
Pay now Pay monthly
Statement sent 4 May to nadia@riverbend.co

02

Alignment

Give elements a common edge.

Edges driftOne edge, left and right

Order A-2287

Your parcel is on its way

Arrives

Today

Stops away

3

Parcels

2

Left the depot08:41
Out for delivery09:20
Track parcel Change delivery

03

Proximity

Keep related things together. Space shows what belongs to what.

Gaps in the wrong placesGrouped by spacing

Delivery address

Full name
Nadia Ali
Street and number
14 Bridge Street

Contact

Mobile number
07700 900812

Delivery time

Preferred slot
Tomorrow, 9am to 1pm

04

Contrast

If everything stands out, nothing stands out.

One flat surfaceWeight, not color
Leeds, today

18°

Light rain, feels like 16°

Tue17°
Wed15°
Thu19°11°
Fri21°12°
Sat16°10°

05

Repetition &
Consistency

Consistency makes interfaces easier to understand.

Every one is differentOne visual language
Buttons
Save changes Invite member Publish Cancel
Inputs
Search projects
Filter by owner
Headings
Active projects Archived projects

06

Typography

Use type to guide the eye.

Five sizes, no orderOne simple scale

Move a project to another workspace

Owners can move a project once. The move takes a few minutes.

Open the project, then choose Settings. Select the workspace you want to move to and confirm the move.

Files, comments and members move with the project. Links to the old address keep working for 30 days.

If the project is locked, ask an admin to unlock it first.

07

Spacing

Give content room to breathe.

CrampedCalm
Inbox Write
LM Leyla Marston Notes from Friday 09:41
NF Northlane Foods Your order has shipped 08:12
CC Cycle Club Sunday ride starts at 8am Yesterday
ZA Zara Ahmed Photos from the weekend Tuesday
2 unread

08

Color

Use color to communicate, not decorate.

Six colors competeNeutral, plus one accent
Your orders May 2026
Winter jacket Delivered $128.00 12 May
Running shoes Arriving today $86.00 18 May
Desk lamp Delayed $41.00 2 May
Coffee beans Cancelled $24.00 Refunded
Track parcels Buy again

09

Design for
Scanning

Design for the glance, not the read. People look before they read.

BeforeBefore

Refund policy

We want you to be happy with your plan. If you are not happy, you can ask for a refund and our support team will look at your request as soon as possible. Refunds are handled by people, so the answer is not automatic and may take a little time.

If you bought a plan in the last 30 days you can ask for a full refund and we will return the money to the card you paid with. After 30 days we look at each request on its own, and we may offer credit instead of money back, depending on how much of the plan you have used and whether the plan was yearly or monthly.

To ask for a refund, open Billing in your account, find the payment, and use the link at the bottom of the page. Please include the invoice number, because that helps us find the payment faster.

AfterAfter

Billing

Refund policy

Within 30 days

Ask for a full refund. The money returns to the card you paid with.

After 30 days

We review each request. We may offer account credit instead.

How to ask

Open Billing, find the payment, and select Request refund.

10

Affordance
& Feedback

Make actions clear. Show the result.

BeforeBefore

Book a visit

Thursday 14 May

09:0011:3014:00

Nothing looks pressable

AfterAfter

Book a visit

Thursday 14 May

Press it

The ten second check

Before you ship it,
look again.

What should I notice first?

What is unnecessarily loud?

What belongs together?

Can I tell what I can do?

What feels misaligned?

Can I tell what just happened?

Good UI makes the right things obvious. Prepared by Ahmed Shamim Hassan · ahmedshamim.com