Website design

A template was drawn for “a shop in general”, so it is your business that has to be squeezed into it, not the other way round.

A ready-made template is a set of pre-drawn blocks bought by hundreds of companies around the world. A site built on one launches quickly, but it looks just like the competitor across the street, and the content has to fit someone else’s frame: three benefits fit here while you have five, one product photo is allowed here while you have ten.

We work the other way round: first we find out what you sell, to whom, and how you differ, and only then choose the colours, fonts, block shapes and character of the imagery. A door shop and a dental clinic get different layouts not because it looks nicer, but because people come to those sites with different questions.

• we build the visual direction around your product and your buyer
• we use your colours, photos and logo, not stock pictures
• we build the blocks around your content, not the content around the blocks
• we draw the set of pages you actually need

Honestly about the other side: a template is cheaper and faster. If you need a simple site of a few pages and the budget is tight, that is a perfectly good start. Custom design pays off when the site is your main sales channel, or when you compete with companies whose sites are already done well.

A simple test for any layout: cover the logo with your hand. If you then cannot tell whose company it is, you are looking at a template, however pretty.

UX is simply the order in which a person finds what they came for and never has to wonder where to click next.

A visitor arrives with a specific question: how much does it cost, is it in stock, do you deliver to my city, how do I order. The design decides in what order they get the answers. If the price is hidden on the fourth screen and the phone number sits only at the very bottom, the person leaves for the neighbour before finishing your text about advantages.

So before drawing anything we write out the path: where the person came from, what they must see first, what convinces them to stay, and which button ends it all. For a repair technician that is “call-out and inspection price” at the top; for a dental clinic it is the service with a price, the doctor with a photo, reviews, and a booking button next to every block.

• we define the main action of the page: a call, an enquiry, the cart
• the most important things go on top, the secondary ones below
• we repeat the action button where the person is ready to act
• we remove extra fields from forms and extra steps from the order

The most common mistake is the wish to put everything on the first screen at once: the promotion, the catalogue, the form and a banner too. When three equally bright buttons share a screen, people choose none of them. Remove two and the third starts getting clicked more often.

Test your homepage with someone else’s hands: give your phone to a friend who knows nothing about your business and ask them to say within ten seconds what you sell and how to order from you.

For most sites the phone is the main screen, so we design the mobile version separately instead of shrinking the desktop one.

When a layout is simply squeezed, the same four columns and the same tiny captions stay on the screen. Hence the familiar things: the text has to be zoomed with your fingers, the buttons sit right on top of each other, the specification table sticks out sideways, and the page starts sliding horizontally.

On a narrow screen the order of blocks has to be different. We decide separately what the person sees first, what folds into an accordion, what the menu becomes, and where the call button sits so it is visible without scrolling. This is not a translation of the desktop into mobile but a scenario of its own: people often read on the move, with one hand and a poor connection.

• separate layouts for phone and tablet, not one desktop layout
• we rebuild menus, filters and tables for a narrow screen
• we make buttons and links big enough for a finger to hit
• we check screen rotation and long product names

A telling example is a door shop. On a computer a filter with ten parameters sits calmly in a column on the left. On a phone that column either eats the whole first screen or disappears altogether — both are bad. The working solution is different: a separate “Filter” button that opens the parameters over the page.

The quickest check without specialists: open your site on a phone and try to place an order with one hand while standing in a queue. Everything that gets in the way is your to-do list for the mobile version.

We look at competitors’ sites not to copy them, but to see what the niche is already tired of and do it differently.

A client almost never looks at a single site. They open four or five tabs in a row and compare them within a minute. If everyone in the niche makes a blue site with a smiling stock model on the first screen, your identical site simply gets lost among the other tabs — even if it is neatly made.

We take apart how competitors build their homepage, whether they show prices, how many steps lead to an enquiry, what they put first, and how they present products or completed work. Their weak spots are a ready-made list of what you should do better. If everyone says “price on request” and you show at least a “from-to” range, that is already an advantage — and it belongs at the top of the page, not at the end.

• we look at several sites in your niche and a few from other cities
• we note what everyone does the same way — and what has grown stale
• we look for where they are awkward: no prices, a long form, a heavy catalogue
• we write down what really makes you different, so it can be put up front

Sometimes the conclusion of such a review is uncomfortable: in your niche what wins is not the styling but the speed of your reply, visible prices and decent photos of your work. Then we say so plainly — and bet on exactly that instead of effects and animation.

Before meeting a designer, open three or four competitor sites and say honestly what you like and what annoys you. That half hour saves a whole stage of work.

AI speeds up the drafts — styling options, illustrations, banners — but what goes into the layout is the designer’s decision.

Previously, to show a client three different visual directions, a designer drew them by hand over several days. Now part of the drafts can be ready within hours: a few moods, colour combinations and illustration options to look at — and to agree on what suits you best. You see the options sooner instead of after a week of waiting.

At the same time AI knows neither your price list nor what clients ask most often on the phone. It will not build the catalogue structure and will not decide what belongs on the first screen. So everything to do with logic and structure is done by a person, while AI stays where it really is faster: graphics, illustrations and quick testing of ideas.

• a fast search for visual directions at the start
• unique illustrations and backgrounds instead of stock pictures
• ad banners and social media visuals in the style of the site
• draft prototypes, to show an idea sooner

Honestly about the limits: generated graphics almost always have to be finished by hand — fixing details, matching your colours, recropping to the format needed. So AI saves time on finding the idea, not on the whole job, and it cannot replace a designer.

If someone offers you “AI design” and that is all, ask who will design the structure of the pages. A pretty picture without a thought-out user journey brings no enquiries.

A layout is not a picture to sign off — it is the instruction a developer builds the site from, without guessing.

A typical story: the design is approved, and then during the build it turns out nobody drew what the button looks like on hover, what to show when a category has no products, and what happens if someone fills in the form incorrectly. The developer finishes it off as best they can — and the live site differs from what you were shown.

That is why we hand over a system, not a set of pictures. The layouts are made in Figma: repeated elements are collected into components, states and spacing are described, fonts and colours are listed separately. It works just the same if your own programmer builds the site — the interface will not have to be designed a second time.

• one grid and spacing scale that is clear for the build
• buttons, fields and cards collected into reusable components
• states drawn out: hover, error, empty list
• fonts, icons and images prepared in the formats needed

There is a separate benefit to design and development sitting in one team: the designer sees at once what would be hard to build and what it would cost. So effects that would later have to be thrown out or paid for separately never make it into the layout.

If you order the design separately from the development, ask for access to the layout file, not just the pictures. Without the file a new developer starts from scratch, and you pay for the design work twice.