Design Web Pages That Look Consistent and Are Easy for Everyone to Use

## Make the Main Message and Next Step Stand Out First Use visual weight to make importance obvious before refining decoration. A page should help people identify its purpose, understand the main value, and recognize the next action within seconds. - Give each screen or section one primary message. - Keep the core hierarchy to a page title, section headings, and body text; add deeper levels only when needed. - Make more important content stronger through size, contrast, position, and surrounding space. - Place the conclusion before supporting detail when fast scanning matters. - Reserve the strongest treatment for the primary action or decision. - Avoid making every element large, bold, colorful, or high contrast. - Run a five-second test: can a new viewer explain the page and its intended next step? ## Line Up Page Elements with a Shared Grid and Spacing Spacing communicates relationships. Use a shared scale and grid so related items feel connected, separate groups remain distinct, and layouts can change without losing rhythm. - Start with an 8-pixel spacing scale; allow a 4-pixel subdivision when finer control is necessary. - Use a simple responsive grid, such as one column on phones, two on tablets, and up to twelve on wide screens. - Keep space within a group smaller than the space between groups. - Align repeated components to common columns, edges, and baselines. - Set body line height near 1.6 and paragraph gaps around 1.5 to 2 line heights as starting points. - Use tokens for spacing values instead of inventing near-duplicate measurements. - Inspect vertical rhythm across sections and components at every supported width. ## Keep the Reading Order Clear from Phones to Wide Screens Arrange content in the order people need it, then let visual layout reinforce that sequence. Responsive design must preserve meaning rather than merely fit smaller screens. - Design the content order for mobile first, then enhance the layout for wider screens. - Keep Japanese body lines near 35 to 45 characters and Latin text near 45 to 75 characters when practical. - Separate web paragraphs with space rather than relying on first-line indentation. - Place each section's key point before evidence and its relevant action after the evidence. - Make the heading sequence understandable when read without the body text. - Preserve logical source order when columns collapse or elements move. - Test zoom, text growth, narrow widths, long labels, dates, prices, and mixed scripts. ## Set Text Sizes and Line Spacing That Are Easy to Read Typography establishes hierarchy, readability, and trust. Use a limited type scale and sufficient line height so text remains comfortable on small screens and stable across content variations. - Start around 28 to 36 pixels for H1, 22 to 28 for H2, 18 to 20 for H3, and 16 to 18 for body text. - Use body line height near 1.6 and heading line height around 1.25 to 1.4. - Do not rely on body text at 13 to 14 pixels or smaller on mobile. - Limit font families and weights; add distinction through hierarchy before adding more typefaces. - Keep normal Japanese letter spacing and use subtle tracking for Latin display text only when needed. - Limit bold emphasis to the few phrases that truly guide scanning. - Test numerals, symbols, multilingual strings, user-generated text, and missing glyphs. ## Use Few Colors and Enough Contrast to Read Text Color should communicate priority, state, and identity without becoming the only carrier of meaning. A restrained palette makes the primary action and important status changes easier to recognize. - Use a dominant background, a supporting text or surface range, and a small accent proportion. - Begin with about three functional colors plus neutrals and one primary accent. - Assign success, warning, danger, and informational colors consistently. - Target at least 4.5:1 contrast for normal text and 3:1 for large text. - Give the primary action a distinct combination of color, shape, label, and placement. - Pair color-coded states with text, icons, patterns, or other non-color cues. - Check every foreground and background pair, including disabled, hover, focus, and image-overlay states. ## Turn Repeated Buttons and Parts into Shared Components Consistency lowers learning cost for users and maintenance cost for teams. Convert recurring visual decisions into shared tokens and components rather than correcting isolated pages. - Define tokens for color, spacing, typography, radius, border, shadow, and motion. - Build reusable buttons, cards, navigation, forms, dialogs, badges, and feedback elements. - Define default, hover, active, disabled, loading, error, and focus states where applicable. - Name variants by purpose or role rather than temporary appearance. - Keep the same role visually and behaviorally consistent across the product. - Document allowed variants, content rules, accessibility requirements, and responsive behavior. - Change the shared component when the pattern changes; avoid page-specific drift. ## Use Images and Icons to Explain, Not Just Decorate Images, icons, and diagrams should explain, orient, or support trust. Standardized asset treatment improves perceived quality while preventing decoration from obscuring the message. - Assign consistent aspect ratios to recurring asset roles such as heroes and cards. - Resize images to their displayed dimensions and prefer efficient modern formats. - Provide responsive sources and defer off-screen images when it does not hide critical content. - Write alternative text that communicates the image's purpose, not merely its appearance. - Keep icon stroke, corner, fill, and optical size consistent within a set. - Organize diagrams as explanation, visual model, and concise takeaway with a clear legend. - Verify text contrast over imagery and provide a stable background treatment when needed. ## Respond Quickly and Quietly When People Click or Type Interaction design should reveal what can be used, acknowledge input, show progress, and confirm outcomes. Motion must clarify state changes without delaying work or causing discomfort. - Provide a visible response to primary input within about 100 milliseconds when possible. - Use short hover and transition durations, often around 120 to 200 milliseconds. - Define pressed, loading, success, error, disabled, and focus feedback for relevant controls. - Use progress indicators or skeletons when completion is not immediate. - Use direction and easing to explain spatial or layer changes rather than decorate them. - Avoid animation that competes with content, traps attention, or blocks input. - Respect reduced-motion preferences and do not autoplay distracting background media. ## Let Keyboard and Screen Reader Users Finish Tasks Accessibility is a core interaction requirement, not a final visual audit. People must be able to perceive status, understand controls, navigate, recover from errors, and complete the primary flow through different input and output modes. - Preserve a visible focus indicator and a logical keyboard order. - Make interactive targets at least 44 by 44 pixels when practical. - Give images meaningful alternatives, controls accessible names, and form fields explicit labels. - Ensure errors identify the field, explain the problem, and state how to correct it. - Provide captions or transcripts for meaningful audio and video. - Verify the full critical flow using only a keyboard and with screen-reader output. - Test contrast, zoom, text resizing, reduced motion, and common color-vision differences. ## Check Loading Speed and Search Basics Before Release Performance, discoverability, and maintainability are part of the designed experience. Define measurable release checks and preserve decisions so improvements survive routine content and component changes. - Use responsive, compressed images and load noncritical assets only when needed. - Subset fonts, allow fallback rendering, minimize blocking styles, and defer nonessential scripts. - Give each page one meaningful H1 plus a distinct title, description, and social preview. - Use LCP below 2.5 seconds and CLS below 0.1 as starting targets, then apply current performance standards. - Test speed and abandonment on the most important signup, purchase, or request flow. - Review hierarchy, spacing, typography, color, states, assets, accessibility, and performance before release. - Record design decisions and implement changes through shared components and tokens. - Monitor real-user outcomes and revise thresholds when evidence shows a better standard.