9 Web Design Principles Must Be Obeyed

 / January 09, 2022

As I said in the previous blog 6 Signs It’s Time to Give Your Website an Overhaul,  in this age of data overflowing, having a nice website design is crucial for businesses to attract customers’ attention and gain their trust. So in this article, I’d like to show you, the executors – the website designers about 9 web design principles. If in the previous blog readers can have a general view of outside signs of a bad website, then this one will show you exactly what you need to put your mind on to successfully build up a cool website that can surely gain a really good first impression from visitors.

9 Must-be-obeyed Web Design Principles

Below is the list of “09 must-be-obeyed web design principles” which will make your website user-friendly, effective, and engaging.
P.s: Please pay attention that your website is only considered well-designed when it meets both visual appeal and inner functional usability. In other words, visitors judge a website on how it works and then how it looks
. Lacking in any element could lead to demolishing your brand impression.

1. Purpose

web design

Good web design always serves rightly the needs of users. Are your website visitors looking for news, information, open-source knowledge, entertainment, social interaction, or to make a deal/transaction with your business? Your website needs to be organized in a purposive way. In general and for each page, understand and combine users’ needs with your own purpose to create a good impact with the visitors.

1. 9 Biggest Web Design Mistakes to Avoid That You Should Know
2. 6 Key Web Design Recommendations and Best Practices
3. 45 Web Design Terms: The Basic Glossary in 2022
4. 6 Web Design Myths That You Should Avoid

2. Communication & Load Time

We’re living in a rushed era, people rush things from the offline to the online world. Don’t take my tone negatively, I mean everybody wants to save most of their time from unnecessary standstills. All visitors hate a website that takes ages to load, they want speedy and plain information.
Some effective tactics to optimize your site’s communication & load time:

  • Organize information using headlines and sub-headlines; use bullet points or infographics instead of long and complex sentences/paragraphs to cut the waffle from your content.
  • Optimize image sizes (size and scale).
  • Reduce HTTP requests by combining code into a central CSS or JavaScript file; compress HTML, CSS, and JavaScript to speed up their load time.

3. Typefaces

Commonly, Sans Serif fonts such as Arial and Verdana are easier and more suitable for online reading. Sans Serif fonts are modern-looking fonts without decorative finishes (typically known as ‘footless’ fonts). The ideal font size for easy online reading is 16px. The web should be applied with just a maximum of 3 typefaces in a maximum of 3-point sizes to keep your design streamlined.

4. Colors

A nice-arranged color palette not only represents the appearance of your very own brand but also can keep enhancing user experience in the long run. So, consider it carefully and choose it well. Some tips:

  • Complementary colors bring balance and harmony. Thus using contrasting colors for the text and background (or some spots you want) will highlight specific content and make reading easier for the eyes.
  • Vibrant colors attract attention and bring up emotion. So you should use them sparingly (e.g. for buttons and calls to action).
  • Last but not least, white space/negative space is extremely useful in giving your website an up-to-date and uncluttered look.

5. Images

One picture is worth a thousand words, choosing the proper images for your website can bring great support for brand positioning and connect with your target audience. If you don’t own authority of any high-quality and professional photos, consider purchasing stock photos or just visit some open sources of free high-quality images like pexels.com, unplash.com, etc. to lift up the look of your website. Furthermore, you can consider using graphics, infographics, and videos because those media can be much more effective at communicating than even the most well-written piece of text (as a writer, I feel sad, but we have to accept the truth anyway).

1. 20 Web Design Tools for Different Types of Web Design Software
2. 5 Skills for Web Design Every Designer Should Know to Grow in Your Career
3. Web Design and Development: What You Need to Know Before Starting?
4. Web Design vs Web Development: Which Profession Should You Pursue?

6. Navigation

It is about how easily people could take action and move around your website. Some tactics to make your website an effectively navigational one are:

  • A logical page hierarchy.
  • Using breadcrumbs (I will give detailed guidance about this later).
  • Designing clickable buttons and following the ‘three-click rule. It means visitors are able to find whatsoever information they are looking for within three clicks.

7. Grid-Based Layouts

Oh, I forgot to remind you up there, besides organizing your web purposely, it’s also crucial that the content of your web be placed in neat order. Placing content randomly on the surface of your web pages can potentially make the appearance of your whole website look like a haphazard homeless man.
Use grid-based layouts to arrange content into boxes, sections, and columns. Make the content looks lined up, tidy, and balanced. This absolutely will create a very better user experience whether they have the intention to judge your business through your website’s look or not.

8. “F” Pattern Design

web design, software development, designer, mobile friendly, mobile app design, website building

Eye-tracking studies have pointed out that people scan computer screens in an “F” pattern. The first and most of what people see is at the top and left of the screen, thus the right part of the screen is rarely seen. Instead of trying to adjust the viewer’s visual flow, efficiently designed websites will work well with a reader’s natural habit by displaying information in the important order of the “F” pattern (left to right, top to bottom).

9. Mobile Friendly

Once again, mark the fact that in this century over 50% of online visitors use their phone/tablet to surf the web. It is essential for your website to be mobile-friendly. Build your website a responsive layout which is completely able to adjust to different screen widths. Plus, another option you can take into consideration is building a dedicated mobile site. It’s a separate version of your web specifically optimized just for mobile users.

Always keep these web design principles in your mind and combine them with your own accomplished designing skills, I’m sure creating engaging, useful, and memorable websites for visitors is totally within your reach.

Truc Thuy Minh
Reference: Shortiedesigns
Photo credits: pexel.com

Also published on

Share post on



Tell us about your idea

Your personal information
* This is required
What's type of your projects?
* This is required
* This is required
If not form, brief us


Tell us on Skype


Get in touch

Simply register below to receive our weekly newsletters with the newest blog posts