Beginner8 min read
Was this chapter helpful?
Share
Pretty doesn't mean usable. Here's how to make your site feel great.
You don't need a design degree. Just remember these five rules and your site will already feel better than 80% of the web.
1. Visual hierarchy
The most important thing on a page should be the biggest, boldest, or most colorful. Your eyes should always know where to look first.
2. Big tap targets
On a phone, every clickable thing must be at least 44×44 pixels. Tiny buttons are why your mom can't use your app.
3. Show what's happening
When something takes more than 0.3 seconds, show a spinner, a loading bar, or a skeleton. Silence makes users think it's broken.
4. Confirm every action
When a user does something, tell them it worked. A toast that says "Saved!" is the difference between confidence and confusion.
5. Prevent mistakes
Disable buttons that aren't ready. Confirm destructive actions. Show errors close to the field that caused them.
When AI builds you a feature, it usually shows you the "happy path" — what the screen looks like when everything works perfectly. But there are three other states that matter just as much:
Loading state
Shown while data is being fetched. A spinner is fine. A skeleton loader (gray placeholder boxes) is better.
Bad: blank white screen
Good: animated skeleton
Empty state
Shown when there's nothing to display yet. Don't leave it blank — explain what to do next.
Bad: blank list
Good: "No tasks yet — add your first one"
Error state
Shown when something fails. Tell the user what went wrong and how to fix it. Never just say "Error."
Bad: "Something went wrong"
Good: "Couldn't save — check your internet and try again"
ADD ALL THREE STATES
"For every place in my app that shows a list of items, add proper loading, empty, and error states. Use animated skeleton loaders while data loads, a friendly empty state with a CTA when there's nothing to show, and a clear error message with a retry button when fetching fails."
Every clickable element on a phone needs to be at least 44 pixels by 44 pixels. That's about the size of an adult fingertip. Smaller than that and people miss.
The trick: even if a button looks small visually, you can give it invisible padding so the tap area is bigger. Your AI tool knows how to do this.
Bad
Good
Every action a user takes should produce visible feedback. If they click a button and nothing changes for a second, they assume it's broken and click again. Now you have two of whatever they were doing.
Click a button
Button shows a loading spinner. Original button is disabled so they can't double-click.
Submit a form
Submit button changes to "Sending...". After success, show a toast: "Message sent!" and clear the form.
Delete an item
Show a confirmation dialog first. After delete, show "Item deleted" with an Undo link for 5 seconds.
Save settings
Save button shows a checkmark for 2 seconds, then returns to "Save". The user knows it worked.
Copy to clipboard
Copy button changes to "Copied!" with a checkmark for 2 seconds.
Do these and people bounce. Fix these and your site instantly feels professional.
1. Hero with no clear call to action
2. Forms that don't say which field caused the error
3. Modals you can't close (no X, no escape key)
4. Auto-playing videos with sound on
5. Pop-ups asking for email before users see anything
6. Hover-only menus that don't work on phones
7. Buttons that look identical to non-buttons
8. Important info hidden behind tiny "learn more" links
9. Required form fields not marked as required
10. Confirmation dialogs for harmless actions
When you look at a well-designed page, your eye is guided through it in a deliberate order. Big headline first. Subheadline second. Then the CTA button. Then the supporting details.
You create hierarchy with three tools: size, weight, and color. Bigger = more important. Bolder = more important. More colorful = more important.
Build your first app
Without writing a single line of code.
No credit card required.
Look at the example above. Your eye goes: headline → subheadline → button → fine print.That's deliberate. The headline is biggest and boldest. The button is the most colorful. The fine print is smallest and lightest.
You just shipped your new landing page and asked a friend to look at it. They say "it looks nice" but don't click the signup button. Instead of guessing why, run a UX audit prompt to find what's wrong with the page from a usability standpoint.
Build this with AI
"Audit my homepage for UX problems. Check for: visual hierarchy (is the main CTA obvious?), tap target sizes on mobile, loading and empty states, missing feedback after actions, and accessibility basics. List every problem you find with a screenshot description and suggest a fix for each one."
ADD LOADING STATES EVERYWHERE
"Find every place in my app that fetches data and add a proper loading state. Use skeleton loaders (gray animated placeholder boxes) instead of generic spinners. Make sure no part of the UI shows blank while data is loading."
FIX TAP TARGETS ON MOBILE
"Audit my site for tap targets that are too small on mobile. Every button, link, icon, and checkbox should have at least 44×44 pixels of tappable area. Add invisible padding where needed without changing the visual design."
ADD CONFIRMATION TOASTS
"Whenever a user successfully saves, deletes, copies, sends, or otherwise completes an action in my app, show a small toast notification confirming what just happened. Use Sonner or a similar library. Make sure errors show as red toasts and successes as green ones."
