|
Too lazy to set a custom title
Industry Role:
Join Date: Dec 2002
Posts: 22,083
|
Genuine, constructive criticism here...
Instruct your agent to use best webdesign practices, especially for font sizes and contrast ratio.
Quote:
Best practices for website design focus on creating an accessible, readable, and consistent user experience. Key principles include setting body text to at least 16px (1em) for legibility, maintaining high color contrast (at least 4.5:1 for normal text), and using hierarchy to guide users.
Typography Best Practices
Typography is crucial for conveying information effectively and ensuring content is comfortable to read across different devices.
Font Size:
Body Text: Set a minimum size of 16px (1em) for body copy on all devices to ensure most people can read without zooming. For text-heavy pages like blogs, consider increasing this to 18px–20px.
Headings: Use larger font sizes to establish a clear hierarchy. For example, on desktops, H1 might be 32–36px, H2 24–30px, and H3 20–24px. On mobile, scale these down slightly (e.g., H1 to 24–30px) to save space.
Functional/Secondary Text: Captions, navigation items, and footnotes can be slightly smaller, around 12–14px, but should rarely go below this default.
Input Fields: Text inputs must use a font size of at least 16px to prevent iOS browsers from auto-zooming, which can obscure part of the input.
Scale relative: Use a modular scale (like 1.250 or 1.333 ratio) to make headings scale proportionally relative to the body text.
Consistency: Use as few different font sizes as possible across the site.
Font Style & Legibility:
Typefaces: Choose fonts that are easy to read. Limit the number of typefaces to two or three to maintain visual consistency and a professional look.
Weights: Use font weight to enhance contrast between headings and body text. Avoid very thin or hairline weights, as they can be hard to read on older devices. Aim to use no more than three font weights.
Alignment: Most websites benefit from consistent left-aligned text (set flush left), as it provides a constant starting point for the eye. Avoid justified text, which does not display well in web browsers.
Color and Contrast Standards
Accessible color choices are essential for users with visual impairments, including color blindness and low vision, and improve usability for everyone.
Contrast Ratios (WCAG Standards):
Normal Text: Requires a contrast ratio of at least 4.5:1 against the background for WCAG Level AA compliance.
Large Text: Text that is 18pt (approx. 24px) or larger, or 14pt (approx. 19px) and bold, requires a minimum ratio of 3:1.
Interactive Elements: Ensure buttons, forms, and icons have a contrast ratio of at least 3:1 higher.
Highest Standard (Level AAA): For enhanced accessibility, strive for a ratio of 7:1 for normal text and 4.5:1 for large text.
Effective Combinations:
Use dark text on a light background or light text on a dark background.
Avoid combinations of two strong colors (e.g., bright blue on bright yellow) or low-contrast pairings like light gray on white.
Use neutral colors (dark grays, off-whites) to reduce harshness.
Beyond Color:
Never rely solely on color to convey information, indicate actions, or distinguish elements. For example, do not mark error messages only in red; pair them with icons, patterns, or clear text labels.
Links: Differentiate links from surrounding text using both color and another indicator, such as an underline. Links must also have a 3:1 contrast ratio against the surrounding body text.
Readability and Spacing
Proper spacing prevents text from feeling overwhelming and helps readers flow naturally from one line to the next.
Line Height (Leading):
For standard paragraphs, use a line height of at least 1.5 times the font size.
Short headings can have a smaller line height, between 1 and 1.35.
Line Length (Measure):
Control line length to keep reader attention. Most lines should be 45–90 characters long. A target of roughly 66 characters is often ideal for long texts.
Whitespace:
Use whitespace to group related elements and distinguish different sections.
Use unindented paragraphs separated by whitespace on the web. Aim for at least 1em of whitespace between paragraphs.
Layout and Navigation Principles
A successful design guides user behavior and makes key tasks intuitive.
Navigation Best Practices:
Simplicity and Visibility: Keep navigation clear and make it visible. Most people expect to find the main menu at the top of the page.
Descriptive Labels: Use plain, short, descriptive labels (e.g., "Compare plans," "Find pricing") rather than creative or generic terms.
Limit Menu Items: Try not to include more than seven labels in your primary menu to avoid decision fatigue.
Consistency: Keep navigation patterns, labels, and order consistent across all pages. Use active states to show users their current location.
Responsive Design: Optimize navigation for all devices, including using thumb-friendly menu buttons (like a hamburger menu) on mobile.
General UX Principles:
User-Centricity: Design around user goals and research, not business assumptions.
Hierarchy: Use size, color, and contrast to create a visual hierarchy. The primary Call-to-Action (CTA) should be the highest-contrast element and dominating headlines should signal importance.
Scannability: Break content into easy-to-scan headlines and short messaging.
Consistency: Keep layouts, button styles, and patterns standardized across the site to reduce mental effort for the user.
|
Tell your agent that ^^^
And if you're using Claude Code, absolutely use the frontend design skill and it will stop making your sites look like an Ai agent did it.
/frontend-design — "Create distinctive, production-grade frontend interfaces with high design quality"
It came from Anthropic's official marketplace (frontend-design@claude-code-plugins), 277K+ installs.
 |