Every website development process follows a timeline.
How well organized and accurate that timeline in depends on something extremely important:
You can’t move from one thing to another without following the sequence. Otherwise, you’ll miss important things—and make the design process much harder, overall.
So, what are those key stages? And what order should they be done in?
In this guide, we’re sharing the seven key points that every web designer will need to use when planning a new website, including:
- Creating a design brief
- Defining your brand style
- Gathering a sitemap and wireframe
- Producing example content
- Creating design elements
- Testing your mock-up design
- Post-launch A/B testing
1. Create your design brief
When you’re planning your first web design project, the first place to start sounds the most obvious: Your brief.
A website design brief contains key information about the site you’re creating, such as:
- Target audience: Who will be using the website? What trends or standards do they have when using a website? What will they be using your site for? (For example: They might be reading content, watching videos, or ecommerce buying.)
- Content Management System (CMS): Is the site being designed on WordPress, Squarespace, or something else?
- Deliverables: How will you measure success of the web design? Will it have an impact on key website metrics like time on page, pages per session, or bounce rate once the new design goes live?
- Timeframe: How soon will the new design be public? By knowing this ahead of the launch date, you can plan other steps in the web design process to make sure you meet the deadline. (If you’re a design agency, it’s key to communicate when you’ll hand off the final product to your client.)
- Competitors: Which sites are your design competing with? What design elements do they use? What features do they have?
- Your team: Who will be in charge of, or involved with, the project? This could be anyone from project managers to web development teams.
You’ll typically need to create a web design brief if you’re asking someone else to do the work— like an agency. But if you’re doing your own design in-house, it’s wise to figure out the scope of the project.
2. Define your brand style
Did you know that consistent branding contributes to an average revenue increase of 23%?
With such importance on making your site consistent, it’s crucial to nail your branding way before you start working on the design elements for your site. That way, your entire team is on the same page before they start designing.
A brand style guide is the perfect solution. This single document can include key things like:
- Typography (including fonts, headings, and line spacing)
- Color schemes
Let’s say that you didn’t have one of these brand style guides. As you head further into the design process, nobody really understands what the site identity should look like. That mistake could cost lots of time—and money.
3. Gather your sitemap and create wireframes
The next step of the planning phase is to create a list of the pages you’ll need to design.
This is also known as a sitemap—a visual breakdown of the web pages on your site, displayed by their hierarchy.
Find your sitemap by plugging your URL into this Sitemap Test. It’ll take you to the URL it’s hosted on… If you’ve got one.
If not, don’t worry. You can create a sitemap using tools like XML Sitemap. You’ll receive a document containing every URL on your site. Work through it and make a shortlist of the pages you’ll want to create a custom design for.
(It’s also worth doing this for any web apps that you’ve got. Depending on your site structure, the sitemap might include this information.)
Once you’ve got the sitemap, group together several pages that will use the same design layout. For example: You might group your product pages into one group, and blog posts into another.
The next step is to wireframing each group of URLs. A wireframe simply shows a blank layout of each page, with boxed-off areas that will be used across every URL in that category.
Using the product page example, here’s what that design wireframe would look like:
4. Produce example content
The next step in the website design process is to start making use of your wireframes.
The boxes we’ve sectioned off for each layout need example content. That way, you can see a real-life example of what the site looks like—and get a rough idea of the way you’ll need to design not just the layout, but format the content, too.
The process for this is simple: Add some new content to the boxes in your wireframe. (This doesn’t have to be legible. You can use dummy text like Lorem Ipsom.)
You should be viewing example content on every wireframe—including your homepage. It gives you the chance to:
- See which font combinations look best
- Change the proportions and size of text, which is important for a responsive design
- Pick the colors of your body text, headings, and hyperlinks
It’s not just your web developers that need input here, though. It’s worth including your Search Engine Optimization (SEO) team for two reasons: Content is a huge part of their job, and Google uses content to determine a page’s ranking position.
5. Create your design elements
The visual design is arguably the most important (and exciting) stage of website design. It’s where you’ll use tools like Photoshop to bring your ideas to life, and start viewing them together on the screen.
The design elements you’ll need to work on depends on the wireframes you’ve got. But as a general guideline, you’ll need to create:
- Navigation bars
- Images or videos
Start to think of how you’ll use each of these design elements on the site.
Chances are, you’ll need to use programming languages like CSS or HTML—so as your web developers for their help with the next stage.
6. Test your mock-up design
By this stage in the web design process, you’ll have a mockup of what your final design will look like.
But you’re not ready to go live with your new design yet. You’ll need to test that your design works, and that you aren’t publishing any errors, before hitting “launch.”
Take a glance over your website. Click the buttons, load different URLs, and generally check that everything works as it should. (Ask your web development team to do the same thing. It’s best to get as many eyes on your design as possible before you make it public.)
However, it’s crucial to go back over your design and check things that might look less visible from the front-end—like broken links, for example.
You might have created temporary URLs to test your new design elements. Stop future site visitors from accidentally stumbling on that URL by redirecting your test links. You can check for these error pages using tools like Broken Link Check.
It’s also worth double-checking that your Google Analytics code is embedded properly within your site’s heading tags.
7. Post-launch A/B testing
It’s estimated that 94% of first impressions are design-related.
But once you’ve launched your website, how can you judge whether the first impressions your visitors are making are good ones? It’s impossible to predict pre-launch.
That’s why you should always be testing your design. By changing different elements and measuring which gets the best results, you can improve your entire business’ goals.
You can do this by:
- A/B testing: Change different on-page elements—like your button colors, headline copy, or image placement—and measure which performs best for your website’s goals. For example: You might find that a light blue button has a higher click-through rate than a dark blue button.
- Heat maps: Is the layout you’re using effective on other devices? Use heat maps to find how mobile visitors use your website. You might find that they spend more time on a certain area of the page that you previously didn’t place much importance on.
Remember: There is no “final product” in web design. The secret to an incredible design is one that does what their visitors need—and the only way to discover that is to continue testing your design post-launch.
Ready to master your next website design?
Treat this seven-step process as your roadmap when designing a new web project.
Don’t panic if you spend too much time in one stage. Bumps in the road are part of the process—but so long as you’re following these steps, you’re bound to end up with an incredible web design.