Stages of Creating a Design Concept for a Website
If you’ve ever interacted with digital agencies or web designers, you’ve probably heard about the concept creation stage.
In this article, we’ll take a step-by-step look at creating a design concept for a website.
What is a design concept?
The design concept of a website is a broad vision of the visual part of the project taking into consideration all the sources of requirements and wishes for the design:
- Company’s brand book;
- Business objectives of a site;
- Trends;
- The vision of the working group of the customer;
- The decisions of the design team of the contractor.
In brief: the design concept helps the customer and the contractor to look in the same direction. So further work on the design of the site pages becomes predictable and transparent.
What page should be used as an example for creating a concept?
When creating a design concept, you need to consider as many different types of blocks and elements as possible, providing for their adaptation in advance: cards, sliders, text blocks, navigation elements.
At the same time, page design may not be final; we form a shared vision and ways of development. At the conception stage, it is necessary to find:
- directions and styles;
- ideas for animation;
- elements of the identity (or ideas for the disclosure of corporate identity elements on the site);
- layouts and block compositions;
- colour scheme and fonts;
- references on photo content, outline illustrations, etc.
It would help if you also chose priority pages.
- A page with many content blocks of different types – this is how we can test the concept for practicality.
- A page with high traffic will understand which information is the highest priority for the user and pitch it.
- Home page of the site – it is chosen most often, as it is the company’s business card and at the same time a page with a variety of content.
- A page on which the customer plans to run advertising – sales or applications depend on this page.
Also, in some cases, the order may include work with the client’s mobile application design.
It is worth bearing in mind that if you developed its design without sticking to proper mobile app design rules, you would have to work hard on it.
When is a concept not needed?
Sometimes customers are approached with ready-to-use design systems on which the interfaces of one or more projects are built. In such cases, developing a concept is not necessary.
If there is an understanding of improving an existing concept, you can propose and send it to the customer, specifying whether they have the resources to update it.
On the list of suggestions, it is preferable to note how they will affect the overall perception and resolution of the project’s business objectives.
Process
The entire process can be divided into three main blocks: research, creating a design concept, and presenting.
- Research stages: pre-project audit and information architecture.
- The stages of creating a design concept: mood board and style boards, generation of ideas, sketches and idea selection, and creation of layouts.
- Presentation of the concept.
The research is first of all
Pre-concept audit
To proceed with the site design concept, the entire team needs to gain an understanding of many items:
- The client’s business objectives and processes;
- The characteristics of the target audience;
- Content;
- Site structure;
- Technical limitations.
Therefore, it is worth starting with the pre-project audit stage.
This stage begins with the customer’s first contact, after which the account manager (or any other contact person) gets acquainted with the customer’s business, conducts an initial briefing.
The account manager passes on the information gathered to the team, which goes deeper into the project with the customer in special meetings.
Such meetings are held in the format of group strategy sessions, which combine the client’s in-depth expertise in his industry and the agency’s broad expertise.
The research steps are crucial to your entire work.
The slightest mistakes and inaccuracies can significantly affect the final result.
Therefore, do not allow employees who are not yet fully aware of how to research according to the client’s or your corporate requirements.
Well, or at least be careful about the methodology and research results of such employees.
As a result of the pre-project audit, the team gets answers to the 6 “What” questions:
- What goals should be achieved by the site;
- What is the structure of the future project;
- What segment of the target audience will be the primary visitors to the site;
- What are the values and uniqueness of the product/service, etc.;
- What emotions the design of the project should arouse;
- What advertising campaigns are planned for the client at launch.
Creating a complete picture of the project and the conclusions involves a strategist or a marketing specialist, and specialists in various fields support them.
To “understand” your customer’s company, it will be helpful to arrange your team’s visit to their office/production site.
Trevor Matt, team lead of designers at Writemypaperbro.com, says:
“One effective way to immerse the team in the project is to arrange a meeting at the customer’s office, give them a tour, show and let them feel the product, introduce them to the service”.
What do we do?
1. Conducting an interview (one or more) with the customer.
During the interview, the whole team gets the business specifics, products, services, USP, target audience, competitors, business logic, and processes.
2. Conducting an audit.
Even if the customer has a detailed description of the company positioning, analysis of competitors, the niche is defined, and they are ready to provide all materials to the performer, you will need to apply all this information on the web.
3. Formulate conclusions and objectives.
Formulated conclusions and objectives will help the performer be in the same information field as the customer and confidently move to the next stage.
What we get as a result:
- Formulated objectives of the project;
- A detailed description of the project with conclusions;
- The terms of reference for the project.
Tools that you can use for pre-project audit:
- Miro for general structure;
- Readymag for presentations;
- Google Docs to store all the project information;
- ActiveCollab for work planning and task management.
Information architecture
The information architecture phase will be structured prototypes of future site pages with straightforward content and user scenarios.
Example: Thanks to well-designed information architecture, the user can quickly find the right product in an extensive catalogue. The company (your client) can draw the attention of its customers to seasonal items.
What do we do?
- Assemble a detailed site tree.
- Structuring and organising the content on pages.
- Compiling accessible navigation.
- Create TOR for the content, if necessary.
The result is:
- a detailed tree of the future site is compiled;
- prototypes of pages are made; – the TOR for the content, if you did not prepare it in advance;
- Composed the TOR for the content if it was not prepared in advance.
Tools you can use to create an information architecture:
- Miro for overall structure;
- Readymag for presentations;
- Google Docs for storing all the project information;
- ActiveCollab for work planning and task management.
Stages of creating a design concept
After the analytics and information architecture phases, we have enough input on the project, and we can begin creating the concept.
Moodboard and Styleboard
A moodboard is a board that reflects the mood of the project. It can contain text, photos, and illustrations. A moodboard doesn’t have to convey the style of the project.
A moodboard can be created in parallel to the product or service research phase, in the process of familiarising ourselves with the customer and their business.
We use it to reflect the overall mood of the future site, nature, and the brand’s positioning. Styleboard is a board that reflects the stylistic direction of the project.
The designer looks at the references, collects ideas by style, and forms a styleboard from them. The references can be grouped by direction:
- fonts;
- animation;
- illustrations;
- colours;
- geometry;
- grids and composition.
To work effectively, we recommend discussing references with your client to sync up with them and make sure you’re moving in the right direction.
What do we do?
- Collecting images that show the mood of the project.
- We look at references.
- Suggest solutions for a typographic scheme.
- Creating colour schemes.
- Decide on the photographic style.
- Find appropriate compositional solutions for the blocks on the site.
As a result, we have made a moodboard and a styleboard, and a list of references with comments from the designer.
Recomendable tools to use when compiling a moodboard and a styleboard:
- Figma to create boards with comments;
- Pinterest for creating a board;
- Google Docs for storing all project information;
- ActiveCollab for scheduling work and maintaining tasks.
Idea generation, sketches
One designer or the entire team can work on idea generation, depending on the complexity and scope of the project.
The first drafts, sketches, and illustrations are the second step in concept development.
It’s essential to decide how the site will reveal brand identity identifiers and whether new visuals need to be created.
At this stage, the entire team is already immersed in the processes.
Insight: The more information and conclusions, the more filters lead us to the right decisions for the product, including visual ones.
When generating scalable and non-trivial ideas, regular reviews of the works of top designers and agencies, studying trends, sites with contest works, and thematic digests can be helpful.
At the idea-storming stage, you need to gather as many options as possible without going into detail and diving into micro-decisions.
The main task of creating a design concept is to analyse hypotheses. Ideas can be in the form of text, sketches, outlines, or screenshots.
From the variety of options, the most appropriate criteria for evaluating the result are chosen.
- Whether the idea will help to solve business tasks?
- Does the idea contradict the corporate identity?
- Is the idea flexible and scalable?
- Is the idea suitable for the target audience of the project?
- Is the idea feasible within the resources available to the client and the implementation team?
What do we do?
- Brainstorming.
- Generate ideas.
- Describing the ideas.
The result:
- A list of ideas with descriptions is created;
- sketches of the pages and sketches of illustrations are created, or references are picked up;
- a presentation of the ideas is made.
The recommended tools to use at the stage of generating ideas:
- Figma;
- Photoshop/Illustrator;
- Pinterest;
- ActiveCollab for work planning and task management.
Choosing ideas and creating layouts
From the large number of ideas generated during the general brainstorm, the most successful are selected, which will most accurately solve the site’s problems: visual and functional.
Sometimes one idea complements another, and they are combined into one thoughtful solution.
In some projects, it makes sense to involve the customer’s team in selecting ideas because they are the carriers of knowledge about the business and will quickly help reject unsuitable ideas.
This can be relevant in different situations:
- The idea critically affects the project’s cost and requires additional expertise or more time to develop.
- The customer is ready for frequent calls and prompt feedback.
- In particular, when the visual idea or scenario is a critical component of the project and affects the functionality.
At this stage, there is no task to show the customer as many ideas as possible. It is enough to have a strong argument for one, but the most suitable one.
Creating the layout based on the idea and the chosen stylistic solutions, we should remember that we set the rhythm for many pages with different types of content.
That’s why it’s essential to try on solutions for other pages simultaneously, taking into account different entities by studying the prototype and future content in detail.
What do we do?
- Brainstorm with the team and involve the customer in the selection of ideas.
- Choose the best idea and complete it.
- Trying the idea on existing prototypes
- The result is:
- layouts are drawn;
- blocks are animated;
- The presentation is made.
Recommended tools for use at the stage of selecting ideas and creating layouts:
- Figma;
- Photoshop/Illustrator;
- Readymag;
- Principle;
- ActiveCollab for work planning and task management.
Presentation of the concept and its further life
The final step is the presentation of the concept to the client.
The designer or the project manager can present the project.
In any case, it is vital to have the designer present during the meeting or call. They will be able to answer questions about the design of layouts from a professional point of view.
Begin a presentation with a mission statement, a brief description of the future project and its audience.
Then the cards are revealed. On slides, we outline the audit and ideas for the finished design.
In this way, we show that the layouts were not made by chance but by research and analysis.
The best demonstration of layouts is animation, so you can answer many questions that the customer might have in advance.
If the entire customer team does not attend the presentation, sending a video presentation for convenience and the correct translation of the concept idea.
To Summarise
The result is a set of rules and stylistic solutions, which will apply to all the other pages in the project. The result is at least one rendered page to demonstrate the idea, based on which the team presents the project to the client.
Because the client’s team understands the direction the design is taking, it reduces the time required to render the interior pages and simplifies the approval process.
The rest of the site’s pages will look in the same style, and new content won’t have to be reinvented from scratch.
Even if you transfer the project to other designers, the layout of different pages will look coherent and in a single visual system if the developed rules are correctly followed.
Author Bio: Taylor Brouwer is a passionate writer who loves exploring new topics and explaining something complicated in simple phrases. I used to work as a copywriter at an IT company. Currently works as a freelance content writer.