The wiki · page 5 of 25

The reference desk for winning online.

Evergreen guides — kept current, backed by our own scan data, written in plain talk. Every article opens with the answer, not a preamble.

04 — Web Design

What Is a Design Brief?

A design brief is a short written document that defines a web project's goals, scope, audience, and requirements before design begins. It aligns the client and design team on what is being built, why, and what success looks like. A good brief covers objectives, audience, brand, features, content, timeline, budget, and reference designs. It is not a rigid contract but a reference point that prevents misunderstandings, reduces costly revisions, and keeps a project focused. Skipping it is one of the most common causes of failed web projects.

UPDATED 2026-07-10 · READ →

What Is a Moodboard?

A moodboard is a curated collage of visual references — colors, typography, imagery, textures, and example layouts — assembled to define the look and feel of a website before any design work begins. It gives clients and designers a shared reference point, turning vague words like modern or friendly into something concrete everyone can see and react to. Moodboards align expectations early, reduce costly revisions, and act as a compass for the entire visual direction of a project.

UPDATED 2026-07-10 · READ →

What Is a User Persona?

A user persona is a semi-fictional profile of your ideal website visitor, built from real research about your customers. It captures their goals, frustrations, behaviors, and context in a memorable, named character so a whole team can design for a specific person instead of a vague crowd. Personas guide decisions about layout, content, features, and tone, keeping the site focused on what actual visitors need rather than what stakeholders assume. Most projects use two to five primary personas.

UPDATED 2026-07-10 · READ →

What Is a User Journey Map?

A user journey map is a visual diagram that charts every step a person takes to accomplish a goal with your business — from first becoming aware of you, through researching and deciding, to acting and following up. Alongside each step it records the user's actions, thoughts, and emotions, plus the touchpoints they use. Journey maps expose friction and gaps where visitors get stuck or drop off, helping teams prioritize the fixes that most improve conversions and satisfaction.

UPDATED 2026-07-10 · READ →

What Is Card-Based Design?

Card-based design is a layout pattern that packages each piece of content into a self-contained rectangular container — a card — usually holding an image, a heading, a short description, and a link or button. Cards act like modular building blocks that reflow neatly into grids across desktop, tablet, and mobile screens. The pattern is popular because it makes varied content scannable, visually consistent, and easy to rearrange, which is why interfaces from Pinterest to Google Search now rely on it so heavily.

UPDATED 2026-07-10 · READ →

What Is a Bento Grid?

A bento grid is a modern layout pattern that arranges content into a set of tidy, differently sized rectangular compartments, inspired by the divided sections of a Japanese bento lunchbox. Unlike a uniform card grid, a bento grid deliberately mixes big and small boxes to create visual rhythm and highlight priority items. Popularized by Apple, Microsoft, and countless startup landing pages, it packs varied content — features, stats, images, and calls to action — into one organized, glanceable, striking screen.

UPDATED 2026-07-10 · READ →

What Is a Split-Screen Layout?

A split-screen layout divides the screen into two equal vertical halves, each holding its own content, image, or call to action. The 50/50 arrangement gives two elements equal visual weight, making it ideal for presenting a choice between two options, pairing an image with text, or contrasting two messages side by side. On mobile the halves typically stack into a single column. Common in fashion, portfolio, and product sites, split screens create balance, symmetry, and a strong first impression.

UPDATED 2026-07-10 · READ →

What Is an F-Pattern Layout?

An F-pattern layout arranges content to match how people actually scan text-heavy web pages: their eyes move across the top in a horizontal sweep, drop down and make a shorter second sweep, then travel down the left edge, tracing the shape of the letter F. Identified through eye-tracking research, the pattern shows readers rarely read every word. Designing for it means front-loading key information at the top and left, using strong headings, and putting important words first in each line.

UPDATED 2026-07-10 · READ →

What Is a Z-Pattern Layout?

A Z-pattern layout guides a visitor's eye across a simple, visual page in the shape of the letter Z: first a horizontal sweep across the top, then a diagonal move down to the opposite corner, and finally a sweep across the bottom. Designers place key elements — logo, headline, hero image, and call to action — along this path so visitors encounter them in a deliberate order. The pattern suits sparse, conversion-focused pages with little text, such as landing pages and simple homepages.

UPDATED 2026-07-10 · READ →

What Is a Pricing Table?

A pricing table is a web design component that displays a business's plans or packages side by side in columns, letting visitors compare features and prices at a glance. Each column lists a plan name, its price, a feature list, and a call-to-action button, and one plan is often highlighted as recommended. Well-designed pricing tables reduce decision friction, guide visitors toward a preferred option, and directly influence conversions, which is why they are a staple of SaaS, service, and subscription websites.

UPDATED 2026-07-10 · READ →

What Is a Feature Section?

A feature section is a block on a webpage that showcases what a product or service offers, presenting each capability with an icon or image, a short heading, and a sentence or two of supporting text. Usually arranged as a row or grid of feature blocks, it helps visitors quickly grasp your key benefits without reading dense paragraphs. The best feature sections translate features into benefits — explaining not just what something does, but why it helps the visitor — to build interest and drive action.

UPDATED 2026-07-10 · READ →

What Is a Testimonial Section?

A testimonial section is a dedicated part of a web page that displays quotes, ratings, or short stories from real customers as social proof. It reassures visitors by showing that other people already trust the business, which tends to lift conversions. Effective testimonial sections pair a specific quote with the person's name, photo, company, and ideally a measurable result, making the praise feel credible and verifiable rather than generic, anonymous, or invented.

UPDATED 2026-07-10 · READ →

What Is a CTA Button?

A CTA button, or call-to-action button, is a clickable element that prompts a visitor to take a specific next step, such as Get a Quote, Buy Now, or Book a Call. It is usually a high-contrast, clearly labeled box designed to stand out and be tapped easily. Because it directs users toward the action a page exists to drive, the CTA button's wording, color, size, and placement have an outsized effect on conversion rates.

UPDATED 2026-07-10 · READ →

What Is a Mega Footer?

A mega footer is a large, content-rich footer at the bottom of a web page that organizes many links and details into clear columns instead of a single thin row. It typically groups navigation, contact information, hours, service areas, social icons, and legal links. Mega footers help visitors who scroll to the bottom find what they need, reinforce trust with real business details, and give search engines a consistent set of internal links across every page of the site.

UPDATED 2026-07-10 · READ →

What Is a Navigation Drawer?

A navigation drawer is a panel of menu links that slides in from the edge of the screen, usually the left, when a user taps a menu icon. It hides navigation off-screen until requested, freeing space on small displays while keeping links one tap away. Common on mobile and often triggered by a hamburger icon, drawers suit sites with many links, but must be clearly labeled and keyboard-accessible so people can find and close them without confusion.

UPDATED 2026-07-10 · READ →

What Is a Tab Interface?

A tab interface is a UI pattern that lets users switch between several panels of related content within a single view by clicking labeled tabs, showing only one panel at a time. It organizes information into sections, like Description, Reviews, and Shipping on a product page, without loading new pages. Tabs work best for peer content of similar importance that users compare or browse selectively, and they must be keyboard-accessible so people can move between panels using arrow keys.

UPDATED 2026-07-10 · READ →

What Is a Stepper (Multi-Step Form)?

A stepper, or multi-step form, breaks a long form into a sequence of smaller screens, showing the user one manageable chunk at a time with a progress indicator. Instead of confronting people with dozens of fields at once, it reveals a few per step, which reduces the sense of effort and can lower abandonment. Steppers suit checkouts, signups, bookings, and onboarding, and work best when steps are logically grouped, progress is clear, and users can move backward to review earlier answers.

UPDATED 2026-07-10 · READ →

What Is a Date Picker?

A date picker is a form control that lets users choose a date, and sometimes a time, from a calendar or dropdown instead of typing it freehand. It reduces errors by presenting valid options, clarifies format ambiguity, and can block unavailable dates. Common in booking, scheduling, and checkout forms, a good date picker also allows keyboard entry, works on mobile, and is accessible to screen readers, since a calendar that only responds to mouse clicks excludes many users.

UPDATED 2026-07-10 · READ →

What Is a Dropdown Menu?

A dropdown menu is a control that hides a list of options behind a single element, revealing them when the user clicks or hovers. It conserves space by collapsing choices until needed, and appears as navigation submenus or as form select fields. Dropdowns help when there are many options, but they hide those options until interaction, which can reduce discoverability. They must be keyboard-accessible and, on navigation, work reliably on touch devices where hover does not exist.

UPDATED 2026-07-10 · READ →

What Is a Form Field?

A form field is a single input where a user enters or selects one piece of information, such as a name, email, or choice from a list. It is the basic building block of every web form, combining a label, the input itself, and often help text and error messages. Well-designed form fields use clear, persistent labels, appropriate input types, and visible states, which reduces mistakes and abandonment. Poorly labeled or ambiguous fields are a leading cause of lost leads and failed submissions.

UPDATED 2026-07-10 · READ →

What Is Input Validation?

Input validation is the process of checking that data entered into a form meets the rules a system expects, such as a properly formatted email or a required field being filled, before it is accepted. It can happen in the browser for instant feedback and must also happen on the server for security. Inline validation, which checks fields as users complete them, reduces frustration and abandonment by catching mistakes early, while clear, specific error messages help people fix problems quickly.

UPDATED 2026-07-10 · READ →

What Is a Loading Spinner?

A loading spinner is a small animated indicator, usually a rotating circle or set of dots, that tells users a page or action is still working and has not frozen. It reassures people during a wait by signalling progress is happening, even when the exact finish time is unknown. Spinners are common while data loads, a form submits, or an image processes. Used briefly they calm anxiety, but a spinner that lingers for many seconds stops reassuring and instead flags a slow, poorly optimized site that needs attention.

UPDATED 2026-07-10 · READ →

What Is an Empty State?

An empty state is what a screen shows when there is no data to display, such as an empty inbox, a fresh dashboard, or a search that returned no results. Instead of a blank, confusing void, a well-designed empty state explains why the space is empty and points the user toward a helpful next step, like adding their first item or adjusting a search. Empty states are a key onboarding moment, turning a discouraging blank page into guidance that helps new users start using a product.

UPDATED 2026-07-10 · READ →

What Is a Hover State?

A hover state is the visual change an element makes when a user moves their mouse pointer over it, such as a button darkening, a link underlining, or a card lifting slightly. It provides instant feedback that the element is interactive, helping users understand what they can click before they click it. Hover states are a mouse-and-trackpad concept, so they do not exist on touchscreens, where there is no pointer. That limitation means designers must never rely on hover alone to reveal essential information or controls.

UPDATED 2026-07-10 · READ →

What Is an Icon System?

An icon system is a consistent, unified set of interface icons designed and managed together so they share the same style, size, weight, and meaning across a website or app. Instead of grabbing mismatched icons from random sources, a team draws from one coherent library, which makes the interface look polished and reinforces the brand. A good icon system also standardizes how icons are stored, named, and delivered, usually as SVGs, so developers can reuse them easily. The result is faster design, clearer communication, and a more professional, trustworthy product.

UPDATED 2026-07-10 · READ →

What Is Button Hierarchy?

Button hierarchy is styling buttons with different visual weights, primary, secondary, and tertiary, so users can instantly tell which action is most important on a screen. The primary button is the boldest and marks the main thing you want people to do, like Buy now or Sign up. Secondary buttons are quieter alternatives, and tertiary buttons are the most subdued, often plain text links. Clear button hierarchy guides the eye to the desired action and prevents the confusion of a screen where every button competes equally.

UPDATED 2026-07-10 · READ →

Hamburger Menu vs Tab Bar: Which Is Better?

A hamburger menu and a tab bar are two ways to handle navigation on small screens. A hamburger menu hides links behind a three-line icon that opens a panel, saving space but keeping options out of sight. A tab bar shows a few key destinations as always-visible icons, usually along the bottom, one tap away. Neither is universally better: hamburger menus suit large or secondary navigation, while tab bars win for a handful of frequently visited destinations. For most small-business sites, a visible bar tends to improve discoverability.

UPDATED 2026-07-10 · READ →

Whitespace vs Negative Space: What's the Difference?

Whitespace and negative space describe the same thing: the empty areas of a design that contain no text, images, or elements. In web and graphic design the terms are used almost interchangeably. Whitespace is the common design term for any blank space, and it need not be white, it just means unmarked area. Negative space is the more artistic term, emphasizing the shape the emptiness creates around a subject. Both mean intentional emptiness that improves readability and directs attention, so the distinction is mostly one of emphasis.

UPDATED 2026-07-10 · READ →

What Is Visual Weight?

Visual weight is how much an element on a page draws the eye, its perceived heaviness or importance relative to everything around it. Larger, darker, brighter, and higher-contrast elements carry more weight and attract attention first, while smaller, lighter elements recede. Designers control visual weight using size, colour, contrast, spacing, and position to build a clear hierarchy, so the most important content, a headline or primary button, stands out and the eye moves through a page in the intended order. Balancing it makes a design feel stable.

UPDATED 2026-07-10 · READ →

What Is a Golden Ratio Layout?

A golden ratio layout uses the proportion 1.618 to size and space elements, for example making a main column about 1.618 times wider than a sidebar. Fans believe this ratio, found in nature and classical art, produces layouts that feel naturally balanced. In practice it can be a useful starting point for proportions, but the idea that it guarantees beauty is largely a myth. It is one helpful tool among many, not a magic formula, and good design depends far more on hierarchy, balance, and usability.

UPDATED 2026-07-10 · READ →

Looking for news, case studies, and opinion pieces? That's the blog →