A Step-by-Step Guide to Help Design a Website From Scratch. Part Two: Developing a Visual Concept of the Site

In the previous article we talked about what information is necessary to make a website and where to find it. Finished with the analysis of everything, decided on the purpose of the site, target audience, competitors and functionality, you can proceed to the visual concept and, in fact, layouts. In this part we will talk about the questions and difficulties, which arise most often, and how not to make sites. And what tools to use to create a layout, you can see in the third part.

Visual concept


The first thing I recommend to come up with a key image of the site, from this will be much easier to push when choosing design: imagine him as a person – with a character, appearance, their characteristics, communication style and behavior. This “person” will offer customers and users the products or services of the business. And here it is important not to forget about the target audience and competitors: what kind of character and communication style will “go” better with customers? Or what image should be different from your competitors?

Naturally, this image has to be somehow described and synchronized with the customer. In addition to the text description, there is an excellent tool – the moodboard. It looks, usually, as a set of pictures, colors, phrases, photos and other details that will help describe the overall mood and set it for the implementation of the design.

Selecting colors


After creating the image of the site selection of color palette does not seem like such a big deal. Now we know what the character of our site will be – so let’s choose colors that will help reveal it.

Colors have a psychological effect on us: there is a theory that different colors evoke different emotional states. For example, red is more about active motivation, while blue is about calmness and sanity, and green is about life, peacefulness, nature. Agree, would be strange to do a children’s site in black, and a site for car clubs – in pink. Read more on this topic can be found in a book by Johannes Itten, “The Art of Color. There will be about characters, and the use of the color wheel, combinations and contrasts.

So, how to choose colors for the site


Do not forget about the target audience: based on their preferences, as well as the desired emotional impact, decide on the nature of the presentation of the site – something calm, active-leader, fun and carefree, etc. After that, you can choose a primary color.
Color combinations: for a nice combination of colors need them to be located on the color wheel in a certain order – sequentially, complementary, in a triangle, etc. The easiest way – to pick up a complementary combination using Adobe Kuler, there are other options for combinations.

Number of colors: the site should not be a rainbow, otherwise the user will get confused, lost and will forget why he came. I usually use the following scheme – one primary color (for the most important and active elements), one additional (for greater freedom of design elements), one basic non-contrast (to separate blocks of content), as well as white for the background and black or some dark color for text to read well (of course, you can go to a dark theme and do the opposite).
The volume of color: the more active and contrasting colors in relation to others, the less it should be on the site. Thus, the primary color is best used point by point, in those places where you need to emphasize something (such as the most important and targeted button or the most important headline) – about 10% of the site. Additional color, not as active as the main color can be used on 20-40% of the site, the basic non-contrast color – 40-50%; well, the background – this is the background.

Typography


Typography for the site is also better to choose according to the image of the site. Like colors, different fonts also evoke different emotions. For example, a font with serifs (antiqua) speaks of something refined and sublime, and without serifs (grotesque) – optionally, about something modern and technological. Again, this is not the final truth, no one forbids experimentation. Think about what tone and style of speech your “hero” will communicate?

3 tips for working with typography


Pick a typeface pair. Not a threesome, not a fivesome, but a pair. It’s best to use no more than two fonts on the site, and ideally – two fonts from the same headset. For example, some typefaces include both sans serif and sans serif fonts, as well as a bar font. If you combine them, they will combine with each other because they have the same anatomy (features of lettering, the nature of the curves of lines and so on).

Create text design guidelines. Based on the site content, determine how many headings, subheadings, whether there will only be text or more captions, inserts, cues, etc. Remember about the purpose of each style of text: titles should contrast with each other in size and shape (bold, medium, italics, etc.), so the reader can immediately navigate among the content, and the main text should be easy to read, not too big or small. Usually you need 2-3 styles for titles, one for text, and one more for captions, small text, etc.

Stick to the guideline you’ve developed. Add new text style consciously only if you see a strong need for it or if it can’t be rendered with existing styles.

FAQ


What can a developer experiment with when working on a website design and what is best left out?
Do I follow design trends?
But beauty is a subjective concept, isn’t it?
How to correctly select references?
Can you develop a “sense of beauty”?
What can I read for a deeper study of color, typography and psychology in design?
How not to make sites?