What you are doing
Describe a layout
Say where things go on a page.
The part of a page a visitor sees before they scroll.
WordFills the component part
List 6 to 10 common questions using the words a customer would use, with each answer hidden until its question is opened. Keep answers to one short paragraph and allow only one or several items to stay open without moving the visitor back to the top. Do not bury essential pricing or contact details inside the answers.
PatternFills the layout part
Show repeated items in 3 columns on wide screens, with the same image area, heading position, and action on every card. Limit each description to two lines before the link so the row stays tidy. Stack the cards into one column on phones and do not use unequal card heights to create decoration.
PatternA short path showing the page and the sections above it.
WordFills the layout part
Make the main content column about twice as wide as its supporting column, then offset one image or callout to create tension. Keep the heading, body, and primary action in one clear left-to-right reading order. On phones, stack everything into a single column and do not use empty space as the only way to show importance.
PatternThe words or button that invite a visitor to take the next step.
WordFills the component part
Present 3 to 6 key benefits as equal cards, each with a short heading, one sentence, and an optional simple icon. Keep the same content order and card height across the row, then stack them in one column on narrow screens. Do not hide important details behind hover effects.
PatternFills the component part
After a visitor submits or changes something, show a message beside that control explaining whether it is working, complete, or needs attention. Pair a short label with an icon and plain text, and move keyboard focus to serious errors. Do not rely on red or green alone, and keep successful confirmations visible for at least 5 seconds.
PatternThe area at the end of a page that holds supporting details and links.
WordFills the layout part
Create a separate page for each major task, such as services, pricing, work, and contact, with no more than 6 links in the main navigation. Give every page one clear heading and a link back to its parent section where needed. Do not repeat the full homepage on every page or create pages with only one short paragraph.
PatternFills the component part
Choose one main action for the page and label its button with the result, such as "Book a table" or "Start a free trial". Give that button the strongest colour contrast and repeat it near the top and after the main supporting content. Do not give secondary actions the same visual weight.
PatternFills the layout part
Set the main reading column between 65 and 75 characters wide, with a large headline, byline, and estimated reading time above it. Break the article with a subheading every 3 to 5 paragraphs and use full-width images only when they add evidence or atmosphere. Do not stretch paragraphs across the full browser width or interrupt the reading flow with unrelated panels.
PatternFills the layout part
Arrange 5 to 8 related pieces of content in tiles, giving the most important one twice the area of a standard tile. Use one heading or image per tile and keep the gaps the same throughout the group. Do not make every tile clickable unless each leads somewhere useful.
PatternFills the navigation part
Split the task into 3 to 5 numbered stages, showing the current stage and how many remain at the top of the form. Give each stage one purpose, with Back and Continue controls at the bottom, and keep completed answers when the visitor goes back. Do not ask for the same information twice or let a step fail without saying how to fix it.
PatternFills the component part
Place a wide search input at the top of the content area with an example query in its placeholder. Start showing suggestions after 2 characters, submit on Enter, and display the result count above the matches. When nothing matches, keep the query visible and offer two broader searches instead of an empty page.
PatternFills the component part
Place the full street address and opening hours beside an interactive map, followed by a button that opens directions in the visitor's map app. Keep the address visible as text so it can be copied and read if the map fails. On phones, show the directions button before the map.
PatternThe opening section that introduces a page and its main action.
WordDifficulty: beginner
Work top to bottom and name each section, its job, and its content.
GuideA visible block or control used to present content or support a feature.
WordFills the layout part
Centre the main content in a column between 680 and 760 pixels wide, with one heading and one primary action per section. Use generous space between 4 to 6 short sections so each idea can be read before the next begins. Do not add sidebars, floating promotions, or competing columns around a task that needs full attention.
PatternFills the layout part
Put the main navigation on the left, a row of 3 to 5 summary figures at the top, and the working detail below. Keep filters and date controls next to the data they change, with the primary action in the upper right. On small screens, move navigation behind a menu and avoid squeezing tables into unreadable columns.
PatternFills the navigation part
Keep a slim header visible after the visitor has scrolled roughly 80 pixels, showing the logo, 3 to 5 links, and the main action. Reduce its height compared with the opening header so it does not cover the content. Do not make it appear and disappear on every small change of scroll direction.
PatternFills the component part
Open the overlay only after a visitor chooses an action, and give it one heading, one task, and a visible close button. Let Escape and a click outside close it, then return keyboard focus to the control that opened it. Do not show it automatically on page load or place a second overlay on top.
PatternFills the layout part
Reserve a 220 to 280 pixel side area for section links, filters, or account details, and keep the main content at least twice as wide. Highlight the current section and keep the side area visible while related content scrolls. On phones, move those choices above the content or behind a clearly labelled button, never leave them off-screen.
PatternFills the navigation part
Place 5 to 10 related section links in a narrow left column, grouped under short headings when the list is longer than six items. Highlight the current page and keep the list in view while the matching content is read. On phones, move it above the content as an expandable list, not below the fold.
PatternFills the layout part
Arrange image-led items in 2 columns on tablets and 3 or 4 columns on wide screens, allowing taller images to take more vertical space. Keep captions attached to their own image and preserve a sensible top-to-bottom order for keyboard users. Do not use this arrangement for price comparisons, forms, or text that must be read in sequence.
PatternFills the component part
Show images in a tidy grid of thumbnails, then open the selected image at a larger size over the same page. Include previous, next, and close controls, a short caption, and the current position such as "3 of 12". Do not load every full-size image before the visitor asks to see it.
PatternFills the navigation part
Add a row or short list of links to 4 to 7 named sections near the top of a long page. When one is chosen, move to its heading with enough space above it that the fixed header does not hide the title. Do not add jump links to a page that is shorter than three screens or use vague labels such as "More".
PatternFills the component part
Place a short enquiry form beside the contact details with fields for name, email, and message. Mark required fields clearly, validate mistakes beside the relevant field, and show a confirmation after submission. Do not clear what the visitor typed when an error occurs.
PatternFills the component part
Show 3 or 4 verified figures in a single row, with a large number and a plain label explaining what it measures. Add a timeframe or source wherever the number could be misunderstood, such as "92% in 2025". Do not use counters that animate from zero or numbers without context.
PatternFills the component part
Compare no more than four plans using the same feature order in every column. Show the currency, billing period, included limits, and full button label for each plan, then mark one recommendation only when there is a clear reason. Do not hide setup fees, exclusions, or the monthly equivalent of annual billing.
PatternThe part of a website that helps people move between its pages or sections.
WordFills the component part
Use one heading of no more than 12 words, a supporting line of up to two sentences, and one primary button in the first screen. Pair them with a relevant image or product view that does not compete with the text. Do not rotate through multiple messages or place more than two actions beside each other.
PatternFills the layout part
Divide the first screen into two equal panels, giving each a short heading, one supporting sentence, and one action. Use a clear difference in image, colour, or label so visitors can tell the choices apart immediately. Stack the panels vertically on phones and do not place more than two competing routes in the split.
PatternFills the component part
Use 2 to 5 short labels in one row, mark the first choice as active, and replace the panel beneath it when another is selected. Let keyboard users move between choices with the arrow keys, and stack the content instead when labels no longer fit on one line. Do not place essential information in a panel most visitors will never open.
PatternFills the component part
Arrange 4 to 8 milestones in chronological order, each with a date, short heading, and one-sentence explanation. Mark the current step clearly and connect the items with one continuous line, switching to a vertical list on phones. Do not alternate items across two columns when that makes the reading order unclear.
PatternFills the component part
Place up to six verified customer or partner logos in one evenly spaced row beneath the opening section. Give every mark the same visual height and include its organisation name as alternative text. Do not stretch logos or imply a relationship that has not been confirmed.
PatternFills the navigation part
Place a small path above the page heading, starting with Home and ending with the current page as plain text. Keep it to 2 to 4 levels and make every earlier level a working link. Do not show it on the homepage or use it as a substitute for a clear page title.
PatternFills the component part
List 4 to 8 services, each with a short heading, one sentence describing the customer outcome, and a link to details. Group closely related services under plain headings when the list is longer than six items. Do not use the same generic description or "Learn more" label for every item.
PatternA top navigation bar that remains visible while the visitor scrolls.
WordFills the layout part
Arrange the page as a sequence of opening promise, proof, benefits, detail, and final action, with anchor links for sections longer than six screens. Repeat the main action near the beginning and end so it is available after the visitor has read the evidence. Do not duplicate the same content into separate pages or rely on endless scrolling without section headings.
PatternFills the navigation part
On narrow screens, replace the full link row with a labelled Menu button that opens a panel containing the 4 to 6 main links and one primary action. Keep the close control in the same place as the opener and return focus to it when the panel closes. Do not hide essential links behind a tiny unlabelled icon or let the panel cover its own close control.
PatternFills the navigation part
Place the logo at the left, 4 to 6 main page links in the middle, and one clear action at the right of the header. Mark the current page with a visible colour or underline and keep the same order on every page. Do not put every page in the top menu or use several actions that look equally important.
PatternFills the layout part
Split the page into 3 to 5 full-width bands, each with a contained content area and one clear purpose such as proof, benefits, or contact. Change the background colour or image only when the next section needs a distinct mood. Do not switch backgrounds on every short paragraph or let text run wider than the main reading column.
PatternFills the component part
Show 3 customer quotes of no more than 40 words, each naming the person, their role, and their organisation when permission allows. Choose quotes that describe a specific result or experience, and link to a fuller case study where one exists. Do not invent quotes, use stock portraits, or publish private details without consent.
PatternA simple plan showing where the main parts of a page will go.
Word