The modern web design process

Learn how a well-defined process translates to high-performing websites.

Introduction

? Reading time

Web designers often think about the web design process with a focus on technical matters such as wireframes, code, and content management. But great design isn’t about how you integrate the social media buttons or even slick visuals. Great design is actually about creating a website that aligns with an overarching strategy.

Well-designed websites offer much more than just aesthetics. They attract visitors and help people understand the product, company, and branding through a variety of indicators, encompassing visuals, text, and interactions. That means every element of your site needs to work towards a defined goal.

But how do you achieve that harmonious synthesis of elements? Through a holistic web design process that takes both form and function into account.

For me, that web design process requires 7 stages:

Goal identification: Where I work with the client to determine what goals the site needs to fulfill. I.e., what its purpose is.
Scope definition: Once we know the site's goals, we can define the scope of the project. I.e., what pages and features the site requires to fulfill the goal, and the timeline for building those out.
Sitemap and wireframe creation: With the scope well-defined, we can start digging into the sitemap, defining how the content and features we defined in scope definition will interrelate.
Content creation: Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages, always keeping search engine optimization in mind to help keep pages focused on a single topic. It's vital that you have real content to work with for our next stage:
Visual elements: With the site architecture and some content in place, we can start working on the visual brand. Depending on the client, this may already be well-defined, but you might also be defining the visual style from the ground up. Tools like style tiles, moodboards, and element collages can help with this process.
Testing: By now, you've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works. Combine manual browsing of the site on a variety of devices with automated site crawlers to identify everything from user experience issues to simple broken links.
Launch! Once everything's working beautifully, it's time to plan and execute your site launch! This should include planning both launch timing and communication strategies — i.e., when will you launch and how will you let the world know? After that, it's time to break out the bubbly.

Now that we've outlined the process, let's dig a bit deeper into each step.

1. Goal identification

In this initial stage, the designer needs to identify the website’s end goal, usually in close collaboration with the client or other stakeholders. Questions to explore and answer in this stage of the process include:

Who is the site for?
What do they expect to find or do there?
Is this website’s primary aim to inform, to sell, or to amuse?
Does the website need to clearly convey a brand’s core message, or is it part of a wider branding strategy with its own unique focus?
What competitor sites, if any, exist, and how should this site be inspired by/different than, those competitors?

This is the most important part of any web design process. If these questions aren’t all clearly answered in the brief, the whole project can set off in the wrong direction.

It may be useful to write out one or more clearly identified goals, or a one-paragraph summary of the expected aims. This will help to put the design on the right path. Make sure you understand the website’s target audience, and develop a working knowledge of the competition.

For more on this stage, check out "The modern web design process: setting goals."

Tools for website goal identification stage

Audience personas
Creative brief
Competitor analyses
Brand attributes

2. Scope definition

One of the most common and difficult problems plaguing web design projects is scope creep. The client sets out with one goal in mind, but this gradually expands, evolves, or changes altogether during the design process — and the next thing you know, you’re not only designing and building a website, but also a web app, emails, and push notifications.

This isn’t necessarily a problem for designers, as it can often lead to more work. But if the increased expectations aren’t matched by an increase in budget or timeline, the project can rapidly become utterly unrealistic.

A Gantt chart, which details a realistic timeline for the project, including any major landmarks, can help to set boundaries and achievable deadlines. This provides an invaluable reference for both designers and clients and helps keep everyone focused on the task and goals at hand.

Tools for scope definition

A contract
Gantt chart (or other timeline visualization)

3. Sitemap and wireframe creation

The sitemap provides the foundation for any well-designed website. It helps give designers a clear idea of the website’s information architecture and explains the relationships between the various pages and content elements.

Building a site without a sitemap is like building a house without a blueprint. And that rarely turns out well.

The next step is to build the wireframe. Wireframes provide a framework for storing the site’s visual design and content elements, and can help identify potential challenges and gaps with the sitemap.

Although a wireframe doesn’t contain any final design elements, it does act as a guide for how the site will ultimately look. Some designers use slick tools like Balsamiq or Webflow to create their wireframes. I personally like to go back to basics and use the trusty ole paper and pencil.

Tools for sitemapping and wireframing

Pen/pencil and paper
Balsamiq
Moqups
Sketch
Axure
Webflow
Slickplan
Writemaps
Mindnode

4. Content creation

Once your website’s framework is in place, you can start with the most important aspect of the site: the written content.

Content serves two essential purposes:

Purpose 1. Content drives engagement and action

First, content engages readers and drives them to take the actions necessary to fulfill a site’s goals. This is affected by both the content itself (the writing), and how it’s presented (the typography and structural elements).

Dull, lifeless, and overlong prose rarely keeps visitors’ attention for long. Short, snappy, and intriguing content grabs them and gets them to click through to other pages. Even if your pages need a lot of content — and often, they do — properly “chunking” that content by breaking it up into short paragraphs supplemented by visuals can help it keep a light, engaging feel.

Purpose 2: SEO

Content also boosts a site’s visibility for search engines. The practice of creation and improving content to rank well in search is known as search engine optimization, or SEO.

Getting your keywords and key-phrases right is essential for the success of any website. I always use Google Keyword Planner. This tool shows the search volume for potential target keywords and phrases, so you can hone in on what actual human beings are searching on the web. While search engines are becoming more and more clever, so should your content strategies. Google Trends is also handy for identifying terms people actually use when they search.

My design process focuses on designing websites around SEO. Keywords you want to rank for need to be placed in the title tag — the closer to the beginning, the better. Keywords should also appear in the H1 tag, meta description, and body content.

Content that’s well-written, informative, and keyword-rich is more easily picked up by search engines, all of which helps to make the site easier to find.

Typically, your client will produce the bulk of the content, but it’s vital that you supply them with guidance on what keywords and phrases they should include in the text.

Awesome content creation tools

Google Docs
Dropbox Paper
Quip
Gather Content

Handy SEO tools

Google Keyword Planner
Google Trends
Screaming Frog’s SEO Spider

5. Visual elements

Finally, it’s time to create the visual style for the site. This part of the design process will often be shaped by existing branding elements, colour choices, and logos, as stipulated by the client. But it’s also the stage of the web design process where a good web designer can really shine.

Images are taking on a more significant role in web design now than ever before. Not only do high-quality images give a website a professional look and feel, but they also communicate a message, are mobile-friendly, and help build trust.

Visual content is known to increase clicks, engagement, and revenue. But more than that, people want to see images on a website. Not only do images make a page feel less cumbersome and easier to digest, but they also enhance the message in the text, and can even convey vital messages without people even needing to read.

I recommend using a professional photographer to get the images right. Just keep in mind that massive, beautiful images can seriously slow down a site. I use Optimizilla to compress images without losing quality, saving on page-load times. You’ll also want to make sure your images are as responsive as your site.

The visual design is a way to communicate and appeal to the site's users. Get it right, and it can determine the site’s success. Get it wrong, and you’re just another web address.

Tools for visual elements

The usual suspects (Sketch, Illustrator, Photoshop, etc.)
Moodboards, style tiles, element collages
Visual style guides

6. Testing

Once the site has all its visuals and content, you’re ready for testing.

Thoroughly test each page to make sure all links are working and that the website loads properly on all devices and browsers. Errors may be the result of small coding mistakes, and while it is often a pain to find and fix them, it’s better to do it now than present a broken site to the public.

Editor’s note: I highly recommend Screaming Frog’s SEO Spider for this stage. It lets you do many of the standard auditing tasks all in one tool, and it’s free for up to 500 URLs.

Have one last look at the page meta titles and descriptions too. Even the order of the words in the meta title can affect the performance of the page on a search engine.

Webflow has an excellent article on the pre-launch process.

Website testing tools

7. Launch

Now it’s time for everyone’s favorite part of the web design process: When everything has been thoroughly tested, and you’re happy with the site, it’s time to launch.

Don’t expect this to go perfectly. There may be still some elements that need fixing. Web design is a fluid and ongoing process that requires constant maintenance.

Web design — and really, design in general — is all about finding the right balance between form and function. You need to use the right fonts, colours, and design motifs. But the way people navigate and experience your site is just as important.

Skilled designers should be well versed in this concept and able to create a site that walks the delicate tightrope between the two.

A key thing to remember about the launch stage is that it’s nowhere near the end of the job. The beauty of the web is that it’s never finished. Once the site goes live, you can continually run user testing on new content and features, monitor analytics, and refine your messaging.

That's the high-level view

Now let's dive into each step in more detail.

Chapter 1

Setting goals

The first step to building a successful website is ... defining success.

Jeff Cardello

? Reading time

Read chapter

But with so much input, it's easy to lose sight of what's important. Fuzzy expectations lead to frustration and can slow down the process. That's why you need a clear sense of your project’s goals early on. And why everyone needs to share the same vision for it to be a success.

Know the website’s purpose

Slack's homepage clearly knows its purpose: to get you started with Slack.

Sure, a brand-new, eye-catching website is always a positive. But committing the time and money to build one can turn into a short-term investment if there aren't deeper reasons for doing so.

Whether you’re starting from scratch, or you’re doing a complete redesign, you need to know what you want a user to take away from your new site. What do you want to communicate with the content? What calls to action need to be woven in? Understand what these focal points are so you create a design that magnifies them.

A website shouldn’t be a lone outpost on the digital frontier, but should fit into a brand’s broader strategy. It needs to complement this strategy as well as add value of its own. It’s fine if the website just provides a slice of fluffy entertainment — if that was your intent. But ultimately, a website should help fill the gap between what customers know, and what your client wishes their customers knew.

Identify the problems and find the right solutions

‍There may be more than one way to solve a client’s problem. It’s your job to find the best way to get there.

To identify the problems to be solved, and find the right solutions to those problems, you first need to communicate with your client and the other stakeholders.

You must have an open dialog to find out what works on their current website, what doesn’t, and what they think doesn't. Is the content solid but usability a nightmare? Is the checkout process so painful that the client’s losing sales? You need to learn what your clients consider the site’s major problems to be, as well as gather feedback they've gotten from people who've used it.

You also need to do your own investigation. Dig deep into their current website and note everything that needs an upgrade. And don’t just fixate on what’s wrong — consider what works too. You may be able to incorporate positive aspects of the current site into your new design.

It's easy to get sidetracked by tiny details. But this isn't the time for details. Both you and the client need to focus your attention on what the website is going to accomplish and how you're going to make this happen.

Often a client will think they fully understand the problem and have a sure-fire solution. Sometimes, they'll have no direction, but just a gut feeling that what they have needs to be improved. As the design experts, it’s our job to explore the options and recommend an optimal solution (and failing that, a decent solution).

When I worked in the retail corporate sphere, I was part of a team tasked with putting together the company’s environmental sustainability report. What they had been doing was printing a comprehensive 50-page report that resulted in a pile of paper that was anything but green.

Our solution? Trim that 50-page report into a pamphlet covering the highlights, printed on recycled paper with a soy-based ink, with links to the site for more info. Thereby solving a problem they didn’t even know they had.

As designers, we have the expertise to come up with the solutions for both the known and unknown issues involved with a project.

Know your audience

Evernote clearly knows its audience is filled with creative folks who have a million ideas, and don't want to forget any of them.

Knowing your target audience will guide you throughout the design process, simplifying decision making by forcing you to answer one simple question:

Is this useful for our audience?

Your client should have demographic information such as income, gender, and age (in their Facebook page analytics, if nowhere else). You’ll also need to know their consumer habits:

What other goods and services do they buy?
What websites do they visit?
What forms of media do they indulge in?

Knowing all this will help you create a design consistent with their other consumer experiences.

If there’s one goal all websites share, it’s to connect with its audience. By knowing more about who you’re speaking to, you’ll be better able to effectively reach them.

Write a creative brief

When the project goals are in place, it's time to put together a creative brief. I've seen them run as short as a paragraph, to as long as your senior thesis (with readership stats proportional to length).

However long-winded yours is, it's vital to assemble a creative brief so that you, the client, and everyone else involved with the project understands its specifics. A creative brief needs to define the who, what, and where of the project, laying out the the scope and what needs to be done to accomplish each goal.

Define success

‍Will you know the finish line when you get there?

Without defining what success looks like, you’ll never know if you’ve achieved it.

Some measures of success are more obvious than others. People understand numbers. When they see traffic and sales go up, they know they’ve achieve a kind of success.

Some clients already know how they’re going to determine success. I once had a client who helped run a nonprofit and wanted a complete website redesign. Her criteria for success:

Improved rankings in search
Increased sales of their handmade goods

Knowing these two goals up-front made my job a lot easier. I spent a huge amount of time on researching and writing SEO-optimized content. I also found a better ecommerce platform and had them take new, high-resolution photos of their inventory.

Sales increased and her organization made the first page for a number of high-volume search terms. She was happy and so was I. The project was a success.

When you’re defining project success, don't make unrealistic promises. For this nonprofit effort, I explained how what was on their current website wasn't effective. I never oversold what I was going to do, but I did explain how it would be better than what they had. And it was.

Of course, “success” can also be a bit less concrete. Improving a brand’s reputation and differentiating them from their competition can be hard to measure. But if you set your client’s expectations properly, they’ll be able to see this in the finished product. (And failing that, you can always run an NPS survey with current customers to gauge response to the new design.)

Everyone involved with the project needs to know how they'll determine its success. When everyone has a shared understanding of success, you’ll all be able to assess and recognize the effects of all of your hard work.

Set your goals

You can define any project in terms of deliverables and the people tasked to create them. But without well-defined goals informed by the target audience, no one will know why they’re building these deliverables.

When people understand the why, they also better understand how to achieve their goals. Find these goals at the beginning of a project so you can find success at the end.