Good web design is not decoration. It is the set of decisions that help a visitor understand what you offer and act on it, on any screen, quickly. This handbook condenses the principles that matter in 2026, from layout and typography to accessibility, responsive design and speed, into one practical reference.
Design for the visitor's goal first: a clear visual hierarchy, readable type, strong contrast and plenty of white space. Plan with wireframes before you style anything, build mobile-first with modern CSS (Flexbox, Grid, custom properties), and meet WCAG 2.2 AA so everyone can use the site. Keep pages fast, because Google's Core Web Vitals measure loading, responsiveness and layout stability, and slow pages lose visitors.
1. The core principles
Every good page applies a handful of ideas consistently:
A useful test: squint at your page. The things that still stand out should be the ones you most want visitors to notice.
2. Colour and typography
Colour. Start with one brand colour, one accent for actions (buttons, links) and a set of neutrals for text and backgrounds. Use the accent sparingly so calls to action stay visible. Never use colour as the only signal: an error needs text or an icon, not just red.
Contrast. Body text needs a contrast ratio of at least 4.5:1 against its background, and large text at least 3:1 (WCAG 2.2 level AA). Free contrast checkers show the ratio instantly.
Typography. Two typefaces are plenty, often one. For comfortable reading:
- body text around 16px or larger, with a line height of about 1.5;
- lines of roughly 50–75 characters;
- a clear heading scale, so an h2 is obviously smaller than an h1 and larger than body text;
- system fonts or a small number of web font weights, to keep pages fast.
3. Plan before you design
- Define the goal.What should a visitor do: call, buy, book, enquire? Each page should support one main action.
- Know the audience.Who visits, on what device, and what they are looking for. For many Indian small businesses most visitors arrive on a phone.
- Map the content.List the pages and what goes on each before choosing colours.
- Wireframe.Sketch low-detail layouts on paper or in a design tool to settle structure and hierarchy.
- Prototype and test.Build a clickable version and watch a few real people try to complete the main task. Fix what confuses them.
Tools in 2026. Figma is the most widely used design and prototyping tool, with real-time collaboration in the browser. Penpot is a free, open-source alternative. Sketch remains a macOS option. Adobe XD is no longer actively developed, so avoid it for new projects.
4. Usability and navigation
- Keep navigation short and predictable: five to seven top-level items, labelled with the words visitors use, not internal jargon.
- Show where people are: highlight the current page, and use breadcrumbs on deep sites.
- Make links look like links and buttons look like buttons, with clear hover and focus states.
- Give feedback: a form should confirm success and explain errors next to the field that caused them.
- Write for scanning: descriptive headings, short paragraphs, lists and one idea per paragraph.
- Microcopy matters: "Get a free quote" tells visitors more than "Submit".
5. Accessibility
Accessible design lets people with visual, motor, hearing or cognitive impairments use your site, and it improves the experience for everyone. The reference standard is WCAG 2.2, and level AA is the usual target.
| Area | What to do |
|---|---|
| Text alternatives | Meaningful alt text on informative images; empty alt on decorative ones |
| Keyboard | Every link, button and form works with the keyboard alone, with a visible focus outline |
| Structure | Real headings in order, lists as lists, labelled form fields |
| Contrast | 4.5:1 for body text, 3:1 for large text and interface elements |
| Target size | Tap targets at least 24 by 24 CSS pixels; 44 is more comfortable on phones |
| Media | Captions on video; no autoplaying sound |
Test with the keyboard (Tab through the page) and an automated checker such as Lighthouse or WAVE, then with a screen reader if you can.
6. Responsive, mobile-first design
Design for the smallest screen first, then add layout as space allows. This keeps the essentials at the top and the code simpler.
- Fluid layouts: use relative units (
%,rem,fr) and let content reflow rather than fixing widths. - Breakpoints by content: add a media query where the design starts to look wrong, not at specific device sizes.
- Container queries: supported in all current browsers, they let a component adapt to the space it is placed in, not just the screen width.
- Responsive images: serve smaller files to small screens with
srcsetandsizes. - Test on real devices, including a mid-range Android phone on mobile data.
Google indexes the mobile version of your site, so a poor mobile layout also hurts search.
7. Modern CSS and frameworks
Plain CSS now covers most of what once needed extra tools:
- Flexbox for one-dimensional layout (a row of buttons, a navigation bar) and Grid for two-dimensional page layout.
- Custom properties (
--brand-color) for themes, including dark mode, set in one place. - Native nesting and
:has()reduce the need for a preprocessor. Sass is still useful on large projects; Less is rarely chosen today. - Transitions and animations for small feedback such as a button press. Keep them short and respect
prefers-reduced-motion.
Frameworks and design systems. Bootstrap gives ready-made components; Tailwind CSS gives utility classes for building your own (see our Tailwind CSS handbook). On larger sites, a small design system of shared colours, type, spacing and components keeps every page consistent.
8. Speed and Core Web Vitals
Speed is part of design. Google measures real-user experience with three Core Web Vitals:
| Metric | Measures | Good score |
|---|---|---|
| Largest Contentful Paint (LCP) | How fast the main content appears | 2.5 seconds or less |
| Interaction to Next Paint (INP) | How quickly the page responds to taps and clicks | 200 milliseconds or less |
| Cumulative Layout Shift (CLS) | How much the layout jumps while loading | 0.1 or less |
Design choices that help:
- compress images and use modern formats (WebP or AVIF), and lazy-load images below the first screen;
- set width and height on images and embeds so the layout doesn't shift;
- avoid heavy sliders, autoplaying background video and large animation libraries;
- limit web fonts and third-party scripts (chat widgets, trackers).
Check with Google PageSpeed Insights. For hosting-side causes of a slow site, see my website is slow.
9. Design and search
- Clear structure: one h1 per page, logical headings and descriptive URLs help both visitors and search engines.
- Real text: put important words in text, not inside images.
- Descriptive image file names and alt text.
- Internal links between related pages, with meaningful link text.
- HTTPS everywhere. A site without a certificate is marked "Not secure".
10. Where Domain India fits
- Build it yourself: Domain India shared hosting runs WordPress (installed in a few clicks) or your own HTML and CSS, with free SSL included. See WordPress hosting or cPanel hosting. The card shows the live price, excluding 18% GST.
- Let AI do the first draft: the AI Website Builder creates a complete, mobile-friendly site from a description of your business, with 18 templates to switch between. You can build and preview a site free; see AI builder plans and features.
- 25 GB NVMe SSD Storage
- 50 GB Monthly Bandwidth
- 1 Website
- 10 Email Accounts
What are the basic principles of web design?
Visual hierarchy, contrast, alignment, white space, consistency and balance. Together they help visitors see what matters first, read comfortably and find the action you want them to take.
What contrast ratio should website text have?
At least 4.5:1 for normal body text and 3:1 for large text, which is the WCAG 2.2 level AA requirement.
What does mobile-first design mean?
You design and build the layout for small screens first, then add columns and extra layout for larger screens with media queries. It keeps the essential content at the top and the code simpler.
Which design tool should I use in 2026?
Figma is the most widely used tool for web design and prototyping. Penpot is a free, open-source alternative. Adobe XD is no longer actively developed, so it is not a good choice for new projects.
What are Core Web Vitals?
Google's three measures of real-user experience: Largest Contentful Paint (good at 2.5 seconds or less), Interaction to Next Paint (200 milliseconds or less) and Cumulative Layout Shift (0.1 or less).
Do I still need Sass or a CSS framework?
Not always. Modern CSS has custom properties, nesting, Flexbox, Grid and container queries. Sass and frameworks such as Bootstrap or Tailwind CSS still help on larger projects or teams.
Which accessibility standard should a website follow?
WCAG 2.2 at level AA is the usual target. It covers text alternatives, keyboard access, contrast, form labels, target size and captions.
Ready to put these principles to work? Start with cPanel hosting or WordPress hosting, or let the AI Website Builder create your first design.
Shared hosting with free SSL and one-click WordPress installs, ready for your own design.
See hosting plans