Skip to content
Menu
  • Web Design Business
  • Web design Fundalmentals
City Kitty Design

The web design process in 7 simple steps

Posted on October 6, 2021October 6, 2021

In order to design, build, and launch your website, it’s important to follow these steps:

1. Goal identification

tom cruise help me help you gif
The initial stage is all about understanding how you can help your client.

In this initial stage, the designer needs to identify the end goal of the website design, usually in close collaboration with the client or other stakeholders. Questions to explore and answer in this stage of the design and website development 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 (ecommerce, anyone?), 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 development 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 design phase, 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.

gantt chart
The anatomy of a Gantt chart.

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

simple sitemap
A sitemap for a simple website. Note how it captures page hierarchy.

The sitemap provides the foundation for any well-designed website. It helps give web 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 find some design inspiration and build a mockup of 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.

vireflow wireframe kit
Anton Balistsky built a Webflow wireframing kit you can clone for free.

Although a wireframe doesn’t contain any final design elements, it does act as a guide for how the site will ultimately look. It can also act as inspiration for the formatting of various elements. 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

Design interactions and animations without code

Build complex interactions and animations without even looking at code.Start animating

Start animating

4. Content creation

seo and content google trends
When it comes to content, SEO is only half the battle.

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 creating 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.

simpsons lisa gif
‍Far too much for a blog post, Lisa, but brilliant work!

Awesome content creation tools

  • Google Docs
  • Dropbox Paper
  • Quip
  • Gather Content
  • Webflow CMS (content management system)

Handy SEO tools

  • Google Keyword Planner
  • Google Trends
  • Screaming Frog’s SEO Spider

5. Visual elements

web design style tile

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. You can try free stock photos but 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

qa says no
Don’t worry. It doesn’t always feel like this.

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

  • W3C Link Checker
  • SEO Spider

7. Launch

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

cat heavy breathing
‍Don’t get too excited, but … we’re nearly there!

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, colors, 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.

Recent Posts

  • 8 tips for hiring a Web designer for your business
  • Top 5 Tips for Choosing a Web Designer
  • 7 Qualities of a Great Website
  • How To Make Business Plan For Your Web Design & Development Startup?
  • The Four Key Components Of A Great Web Design

RSS Web Design News

  • Get a Random Array Item with JavaScript May 9, 2022
    JavaScript Arrays are probably my favorite primitive in JavaScript. You can do all sorts of awesome things with arrays: get unique values, clone them, empty them, etc. What about getting a random value from an array? To get a random item from an array, you can employ Math.random: const arr = [ "one", "two", "three", […]
  • Legacy String Methods for Generating HTML April 26, 2022
    I’m always really excited to see new methods on JavaScript primitives. These additions are acknowledgement that the language needs to evolve and that we’re doing exciting new things. That being said, I somehow just discovered some legacy String methods that you probably shouldn’t use but have existed forever. Let’s take a look! These legacy string […]
  • Interview with an Intiface Haptics Engineer April 25, 2022
    I was recently re-reading my Interview with a PornHub Web Developer and one bit I started thinking about was the VR question and the idea of making users not just see but feel` something. The haptic feedback of VR games is what really sets them apart from your standard PC or console game. So when […]
  • Input valueAsNumber April 5, 2022
    Every once in a while I learn about a JavaScript property that I wish I had known about years earlier — valueAsNumber is one of them. The valueAsNumber provides the value of an input[type=number] as a Number type, instead of the traditional string representation when you get the value: /* Assuming an
  • Advanced Code Display with Code Detection API (Sponsored) April 4, 2022
    Web apps are accepting numerous types of inputs, from basic text to code to imagery, files, and more. It’s important that we validate the contents we receive but if you do allow arbitrary text, it’s good to know what exactly has been submitted so you can present it properly. Enter the Code Detection API — […]
  • CSS :has March 28, 2022
    For as long as developers have written CSS code, we’ve been desperate to have a method to allow styling a parent element based child characteristics. That’s not been possible until now. CSS has introduced the :has pseudo-class which allows styling a parent based on a relative CSS selector! Let’s have a look at a few […]
  • Flexible, Powerful DataGrad from Sencha (Sponsored) March 10, 2022
    Many of the web functionalities that we rely on once lived within individual desktop applications. From office suites, games, and financial tools, all of them are now web applications; they’re just as feature packed as their desktop counterparts. In the past I’ve used a variety of JavaScript grid widgets on client sites, and each had […]
  • Confessions of a Web Developer XIX March 7, 2022
    It’s been a while since I’ve gotten a few things off of my chest and since I’m always full of peeves and annoyances I thought it was time to unleash: Due to the immensely negative response to any tweet about crypto from my blog account, I created a second account just for crypto musings. I’ll […]
  • Simplify Your File Handling With Filestack Workflows (Sponsored) March 6, 2022
    Automation is a really important skill for engineers, especially when it comes to working with various file types. The more you accept for input, and the more you automate, the better end output you can offer. Filestack’s workflows allow developers to define automated tasks using a their specialized UI. With no coding required, it’s easy […]
  • Detect Dark Mode Preference with JavaScript February 21, 2022
    Seemingly every website, dapp, and app offers a dark mode preference, and thank goodness. Dark mode is especially useful when I’m doing late night coding, or even worse, trading into altcoins. I’m presently working on implementing a dark theme on MetaMask and it got me to thinking: is there a way we can default to […]
©2022 City Kitty Design