185 terms · 6 categories
Glossary
Every term comes with a plain-English definition, a wireframe, and a prompt you can copy straight into your AI.
Look-alike terms
23 sets of look-alike terms that are easy to mix up, side by side.
Layouts
How blocks on a page are arranged. Spot the overall frame first, then see which arrangement fits each block.
Hover a thumbnail to see what each part is called
Page frame
05Single Column Layout
The page has one centered main column. All sections stack from top to bottom with no sidebar. Common on mobile and on pages with a simple structure.Holy Grail Layout
A full-width header and footer, with the middle row split into a left sidebar, main content and a right sidebar. Both sidebars have fixed widths and the main column stretches.Master-Detail Layout
A list of records on the left and the selected record's details on the right. Click any item on the left and the right side switches to it without leaving the page.Top Navigation Layout
A horizontal nav bar across the top holds the logo, main menu and user links, and the whole area below it is content. Good for sites with only a few nav items.Sidebar Layout
Content display
11Dashboard
Sums up several different sets of key data on one screen with metric cards, charts and short lists, so people can see the overall picture and spot problems in seconds.Article Layout
A page designed for reading long text. The body stays in a fairly narrow column, with heading levels, paragraph spacing and a table of contents so long content isn't tiring to read.Card Grid
Items of the same kind become cards of equal size, arranged neatly in rows and columns. Each card has a cover image, a title and a bit of key info.Masonry Layout
Cards have the same width but their height follows the content, and each new card drops into the shortest column, so the whole thing looks like a staggered brick wall. Common in image communities and discovery apps.Data Table
Shows lots of records of the same kind in rows and columns, one record per row and one field per column, with filters, sorting, pagination and bulk actions so users can find and compare rows.List View
Stacks items of the same kind in one column from top to bottom. Each row has just an icon, a title and one or two bits of extra info. Good when items are simple and users need to scan and tap quickly.Feed
Full pieces of content stacked one after another. Each has the author, text, images and interactions like likes and comments, and users read right in the feed while scrolling down to load more.Timeline
Lines up event nodes along a vertical line in time order. Each node shows when it happened and what happened, to show a process, a history or shipping progress.Gallery
A layout where images are the star. Thumbnails of the same aspect ratio are packed into a grid with almost no text, and clicking one opens it large with left and right navigation.Description List
Lays out a record's properties as label-value pairs, often in a two- or three-column grid. Good for viewing details in read-only mode.Side-by-Side Comparison
Puts two pieces of content with the same structure side by side on one screen, with matching parts aligned line by line and differences highlighted, so it's easy to spot what's different.
Task flow
03Kanban Board
Splits tasks into side-by-side columns by status. Each task is a small card, and dragging a card to another column changes its status.Wizard
Breaks a long task into a few steps in a set order. Each screen handles one step, a steps bar at the top shows progress, and users move through it with Back and Next.Single Page Form
Puts every field to fill in on one page, in a single column from top to bottom, and users submit everything at once with the button at the bottom. It's the most common page for creating and editing data.
Page types
05Settings Page
Groups lots of independent options by category, with category switching on the left or at the top and a short description for each option. Users come back anytime to change any one of them.Landing Page
A long page built to promote a product or campaign. Starting with a big headline, it walks through the benefits, the proof and the pricing, guiding visitors to click the same call-to-action button.Login / Sign-up Page
The page where users log in or create an account. A small, narrow form card sits in the middle with only the essentials like the account, password and submit button, often paired with a brand illustration.Empty State
A placeholder shown when a list, table or page has no content. It uses an illustration and one sentence to explain why it's empty, plus a button for the next step.Search Results Page
The page users see after entering a keyword. The search box stays at the top, filters sit at the side or above, and the main area lists results by relevance with the keyword highlighted.