Web Design: From Sketch To Layout

Web design is like an iceberg. On the surface you see no more than 10% of the work and it seems to be quite simple. But to create a good design and not drown in the process, you need to know a thousand and one thing.

If you start immediately with the drawing of the layout, as most designers do, you risk either creating a template or losing the client, because in this case you work at random. I’ve noticed many times that people with technical education are very easy to master the web, so the logic and consistency.


Web design is a way of presenting information and should never be forgotten. The first web page created had only text and a couple of hyperlinks. And almost all sites used to be similar to books, with a table of contents and the ability to navigate through the links noted in the text.

Despite the fact how much the idea of the web has changed, web design – this information, without it it can not exist. If the client tells you to “make a cool web design on the topic of freight” and does not provide other information, then your first task is to get the information out of it. This is your task, the client does not have to know what you need.

Find out about the project

What’s it called that he wants to sell / tell the consumer what the main idea of the project is, whether it exists or is just starting up.

Imagine that you are going to get a job in a completely new industry, you need to have a better idea of what you are going to do and under what conditions. Whether it’s metal fabrication or investment, you need to understand how it works.

You don’t have to study the resistivity, but the idea of it will help you to create a more thoughtful and interesting design. For example, there is nothing worse than using photos of curtailed drawings for all sites related to architecture and engineering, and this problem is related to the lack of involvement of the designer.

Target audience

You can count how many answers you get that look like “men and women of 18-40 with average income”. Such information is useless and does not answer the question or the target audience.

I usually give examples to clients from my projects and explain that the target audience is characterized not so much by age and wealth as by their points of contact.

The characteristics that work are “practicing architects who know the basic theory and want to improve their skills” or “young people who care about their food and are keen on fitness, with good income and a propensity to buy branded products”.

Features like this will allow you to find the style of presentation and design that suits your target audience. For advanced architects, you can’t use photo drawings, but you can use architectural grids.

Client Philosophy

It’s better to call it brand communication, but if a major client can answer this question, then the rest should be approached from the point of view of philosophy.

It is important for you to understand how the client sees his own product, this point of view may differ from yours. Very seldom is a small business created only for the sake of money, almost always based on personal hobbies or tastes.

For example, if your client is engaged in cheeses, he probably sees something special in them, and if you can not take into account his point of view, then almost 100% probability of failure.

Give us an example of big brands: Nike tells us that we can be heroes and winners, Dove tells us that we are cared for and loved. In web design, this communication has to be in visual style and in information.


This includes graphic information (logo, corporate identity, photographs) and text information (section content and texts). In 50% of cases there is no information and you have to get out of this situation.

I’m still surprised that many people decide to make a website first, and then a corporate identity: this is the moment I decide on what I do corporate identity. Therefore, a big plus for you will be if at least you can make a logo. If this is not the case, you will have to come up with a color scheme and style basics independently in web design.

As for photos: modern websites are unthinkable without photos. If the client has given you good photos, consider that you are fantastically lucky. If the photos are of poor quality, they will directly affect your design.

Put the photo on the entire screen you can not, unless you decide to buy photos from the drains or conduct a photo shoot. So the question of photos is very important, do not forget about it.

Texts. This is not so critical, because the layout of the site and the structure of the pages you can offer based on all the information you have collected above. But when you do, you will need the texts. Most often, customers write them themselves and your task is to explain to them how much volume and content should be texts for the web.

This is a separate story, but usually their volume should not exceed 1-2 paragraphs for each block and you should try to avoid the phrases “individual approach”, “best value for money” and “innovative product”.


Ask the client to provide you with a list of direct competitors. Of course, you need to do the analysis yourself, but you can make it very easy for yourself to find out about the strengths and weaknesses of your clients and the market in general. This will be useful to you in order to make a design that differs from the competitors and highlights your project.

In addition to this list, do the analysis yourself. Don’t forget about the foreign market, some solutions can help you. Try to use more design resources such as behance.net or Pinterest and less search engines. In search engines are very few standing visual solutions and many examples of good promotion.

Leave a Reply