$ point --at "the popup thing" --name-it
Design terms,
for non‑designers.
The real names for the things you see and tap every day, each with a picture of the actual pattern.
Sibling: nontechnical.dev, the same idea for tech terms.
Illustrated
Every term gets its own picture. Tap any plate to read it, explained simply.
Toast
A toast is the small message that appears briefly on screen to confirm something happened, then disappears on its own without you touching anything.
Tab Bar
A tab bar is the row of icons along the bottom of an app that switches between its main sections.
Pull to Refresh
Pull to refresh is the gesture where you drag a list downward past its top and let go to reload it.
Action Sheet
An action sheet is the menu that slides up from the bottom of the screen listing the things you can do to whatever you just tapped: Share, Duplicate, Delete.
Floating Action Button
A floating action button is the round button hovering in the bottom corner of an app screen, sitting on top of everything, that does the screen's single most important thing.
Toggle
A toggle is the little switch that flips a setting on or off the moment you tap it, and it never asks you to save.
Skeleton Screen
A skeleton screen is the set of gray placeholder shapes an app shows in the exact layout of the real content while it loads.
Modal
The box that stops everything until you deal with it.
Breadcrumb
A breadcrumb is the trail of links near the top of a page that shows where you are in a site, like Home, then Shoes, then Sneakers.
Hero
The hero is the big section at the top of a page that carries the headline, the main image, and the one button the page most wants you to press.
Hamburger Menu
A hamburger menu is the icon made of three stacked lines, usually in a top corner, that opens the navigation a site is hiding.
Sticky Header
A sticky header is the bar across the top of a site that stays pinned in place while the rest of the page scrolls underneath it.
Dropdown
A dropdown is the control that shows only your current choice until you click it, then opens the list of other options.
Accordion
An accordion is a stack of collapsed sections that expand when you click them, most familiar as an FAQ where each answer unfolds beneath its question.
Tooltip
A tooltip is the tiny label that appears when you rest your cursor on something, tells you what it is, and disappears the moment you move away.
Card
A card is the rectangular container that groups an image, a title, and a few details into one self-contained, clickable unit, usually repeated in a grid of near-identical siblings.
Call to Action (CTA)
A call to action is the button or link that asks the visitor to take the one next step, like Start free trial or Book a demo.
Above the Fold
Above the fold is everything visible on a page before anyone scrolls, the only part every single visitor is guaranteed to see.
Responsive Design
Responsive design means building one site that rearranges itself to fit whatever screen it's on, instead of building separate sites for desktop and phone.
Whitespace
Whitespace is the empty space around and between the elements of a design, left there on purpose so everything has room to breathe.
Kerning
The space between two letters, tuned by eye.
Hierarchy
Hierarchy is making the important things look important, so your eye reads a screen in the order the designer intended.
Contrast
Contrast is the difference between an element and whatever sits behind it, and it decides whether text is effortless to read or nearly invisible.
Grid
A grid is the invisible set of columns a layout is built on, so everything lines up on purpose instead of by luck.
Padding & Margin
Padding is the space inside a box's edge, between the border and the content; margin is the space outside the box, pushing its neighbors away.
Serif & Sans Serif
Serifs are the small feet at the ends of a letter's strokes: typefaces that have them are serif, and typefaces without them are sans serif, sans being French for without.
Color Palette
A color palette is the small set of colors a product commits to, chosen once and reused everywhere, so every screen looks related instead of random.
Dark Mode
Dark mode is the version of an interface drawn in light text on dark backgrounds, designed as a complete second color scheme rather than the light version with its colors flipped.
Vector & Raster
A vector image is stored as math, so it stays perfectly crisp at any size; a raster image is stored as a fixed grid of pixels, so it goes blurry and blocky the moment you enlarge it.
Wireframe
A wireframe is a deliberately rough sketch of a screen, made of gray boxes and placeholder lines, that settles what goes where before anyone argues about colors.
Prototype
A prototype is a clickable fake of a product, real enough to tap through and test, built before the actual product exists.
Dark Pattern
A dark pattern is a design trick that steers you into something you didn't mean to choose, like a cancel page where the button to stay is huge and the way out is buried in fine print.
Empty State
What the screen says before there's anything to show.
User Flow
A user flow is the step-by-step path a person takes through a product to finish one job, drawn as screens or boxes connected by arrows.
Mockup
A mockup is a full-color, realistic picture of a screen that looks finished but doesn't work yet.
Design System
A design system is the shared kit of reusable components, colors, and rules a team draws from, so every screen looks like it came from the same product.
Affordance
An affordance is the visual hint that tells you what you can do with something, the reason a button looks pressable before you've ever pressed it.
Onboarding
Onboarding is everything a product does to get a brand-new user from first open to first success.
Accessibility
Accessibility is designing so that people with different vision, hearing, and motor abilities can use your product, which in practice makes it better for everyone.
Browse by topic
40 terms across 4 topics. Pick a section.
Mobile UI Patterns 8 terms
Half Sheet The panel that slides up but doesn't take over. Toast A toast is the small message that appears briefly on screen to confirm something happened, then disappears on its own without you touching anything. Tab Bar A tab bar is the row of icons along the bottom of an app that switches between its main sections. Pull to Refresh Pull to refresh is the gesture where you drag a list downward past its top and let go to reload it. Action Sheet An action sheet is the menu that slides up from the bottom of the screen listing the things you can do to whatever you just tapped: Share, Duplicate, Delete. Floating Action Button A floating action button is the round button hovering in the bottom corner of an app screen, sitting on top of everything, that does the screen's single most important thing. Toggle A toggle is the little switch that flips a setting on or off the moment you tap it, and it never asks you to save. Skeleton Screen A skeleton screen is the set of gray placeholder shapes an app shows in the exact layout of the real content while it loads.Web UI Patterns 12 terms
Modal The box that stops everything until you deal with it. Breadcrumb A breadcrumb is the trail of links near the top of a page that shows where you are in a site, like Home, then Shoes, then Sneakers. Hero The hero is the big section at the top of a page that carries the headline, the main image, and the one button the page most wants you to press. Hamburger Menu A hamburger menu is the icon made of three stacked lines, usually in a top corner, that opens the navigation a site is hiding. Sticky Header A sticky header is the bar across the top of a site that stays pinned in place while the rest of the page scrolls underneath it. Dropdown A dropdown is the control that shows only your current choice until you click it, then opens the list of other options. Accordion An accordion is a stack of collapsed sections that expand when you click them, most familiar as an FAQ where each answer unfolds beneath its question. Tooltip A tooltip is the tiny label that appears when you rest your cursor on something, tells you what it is, and disappears the moment you move away. Card A card is the rectangular container that groups an image, a title, and a few details into one self-contained, clickable unit, usually repeated in a grid of near-identical siblings. Call to Action (CTA) A call to action is the button or link that asks the visitor to take the one next step, like Start free trial or Book a demo. Above the Fold Above the fold is everything visible on a page before anyone scrolls, the only part every single visitor is guaranteed to see. Responsive Design Responsive design means building one site that rearranges itself to fit whatever screen it's on, instead of building separate sites for desktop and phone.Visual Design Vocabulary 10 terms
Whitespace Whitespace is the empty space around and between the elements of a design, left there on purpose so everything has room to breathe. Kerning The space between two letters, tuned by eye. Hierarchy Hierarchy is making the important things look important, so your eye reads a screen in the order the designer intended. Contrast Contrast is the difference between an element and whatever sits behind it, and it decides whether text is effortless to read or nearly invisible. Grid A grid is the invisible set of columns a layout is built on, so everything lines up on purpose instead of by luck. Padding & Margin Padding is the space inside a box's edge, between the border and the content; margin is the space outside the box, pushing its neighbors away. Serif & Sans Serif Serifs are the small feet at the ends of a letter's strokes: typefaces that have them are serif, and typefaces without them are sans serif, sans being French for without. Color Palette A color palette is the small set of colors a product commits to, chosen once and reused everywhere, so every screen looks related instead of random. Dark Mode Dark mode is the version of an interface drawn in light text on dark backgrounds, designed as a complete second color scheme rather than the light version with its colors flipped. Vector & Raster A vector image is stored as math, so it stays perfectly crisp at any size; a raster image is stored as a fixed grid of pixels, so it goes blurry and blocky the moment you enlarge it.UX & Process 10 terms
Wireframe A wireframe is a deliberately rough sketch of a screen, made of gray boxes and placeholder lines, that settles what goes where before anyone argues about colors. Prototype A prototype is a clickable fake of a product, real enough to tap through and test, built before the actual product exists. Dark Pattern A dark pattern is a design trick that steers you into something you didn't mean to choose, like a cancel page where the button to stay is huge and the way out is buried in fine print. Empty State What the screen says before there's anything to show. User Flow A user flow is the step-by-step path a person takes through a product to finish one job, drawn as screens or boxes connected by arrows. Mockup A mockup is a full-color, realistic picture of a screen that looks finished but doesn't work yet. Design System A design system is the shared kit of reusable components, colors, and rules a team draws from, so every screen looks like it came from the same product. Affordance An affordance is the visual hint that tells you what you can do with something, the reason a button looks pressable before you've ever pressed it. Onboarding Onboarding is everything a product does to get a brand-new user from first open to first success. Accessibility Accessibility is designing so that people with different vision, hearing, and motor abilities can use your product, which in practice makes it better for everyone.Fig. 01 / Half Sheet · In motion
Half Sheet
EXPLAINED SIMPLY:The panel that slides up but doesn't take over.
A half sheet is the panel that slides up from the bottom of your phone screen and stops partway, so the screen behind it stays visible. Apple Maps does it, the share menu does it, Uber does it when you pick a ride.
The point of a half sheet is that you never really leave. The page behind it dims but stays put, and one swipe down puts everything back the way it was. It exists for quick decisions that borrow the screen instead of taking it over: pick an option, adjust a setting, confirm a thing.
You'll also hear "bottom sheet," which is the Android and design-system name for the same family. Some sheets stop at fixed heights (those stopping points are called detents), and the pill-shaped handle at the top is the grabber, the visual hint that you can drag it.
If it slides up and covers everything with no view of the screen behind it, that's not a half sheet anymore. That's a full-screen modal wearing a sheet costume.
When you want "let me choose something without losing my place," ask for a half sheet.