The 7 Key Stages of Every Web Design Process

Every website development process follows a timeline.

How well organized and accurate that timeline in depends on something extremely important:

You!

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:

1. Creating a design brief
2. Defining your brand style
3. Gathering a sitemap and wireframe
4. Producing example content
5. Creating design elements
6. Testing your mock-up design
7. Post-launch A/B testing

Click the links above to jump to a specific section, or continue scrolling to view the entire website design process from start to finish.

1. Create your design brief (Discovery)

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? At Clique, we seldom switch up our deliverables and our process doesn’t change dramatically from project to project. It comes more into play with the extent of the scope (rounds of revision, etc.).

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.

The people you’re designing the website for will be crystal clear… Saving the risk of creating a site that your target audience don’t enjoy interacting with.

How this works at Clique – The “Discovery” phase

There are two parts to our Discovery phase at Clique:

1. The Clique team conducts a discovery session with the client. From this session, the PM and the content strategist draft a creative brief and sitemap.
2. For complex projects, a more extensive discovery will be conducted with members of the design team. From these sessions, the team will draft UX and research deliverables.

At Clique, the Discovery phase is done prior to involving a designer. We’re looking at involving designers more in discovery because discovery can take many forms based on timeline, budget, needs, etc. As above, Discovery is when we’ll start diving deep into our audience:

Understanding your audience is crucial. It’s your north star throughout, so any decision that there is a struggle around should come back to a user.

“The design is never for the designer or the client, but always for their audience, so really truly understanding the audience leads the decision making process in general.” – Emma Foley, Design Lead at Clique Studios

2. Define your brand style (optional)

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.

But if your team (including social media experts and web developers) understood the vision, they could easily plan design elements that fit across various channels.

At Clique, this phase of a project is optional. Many (but not all) of the clients we work with already have established brand elements.  For us, this phase is less about defining and more about understanding what their existing brand is, color palettes, typography, image style, etc.

However, if brand guidelines are yet to be established, we use a 2-part mood boarding process where we are looking for inspiration to gather a look and feel that will guide our direction. Here’s how that looks for us at Clique:

How this works at Clique – The optional “Mood Board” phase

When the project doesn’t have branding for web, we create mood boards to establish a look and feel before we dive into wireframes.

• An exploration of colors, typography, imagery and design elements to get the conversation started.
• Designers create Boards in Figma (which is more customizable) or Miro (which takes less time to build) showcasing 2-3 distinct concepts.

Internal Mood Board Review Meeting

• The internal design review is led by the lead designer on the project.
• The Mood Board meeting includes all designers on the team, the PM, and the content strategist and is usually held in the main conference room.
• The designer pitches their Mood Board concepts to the team, and the team provides feedback.

Internal Mood Board Review Email

• After the Mood Board review, Designer makes revisions based on team feedback and emails updated Miro or Figma links to all of the designers, the PM, the content strategist, and our partners.
• The email contains rationale for design decisions, and explains the examples provided in the Mood Boards.

Client Mood Board Presentation

• PMs present mood board concepts to the client. The client then chooses the direction they prefer for the look and feel.

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 or you can simply type “.xml/sitemap” after the current URL.

If you don’t have one, don’t worry. You can create a sitemap using tools like XML Sitemap or through the plugin Yoast. 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:

Remember: You’ll probably end up with a few wireframes because you’ll have several web pages that fall into the same design category.

How this looks at Clique – Design Kickoff

PMs conduct design kickoff meeting to brief the design team on the project and walk through the findings from the discovery phase, the creative brief and the sitemap.

We start thinking through how many templates we have on the scope and how those can be applied.

Our wireframing approach is built out with the following guidelines:

Grayscale, one font.

Designed in Sketch and moved into Figma.

We do them higher fidelity as well because it helps call out more interesting and unique animation components.

The earlier we share them, the earlier we can get feedback.

At Clique, we prefer to have content ready to go during wireframing so the client can see body paragraphs, headlines, etc. We work collaboratively with content and design in our interdisciplinary approach.

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 (at Clique, we prefer and exclusively use Sketch) 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:

• Logos
• Footers
• Headings
• Navigation bars
• Sidebars
• Images or videos
• Buttons

Start to think of how you’ll use each of these design elements on the site.

Chances are, you may use programming languages like CSS or HTML—so as your web developers for their help with the next stage.

However, at Clique, we use tools like Figma where we mock up illustrations and animations. We prefer to gather images and design elements, logos there as gathering (and then executing) is the name of the game.

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.

Do this by signing into your account, then head to Admin > Tracking Info > Tracking Code. Click “Send test traffic:”

At Clique, we do QA both for frontend link and also in staging when the back end is also hooked up.

How this looks at Clique – The QA Process

Frontend Review Meeting

• The internal frontend review is led by by the PM.
• The frontend review meeting includes the designer, the PM, the engineering team, the accessibility lead and is usually held in the main conference room.
• The designer pitches their wireframe concepts to the team, and the team provides feedback.

Design QA Round 1

• Designers QA frontend dev links and provide feedback in a Design QA spreadsheet for Desktop, Tablet and Mobile.

Design QA Round 2

• Review the changes from Design QA Round 1, and mark all satisfactory changes as ‘Closed’ in the Design QA spreadsheet.

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.