HEY

Participate in the next Webflow Challenge!

Create a website design : The Guide

As a webdesigner, your role is to make sure the user experience is successful! So I've prepared this webdesign guide for you: 10 practical tips

Updated on

25/9/2020

webdesign guide
Photo by Georgie Cobbs on Unsplash

A website is much more than a collection of linked pages. It is a real space forinteraction, whether between professionals, individuals or others. This interaction then creates an experience for the visitor. As a webdesigner, your role is to make sure that this user experience is successful! I have therefore prepared this webdesign guide: 10 questionsyou should ask yourself before creating a website design.

1. Who are your targets?

All those who create a site do so with a very specific goal in mind: they target a certain audience. This helps them build an effective site, one that really meets the expectations of its future readers. It is therefore obvious that the first step in the creation of a webdesign site is the knowledge of the targets.

Empathy is a much sought-after quality among web designers. How will they actually know what their prospects and clients need if they don't even try to put themselves in their place? Here are some examples of questions they should ask themselves:

  • what would my goals be?
  • what obstacles would prevent me from reaching them?
  • how could this site help me?
  • etc.

However, getting under their skin is not enough. I also advise you to get help with specific tools, website analysis tools among others. Most of them offer the possibility to see the demographic origin of visitors to a website. However, this is a crucial piece of information that can help in the design of a website.

I also know wedesigners who conduct a survey, always with the aim of knowing their targets better. Be careful though! A survey that is too classic, with too simple questions, will not give you the results you need. Don't settle for a question like "what do you think of this design". Instead, try more advanced questions to get more in-depth answers.

Once you have collected all the necessary data, take the time to analyze it carefully. Any decisions you make regarding the design of the site should be based on this information. Then comes the second tip in this webdesign guide:

2. How do people use your site?

I'm not going to tell you that some sites are very well known and visited because they are simply easy to use. Your site may be attractive, but if it's not practical, no one will be interested in it.

The second step in creating a website design is to understand how users will interact with your website:

  • are they comfortable with buttons?
  • Are the forms intuitive enough?
  • Do they prefer to press the buttons directly with their finger, or use keyboard shortcuts and mouse cursor?
  • etc.
webdesign guide
Photo by Freddy Castro on Unsplash

3. Webdesign guide: everything they do has consequences

Unless you scroll down the screen to simply observe, all actions on a site have consequences. When you invite someone to click on a button for example, they will be taken to :

  • spending money;
  • deleting a website;
  • be redirected to another page;
  • and many more.

And that's something the visitors should understand. Otherwise, they might do something they'll regret. So when you design, make sure that you make the visitors understand that such an action will result in something else.

For that, you can, for example:

  • highlight a button that corresponds to the desired action
  • insert an easily understandable symbol (a garbage can to show that an action leads to deletion, a magnifying glass to show that they can launch a search...)
  • give the right colours to each element (green to signify that visitors are on the right track and red to warn them)

4. What mistakes are they likely to make?

As the saying goes, "To err is human; to forgive, divine." That expression remains true in this webdesign guide. That's no reason to let people make mistakes. As long as possible, they should be helped not to make any.

Here are some examples in the case of creating e-commerce sites:

  • the validation buttons remain inactive until all the fields have been filled in.
  • The forms detect that an e-mail address has not been entered or has been misspelled.
  • Pop-ups ask if you really want to give up a shopping cart...
  • Etc.

Besides, better safe than sorry!

What to do if the mistake was made? The best would be to give users the means to correct it, by creating a detailed error message.

webdesign guide
Photo by Manuel Sardo on Unsplash

5. Does the site emit signals?

When two people are conversing, one speaks and the other answers. So he has what we call "feedback". On the internet, it's the same thing. Without any reaction from a site, it is generally considered that there is an interruption or disruption. We then tend to update the page again and again until we notice some sign.

To prevent your visitors from experiencing this moment of doubt, you need to include these signs in your design. It can be a loading animation.

6. Webdesign guide: what size and spacing for each element?

This rule is important in webdesign, which I decided to include in this webdesign guide: the bigger an element is, the less time it takes to click on it. Not only are these elements eye-catching, but they are also easy to click on. So people don't hesitate to click on them. This is probably why call to action buttons are often large.

The same goes for frequently used items (menus, search bar, link list, etc.). They should be wide enough so that there are no complications when you click on them. The user does not have to worry about exceeding their click target.

7. Do you know the standards?

I often say it (even in my other articles and webdesign guide): creativity is necessary in webdesign. But don't overdo it. Internet users are already accustomed to a number of standards, so it wouldn't make sense to change everything at once (unless the change in question really improves the design of the site).

Here's an example: when Pocket wanted to change the location of certain elements, it misled people. The archive button was moved to the top right while the back button was moved to the left. So new users accidentally closed and archived the item they were reading rather than returning to the reading library.

webdesign guide
Photo by Michael Soledad on Unsplash

8. Is the interface easy to learn?

Studies show that the human brain can only memorize a limited number of things in their short-term memory (between 5 and 9 new things only). To make sure your site is easy to navigate, try to make it as simple as possible. How can you do this?

It's just a matter of fragmenting the information. Take the example of Microsoft Word. As it is used by almost everyone, it is certainly easy to manipulate. Yet it is not without more advanced features for advanced users. The design of a website should then work in the same way.

Home pages are usually divided into several parts. There are short texts presenting a product or service, followed by a link to another page. The latter in turn contains more explanations on the subject. On the other hand, avoid using terms such as "learn more". There is no indication of what users will learn on the other pages. Instead, write a more specific and explicit word.

9. Is decision-making simple enough?

If your visitors are faced with a lot of choices:

  • Subscribe to newsletters
  • Download an ebook
  • Press a particular widget
  • etc.

It may take them a long time to decide.

So I would advise you to keep the list of choices to a minimum. This increases your chances of converting a visitor into a customer. You give him only one choice, only one call to action.

10. Have you considered all the necessary data?

I told you about analysis at the beginning of this webdesign guide, but these are only post-creation analyses. The data I'm talking about in this tenth and last step are different: they are data collected after the creation of the site.

All this to tell you that the analyses must be done regularly, even once the site is launched. There are several tools that can then help you, Google Analytics being one of the most powerful in this field. It is rather behavioral, i.e. it evaluates users' session schedules, traffic sources...

According to this data, the improvement of the site will not be over :)

webdesign guide
Photo by Rich Tervet on Unsplash

Conclusion

The creation of a webdesign website is not as simple as we think. In addition to creativity, all webdesigners also need to respect these steps that I just explained in this webdesign guide: 10 questions to ask yourself.

  1. Who are your targets?
  2. How do people use your site?
  3. Webdesign guide: everything they do has consequences
  4. What mistakes are they likely to make?
  5. Does the site emit any signals?
  6. Webdesign guide: what size and spacing for each element?
  7. Do you know the standards?
  8. Is the interface easy to learn?
  9. Is decision-making simple enough?
  10. Have you considered all the necessary data?
Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training