Web Design: Tips for the Look and Usability of a Page

Web design isn't only about how a site looks, but also how easily it can be read and used. Good design guides the visitor's eye to what matters, doesn't make them wonder where to click, and works equally well for everyone who opens it. Here are practical tips on typography, color, layout, buttons, forms, images and accessibility.

The technical side of building a site – page speed, mobile-friendliness and content – is covered in the article on website development. Here the focus is on what the visitor sees on the page itself.

Typography that is easy to read

• Two, at most three fonts. One for headings, one for body text. Every extra font makes the page look busier, and every extra web font also slows loading.
• A large enough font size. At least 16 pixels for body text; a smaller size on a phone forces the user to zoom.
• A line length of about 60 to 80 characters. Very long lines are hard to follow, so text on a wide screen shouldn't stretch across the whole width.
• Line height of about 1.5. Tightly set text looks like a wall and is hard to read.
• Headings that differ from body text in size and weight, so the page can be scanned at a glance.
• A font that supports your language's characters. For a multilingual site, check that the font has all the accented letters and, if needed, other scripts such as Cyrillic – otherwise the browser will show some characters in a different font.

Color and contrast

• A small palette. A primary color, one accent color and neutral colors for background and text are enough for the whole site.
• Enough contrast between text and background. Light gray text on white or gray text on a dark background looks elegant but is hard to read, especially on a phone outdoors. The accessibility guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text.
• Use the accent color only for what matters – buttons, links, warnings. If everything is highlighted, nothing is.
• Information must not depend on color alone. A form error should also have text, not just a red border, because some people don't distinguish colors well.
• A dark theme, if you have one, should be tuned separately, not just inverted: pure white letters on pure black tire the eyes, so slightly softened shades are used.

White space and visual hierarchy

White (empty) space isn't wasted space. The spacing between parts of a page shows what belongs together and what is separate, and gives the eye room to rest. A page crammed to the edges feels cluttered even when the content is good.

• One main thing per screen. In the first few seconds, the visitor should see what the page is about and what they can do.
• More important means bigger and higher. Size, position, color and spacing tell what matters before anything is read.
• Alignment to a grid. Elements aligned to the same lines look tidy; randomly placed ones look amateurish.
• Short paragraphs and subheadings. People on the web mostly skim text, so it should be split into easily recognizable parts.

Buttons and calls to action

• A button must look like a button – filled color, enough size, clear text. Visitors shouldn't have to guess what is clickable.
• Button text says what will happen: “Send inquiry”, “See prices”, “Download the guide”, instead of generic words such as “Click here” or “Submit”.
• One main call to action per section. When three buttons of the same color and size sit side by side, visitors often choose none.
• A large enough area for a finger – on a phone, buttons and links should be big enough and spaced apart so they aren't missed.

Forms that get completed

• Only the necessary fields. Every extra field reduces the number of people who submit the form. For a first inquiry, name, email and message are often enough.
• A label above the field, not just gray placeholder text that disappears as soon as the user starts typing.
• Clear error messages next to the field they refer to, explaining what needs to be fixed.
• The right keyboard on phones – email, phone or number fields should be marked as such (type="email", type="tel"), so the phone offers the right keyboard.
• A confirmation after sending, so the visitor knows the message arrived and what happens next.

Images and icons

• Images should show something real – your product, your premises, your people, examples of your work. Visitors recognize and skip generic photos of “smiling people in an office”.
• One icon style across the whole site, with the same line weight and size.
• No important text inside images. Text in an image can't be copied, translated or enlarged, and search engines and screen readers struggle to read it.
• Descriptive alt text for images that carry information, and an empty alt for purely decorative ones.
• The right file size – an image shouldn't be larger than it is displayed.

Animations and effects

This advice comes from the old article and still holds: even the most beautiful effects quickly become tiresome and must not distract from the information. Animation makes sense when it explains something – for example, showing that an item was added to the cart or that a menu opened.

• short, subtle animations (under half a second) instead of long intro effects;
• no autoplaying sound or video with sound;
• no pop-ups covering the content as soon as the page opens;
• respecting the “reduce motion” setting (prefers-reduced-motion) that some users turn on in their system.

Accessibility

An accessible site can be used by people with weaker eyesight and by those who use only a keyboard or a screen reader. Most accessibility rules make the site better for everyone else too:

• enough contrast and the ability to enlarge text without “breaking” the page;
• a visible focus outline when moving through the page with the Tab key;
• links whose text makes sense out of context (“Website development prices”, not “here”);
• headings (H1, H2, H3) in a logical order, because screen reader users navigate by them;
• labels for all form fields and alt text for images.

Consistency across the whole site

The same elements should look and behave the same on every page: the menu in the same place, buttons of the same shape, links of the same color, headings of the same style. That way visitors learn once how the site works. The easiest way to achieve this is to create a small set of rules at the start – colors, fonts, sizes, spacing, button and form styles – and build every new page from the same parts.

Two more tips from the old article that never go out of date: don't publish unfinished pages with an “under construction” notice and links that lead nowhere, and update your content regularly – nothing looks worse than an announcement of a sale that ended years ago.

What is outdated in the old tips?

This page used to be a translation of a German article on web design from the 1999–2004 period. Some tips from that time no longer apply:

• Flash and frames – no longer used; browsers have not supported Flash since 2021.
• Testing 16-bit and 32-bit color depth – today you test on different screen sizes and devices, above all on phones.
• “Fonts must be installed on the visitor's computer” – web fonts load from the site, so this limitation no longer exists, but every font adds loading time.
• Meta keywords and manually submitting a site to search engines – Google doesn't use meta keywords and finds new pages on its own, through links and sitemaps.