5 key factors of good web design

To become success website, it mainly depends on the web design. Not surprisingly, many companies want to improve their website to attract people visits and increasing longer visit time. So what are the 5 key factors of an excellent web design?

The good design in users view

Different users have different habits. However, generally what they love is almost the same. How easy it is to find what they want? Can they understand what is the page about?

1. Simple is the best web design

Putting too much elements on one page may not work. They will only distract visitors from the main purpose of your website. It is always suggest that serving up to 3 purpose per page. For example, if you are a page about shopping, just add photos and description of your product. Do not try to add “Subscribe Now” or “Blogs” elements inside.

Also, according to Google, they only preferred to put the website with fast loading speed pages on top search results. If you add a lot of effects, it may affect the loading and as a result, affect your SEO ranking. I believe that no one loves that.

Here are some websites with simple web design:

01. Evoulve

02. Tinker Watch

03. iPad mini 4

2. Is your design fit in mobile?

Let me ask you, what kind of device are you using right now to read about this post? MOBILE! Right? Okay, maybe some of you are using Desktop, but I am pretty sure that over 70% of you are using Mobile as they are easy to access anywhere and anytime. Therefore, don’t forget to build a beautiful design on mobile too.

A responsive website generally means mobile-friendly. Meaning the device will display and arranged all of your content and information according to the size of your screen. This is good for SEO as Google has announced that it’s their preferred model for mobile websites.

However, building a responsive website is not easy. It is suggested to hire a professional to help.

3. Fast loading

No one likes to wait for a long time for a website. You may either optimize image sizes, control your code to be clean for example combing codes into a central CSS or JavaScript.

If you need to display a lot of products or images on a page, you may also add the lazy load effect. For example if you need to load 50 images, the page will first display 5 images first, when the user scroll down, they will load the remaining images. This function is also used for shopping page, gallery, posts, etc.

You may find some CSS tricks on lazy loading images on here. https://css-tricks.com/snippets/javascript/lazy-loading-images/

4. The design clearly answers "Who I am," "What I do," and/or "What can you (the visitor) do here."

Assuming you are a well-known brand or company (i.e. Google or Coco-Cola), you can skip the introduction of getting people to know who you are and what you do, but for most of the business, you need to make sure everyone can find the answers to these questions so that each visitor knows if they are in the “right place”.

If visitors cannot identify what to do with you in seconds, they will simply close the tab and exit page. 

5. The "F" Pattern Design

The “F” Pattern Design is the most important element. You are designing the layout in the way of how viewer’s visual flow. 

The general behavior pattern of how the visitors read:

  • Start at the top left of the page
  • Scan the top of the site (navigation menu, subscription, search, etc)
  • Next they move down, reading the next full row of content 
  • Last, enter a “scanning pattern” mode and repeat of reading the next row

The F pattern of visitor visual flow

 

And so, it is why we suggest to design according on this flow. Here is another example on heatmap showing how do people surf the page.

Heatmap example of F pattern

 

To know more about the F-layout, please visit Understanding the F-Layout in Web Design.

Leave a Reply

Your email address will not be published. Required fields are marked *