The design of your website can be as important as your value proposition, products and services. You have to think of your web page as the selling point of your business, even if you have a physical store. Having a beautifully designed website can help you win new customers and turn the existing ones to loyal and returning clients. Having said that, an eye-catching design doesn’t only mean being creative, interesting and using all available tools possible to create a unique website. There are certain web design principles you need to follow that will help you go a long way. Today we are going to look at some of the most important ones:
1. Typefaces and Text
Choosing a typeface for your brand is as important as anything else. For body text, it is better to use Sans Serifs fonts. They are easier to read and visually appealing. Those fonts are without decorative finishes unlike the Serifs fonts. Classic examples are Arial, Verdana and Helvetica. You can use Serif fonts for the name of your brand and headlines, if it seems appropriate. While, serif fonts are generally bad for body text because they are hard to read at smaller sizes. Generally, the maximum number of typefaces you should use is three and the perfect font size for online content is 16px. Also, make sure the chosen fonts are supported by all browsers.
Another useful tip to follow is to use text as part of your SEO strategy. Adding keywords, meta-data, H1 headlines, etc. can boost your search viewings. There are a few websites that you can get free fonts from like Typekit and Fontspring. Google Web Fonts also have a great selection of fonts.
2. Colours
A good colour combination goes a long way. It should be consistent with the colours of your logo and your brand. Complementary colours give the impression of balance and harmony. Use contrasting colours for the body text and background which will make reading it easier. Vibrant colours can be used for call to action text and buttons. Add white space to avoid clutter on your website. A general rule is to use two or three tones in order to have a clear and visually appealing design. One more consideration to keep in mind is that some people are colorblind, so be careful with your colour pairings.
3. Images
A good image can speak a thousand words. Choosing the perfect pictures can take time but will position your brand the way you want it for your target audience. You can either hire a photographer to shoot needed images, or purchase stock photos. When choosing images, don’t pick up as many as possible to fill space. Place every visual in a way that it will communicate important information about your website. The images on your homepage, especially, should be chosen specifically to attract attention and inform your audience about your products and services. Every design feature after that should be placed to encourage the visitors to find out more about your business and eventually become customers. Don’t overlook the proper use of images and design elements such as arrows. They can help you focus the attention by naturally leading your audience to where you want them to be.
When it comes to visuals, avoid images that move such as gifs and videos. It can be nice to have a video as a header on your main page, but that can still be a big distraction for your audience. Studies show that viewers prefer websites that are still and are easy to skim. Having any movement might lead them to just press the x button on your site.
An important note is that you have to be familiar with all image licensing restrictions. When you download stock images, some of them can be free for commercial use, some of them can only be used for personal needs. Make sure you know how to credit each image. You can check out the Creative Commons rules and get more details on how to use images without breaking any licensing laws.
Moreover, when picking out images, use the Rule of Thirds. It means that an image should be divided into nine equal segments by two equally spaced horizontal lines and two equally spaced vertical lines. And, the important elements should be positioned along these lines or at their intersections. This way images are more interesting and eye-catching.
Finally, keep image sizes small. Heavier in size files will slow down your website. Images usually make up for 60% of a page’s loading time. And, there is nothing worse than a slow website. Your viewers will just leave it immediately and never come back.
4. Navigation
Good navigation on your website means that it is easy for viewers to move around your site and take action when they want to. In order to have good navigation you need to use logical page hierarchy, breadcrumbs, buttons, and the so-called “three clicks rule”. This rule means that your audience is able to find the information they need within just three clicks.
5. Grids
Grid based layouts help you arrange your content into sections, columns and boxes. Not using a grid system will make your website look messy and hard to read. Using it, however, will line up all the content into a balanced and better-looking website design. If you need to visualize for yourself how a grid system looks, imagine the way information is arranged in books, newspapers and magazines. There are multiple arrangements of rolls and columns that you can use. There are a few popular grid systems – 960.gs, Simple Grid and Golden Grid System, and others – but you can also create your own.
6. Visual Hierarchy
Visual hierarchy is one of the most important principles that you should follow. It’s basically the order in which the human eye perceives objects. Visual hierarchy can apply to the order, colours and sizes of the different elements on your website. Certain parts are more important than others and need to be brought to the viewer’s attention. You should rank and prioritize elements based on your business objective. For example, buttons, calls to actions, value proposition, etc. need to be placed where there will be more visible.
In most places in the world, people read from left to right and from top to bottom. But skimming and quickly scanning web pages has become a more often practice than reading everything. So, good design is built around those changed reading patterns. Studies have shown that people scan websites in an “F” pattern. The top left of the screen gets the most attention, while the right side is hardly seen.
7. Fitt’s Law
Fitt’s law states that the time needed to move to a target area (click a button) is a function of the distance to the target and the size of the target. Meaning that the bigger and closer an element is, the easier it is to be used. For instance, if you’re using Spotify, you might have noticed that the Play button is bigger and easier to click than the other buttons next to it. Or another example is a contact form where you can have two buttons ”Submit” and “Reset”. The “Submit” button will be clicked more often, so you can make that one bigger and positioned on the left. But, don’t overdo it with this law. Huge buttons and elements that are enlarged for the purpose to get attention, might get annoying for the viewer. Make sure that all your elements are also visually appealing.
8. Gestalt Design Laws
The Gestalt Design Laws are principles that arose from the 1920s’ psychology, defining how people generally see objects by grouping similar elements, recognizing patterns and simplifying intricate visuals. Designers are using those principles in order to create better designs, which, of course, also applies for web pages. Let’s see what some of the major Gestalt Design Laws state:
Law of Proximity
The Law of Proximity states that people group elements together that are close to each other in space. Those elements become a single perceived object. In the instance of website development, you should not place objects together that you don’t want to be perceived as one. For example, elements that do go together, like navigation, menu and footer, product categories, are always grouped together in order to communicate with them as a whole.
Law of Similarity
We also group objects together that are similar in shape, color, size and other characteristics.
Law of Closure
People seek completeness and when shapes aren’t fully lined or have parts missing, the human perception fills in the visual gap. This principle is very powerful when it comes to logo designs. It makes it more interesting and memorable. For example, the logo of the World Wide Fund is one of the most recognized logos in the world with the imagery of a panda, whose lines are not completely closed.
Law of Symmetry
The human mind also perceived objects as symmetrical by forming a center point. When we see two symmetrical elements that are not connected, we connect them in our mind to form a consistent shape. Moreover, people prefer symmetric objects rather than asymmetric ones. For example, having columns of images and text, and centered sliders add to the visual appeal of many web pages.
Law of Common Fate
The Law of Common Fate applies that we perceive objects as lines that move along a path. We group things that have the same trend of motion and follow the same path. Imagine an image of hands pointing to a direction. This visual will automatically pinpoint your attention to where the hands are directing you to look. This is a very powerful principle that you can use in your design in order to guide viewers’ attention to an important object like a sign-up form or central message.
Law of Continuity
When it comes to lines, people also tend to perceive a line as continuing its established direction. For instance, if there is an intersection between two lines, we still perceive them as two single lines that are uninterrupted, and our eye instantly follows their original directions.
There you have them, eight basic web design principles that you should be applying to your website design. If you need more help, keep following our blog or contact us for a business consultation at Conversion Century.
share
.svg)
.png)