Webdesign principles – The foundations you should know before building your own website

Creating a website can be a hard task to do when you have no idea where to start and what to focus on.

This post is going to give you a quick overview of the web design principles you should take into consideration when building your website. I want to give you a web design principle checklist with all the web design foundations that are needed in order to create an outstanding website.

The following principles are applicable for any kind of websites ( one page, multiple page, e-commerce, etc).

The 3 second rule

One of the most important web design principles is the 3 second rule. Studies show that when users arrive to a website they only need 3 seconds to decide whether the content is valuable for them or not. So if they cannot tell what that business is about in 3 seconds, they will leave eventually. There are 3 problems with that: it increases your bounce rate ( bounce rate tells you what percentage of people left a page on your website without looking at other content); it lowers your traffic and you lose an opportunity for conversion.

The simple as is.

This is why it is crucial to make your website look outstanding, especially your home page – or the landing page where the users would arrive from other platforms.

Tip: Make sure your hero image is bold and powerful. Make sure your headlines and graphic elements are helping your users understand the purpose of your website. 

Pay attention to what can be seen on the section above the viewport heights ( the viewport height is what you see on the screen at one time without scrolling ) and check on different devices, because what can be seen varies based on what screen you are looking at.

Show don’t tell

The website for an online business is like a show-window for a regular offline store. People will pass by and look at your window to see what you offer. If you are able to call their attention, they might go in, look around and even buy from you. 

In case of a website, they click through your pages and convert (sign up to your newsletter, buy a product, read your content,etc.) – but you have to make sure they do so.

This principle is especially important for e-commerce websites, since the personal touch with your products is missing. People are not able to see personally and try your products, there is no personal connection. Yet, you need to find the way to make them curious.

Tip: Add as much information as possible: details about the products, services, reviews,  testimonials from previous buyers, videos and images. Lots of images.

Pro tip: make your policies easier to digest – create illustrations and add graphic elements to them.

Connection

This is more than a web design principle, it is a human need that appears online as well. Our need for connection is what allows us to sell our products and services.

When it comes to connection this web design principle is not only about the contact page. It contains every booking form, registration form, online purchase forms.

Tip: Look for ideas on other websites you like and follow. Try to get inspiration of how to make an easy to use and navigate form and apply it to you own website.

Offer a solution for a problem

Each one of us is looking for solutions to a problem every single day. Just pay attention how many times you search for an answer in google. The reason people go to websites is to find answers and solutions to a particular problem. 

Tip: If you want to be of service to others – and make money at the end of the day – , make sure you are clear about the solution you offer to them. Put yourself in your ideal customer’s shoes and think about all the questions, struggles they might have and  be as specific as possible in offering them help.

When a customer resonates with your message and feels like you understand them, they will likely buy from you.

The WOW experience

The best way to make your website memorable and engaging is to create a WOW effect. This is the feeling your audience has when they arrive on your website. The jaw dropping feeling while seeing the pages and scrolling through the site. 

Tip: This WOW effect can be caused by several different ways:

  • Amazing pictures
  • User friendly navigation – simple and easy
  • Repeating design elements that help users navigate through the website (make it look familiar and easy to understand)
  • Simple designs, bright colors, large texts
  • Motion graphics
  • Asymmetry: it is getting more trendy now to use asymmetrical elements that call the attention
  • Clear and obvious CTAs – call to action buttons – you would be surprised how many people mess up their CTAs. They think it is obvious that a button would be pressed with a certain text on it – but many times those text are not clear, nor obvious.

Check out the website below to have a better understanding. Look around and see how amazing it is that can walk around the forest, look at it from bird’s eye and be close to root of the trees.

http://rainforest.arkivert.no/#kart

 

Share information 

This design principle is related to branding itself. When you create a website you are not just showing your services or products to your clients. You are looking to share information about your brand, you message, your mission.

When you know who your ideal customers are, then the way you would approach and target them is pretty obvious. Your logo, your design elements are sharing a particular information about you and your business. 

Tip: There are couple of ways to share information effectively

  • Minimize text: we are all running nowadays, we have less and less time to read through long texts and articles. We need short information and clear instructions to take quick actions. 
  • Use short sentences: Always keep this is mind: the larger your sentence the easier to lose attention. If you want to make sure your message goes through easily, use short and easy to understand sentences. 
  • Write shorter paragraphs: to make your text easier to read. When texts are divided into shorter paragraphs it helps your eyes to follow the information a lot easier. 
  • Use graphic elements and images: sometimes a picture tells more than hundred words – and this principle is applicable here as well. If you decide to use pictures make sure to use pictures that help to understand the information and are not taking the attention away.

Optimize your website to mobile devices

The current (2020) number of smart phones around the world is 3.5 billion and more than 50% of Google searches are coming from mobile phones.

That is a crazy amount of people surfing on the internet every second of the day. Not having a website optimized for mobile devices is a pure dumm. You are taking traffic and sales from you and your business.

Tip: you can do this 3 ways

  • Check each page one by one on different screens while building your website.
  • Create your website on desktop version first and adjust it at the end to mobile.
  • You start the whole design in mobile version – after all your traffic might come from this source more than the other – and then focus on the desktop.

Now it is your turn!

Let me know which of the above princinples are you most struggling with and why? I would love to see your comments and give you support on the areas you most need it.

0 Comments

Submit a Comment

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

You May Also Like…