Web design is the work of planning how a site looks and how a visitor moves around it. It is broader than choosing colours and images: what appears first on the page, where the button goes and how many fields the form has are all design decisions. Good design is not design that looks beautiful, but design that takes the visitor to an answer and an enquiry by the shortest route.
Key takeaways:
- Web design has two parts: UX (how the site works) and UI (how the site looks).
- Design is produced in stages: research, structure, wireframe, prototype, visual design and mobile version.
- Good design has measurable rules: text contrast, button size, font legibility and page speed.
- A site is designed for the phone first: Google evaluates sites by their mobile version.
- Design is judged not by taste but by results: how many visitors made an enquiry, how many completed an order.
What is web design?
Web design is the plan for everything a visitor sees and does on a site. The designer answers these questions: what should a person see first when they open the page, how will they understand the next step, where will they find the price, how easy will it be to fill in the form?
Treating design as decoration is the most widespread misconception. Decoration answers the question "how can it look nicer?", while design answers "how can the visitor reach their goal faster?". That is why design starts not from colour but from the site's goal and structure; we explain this stage in the article how to build a site structure.
What do UX and UI mean, and what is the difference?
UX (user experience) is the path a person takes while using a site: do they find what they are looking for, are the steps clear, where do they get stuck. UI (user interface) is the visible part of that path: colours, fonts, buttons, icons, spacing.
Nielsen Norman Group defines user experience as follows: it covers all aspects of the end user's interaction with the company, its services and its products (NN/g).
Take a restaurant: UX is how you book a table, how clear the menu is and how long you wait for the bill. UI is the interior, how the dishes look and the layout of the menu. People do not go back a second time to a restaurant with a beautiful interior and slow service; the same is true of a website.
| UX design | UI design | |
|---|---|---|
| Question | How does the site work? | How does the site look? |
| What it deals with | Structure, scenarios, the sequence of steps, forms | Colour, typography, buttons, icons, spacing |
| Result | A diagram of the pages, wireframes, a prototype | Finished mockups, a set of components (UI kit) |
| How it is checked | Can a person complete the task? | Is the text readable, does it fit the brand, is it correct on every screen? |
| When it is weak | The visitor gets lost and leaves | The site looks untrustworthy and outdated |
On small projects, one designer does both jobs and the role is called "UX/UI designer". What matters is not the title but that both jobs get done.
What stages does website design go through?
Professional design goes through seven stages, and each stage has a result that is shown to the client:
| Stage | What is done | Result |
|---|---|---|
| 1. Research | The business, customers and competitors are studied | The site's goal and the audience's questions |
| 2. Structure | Pages and the menu are defined | Site diagram |
| 3. Wireframe | The blocks of each page are drawn without colour, as a simple diagram | Wireframes of the key pages |
| 4. Prototype | Wireframes are linked together and made clickable | A model that can be tested |
| 5. Visual design (UI) | Colour, fonts, images and buttons are prepared to match the brand | Mockups of the key pages |
| 6. Responsive versions | Each page is laid out separately for phone and tablet | Mobile mockups |
| 7. Handover | Mockups and components are passed to the developer | Design file and UI kit |
The wireframe stage is often skipped because "grey boxes" look uninteresting to the client. Yet this is exactly where changes are cheapest: moving a block on a wireframe takes a minute, while on a finished site it takes hours.
Today design is mostly done in Figma: it runs in the browser, and the client can view the mockup via a link and leave comments. At handover, also ask for the design file; like the site's code, it should belong to you.
How is good design measured?
"I like it" and "I don't like it" are weak measures for judging design. International standards contain rules that can be checked:
| Rule | Requirement | Source |
|---|---|---|
| Contrast of text against the background | At least 4.5:1 for regular text, 3:1 for large text | WCAG 2.2 |
| Size of a clickable element | At least 24×24 pixels | WCAG 2.2 |
| Loading of the main content (LCP) | 2.5 seconds or less | web.dev |
| Response to clicks (INP) | 200 milliseconds or less | web.dev |
| The page not "jumping" (CLS) | 0.1 or less | web.dev |
Grey text on a light grey background may look fashionable, but it is unreadable on a phone in sunlight. Small buttons, meanwhile, cause mis-taps on a phone. WCAG's 24 pixels is the lower limit; platforms recommend larger sizes: Google recommends at least 48×48 dp for Android (Google), and Apple uses 44×44 pt as the standard for iOS buttons (Apple).
Beyond these figures, there are three simple tests:
- Five-second test. Show someone who has not seen the site the home page for five seconds and ask: what does this company do? If they cannot answer, the problem is the design.
- Task test. Say "find the price" or "sign up" and watch from the side. Wherever they stop is where a fix is needed.
- Thumb test. Use the site on your phone with one hand. Your thumb should reach the main buttons.
Why does mobile design come first?
A site is designed for the phone first and then expanded to a large screen, because most visitors are on a phone and Google evaluates a site by its mobile version. Google calls this switch "mobile-first indexing" and announced in October 2023 that it was complete (Google Search Central).
According to StatCounter data for September 2026, 65.57% of web traffic in Azerbaijan comes from mobile phones and 34.01% from computers (StatCounter). In other words, two out of every three visitors see your site on a phone.
The main rules of mobile design:
- One column. On a phone, content is stacked from top to bottom in one column; there should be no horizontal scrolling.
- Large, well-spaced buttons. A finger is bigger than a mouse pointer.
- Short forms. Every extra field loses you a share of enquiries. Name and phone are often enough.
- Sticky contact button. Call and WhatsApp are always visible at the bottom of the screen.
- Light images. On mobile internet a heavy image slows the page down. We show how to measure this in the article website loads slowly.
Almost all visitors who come from ads are on a phone. So when you prepare a page for ads, look at the mockup on a phone first; we write about this in detail in the landing page guide.
How does design affect sales?
Design affects sales directly, because whether a visitor stays or not is decided in the first seconds. According to an analysis published by Nielsen Norman Group in 2011, people often leave a web page within 10–20 seconds; if the page shows its value clearly in that time, attention lasts longer (NN/g).
People do not read a page, they scan it: they look at headings, first lines and highlighted words (NN/g). So in a design that sells:
- the headline states the offer in one sentence;
- each screen has one main action, and the button says "Get a quote", not "Submit";
- long text is broken into short paragraphs, lists and tables;
- reviews, figures and real work sit next to the decision point;
- the form is as short as possible.
The price of design is clearer in online stores. According to the average that the Baymard Institute calculated across 50 studies, 70.22% of people who add a product to the cart do not complete the purchase. In a survey of US shoppers, the reasons include high extra costs (40%), a requirement to create an account (18%) and a long, complicated checkout (17%) (Baymard Institute). Most of these are design decisions: showing the final price up front, allowing checkout without registration, reducing the number of steps.
Ready-made template or custom design?
| Criterion | Ready-made template | Custom design |
|---|---|---|
| Price and timeline | Cheap and fast | More expensive and longer |
| Fit with the brand | As far as the template allows | Fully matches the brand book |
| Standing out | Other sites use the same template too | The design belongs only to you |
| Structure | Content is adapted to the template | The design is built around the content and the customer journey |
| Who it suits | A first website, a pilot project, a limited budget | A competitive market, a premium brand, complex functionality |
A template is not a bad choice: if the goal is simple and the budget is small, it is the right start. The problem begins when the template's hidden limitations come to light; we show this with examples in the article why a cheap website costs more.
What are the most common mistakes in web design?
- Building the design around the manager's taste. The reader of the site is the customer, not the manager.
- Opening the home page with a slogan. "Quality and reliability" says nothing; "Office renovation in Baku, handed over in 30 days" says everything.
- An auto-rotating slider. The visitor has no time to read the text, and the main offer gets lost on the second or third slide.
- Weak contrast. Light text on a light background is unreadable on a phone.
- Leaving the mobile version to the end. A mockup that looks beautiful on a computer falls apart on a phone.
- Pop-ups. A discount pop-up that appears as soon as the page opens gets in the way of reading.
- Long forms. Few people fill in a form with ten fields.
- Stock photos. A photo of the real team and a real facility builds more trust than a photo of a smiling model.
How do you evaluate a designer or an agency?
Choose a designer by working websites, not by pictures. Ask six questions at the meeting:
- Can you show live websites? Not a picture of a mockup, but a site that opens. Check it on your own phone.
- What stages does the process include? Is there a structure and prototype stage, or does a "beautiful mockup" come straight away?
- Is the mobile version designed separately?
- Who writes the texts? The design should be made with real text; a mockup drawn with "lorem ipsum" changes when the real text arrives.
- How many rounds of revisions are included in the price?
- Will we be given the design file and the UI kit?
We have collected the remaining criteria for choosing a team in the article how to choose a website development company in Baku.
How does Advertol handle design?
In Advertol's website projects, the site structure and a prototype are prepared before moving on to design, so that the logic is agreed in advance. In the design stage, the key pages are presented first, the client's feedback is collected, and then the remaining pages are continued in the same system.
- Aston Martin. The site is built not with a ready-made template but with code that follows the brand identity: the colour palette, typography and rhythm of spacing were first adapted to the brand language and then transferred into code.
- Padel 77. For the club, the brand identity was prepared first and the site was built on top of that identity; the main action, that is, online court booking, is in the foreground.
Advertol is an agency based in Baku: website and mobile app development, Meta and Google advertising, SMM, CRM and AI automation are handled by one team. If you need a project where design is run to one plan with code and marketing, see the website and app development service.
Frequently asked questions
Are a web designer and a developer the same person?
Usually not. The designer plans how the site will look and work, and the developer turns that plan into code. On website builders one person can do both jobs, but in complex projects they are separate specialisms.
Can you build a website without UX design?
Technically yes, but it is like building a house without a plan. When the UX stage is skipped, mistakes surface after the site is ready and are expensive to fix. On a small site the UX work can be short: a structure, a few wireframes and one test.
How long does website design take?
The duration depends on the number of pages and how quickly approvals come. A one-page landing page takes days; a multi-page corporate website or an online store takes weeks. Most of the time is taken up not by the design itself but by waiting for texts and for the client's feedback.
What is Figma?
Figma is one of the most widely used tools for website and app design. It runs in the browser, so the designer, the client and the developer view the same mockup via a link and can leave comments. The client does not need to learn the program; looking at the mockup and writing feedback is enough.
Does design affect a site's position in Google?
Yes, indirectly. Google takes page speed, mobile compatibility and ease of use into account, and all of these depend on design decisions. Heavy images, jumping blocks and text that is unreadable on a phone hurt the position.
When does a site's design need to be refreshed?
When the numbers say so: there are visitors but no enquiries; the site is hard to use on a phone; new services do not fit the old structure. The feeling that "the design has gone out of date" is not a reason on its own. Before refreshing, look in analytics at which pages are losing visitors.
Conclusion
Web design is how a site looks and how it works; UX is responsible for the ease of the journey and UI for the appearance. Design starts from the structure, goes through the wireframe and prototype, is laid out separately for the phone and is judged by results. When you look at a mockup, ask "will my customer find what they are looking for here?" before "is it beautiful?".
If you want to assess the design of your site or discuss the design process for a new site, book a free strategy meeting or write to the Advertol team.
Sources
- Nielsen Norman Group — The Definition of User Experience (UX)
- Nielsen Norman Group — How Long Do Users Stay on Web Pages?
- Nielsen Norman Group — F-Shaped Pattern of Reading on the Web
- W3C — WCAG 2.2, Contrast (Minimum)
- W3C — WCAG 2.2, Target Size (Minimum)
- web.dev — Web Vitals
- Google Search Central Blog — Mobile-first indexing has landed, 31.10.2023
- Google Accessibility Help — touch target size
- Apple — Human Interface Guidelines, Accessibility
- StatCounter — Desktop vs Mobile vs Tablet Market Share, Azerbaijan, September 2026
- Baymard Institute — Cart Abandonment Rate Statistics, 22.09.2025