Web Design Training by Lori (Part 1) | The Principles

In order to have the very best design for your website, you should never over-complicate it. Always remember - keep it nice, clean and simple!

A few weeks ago our wonderful teammate Lori, who is currently studying web design, shared with us some interesting things she had learnt so far. We liked her presentation so much that we decided to summarize what we’ve learnt and pass the knowledge on to you!

We live in an ever changing world, where technologies are undoubtedly a big part of our everyday lives.

Being the curious person that I am, I decided to do a research on Internet facts and statistics for 2019. Back in 1995 less than 1% of the world population had access to the Internet and now, 24 years later, the statistics show that the number has grown over 40%.

What struck me even more was the fact that a whole 71% prefer online shopping to going to the store, because they believe that they will get a better deal.

0 %

of the world population used Internet in 1995

0 + %

of the world population uses Internet in 2019

0 %

prefer online shopping

All of that really prompt me to think about website usage and how our everyday life is pretty much non-stop connected to it.

The appearance of those websites is really important and there are some spoken, as well as unspoken, rules on web design, which we like to follow in order to build the perfect beautiful user-friendly website. Here are some of them!

1. Know the purpose of the design you are creating

The first thing you have to keep in mind when creating a design for a website or another matter is the audience it’s directed to.

For example, when creating a business website it’s best to keep it very simple, very sleek and professional; you shouldn’t include any excessive information in order for your clients to be able to navigate through your pages easily.

The colour scheme is also very important as different colours subconsciously evoke different feelings: it’s proven that blue is a color of peace, trust and loyalty, whereas yellow awakes a feeling of alertness and discomfort, hence why it’s used for warning signs.

2. Communication

This part may be quite obvious, but we feel that we don’t have the right to skip it! So listen up: communication is essential for a positive user experience.

Regardless of the type of website you are creating, there is always a significant need to communicate effectively with visitors. In any user-friendly website you should make sure that the information is easy to find, read and digest.

3. Typography

It is best to use sans-serif fonts on your website, because they are contemporary looking fonts without a decorative finish which makes them easy to read.

A few examples of such fonts are Roboto, Ubuntu and Helvetica. The best advice Lori had to give us when it comes to choosing our fonts was “Strive for simplicity!”

4. Easy load and easy navigation

You shouldn’t clutter your page with anything extra, because all the information you put takes time to load and is harder to navigate through.

One step to achieving that fast loading is to always use images that are up to 100KB a piece. It’s not always possible, especially if you display some photos that have to be viewed in full width, but it’s the optimal solution.

Overall, strive to make your pages load as fast as possible and always consider the “three click rule” – users should be able to find any information they are looking for within 3 clicks. If it takes too much time for your website to load your audience will eventually get tired and will exit.

5. Grid-based layouts

We can structure the information on our site much better if it’s divided into sections, boxes and columns.

This doesn’t mean you have to have a boring design to your website. It just ensures a solid structure that you can build your website on.

6. Element spacing

Element spacing is actually very closely connected to the grid-based layout we just talked about. So as we said before, all the info on our site will be structured into boxes. Things is, we don’t want those boxes and pieces of information scattered around, we want a very fine and precise spacing between each and every of them, so the final picture comes out in the most flattering way possible. That’s why the boxes have different parameters to them – margin area, border area, padding area and content area. If you would like to know more, read our article on Typography and Spacing.

7. F Pattern design

The F Pattern design relies upon various eye-tracking studies that prove the person reads the content on a webpage the same way we read a book – top to bottom and left to right. Here I should mention that not all cultures read and write the same way – Arabic, Hebrew, Persian and Urdu Sindhi, as well as some Chinese and Japanese scripts, are the most widespread right-to-left writing systems in modern times.

However, for left-to-right readers and writers, the natural way for the eye to scan a page is starting from the top left corner, going down and only occasionally glancing on the right side.

Using the F pattern means you can plan the most important elements of your website (such as logos, navigation and call to action) on the left of your page.

Here’s an example:

For years people have been going back and forth discussing whether we actually scan information this way. Do you have any insight on this topic? Share your knowledge with us!

8. Mobile friendly

Now, let’s talk some statistics…

About 80% of today’s population has a mobile phone.

About 58% of the US population uses their mobile device to access websites.

That’s more than half the people that prefer to browse the Internet and look at stuff through their phones. Imagine a website that is not responsive and doesn’t load properly on mobile – you just lost 58% of your audience!

Achieving that mobile-friendliness can sometimes be tricky and costly, because often times you will have to redesign every element on your site so that it looks good in all scenarios.

If you are using some content management system such as WordPress or Wix that uses builders, which work by dragging and dropping elements you got it pretty easy – there is usually an option to edit for mobile, tablet, etc.

If you decide to work with code you should get familiar with Bootstrap as well – it’s a framework that uses HTML, CSS and jQuery to make responsive websites.

However, my overall advice is to always try and use fully responsive themes that have all settings pre-setup for all devices, so that way you don’t have to worry about a thing! If you find yourself in a situation where you have to hide a section or two just for a specific device, page builders such as Elementor or WPBakery usually have that option only a click away.

9. Consistency

Last but definitely not least, you should always strive for consistency on your website, meaning all the headings, sub-headings, fonts, sizes and buttons should have similar looks and a concept behind them throughout the whole website. Otherwise you will end up with a messy, unstructured, hard to understand web page.

Some scientists believe that the eye remembers shapes and forms. That means that having a too chaotic website where each page has a completely different design will be hard for the user to grasp. It will basically be like navigating through many different websites. And this is not something you would want!

In order to have the very best design for your website, you should never over-complicate it, add anything extra or make a messy unstructured hard to read and navigate website.

Yes, flip-over text and layers of images is quite engaging and nice, but you really need to be careful and try to engage some flat and material design since it’s a hit right now.

Always remember – keep it nice, clean and simple!

If you would like to read more about principles in web design, check out part 2 of our article!

Who wrote this article

Learn more about the author

Mirela Vaseva

Website Creator & Head of QA

/ IT, Software Engineering graduate 💻
/ good music, horror films, detective novels and delectable food 👌
/ YouTube videos junkie 🎥
/ animals, nature, water lover 🐱

Comments

Would you like to share something?