Skip to content
Menu
  • Web Design Business
  • Web design Fundalmentals
City Kitty Design

9 PRINCIPLES OF GOOD WEB DESIGN

Posted on August 11, 2021August 11, 2021

PRINCIPLES OF GOOD WEBSITE DESIGN

An effective website design should fulfill its intended function by conveying its particular message whilst simultaneously engaging the visitor. Several factors such as consistency, colours, typography, imagery, simplicity and functionality all contribute to good website design.

When designing a website there are many key factors that will contribute to how it is perceived. A well designed website can help build trust and guide visitors to take action. Creating a great user experience involves making sure your website design is optimised for usability (form and aesthetics) and how it easy is it to use (functionality).

Below are some guidelines that will help you when considering your next web project.

Principles of good web design by Feelingpeaky
Principles of good web design by Feelingpeaky

1. WEBSITE PURPOSE

Your website needs to accommodate the needs of the user. Having a simple clear intention on all pages will help the user interact with what you have to offer. What is the purpose of your website? Are you imparting practical information like a ‘How to guide’? Is it an entertainment website like sports coverage or are you selling a product to the user? There are many different purposes that websites may have but there are core purposes common to all websites;

  1. Describing Expertise
  2. Building Your Reputation
  3. Generating Leads
  4. Sales and After Care

2. SIMPLICITY

Simplicity is the best way to go when considering the user experience and the usability of your website. Below are ways to achieve simplicity through design.

Colour

Colour has the power to communicate messages and evoke emotional responses. Finding a colour palette that fits your brand will allow you to influence your customer’s behaviour towards your brand. Keep the colour selection limited to less than 5 colours. Complementary colours work very well. Pleasing colour combinations increase customer engagement and make the user feel good.

Type

Typography has an important role to play on your website. It commands attention and works as the visual interpretation of the brands voice. Typefaces should be legible and only use a maximum of 3 different fonts on the website.

Imagery

Imagery is every visual aspect used within communications. This includes still photography, illustration, video and all forms of graphics. All imagery should be expressive and capture the spirit of the company and act as the embodiment of their brand personality. Most of the initial information we consume on websites is visual and as a first impression it is important that high quality images are used to form an impression of professionalism and credibility in the visitors mind.

3. NAVIGATION

Navigation is the way finding system used on websites where visitors interact and find what they are looking for. Website navigation is key to retaining visitors. If the websites navigation is confusing visitors will give up and find what they need elsewhere. Keeping navigation simple, intuitive and consistent on every page is key.

Principles of good web design by Feelingpeaky
F-Shaped layout - digital design by Feelingpeaky Ltf

4. F-SHAPED PATTERN READING

The F- based pattern is the most common way visitors scan text on a website. Eye tracking studies have found that most of what people see is in the top and left area of the screen. The F’ shaped layout mimics our natural pattern of reading in the West (left to right and top to bottom). An effective designed website will work with a readers natural pattern of scanning the page.

5. VISUAL HIERARCHY

Visual hierarchy is the arrangement of elements is order of importance. This is done either by size, colour, imagery, contrast, typographically, whitespace, texture and style. One of the most important functions of visual hierarchy is to establish a focal point; this shows visitors where the most important information is.

Principles of good web design by Feelingpeaky
Principles of good web design by Feelingpeaky

6. CONTENT

An effective web design has both great design and great content. Using compelling language great content can attract and influence visitors by converting them into customers.

7. GRID BASED LAYOUT

Grids help to structure your design and keep your content organised. The grid helps to align elements on the page and keep it clean. The grid based layout arranges content into a clean rigid grid structure with columns, sections that line up and feel balanced and impose order and results in an aesthetically pleasing website.

Principles of good web design by Feelingpeaky
Importance of load time by Feelingpeaky Ltd

8. LOAD TIME

Waiting for a website to load will lose visitors. Nearly half of web visitors expect a site to load in 2 seconds or less and they will potentially leave a site that isn’t loaded within 3 seconds. Optimising image sizes will help load your site faster.

9. MOBILE FRIENDLY

More people are using their phones or other devices to browse the web. It is important to consider building your website with a responsive layout where your website can adjust to different screens.

Principles of good web design by Feelingpeaky

Our team will breathe life into your website and tell your story We are a ‘family’ team of creative practitioners in the areas of design, marcoms and technology. Get in touch to find out more.

Recent Posts

  • The Ultimate Guide to Choosing the Right Marketing Company in Charlotte
  • Unlocking Growth: How a Marketing Company in Charlotte Can Elevate Your Business
  • Top Marketing Companies in Charlotte: How to Choose the Right One
  • Finding the Right Marketing Company in Charlotte: A Guide for Local Businesses
  • Finding the Best Marketing Company in Charlotte: A Comprehensive Guide

RSS feed: Web Design News Web Design News

  • JavaScript SpeechSynthesis API November 20, 2025
    As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any arbitrary string. The Code You can direct the browser to […]
  • Fix “This video format is not supported” on YouTube TV November 17, 2025
    Setting up a new computer is bliss — no old, unused apps and the machine performs much better than the previous. Unfortunately, you may encounter new problems based on the new hardware. One such issue I encountered with my new MacBook was a “This video format is not supported” message when I went to YouTube […]
  • Easy way to upload, transform and deliver files and images (Sponsored) March 24, 2025
    Managing media is a really difficult task if you try to do all of it yourself, especially if the media comes from other sources. The file can be submitted in any state and size, but what if you need something really specific? You can code it all yourself or you can use an awesome service […]
  • How to Download a YouTube Video or Channel September 4, 2024
    The ability to download media on the internet almost feels like a lost art. When I was in my teens, piracy of mp3s, movies, and just about everything else via torrents and apps like Kazaa, LimeWire, Napster, etc. was in full swing. These days sites use blob URLs and other means to prevent downloads. Luckily […]
  • How to Add a Header to a curl Request August 3, 2024
    curl is one of those great utilities that’s been around seemingly forever and has endless use cases. These days I find myself using curl to batch download files and test APIs. Sometimes my testing leads me to using different HTTP headers in my requests. To add a header to a curl request, use the -H […]
  • Case Insensitive CSS Attribute Selector June 19, 2024
    CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case! Adding a {space}i to the attribute selector brackets will make […]
  • How to Set Date Time from Mac Command Line June 17, 2024
    Working on a web extension that ships to an app store and isn’t immediately modifiable, like a website, can be difficult. Since you cannot immediately deploy updates, you sometimes need to bake in hardcoded date-based logic. Testing future dates can be difficult if you don’t know how to quickly change the date on your local […]
  • How to Retrieve WiFi Password on Windows May 13, 2024
    Remembering the WiFi password when on a guest network is never easy. Even worse is when it’s no longer posted and someone else is asking you for it. Luckily there’s a built in Windows command to recover the password of a given WiFi network. The Shell Code Open cmd and execute the following command: netsh […]
  • How to Fix: Windows WASD Keys Reversed with Arrow Keys May 2, 2024
    This past weekend I had the opportunity to be what every father wants, if only for a moment: the “cool dad”. My wife was out of town and my youngest son wanted to play PUBG. I caved in, taught him the basic FPS key binds, and he was having a great time. While he was […]
  • HTML popover Attribute April 15, 2024
    Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don’t know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute — let’s check […]

Related Sites

CatNFTs.io

©2026 City Kitty Design