9 Must-be-obeyed Principles in Web Design

Image for post
Image for post

As I said in the previous blog 6 Signs It’s Time to Give Your Website an Overhaul, in this age of data overflowed, having a nice website design is crucial for businesses to attract customers’ attention and gain their trust.

So in this next stop, I’d like to change my target audience to you, the executors — the website designers. 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 real good first impression from visitors.

Below is the list of “09 must-be-obeyed design principles” which will make your website user-friendly, effective, and engaging.

P.s: Please pay attention that your website only considered as well-designed when it meets both visual appeal and inner functional usability. In other words, visitors judge a website on how does it work and then how does it look. Lacking in any element could lead to demolishing your brand impression.


Good web designs always serve rightly to the needs of users. Are your website visitors looking for news, information, open source of knowledge, entertainment, social interaction, or to make a deal/transact 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.


We’re living in a rushed era, people rush things from the offline to the online world. Don’t take my tone negative, I mean everybody wants to save the 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; using 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.


Image for post
Image for post

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 just maximum 3 typefaces in a maximum of 3 point sizes to keep your design streamlined.


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, considering carefully and choosing 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 call to actions).
  • Last but not least, white space/negative space is extremely useful in giving your website an up-to-date and uncluttered look.


One picture worths a thousand words, choosing the proper images for your website can bring a great support for brand positioning and connecting 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).


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.


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 a 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 users experience whether they have the intention to judge your business through your website’s look or not.


Image for post
Image for post

Eye tracking studies have pointed out that people scan computer screens in an “F” pattern. The first and the 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 “F” pattern (left to right, top to bottom).


Once again, mark the fact that in this century over 50% of online visitors use their phone/tablet to surf your 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 consideration is building a dedicated mobile site. It’s a separated version of your web specifically optimized just for mobile users.

Always keep these 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.

Written by

Designveloper is leading software development company in Vietnam. We offer Web development, mobile application, UI/UX Design, VOIP. www.designveloper.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store