How to design a website: a detailed guide

Preparation: what you need before opening Figma

Design does not begin with a canvas or colour palette. First, understand the job the website performs, who uses it and which action defines success: an enquiry, purchase, booking, registration, call or access to information. Without this foundation, an attractive layout has no reliable hierarchy.

Collect the following inputs:

• business goals and measurable indicators;
• primary audience segments, needs and objections;
• traffic sources and the context of a first visit;
• required pages, functions, languages and integrations;
• brand guidelines, logo, copy, photography and video;
• platform constraints and the target launch date;
• relevant competitors and what is useful about each example.

Work with final or realistic content. Lorem ipsum hides long headings, complex tables and real information priorities. Content does not simply fill the design after it is finished; it shapes the structure from the beginning.

UX research, user journeys and information architecture

UX determines whether a person can understand the offer, find what they need and complete a task without unnecessary steps. A small project may not require extensive formal research, but decisions should still use customer conversations, search queries, sales questions, existing analytics and competitor analysis.

Write down the primary journeys. For example, a visitor from an advertisement checks a service and sends an enquiry; a shopper finds a product, compares options and pays; a candidate reads a vacancy and submits a CV. For every journey, identify the entry point, required information, decision and final outcome.

Do not design individual screens as independent pictures. The design should describe a complete journey from the first contact to the outcome and the next step.

Create wireframes and a prototype before visual styling

A wireframe is a simplified screen plan without final colours, photography or decorative effects. It allows you to change the order quickly, validate priorities and agree the logic without debating shades and visual preferences.

Start with the key page and the most important journey. On a business website, the hero should explain what is offered, to whom, with which outcome and what to do next. Then add service detail, process, evidence, objection handling and a contact action.

1. place real headings and realistic quantities of copy;
2. describe images by purpose rather than using anonymous grey boxes;
3. maintain one level of detail across all screens;
4. include forms, navigation, modal windows and utility pages;
5. connect important screens in a clickable prototype;
6. complete the journey yourself, then give it to a new user.

Structural changes are cheaper here than after dozens of polished layouts have been created. Do not move to detailed UI until every critical user path has a logical conclusion.

Where to design a website and how to organise the file

Figma has become a standard workspace for web design because it supports collaboration, components, Auto Layout, variables, prototypes and developer mode. Sketch remains suitable for macOS workflows. Image editors are useful for retouching, illustrations and individual assets rather than as the main environment for an interface.

Organise the Figma file from the beginning:

• separate pages for research, wireframes, UI and archived work;
• clear frame names based on page, journey and device;
• a library of colours, typography, spacing and effects;
• components instead of copied buttons, inputs and cards;
• variants for component size, state and context;
• only approved layouts inside the development-ready area.

Avoid names such as “Frame 123” or “final final 2”. An organised file reduces errors, accelerates changes and allows another person to continue the work without reverse engineering your intent.

Visual UI: grid, typography, colour and components

UI turns a validated structure into a coherent interface. Begin with a system rather than a decorative hero: define the container, columns, spacing rhythm, type scale, primary colours and rules for interactive elements.

Grid and spacing

Set a maximum content width, use predictable columns and a small spacing scale. A consistent rhythm is more valuable than adjusting every section independently by eye.

Typography

Define styles for H1–H3, body copy, secondary text, labels and buttons. Test numbers, long words, line height and realistic paragraphs in every language. Too many font files damage both visual coherence and performance.

Colour and contrast

Assign colour roles for background, surface, text, border, accent, success, warning and error. Avoid using one colour as both a decorative accent and an action signal when that makes the interface ambiguous.

Components and states

Create buttons, inputs, selects, cards, navigation, tables, modals and notifications as reusable components. Include hover, focus, active, disabled, loading, error and success states. A layout without states describes a static picture, not a working product.

Responsive design and mobile journeys

Responsive design is not a smaller desktop layout. On narrow screens, section order, line length, navigation, touch targets, tables, filters and modal behaviour change. Begin with content priority rather than placing every element into one column mechanically.

You do not need a layout for every possible width. Create the important reference layouts and describe the rules between them: what stretches, what has a maximum width, when columns stack, how images crop and where navigation changes.

• test widths of 320–360 px and long localised copy;
• provide sufficient touch target sizes;
• do not hide critical information merely to save space;
• keep a visible focus state for keyboard navigation;
• show mobile states for menus, filters, forms and tables;
• consider the software keyboard and validation messages.

Prototyping and testing the design

Connect important screens in an interactive prototype: opening navigation, choosing a product, completing a form, seeing an error and reaching success. A prototype does not need to imitate the entire website; it should cover risky journeys and transitions.

Give a task to several representative users without explaining the interface. Observe where they stop, what they expect after a click and how they name elements. Record task completion, mistakes, time and questions rather than only whether they like the appearance.

Test again after changes. If an existing website is available, combine the session with analytics, recordings and support questions, but do not preserve old problems in the new design simply because users have become accustomed to them.

Accessibility and content edge cases

Accessibility must be designed rather than added after development. Check text and control contrast, visible focus, logical navigation order, clear form labels and messages that do not rely only on colour.

Also review layouts with:

• very long and very short headings;
• an empty list, one item and dozens of items;
• network errors, loading and partially available data;
• enlarged text and keyboard navigation;
• a missing image or content with a different aspect ratio;
• Ukrainian and English versions of the same component.

These scenarios reveal the resilience of the system much more clearly than a perfectly populated presentation screen.

How to prepare the design for developer handoff

Handoff is part of design, not a link to Figma sent on the final day. Ask a developer to review wireframes and complex components before finalising them so technical constraints can be found without expensive redesign.

Export photographs as appropriately sized WebP or AVIF, vector graphics as clean SVG, and transparent raster images only when transparency is genuinely necessary. Verify the licences for fonts, icons and stock material.

When designing the website yourself is not enough

A do-it-yourself approach works for learning, a prototype or a small low-risk task. A store, web application, complex roles, multilingual experience, evidence-based redesign or a website that serves as the primary sales channel usually needs UX, UI, content, technical review and testing within one team.

If you hire a specialist, compare the process, relevant cases, responsive layouts, states, deliverables and ownership rather than one attractive hero screen. Practical criteria are collected in our guide on how to choose a website design contractor.

Website design completion checklist

• the goal, audience and primary conversion are documented;
• the site map and critical user flows are complete;
• the structure was validated before visual styling;
• layouts use final or realistically sized content;
• typography, colours, grid and spacing form a coherent system;
• repeated elements are built as components;
• hover, focus, loading, error, disabled and success exist;
• important pages and journeys have mobile layouts;
• contrast, keyboard focus and form labels were checked;
• long copy, empty lists and errors do not break the interface;
• the critical journey works in an interactive prototype;
• a developer confirmed the feasibility of complex solutions;
• the file is organised, assets prepared and ownership defined.

Frequently asked questions