Website Design Principles: Six Basics to Improve User Experience

Website Design Principles: Six Basics to Improve User Experience

By : -

Website Design Principles: Six Basics to Improve User Experience

There are lots of ways to build a website these days. What once took first-hand coding skills now can be done through simple “drag-and-drop” interfaces and WYSIWIG editors (that acronym is pronounced “wiz-ee-wig” and stands for “what you see is what you get”) that generate HTML code for you while you simply point and click. But whether you use a pre-fabricated template through a popular website builder like Wix, SquareSpace, or Weebly or go your own route and have your site completely custom-made from scratch, there are some design principles and web usage fundamentals that ought to be honored by all.

These universal principles of website design ensure that your site will be visually pleasing; able to render across multiple web browsers, device types and sizes; and produce a decent user experience. Violate these principles at your own risk, because doing so will affect the quality of user experience as well as metrics such as bounce rate, total time on site, and engagement. Here are six basic principles of website design to consider when building or revising your site:

Website Design Principles infographic

  1. Stick to a Grid System – In all English-speaking countries (and most cultures) we are used to a top-down and left-to-right content structure. Consider a typical magazine or print piece as reference and arrange your content in a similar column and row fashion. The content blocks don’t have to be equal in size, but they do need to flow in a logical order. In other words, don’t get crazy and put your text in circles or vertical lines. You don’t have to reinvent the wheel here (so to speak), there are a vast number of pre-fabricated grids which are responsive to size changes and compatible with major coding languages. Don’t worry—any website builder template you choose will have this built-in, as should any  pre-designed theme for a content management system (CMS) such as WordPress.
  2. Recognize a Visual Hierarchy– It’s a well-researched fact that people tend to scan and browse web pages much more than they actually read them line by line. Signal what’s most important to readers by organizing and placing your most important elements like logo, headers, and calls-to-action (CTAs) in an “F” or “Z” pattern on the page. Also use appropriate font sizing, spacing, typefaces, and contrast to call out these important page elements. In other words, be skimming-friendly and you’ll draw in more in-depth reading.
  3. Color Palette– Limit your palette to no more than three colors and match your branding as closely as possible. You should choose one dominant color to accent your headings and key focal points on page, plus one or two accent colors to add visual interest for secondary and tertiary items such as subheadings, content boxes, additional buttons, backgrounds, etc. You can match your logo using the hexadecimal code for each color, which is a hashtag symbol (#) followed by a combination of six numbers or letters. The Hex color value is an absolute match, so it will work across any electronic device. The next best match (for web purposes) is the RGB value, which represents the color on a sliding percentage scale of red, green, and blue.
  4. Fonts– Like with color palette, limit your fonts to just 2 or 3. Any more can be visually confusing and cluttered. There is a pretty extensive selection these days of “web-safe” fonts that can be rendered across browsers and devices, so choose freely any of the standard fonts from your web builder site or CMS platform. Font files can be fairly large though, which can slow the load time on your site. Most modern developers (and all web builder templates) will set up and reference a universal CSS (cascading style sheet) document to control the basic layout and presentation of your entire site, including the font styles and sizes for your headings, subheads, and body copy. This streamlines the design and allows pages to load more quickly.
  5. Images & Motion– Choose your images carefully! Use high-quality photography that can scale to the largest size needed without getting pixelated or blurry. Whenever possible, use your own proprietary images over generic stock photography. If you do choose stock photos, make thoughtful selections that really communicate something of value. Respect copyright and licensing restrictions, as you’ll need to pay for web usage rights and may also need to give photo credit where due. Keep movement (including use of video) minimal so it doesn’t compete with lots of other elements on the page. And keep file sizes small! Use condensed file sizes (web resolution is 72ppi) since images often account for more than 60% of a site’s load time.
  6. Sound– ANY use of sound on your website, whether as effects, background music, or audio accompaniment to another element, should occur ONLY if it’s initiated by a click or other user action! It’s not 1998 anymore. You should not presume to auto-play sound on your site. It’s against website best practices because it forces a data connection, it pre-empts whatever else the user may be listening to while browsing, and it may literally drive people away from your page. Google Chrome has actually disabled autoplay audio in their latest browser update as of January 2018 for these very reasons.

Follow these basic design principles and your website development efforts are sure to result in a pleasing aesthetic, more intuitive site navigation, and all-around better user experience (UX)! For more tips and training on web development best practices and assembling a digital marketing plan, sign up for the Digital Measured email newsletter list here or check out the Strategic Digital Marketing Survival Manual ebook published on Amazon and Kindle Unlimited. 

Leave a Reply

Your email address will not be published. Required fields are marked *

I accept that my given data and my IP address is sent to a server in the USA only for the purpose of spam prevention through the Akismet program.More information on Akismet and GDPR.

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Enjoy this blog? Please spread the word :)