Web design glossary
A visual glossary of typography and page layouts, with examples from hand-picked websites.
A
- Above the foldPage layouts
- Above the fold is the part of a page visible before the visitor scrolls. Its extent varies with the device and browser window.
- Anchor linkPage layouts
- An anchor link points to a specific location within a page, usually through a fragment identifier such as #pricing.
B
- Bento gridPage layouts
- A bento grid is a composition of differently sized cards arranged into a compact, coordinated group.
C
- Call to actionPage layouts
- A call to action, or CTA, asks the visitor to take a specific next step, such as viewing work, starting a trial or joining a list.
- Comparison tablePage layouts
- A comparison table aligns the same attributes across several options so that their differences can be inspected side by side.
- Contact formPage layouts
- A contact form lets a visitor send a message or enquiry directly from a website.
E
- Eyebrow textPage layouts
- Eyebrow text is a short label placed above a heading to establish context, category or a small piece of supporting information.
F
- FAQ accordionPage layouts
- An FAQ accordion groups questions into expandable rows, allowing visitors to reveal the answers they need.
- FooterPage layouts
- A footer is the closing area of a page, often containing secondary navigation, contact information and required site information.
G
- Grid layoutPage layouts
- A grid layout arranges content using a recurring structure of rows, columns and the gaps between them.
H
- Header navigationPage layouts
- Header navigation is the set of links near the top of a page that helps visitors reach its main destinations.
- Hero sectionPage layouts
- A hero section is the prominent opening area of a page, introducing its subject and often its main action.
- How it worksPage layouts
- A how-it-works section explains a process in a short sequence of understandable steps.
L
- Logo cloudPage layouts
- A logo cloud is a group of organization marks used to communicate a relevant relationship, such as clients, customers or partners.
M
- MarqueePage layouts
- A marquee is a band of content that moves across an area, often looping text, logos or images.
N
- Newsletter signupPage layouts
- A newsletter signup invites visitors to subscribe to recurring emails, usually by entering an email address.
P
- Pricing tablePage layouts
- A pricing table presents plans or packages in a structure that makes their prices and differences easier to compare.
S
- Social proofPage layouts
- Social proof is evidence of other people’s experience or participation that helps a visitor evaluate an offer.
T
- Team sectionPage layouts
- A team section introduces the people behind a company, project or service.
- TestimonialPage layouts
- A testimonial is a quoted account from a customer, client or other relevant person about their experience.
- TimelinePage layouts
- A timeline arranges events or milestones in chronological order and makes their sequence visible.
V
- Visual hierarchyPage layouts
- Visual hierarchy is the arrangement of elements so that their relative importance and the intended reading order are apparent.
W
- WaitlistPage layouts
- A waitlist collects interest from people who want access to a product, service or event that is not yet generally available.
- White spacePage layouts
- White space is the unoccupied space between and around elements. It can be any background color.
Z
- Z-pattern layoutPage layouts
- A Z-pattern layout alternates the placement of text and imagery across successive rows, creating a zigzag rhythm down the page.
