Good Web Design Practices & Elements
Hello and welcome to the new blog post! Today we will cover good web design elements and practices.
It is paramount to have a modern web design in 2019 if you want to attract new leads and customers. In addition, good web design will help you rank higher in search engines.
One of the most important elements that we will talk about further in the post is responsive web design and search engine optimization (SEO). Without these two elements website might as well not exist as it is neither for search engines or people.
Additionally, to firstly understand good web design practices, you must know what bad design is when it comes to the websites. We have compiled a handy list (in no particular order) with examples below. We will explore these in the post, so keep on reading!
If you want to know what good web design is – think like a user. Would you stay on the website if the design is unique and oh so visually pleasing, but difficult to navigate? Artsy websites that want to stand out usually are at fault with this.
When building a website, ease of use needs to come first. Make sure that backend has clean coding and everything works as it should. In addition, it is important to have clear navigation and structure for each page. Otherwise, it is easy for users to get lost in the sea of content and click away. In a way, all of the good web design elements should come together to translate into a fantastic user experience.
Check out this article that lists great UX designs, from Apple to Gmail.
White space or space, in general, is another great web design element that everyone should incorporate into their websites. It helps to create visually pleasing designs without cluttering.
Designs that are stuffed and don’t have breathable space can distract and unnecessarily confuse the end user. Having space means it is easier to digest the content as there are spaces.
For example, if you see a block of text, it instantly gives out those encyclopaedia vibes, and the instinct is to instantly skip it.
On the other hand, if there are pauses or spaces, the result looks infinitely better.
It is no surprise that it is a must to have a responsive design where users can use the website on a desktop pc, laptop, tablet and phone. This requires the website to scale according to the size of each device and is now a norm expected in newer websites. Responsive design typically has these three elements:
What is a fluid grid? – You may ask. The definition of fluid according to Cambridge Dictionary:
In web design terms, fluid grids made with CSS have columns that change in relation to one another and adapt to each screen size and browser. It is a complete opposite of static design that is solid and doesn’t have the fluidity to change based on device size.
‘Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width.’ – Developer Mozilla
Another coding magic: there is a code, that doesn’t let visuals exceed the size based on a device it is displayed on. As the screen changes so do the visuals.
It is common practice to create CTA buttons that stand out from other content with bright colours and bold fonts. However, it is important to note that they should also adapt to the website’s colour scheme. Colours need to complement one another so that the website’s identity doesn’t get compromised.
Also, CTA needs to be clear so that the user can understand what value they get from clicking the button. It is a good idea to include short, high-intention words, such as ‘sign up’, ‘buy now’ and ‘try it for free’.
To rank high in SERP’s there a large variety of practices. Let’s start with MOZ example that is easy to understand.
The first step towards SEO is crawl accessibility as seen on a pyramid. It is easy; you simply need to submit an XML sitemap to Google so that the website becomes accessible for search engine crawlers. The easiest way to do it is through this website that creates sitemap when you enter your domain.
Working your way up, it is important to write regular, long content <1000 words, as Google prefers websites with more content. Research which keywords you want to rank for and add them to your website so that it gets more traffic.
It goes without saying, that user experience plays an important role in search engine rankings too. Executing a link building strategy is also one of the more important things that need to be done to rise to the top.
Optimizing your website for SEO is a continuous work that needs a lot of effort and time, so plan accordingly.
Having a fast website is now a requirement more than a good web design practice. However, you would be surprised at how many websites have this problem. There are a lot of things that can be done to decrease the loading speed.
One of the easy ones is lazy loading images or compressing them to avoid long loading times. However, sometimes the problem is larger and lies with the hosting provider. In that case, it is best to make a switch to the web host that will transfer your website through servers quicker. If there are any problems with the loading speed, it’s best to deal with them ASAP, as it can affect the business in a bad way.
You can check how your website is doing here and solutions to slow loading times.
Typography can get tricky; however, it can heavily impact how the website is perceived. Imagine a website with Comic Sans font, would you take the business seriously? That’s why it’s important to have typography that reflects the brand, conveys legibility and psychologically influences the reader to perceive the company as trustworthy.
You can choose from hundreds of thousands of fonts. So the first step is to evaluate your brand’s values and choose a fitting font.
However, picking a font that fits your brand without considering readability is a disaster waiting to happen. According to the 2013 study Verdana followed by Georgia is the best choice for websites in terms of legibility. Meanwhile, Arial and Times New Roman was originally created for print media.
Another typography sin is choosing too many fonts. It can get visually displeasing quickly. It is best to pick 3-4 fonts and use them for specific parts of the text, such as headings, sub-headings, main text and others.
Same as with typography, colours can influence users’ mood and the way your company is perceived. Each brand should have their signature colours that can be used on the website. Again, less is more when it comes to colours.
This fashion and interior design rule is a great guide to follow when picking colours for the website:
- ‘The primary color should cover about 60% of the space and create the overall unifying theme of the design.
- The 30% should contrast with the 60% to create a visually striking effect.
- The 10% is an ‘accent color’, which should complement either your primary or secondary color.’
Here are a few examples of utilising that rule:
And here you have it! Hopefully, this guide was helpful in guiding you through the good web design practices & elements and gave you the inspiration to improve your website.