Always start with a plan, in website design. Here’s why:
- First, it’s about budget. Planning will help you assess the costs of every step you’ll take to the final product: the website.
- Second, it’s about timing. Careful planning will save you time, and the website will be finished when expected.
- Third, it’s about the process itself. With careful planning, it should be easier to schedule tasks and create a streamlined process.
How to create a website planning guide
- Know your audience.
Before imagining any kind of website, be sure you know your audience.
Age, gender, income level, lifestyle, geographic location, interests, online behavior and specific search behavior, way of speaking, activity area, pain points and needs, all define your audience. For a more granular approach, you can go on to create personas matching certain profiles.
Example of persona profile:
- Set website objectives.
Before you start designing, set your website objectives. To be valid, objectives have to be SMART (Specific, Measurable, Attainable, Relevant and Timely).
Example of SMART objectives:
Possible site objectives:
increase sales (e.g. with 40% in 6 months with paid promotion)
increase engagement rate (e.g. 60% in 12 months, with interactive elements in the website pages): specific signals of engagement: brochure downloads, video watch time, number of clicks on a button, time on site, bounce rate, exit rate, subscription to newsletter, etc.)
increase brand awareness (e.g. 2000 to 3000 branded keywords that users type into Google, over a 3-month time).
- Analyse the market climate
Study the market trends, to see what’s appropriate to include in the website, to accomplish objectives and hence, answer users’ needs. For this, consult newspapers, white papers in your industry, statistics and infographics, listen to speeches of influencers in your industry, etc.
Study competitor websites, to see what elements they have, what they lack, what elements/sections would be an opportunity for you and what to stay away from. To do this, start a list with common items you currently encounter in competitor websites and see what works best in your industry. Also, mention on a separate list the items you wish to include in your own website, and which should make a difference, as compared with the competitors’ websites.
Take a peek at similar sites. They can be used as your model, that’ll inspire you in the website design. Several models extend the range of website ideas you’ll draw inspiration from. By analysing the items separately and recombining them in your own way, you can already get a good part of the planning done.
Further down the process:
- Dress a website map
The map of the site concerns the list of pages that will make up the website, in a defined order following the logic of your presentation.
This will replicate into an .xml sitemap that helps your website be crawled and indexed by Google.
Example of website map:
- Create a content architecture
The content architecture differs from the site map, as it refers to how the message is exposed throughout the website pages and distinct elements. Different chunks of content are displayed in different pages/page sections, so their interconnection creates the main message transmitted to the reader.
Example of content architecture:
Content architecture refers to the organization of items by content types, categories, subcategories, taxonomies, etc.
It helps users in browsing that content, by smoothly drawing their attention from one content item to the next one.
- Delimitate users’ flow
Users’ flow is the path visitors take when navigating your website. It’s best practice you imagine the path an ideal user will take in the website, to document its decision-making process. What they need to know, how they interact with the website, what they expect to find in a certain place on a page, these all contribute to defining a correct user flow.
Example of how a user flow might look like:
- Create a website layout and mood board
In this phase, you’ll choose the colors and color schemes that define your website. You’ll decide on the layout, and the color scheme will match the branding style of your website.
For more information about different layout styles, please consult this article.
What is a mood board?
The mood board is an arrangement of images, materials, pieces of text, etc. intended to evoke or project a particular style or concept.
The mood board refers to a color scheme that defines the brand personality and gives a tone of voice to the message you want to transmit. The brand characteristics influence the choice of colors for the new website. It gives personality to the brand; it leaves an imprint on the communication style and it ensures a positioning statement.
The mood board can give the following tones:
- Young and agile
- Well-established, professional
- Audacious, outstanding
- Classical-looking, with a tone of uniqueness and some specificities
Final steps in website design planning
The final step in website planning needs to include a draft version as close to how the website should look like, as possible.
In this step, you should create a website mockup.
For more details about how to create a website mockup, please read this article.
We hope this article helped you get a clear picture of how to create a website design plan. This way, you’ll stay organized and create the website you want, in due time and with appropriate budget.