Web design can be a complex world. It is full of rules, terminology, and techniques that govern what makes an excellent web page that achieves the objective(s) it was designed for, and one that does not. However, web design can be complicated to master if you do not have the right training. Despite its complexity, web design is becoming an increasingly valuable skill in our digital world. Learning about the fundamentals of web design will help you build and refine your company’s brand.
At SPINX Digital, the company I work at, we pride in providing excellent web design services to build the best online presence for our clients. Based on our experience, here are the most crucial web design rules that you should never break.
1. Avoid Legibility Issues
If users cannot properly read the text on your site, your message is not going through. Having legible text on your site is incredibly important, but there are several mistakes that novice designers make that decrease legibility.
Poor text colour choices can easily backfire. For example, a website might have white text over a light-coloured background, which can make it hard to read. Similarly, having dark text on a dark background also makes reading difficult. Text placed over an image (such as a banner), may also make it difficult to interpret.
To avoid this, use appropriate colour contrast. Use dark text on the white background or light text on a dark background. While both are good choices, dark text on a light background tends to provide the best contrast but is more straining on the eyes when read over a long period of time. If you are placing text over an image, use an overlay to increase the contrast between the text and the image. A dark overlay will help light-coloured text pop while using a lighter-coloured overlay will make dark text pop.
Besides, it would be best if you chose fonts that are easy to read and not too small. A complicated font that is written in cursive or has serifs can be extremely hard to read, especially for elderly users. If the text is too small, you will run into the same problem. Choose clear, sans-serif fonts and large font sizes to improve your site’s legibility.
2. Apply Visual Hierarchy
Another fundamental concept in web design is the idea of visual hierarchy. This is the order in which a user processes information on a web page.
There are a number of techniques you can use to make it easier for your users to understand the hierarchy of your content such as using different font sizes and colour. For example, the title of the article you are reading right now is much larger than the heading of the section. Also, the heading of this section is larger than the text font. This is because we want users to read the title first and then move down the page. The different sizes of our titles, headers, and text all help guide viewers as they engage with our content.
Colour is useful in establishing visual hierarchy as well. For example, buttons on a homepage telling users to “sign up” or “shop now” might be a brighter colour than the other colours on the page. Links may be in a different colour than the normal text as well.
Think about what your ultimate goal for your website is. Do you want users to shop your products? Do you want them to sign up for your mailing list? Schedule a free consultation? Whatever the case may be, you can use visual hierarchy to guide users toward the selling points of your website.
3. Do Not Go Font-Crazy
While we are on the subject of fonts, it should be noted that the general rule is to use three fonts or less. Very often, one font is sufficient. Simply put, having too many fonts will make your site look unstructured and unprofessional to say the least.
You should also make sure your font choices are cohesive. Besides, they should be appropriate for your industry and the message that you are trying to convey. Sans serif fonts are particularly useful in conveying a modern image and are also ideal for digital products (such as websites). Avoid over-the-top, childlike, or unprofessional fonts at all costs.
4. Have An Obvious CTA
One of the first things that users should see when they go to your website is an obvious call to action (CTA). Usually, this is a button on your site front page telling them to “Buy Now,” “Learn More,” or “Schedule a Consultation.” Your CTA serves as your selling point and will drive customer engagement.
Some websites bury their CTA at the bottom of the page or forget to include it at all. Since the CTA generates the customer response you are looking for, make sure it is one of the first elements that someone sees.
5. Include Your Contact Information
Seems obvious, right? You would be surprised how many companies neglect to include their contact information on their websites. One of the primary reasons that visitors come to your site is to contact your company. If they cannot find the information they are looking for within the first few seconds of visiting your page, they will leave.
For this reason, make sure to include clear and easy-to-find contact information on your website. Make sure to include things such as:
- Your phone number
- Your company’s business address
- Your company’s mailing address, if different from the business address
- Email addresses of key contacts (or at least a generic email address)
You can also set up a contact form on your website for users to fill out and submit queries. However, you should still include your full contact details such as your phone number and physical addresses. Remember that some users will still prefer to call you or visit your premises. The percentage of users who prefer using “traditional” contact mechanisms will vary depending on the type of users you are targeting. The easier you make it for people to contact you, the more effective your site will be.
6. Avoid Distracting Autoplay
While video, audio, and other forms of digital media can add life and engagement to a web page, avoid the autoplay feature. Including an autoplaying video or audio on your site can make it difficult for users to navigate your site. Also, these features can make it difficult to find the CTA.
Additionally, autoplaying audio or video can be annoying and frustrating for viewers. Have you ever opened a link to a website on your phone, only for loud audio coming from an embedded video to begin playing suddenly? Not only can this be jarring, but videos on autoplay can also be awkward and embarrassing if you are out in public!
The solution to this one is pretty straightforward. Instead of enabling autoplay features, simply allow users to click the play button.
7. Proofread, Proofread, Proofread
Have you ever been browsing a corporate site, and come across a glaring typo? That typo can pull you right out of the website’s content and have you thinking more about the mistake that the company let slide. While the visuals on a site are crucial to its overall design, the text is equally (if not more) important.
Punctuation mishaps, as well as grammatical and spelling mistakes, can all decrease your company’s credibility. While a few typos every now and then do not necessarily spell disaster, many errors over time can damage the professional image you are trying to build.
When you are designing your final website, make sure to take extra time to proofread all sections. Get a colleague or two to review as well, in case you accidentally missed any mistakes. As soon as you see a typo, correct it! Make sure to keep your website clean and free of all errors so that they do not distract from your killer design and content.
Web design is a complex skill to master, and perhaps one might state that it is best left up to the experts. However, if you are doing the work yourself, familiarity with these rules will enable you to know what works and what does not work when you are assessing your website’s quality and effectiveness.
Want to learn more?
If you’re interested in the intersection between UX and UI Design, then consider to take the online course UI Design Patterns for Successful Software and alternatively Design Thinking: The Beginner’s Guide. If, on the other hand, you want to brush up on the basics of UX and Usability, you might take the online course on User Experience (or another design topic). Good luck on your learning journey!
(Lead image: Depositphotos)
