How to Create a Website Design Concept

Before diving into selecting typefaces and drawing UI elements, you need to have a clear idea of ​​what the website should look like in the end. This is why a design concept is created.

Read:

• What is a website design concept and how it helps you find common ground with the client;
• What needs to be done to prepare a high-quality concept;
• What is important to remember when developing a design.

What is a website design concept and why do it?

A design concept is how you imagine your future website, application, or landing page. It roughly illustrates the final product's features and appearance.

Don't confuse a design concept with a quick draft or a collection of random images. It should illustrate and explain how the website will solve business and user problems.

Furthermore, it is a tool for dialogue between the designer and the client. Discussing, adjusting, and agreeing on the design concept helps the designer understand the direction to take, and the client understands the final product's expectations.

How to Create a Design Concept

• Get a brief from the client. Work on the concept begins with a conversation with the client and filling out a brief - a special questionnaire with questions about the business and the desired result. At this stage, the designer must understand what the company does, why it needs this specific project, what is not suitable for the existing website, and what visual images the client is focusing on.

This stage is critical for understanding the tasks and scope of work: will it be necessary to create a completely new product or will cosmetic changes to the existing website or landing page be sufficient.

How to get a good technical specification from the client? Read a short guide from an expert.

• Study the context. In the brief, you can ask the client about competitors and their digital products. However, to better understand the task, it is worth conducting your own research into the context. And not just competitors in the same niche, but also those from related or even completely unrelated fields. For example, if you need to create a design concept for a website for an art gallery, you can study the elements and style of pages not only for exhibition spaces and museums, but also for architectural firms or clothing stores.

And be sure to pay attention to web design trends: in some cases, it's worth basing the concept on them, while in other cases, it's better to stay away from trendy solutions.

• Create a mood board and show it to the client. The references the client showed you and your findings must be compiled into a clear working scheme.

This article explains why references are a useful tool and not a design theft.

From a chaotic selection of illustrations, screenshots, color schemes, fonts, and graphic elements, you should create a mood board—the visual basis of the concept. This is a standard designer's toolkit: it helps you clearly explain your vision to the client and coordinate ideas with them. Discussing the mood board before developing the design concept will help you synchronize your thoughts and ensure you and the client are on the same page.

If the company has a brand book, its requirements should be taken into account when creating a mood board and, as a result, when developing the design concept itself.

Read more about mood boards in design here.

• Think through and approve the structure. The design concept is "tried on" against the finished website structure, which has been agreed upon with the client. This allows you to see how the final product might look and function, and make any edits and changes in a timely manner.

References—sites or landing pages of competitors or other businesses—will also help develop the structure of pages and functional blocks.

• Develop a design concept. This process does not involve delving into the smallest details of rendering—it is more important to reflect the basic ideas of the project. The concept should show the website's theme, color scheme, typography, main illustrations, and text. There is no need to delve into interactivity and work out buttons and forms at this stage. But if the website design assumes that animation will play a significant role, it's worth outlining it.

It's best to put together the design concept in a shared workspace in InVision or Figma so the client can easily work with the document.

We've put together a free Figma tutorial. Study it!

• Show the concept to the client. The finished design sketch should be presented to the client for feedback. This is another opportunity to ensure that their wishes and your vision for the work align.

If the concept contains bold ideas, offer them as a bonus—and be prepared to justify and defend them. Standard solutions are also necessary in this case, but as an alternative—so that you and the client have a "safe" option.

How can a designer successfully present ideas? We explain what pitching is in this article.

How to communicate with a client correctly so as not to lose them and yourself? We will tell you in this material.