The 8 Commandments of a Web Design Process [for Newbies & with No Code]

web design process

Find out how you can craft a successful website by following a structured website design process.

Our hypothesis is that you have already found a domain name and a hosting provider.

If you haven’t yet chosen your host yet, we really recommend our partner Cloudways.

In the example below the steps are presented for the case where you are creating a website for yourself. If the website is for a client, new steps might occur in terms of project planning, deadlines setup, contract, and more. But at the core, you’ll still have to stick to the steps presented below.

Now, here are the steps:

  1. Scope identification: what needs does the website have to fulfill? Who does the website talk to? Which are its goals and motivators? Which businesses have the same scope and target audience as you?
  2. Defining the website’s sitemap: what are the web pages and features that help the business and the audience in achieving their goals?
  3. Content creation: preparing the copy for the website’s pages;
  4. Creating the visual brand: preparing the color palette, fonts, and graphics to be used in your website design, that will end up shaping your visual identity; 
  5. Wireframing: sketching your web pages layout;
  6. Website design: creating the actual website, be aware of the limitations of the tools you’re using;
  7. Testing: making sure everything works, from links to forms and buttons. Test the website on various browsers and devices to make sure it functions properly;
  8. Launch: make some noise before going live with a carefully planned communication strategy.

Let’s take them one by one.

 

The steps of a website design process

1. Scope identification

At this stage you and your team will need to figure out the answers to some of the questions below:

  • Who is the site for?

An eye-catching website might have its perks, but, if you want your website’s visitors to commit their money or time, it means that you need to dig more, in order to convince them that the commitment is well worth it. In order to be convincing, you will need to understand your target audience, understand its needs, internal and external motivators.

This digging also means that you need to create a product that is useful and solves someone’s need. 

For example, let’s say I have a hobby of making paper flower arrangements and want to take it further and transform it into a business. Does anyone paper flowers? Where can I find these persons? 

Well, I might think that wedding planners and future brides might want such an option.

But I must go even further. Would every bride want my paper flowers or just a type of bride? 

This means that you’ll need to go through some research and check your competitors. Are there other paper flower merchants? You also compete with good old flower shops. Which would then be your added value, or your unique value proposition?

 

  • What would your website visitors expect to find on your website?

Going back to our example, probably your visitors would want to see a variety of products, of colors, info on shipping (they might need some extra care because the paper flowers are fragile), etc. What about some mentions that the paper is recycled? Maybe your clients are very conscious of their impact on the environment, and they care about such details

Can someone also rent the flowers?

Now, what if you include some testimonials? Maybe you designed some paper flower arrangements for your friends’ weddings.

See where I’m getting at? You need to do your research, before jumping into the website design.

 

  • How do conversions look like?

Are we talking about course registration, the purchase of a product, a subscription to a newsletter?

In the case of Monday, you can easily figure out their conversions from the homepage.Homepage example from Monday.com

The main conversion is obvious from the “Get started” call to action, which is positioned right above the fold, in the center.

Another micro-conversion is a conference registration, which you can notice from the message in the upper-left corner.

Another micro-conversion is the “Contact sales” one.

What about your website, is there a main conversion? Are there some secondary ones?

 

  • How does the customer journey look like?

A customer journey map is a visual representation of the path a visitor takes through your website from their entrance, till they reach the desired goal and leave.

A customer journey map should include info such as the pages that get visited and in what order, the steps needed in order for a website visitor to achieve its goals, the points of interaction between your company and the website’s visitors (forms, chat, etc), potential friction points.

A customer journey is not fixed. You start with an assumption then adjust along the way. You can use tools such as Google Analytics to analyze website behavior and make optimizations based on real insights.

 

2. Defining the website’s sitemapWebsite sitemap

Source

Now that the customer journey is clear, it’s time to create the sitemap. A website’s sitemap is used to establish the website’s information architecture and explains the relationships between various pages.

You can create sitemaps in tools ranging from Excel to Figma.

 

3. Content creationWebsite content creation

Now that the structure of the website is established, it’s time to create content for the individual pages. 

Here are some best case practices when it comes to copywriting:

  • Use words and concepts familiar to your ideal users;
  • Don’t go with fluff and jargon;
  • Try to communicate as you would do in a normal face-to-face encounter. This way you will induce a feeling of familiarity;
  • Write in the present tense, and avoid passive voice;
  • Always check your readability. For this, you can use tools such as Readable.
  • Test your headlines with friends, strangers, colleagues. As David Ogilvy puts it:

“On average, 5x as many people read the headline as read the body copy. When you’ve written your headline, you’ve spent eighty cents out of your dollar.” 

This means that headlines are vital on a website. 

Try to optimize your content around certain relevant keywords for your audience (SEO). You can use tools such as Google trends (free), Ubersuggest (free), or Ahrefs (paid).

  • Make use of the AIDA copywriting framework. 

A – Attention: create content that grabs attention, that incites curiosity, and that convinces your audience that it needs to find out more about your brand.

I – Interest: give your visitors a reason to remain engaged. The key here is to make the problem personal so that you’re only speaking to the prospect and no one else.

D – Desire: this is where you show your homepage visitors how your offerings provide a solution to their problem/pain. Here you can start explaining the features of your product, with a focus on how those features can improve their lives.

A – Action: now it’s time to persuade prospects to act: buy, subscribe, download a freebie, start a trial, etc. 

 

4. Creating the visual brand

This step doesn’t have to always be your 4th step. You can begin even earlier in the process with this. 

Visual identity refers to the way you shape the perception around your brand.

This is a whole process by itself.

Here you will need to:

  • Define how your graphics should look like. Will you use shapes, 3D graphics, illustrations? Illustration from Mailchimp

Source

 

  • Define your website’s typography;Typography

Source

 

  • Choose a color palette. From the color palette, you can evolve to a style guide, where you can establish the colors of links, headlines, buttons, backgrounds, etc. for this you can use tools such as the Adobe color wheel.Color palette

Source

  • Curate images that tell the story of your brand;Curated images

Source: https://convertsquad.com/blog/

 

  • Design your logoLogo design

Source

  • Prepare physical assets (product packaging, etc).Product packaging

Source

 

Most of the elements above can be used to create a mood board. When you gather your fonts, graphics, colors in a mood board, you will be able to better understand the overall website mood vision. What will your overall tone and voice be: light or dark? Formal or playful? Mood board used in a web design process

Source

 

5. WireframingWireframes for the web design process

Source

Wireframes are sketches of a webpage or app. You can draw them by hand, create them in Google Docs, Sketch, or Figma, depending on the complexity of your website. A wireframe is used to layout content and functionality on a page. It should tell a designer where he should place a video, images, headlines, content blocks, buttons, etc. It’s good to use wireframes before jumping into design because they allow you to be more flexible. It’s easier to amend the structure of a wireframe than the one of a ready-designed website. 

 

6. Website designWebsite design

Source

Now we’re talking business!

We’ve got our content, wireframes, visual elements, now it’s time to get to work.

As mentioned in the title, you don’t need to be a web designer or code geek to create a website. There are plenty of tools out there to help you design a website with no code. They are called Page Builders. 

Most of them allow you to customize every inch of your design, and to make it responsive. 

Inside WordPress, you can go with our very own Colibri builder, or Elementor, for example. Outside WordPress, Wix and Squarespace are really popular. These tools can provide you with templates, that you can enrich by adding your own sections, visuals, and content. 

Now, if your design requires certain animations, effects, you might need to add some code.

 

7. Testing

Ok, let’s say your content and visuals are up. Your job ain’t ready yet. It’s time to make sure that everything works: you don’t have any links that lead to nowhere (aka broken links or 404s), that all your buttons and forms work, that the website looks well on most browsers, and devices.

Now, before the launch, you could test a bit how your website is perceived by external people. This way you can avoid being caught in your own biases. For this, you could do a simple user research: the 5-second test. This is a method that helps you measure what’s the first impression users get within the first five seconds of viewing a homepage, for example

 

8. Launch

Now, when you launch you just hit publish and you’re done. No, you need to create some buzz, launch some PR campaigns, do a social media shout-out to let people know you’re out!

 

And that’s a wrap folks. Now you have the right steps for a web design process. 

Happy website building!

 

If you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to Colibri’s Youtube channel and follow us on Twitter and Facebook!

 

 

 

 

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

 

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE