The parts of an app screen
A typical shopping app. Eleven pieces you'll see on almost every mobile app.
Tap a part or a number
The layout of a website
A shop's category page, top to bottom. Most websites reuse these same building blocks.
Built for long runs
Cushioned, light, made for 40 km weeks.
Shop runningTap a part or a number
Getting around
Menus, tabs and links: everything that moves you between screens or opens more options.
Tap a part or a number
Pop-ups and messages
Things that appear on top of a screen or inside it. The key question for each: does the user have to respond?
This can't be undone. All your orders and saved items will be removed.
Shopping list: running socks, water bottle, energy gels, new laces for the Trail 2.
Tap a part, or try the real ones with the buttons
Showing content
A product page. These are the common ways apps arrange information. The carousel, accordion and table all work.
Size guide
Runs true to size. If you're between sizes, go half a size up for long runs.
Delivery
Free delivery in the UAE, 1–2 days.
Returns
Return within 30 days, even if you've run in them.
Swipe the photos, open the sections, sort the table
Form controls
Everything you type into, tick, slide or switch, plus the small text around fields. The controls work, so try them.
Tap a part or a number
More inputs
Specialised controls for places, dates, times, passwords, codes, files and colors. Each one works.
Type, pick, tap the eye, drop a file
States
Every control changes its look depending on what's happening. Switch between states to see the same button, field and chip change.
Default: how everything looks when nobody is touching it.
Loading and empty screens
What people see while waiting, when there's nothing to show yet, or when something goes wrong. Tap each one to play it on the phone.
Gestures and motion
How people touch screens, and how screens move in response. Every tile is a working demo. Some gestures work best on a phone.
Visual style
The words for how things look. Change each setting and watch the card. These words make your feedback to a designer precise.
Trail Runner 2
Lightweight trail shoe with a grippy outsole. 289 AED Add to cartTypography
The vocabulary of text. Change the settings and watch the paragraph.
Trail Runner 2 · Lightweight waterproof trail shoe for long weekend runs
Built for rocky paths and sandy tracks. A grippy outsole holds on loose ground, and a cushioned midsole keeps your legs fresh after 20 kilometres. Weighs 260 grams in size 42.
Color
How colors get jobs. Switch palettes and dark mode on the small app and watch which parts change.
Layout and responsive design
How pages adapt to different screens. Drag the width slider and watch the layout change at each breakpoint.
Built for long runs
Cushioned, light, made for 40 km weeks.
Shop runningScreens and flows
The screens nearly every app needs, and how they connect. Tap a screen on the map, or click through the phone like a real app.
Accessibility
Making designs usable for everyone, including people with low vision, people who use a keyboard, and people with shaky hands. Try each demo.
How design gets made
The words designers, developers and product people use while building. Start by switching the same screen between three stages.
A mockup looks real, but it's only a picture.
Final exam
Fifteen questions picked at random from all seventeen lessons. Retake it for a new set.
All terms
Every word from the seventeen lessons in one place. Search by name or by what it does.