Web Design Principles

How should a website be designed? What do web designers need to know before beginning the design phase. If you were building a house, would you start by hamming nails into wood and attaching random parts of the frame together? No! You would begin with a plan – on paper – or a digital design to layout the entirety of your house. You would identify how big the house should be; how many rooms you need to have; and the flow of the house and transition points where people move from one room to another. You would identify where smaller rooms and spaces need to be attached to larger ones: a walk-in closet off the main bedroom? An en-suite bathroom to go with a guest room.

Just as you would layout the architecture of your house in advanced to building it, web designers do the same with websites. The guiding principle here is to “design for usability”. This means, we are designing the website (or house) for those who use it and not from the perspective (or bias) of the designer who may not visit it once.

While it is tempting to focus on the design aesthetics of web sites, and eye-catching web sites can be converting web sites, it is important to remember that a web site is a marketing tool that should be increasing revenue for the company. Web sites should be built to serve the needs of the user. A web site is not something that users stare at—navigation usually requires action and interaction from the web visitor. If the user’s needs are served, the web site will be more likely to enable the company to achieve its goals.

Understanding Information Architecture

Gavin Llewellyn, a contributor to the website, Smart Insights, says, “you won’t be able to design a great site without a great understanding of information architecture” (Llewellyn, 2016). A poorly designed website will experience even bigger problems related to usability; a well-designed web site can be found more easily, indexed by Google’s search algorithms, and experience higher levels of engagement.

Nick Babich (2020), defines information architecture as, “…a discipline that focuses on the organization of information within digital products. For example, when designers create apps and websites, they lay out each individual screen so that the user can easily find the information they need. they also create a flow that lets users navigate between screens without much effort. UX architects determine the right organization and flow.”

The IA process involves the creation of blueprints and wireframe images to layout the website, develop the navigation, and oversee the flow and general user-experience. A user or visitor to a website doesn’t “see” the IA, but a well-designed site will feel intuitive, simple to follow, and logical in all aspects of its design and layout. As Babich explains, “while IA isn’t really visible to end-users, it is the backbone for the design. The information architect’s job is to create an experience that allows the user to focus on their tasks, not on finding their way around.”

The IA Process

Involving the end-user in your design process is critical. Understanding how they logically categorize web content, navigate through a site, and engage with the site are critical in user-centred design practices. There are several activities a web designer can incorporate into the initial IA work, which include Card Sorting, Blueprint design, and Wireframe design.

Card Sorting

Krisztina Szerovay (2017) states that, “the goal of Card Sorting is to improve a website’s or an application’s Information Architecture, to help designing how the information is organized and labelled”. When working with clients, she provides a deck of cards where each one identifies on some aspect of the website (content, information, or a function), then asks the clients to go ahead and group the cards (categorize them) as they see fit.

Site Blueprint

Building on the Card Sorting activity, the web designer is better prepared to establish the final hierarchy of the site and main navigation. These will translate into a simple diagram known as the Site Blueprint. The blueprint looks like a site map and focuses on information hierarchy and navigation.

Babich differentiates hierarchy from navigation by stating that, “the first defines the structure of content, while the second defines how users will move through it” (2020).

The structure should be designed for usability and based on what information (and features) your website needs to communicate to users. Begin by identifying typical scenarios and tasks users would perform on your site.

• Design the structure for the “average” user; don’t over-complicate it.
• Users should be able to find what they are looking for and/or complete a task with ease.
• Design the information for scanning, and not (excessive) reading.
• Limit the number of clicks a user has to perform to navigate through the site.

Arrange the information into a simple site map (see image below).

Image attribution: BadSprad, CC BY-SA 4.0 <https://creativecommons.org/licenses/by-sa/4.0>, via Wikimedia Commons

Wireframes

Once the blueprint is completed, the web designer can then identify what can of design each web page should have to ensure the user experience is consistent and predictable. The home page design is governed by one set of rules and this page is different in look, feel, and content, than any other page on the web site. Typically, the home page might have less text and a single large image on it with a small amount of additional text (positioning statement, tagline, value proposition for the brand, etc.) and it will feature the main navigation (“menu”) for the site.

The top-level pages of the site, which are the first pages accessed from the navigation (menu) will typically also share a single web design: these pages will contain more text, smaller image(s), and feature the sub-pages that contain information and content related to this “branch” of the website.

As the user moves through the site, they should instinctively know whether they are on the home page, a main page, or a sub-page just by how the layout and distribution of information and images is arranged. Consistency is essential in this process which is why designers use wireframes to standardize the layout of web pages that share the same hierarchical position in the overall architecture.

Babich identifies this wireframe process as “prototyping” and states that these diagrams serve “utility-purposes, with a limited number of graphic elements (2020). The ultimate purpose is to provide the visual designers a references when they create the actual web pages for the site.

The image below is a simple layout of a webpage known as a “wireframe”. The content and information for this page is irrelevant at this point since the purpose of the wireframe is to identify and standardize the layout of text, images, and other web page features.

Usability & UX Design

Wikipedia defines user experience, or UX, as the process of defining the experience a user would go through when interacting with a digital product or website. All of the design decisions that go into creating the site should therefore be informed by:

• research
• data analysis
• test results

When Steve Krug wrote his excellent web usability book, he aptly called it Don’t Make Me Think! (Krug, 2005). Designing a site for best usability means that users don’t have to figure out what to do; they are just able to do it.

Use standard conventions, such as hyperlinks that are distinct (blue and underlined is standard), menus top or left, and the logo in the top left-hand corner. Search boxes are usually on the top of the page and should use standard wording such as “search” on buttons. Following standards for important elements that are familiar to web users means that they know immediately where to look for or how to use them. Important elements (such as menus, logos, colors, and layout) should be distinct, easy to find, and consistent throughout the web site.

The intention is to not design from the perspective, preference, or bias of the designer, but instead to design solely based on positive, productive, and intuitive experiences for the user. “UX design encompasses all aspects of a user’s perceived experience with a product or website, such as its usability, usefulness, desirability, brand perception, and overall performance” (Wikipedia, 2022).

What are some of the other practical ways we can align web design with user experience? Here are a few additional tips:

1. Follow website conventions! Identify the best practices that are common to nearly all websites in your industry or business area.
2. Cut the fat: “chunk” web content and divide it across more than one page to avoid having long pages of text. Each web page should have a focused theme that can be optimized with a handful of similar keywords (see “SEO” chapter for more).
3. Format content for scanning instead of reading: help users get what they came for easily and quickly by using more headlines and lists when presenting information.
4. Keep users on your site with visible anchor text (hyperlinks) to help them navigate through the site and find what they are looking for or complete a task.
5. Colour and images should be on-brand and consistent with all other branding elements.
6. Call-to-action “buttons” should be prominent and easy to find: visitors shouldn’t have to go searching for “add to cart” or “download image” buttons hidden in a far corner on the page.
7. Images, video, and other media should be used frequently but should also be related to the content of the page.

Content Strategy

A business website is the ultimate method a business maintains their online presence. It is where the business owns its content, layout, design and reputation. No matter how brilliant or important social media channels are to a brand, reputation is most often measured by the content and feelings evoked from their website.

This section includes the information on how content writers, UX (user experience) and front-end designers optimize websites.

When creating a website, content strategy is a necessary first step. What will the website say? All websites have a specific audience so finding out about what your audience needs, wants and expects from the  business is the key its success. This means web content, as well as design, must be human-centred.

When we build content with a specific strategy for success it also meets search intent, a key component of search engine optimization. Writing effective content focuses on the readability or usability so that the target audience is more likely to get the message you want them to receive, and your website is more likely to achieve its intended purpose.

Donal Miller and Dr. J.J. Patternson identify some key things to avoid in their book “Marketing Made Simple”:

• “You are using too much insider language
• You are using too many words in the heading
• The call to action buttons use passive language
• The call to action buttons are not repeated down the page
• The images do not relate to the product or back up the words you’re using on the page
• The language is cute or clever but not clear
• The site does not promote a lead generator
• You’re using a slideshow so the text changes too fast a frustrates potential customers
• The site tells your story rather than inviting customers into a story.” (Miller, D. & Peterson, J., 2020)

A website should clearly indicate the “problem” the business is trying to solve. Including what happens when the problem is solved, by using or purchasing the service/product and most importantly how to go about buying it.

Designing a website is like designing anything: it requires a clear purpose. Understanding your target audience, writing content and choosing design features that will best achieve your purpose. In essence, you must understand the flow of content and how you can most effectively convey the desired message to that audience.

Search Engine Visibility

Usability is the number one element that needs to be considered when developing a site. Search engine visibility is the second most important factor. No one can negate the importance that search engines play in online marketing—and if their spiders cannot find a site, it is almost certain that potential customers won’t either. (Bear in mind that there are some web sites that are designed to be found in other ways—the importance of search traffic needs to be determined before the seb site is built.) Aesthetic design is now the least important factor—but that certainly doesn’t mean that sites need to be so ugly that they turn visitors into stone. It just means that design needs to be hinged on usability and search engine visibility rather than vice versa. Web sites can still be gorgeous; they just need to fulfill other goals as well—the key here is usability and conversion-oriented design.

Search Intent

Interviewing existing customers helps copywriters and business owners better understand what content is expected on the site. Without a direct link to the company’s main stakeholders, the customer, copy may miss the purpose as seen by the audience. If the business is new and there are no “users” to interview, then considerable market research should be completed. What are businesses in the same field doing well, where is their space for excelling and differentiating?

While there will probably be many different types of customers, the main target audience is what the content should be directed towards. Finding this data and separating it into themes it is often cost prohibitive, both in-terms of time and money. There is an alternative though, and that is through the use of search intent analysis through search data. Google is the king of search engines with more than 90% of the market share worldwide (GlobalStats, 2022).

Using a search engine can provide you with lots of great content ideas. Break the the results into content topics; and don’t forget to go back to the initial search result in Google to see related search queries.

Website Header Space

When someone lands on your website for the first time they first need to determine if they have found the site they were expecting. Having your business name and logo front and centre on your website is a must. Below that the next item of content should be a very short description of what the business does; what services or products they offer, ideally in 5-words or less. This is the main sub-heading.

The main sub-heading website is undoubtedly the most important content piece on your website. It ensures users that they are on the right site and that you have the solution for a deep-seeded problem of not enough money, time, status, etc.. Do not be overly specific with the main sub-heading: Ensure the broad scope of services and products are included while also indicating how a it will solve a real problem in the customers life.

Call to Action

Many business websites fail to clearly define how you can purchase their product or service. The solution: have multiple “call-to-action” buttons throughout the site, specifically on the top-right menu or under the main sub-heading. For example: “Book a free consultation” is a great way to funnel leads to your inbox.

Make your target audience part of your story

When writing content for a website it is important to bring the customer into the story. For example, at SupaDesign we know you are the type of customer who wants to be seen and heard. Your voice matters and will be emphasized throughout the design process. When you position your customers at the heart of the business and show them that you truly understand the problem you are solving for them, you will get much better conversions on your content.

Use Testimonials & Stats to Build Authority

Using testimonials on your site helps builds reputation and authority. Interview your customers, or draft a testimonial of a conversation or sentiment they have expressed from you for their approval. Having at least 3 testimonials on your website helps build authority but also shows the humanistic-side of the business.

Statistics have the effect of giving fast authority. For example, 100+ satisfied customers, $100,000s of dollars saved. Even adding the number of years you have been in business will add authority to the content.