6 Designing a Web Site
Before designing a web site, research your audience and competitors to determine expectations and common elements to your industry. Mock up every layer of interaction. This means that before any coding begins, there is clear map of how the web site should work. It’s all about foundations.
Design to Establish Credibility
Here are some of the cues that visitors use to determine the credibility of a web site:
- Place phone numbers and addresses above the fold. This assures the visitor that there is a real person behind the Web site and that he or she is in easy reach.
- Create an informative and personal “about us.” Your customers want to see the inner workings of a company and are especially interested in learning more about the head honchos. Include employee pictures or profiles. It puts a face to an organization.
- Feature genuine testimonials on each page. This is a great way to show potential customers what your current customers have to say about your organization. Trust is vital, and this is one way to encourage it.
- Feature logos of associations and awards. If you belong to any relevant industry associations or have won any awards, feature them. Not only does this go a long way to establish your credibility, but it will show that you’re at the top of your game and a notch above the competition.
- Link to credible third-party references. This is a way to assert your credibility without tooting your own horn.
- Keep content fresh and updated. This shows that you are knowledgeable and up to date in your industry.
- Ensure that your site is free of errors. Spelling and grammar mistakes are exceptionally unprofessional, and while the large majority of readers may not pick up on them, the one or two who do will question your credibility.
- Include a portfolio of past work. Give your web site visitors examples of your previous work to show what you are capable of.
Design also affects the accessibility of a Web site. You need to take into account screen resolutions, as designing for the biggest screen available could leave many of your users scrolling across and down to see the Web page. Subtle shading, background colors to text, and fancy fonts can also mean that many users cannot even see your Web site properly.
Website Design Interface and Patterns
Smart Interface Design
Websites should be unique, content-driven and show a clear business purpose. Coming up with a new solution for design issues can be very time consuming. Smart design patterns allow us to ask the right questions of our website layout to ensure maximum cross-cultural usability.
The guidelines below have been curated through usability sessions, design iterations and A/B testing. Before we dive into patterns, we want our website to be usable by all and that starts with adhering to website accessibility standards.
Website Accessibility Standards
An Introduction to Web Accessibility outlines patterns you must implement website to make sure the site works for everyone.
Review the Tips for Getting Started and pay close attention to the requirement for alternative text on media, as it is a requirement for all images that are non-decorative. A decorative image does not add value to the content and is seen more as a placeholder on the site to ensure consistent flow of the page layout.
Layout patterns
Navigation
Besides being consistently stylized across all pages on your website, your navigation should also have the following features:
- Add a “home” button/link and set the logo as a link which returns home. On the left-most side of your menu, people will usually look for a way to get back to your homepage. This link is often called “home”, is the businesses logo or the name of the business.
- Navigation items look like a button/link. All links in your navigation should look like a link rather than plain text. WordPress.com will stylize your navigation to stand-out, however, using a specific colour pallet will ensure that you navigation links/buttons have sufficient contrast and “pop” when compared to the content on the rest of the page, is a must.
- Add a hover effect. People often read the web by moving their cursor over the content. When they go to click on a navigation link with their cursor, as opposed to tapping with a finger/thumb, the link is expected to change to indicate that you will be taken to another page.
- Include breadcrumb links, clear page titles and title tags, URLs, and menu changes to help the user know where they are on the site.
Active White Space
Are there any glaringly large empty spaces on your pages? Are any of the images touching directly next to text? If so you need to think about “white” space on your page. For example, images should usually have some margin around them to prevent text from touching the side.
Active white space is used to create eye-catching space between components on your web page to make them easy to read and aesthetically appealing.
Too much white space leaves the layout looking plain and empty. Placing a decorative image in that space may enhance the layout and a non-decorative image may add value to the content.
Form layout
Every business website should have a contact form to make it easy for individuals to contact the business.
Forms are tricky but there are a few key patterns to follow:
- For complex forms, not typically of contact forms, break down the form into tasks (i.e. name and personal details, then order of relevant information)
- Put the tasks in a sensible order and use verbs to describe them (i.e. Shipping information)
- Tell users what they need before they start (i.e. documents, time)
- Make the submit button large enough and close enough to the form that it is easy to find.
Landing Pages
A landing page is the page users are directed to from any campaign designed to drive traffic to a specific URL (uniform resource locator). The traffic to a landing page could be from a banner ad, a paid ad seen on Google’s SERP, an e-mail, a print advertisement, a television or radio spot, or direct marketing. Users are being sent there for a very specific reason, including the following:
- Enter a competition (goal: collect potential leads)
- Buy a product (goal: increase sales)
- Subscribe to a newsletter (goal: increase subscribers)
As far as landing pages go, first impressions really do count. They need to capture the user immediately and make them want to complete the desired action. Users who land on these pages make the decision to complete the desired action based on two criteria:
- Whether the page looks complicated or time consuming
- Whether it is relevant to their needs
Effective design and benefit statements can help users to make the decision to complete the desired action.
Guidelines for Successful Landing Pages
Focus the page on a single call to action. These are purpose-built, purpose-driven pages, and extraneous information should be avoided.
The landing page does not need to carry the same navigation of the web site and can look slightly different (though a large deviation in style is not advised). The aim is to keep users on a path to the goal (lead conversion/customer conversion/subscriber conversion).
Text Attribution
- The introduction and section under, “Design to Establish Credibility” are adapted from “14.4 Design“; the section under “Landing Pages” is adapted from “13.5 Landing Pages” in eMarketing: The Essential Guide to Online Marketing by Rob Stokes, Saylor Academy which is licensed under a CC BY-NC-SA 4.0 International License.
- The section under, “Website Design Interface and Patterns” is adapted from Maintaining an Online Presence (BETA) by Camosun College, licensed under a CC-BY-NC-SA 4.0 International License.
