[display-name-category]

[post_author]

With the plethora of free and paid tools available, the work involved with building a website has become simpler. Nowadays it’s possible to create a website without actually having to write a single line of code.

So, truth be told, websites are fairly easy to build. However, websites become more complicated when we want them to look good, function well, and convert visitors to customers – which is what most people don’t realize. The modern website is now more than just a pretty face or brochureware, it has evolved into a business tool that serves a greater purpose.

What I am still amazed at today is the lack of knowledge around this fact and this is why I have chosen today to take a closer look at the Anatomy of an Effective Website Design.

More than most people realize, building a good website requires a ton of effort, but building an effective website that’s highly functional as well as good-looking is an undertaking that requires a full commitment to the application of tried, tested, and proven design patterns, principles, and procedures.

The aim of this post is to focus only on the design aspects of building a great website as the other components such as custom development, content creation and social, etc. are far more complex and better addressed in separate blog posts.

So when reverse engineering websites to distill them down to the basic design-related elements and how to employ them, let’s review the Anatomy of Incredibly Effective Web Design.

Design for Mobile First

With the advent of modern technology, no sector has grown faster than that of mobile when it comes to web usage. Consider some of these statistics via CodeMyViews:

• There are over 1.2 billion mobile web users worldwide
• In the U.S., 25% of mobile Web users are mobile-only (they rarely use a desktop to access the web)
• Mobile apps have been downloaded 10.9 billion times
• Mobile device sales are increasing across the board with over 85 percent of new handsets able to access the mobile Web

The one fact that deserves to be highlighted is #2, which indicates that many mobile users will most likely only ever see and interact with the mobile version of your website. For this reason, many designers are transitioning to a “Mobile First” approach in which the mobile version of a website is the first item on the design agenda, rather than the traditional approach that sees the desktop version is the first order of business.

The fact that the web has become mobile and something we carry with us means that designers should be focused on providing the best mobile experience possible first, and after that, move onto catering for users on desktops.

Design for Your Target Audience

To create a great website you need to consider your target market and prospective customers and tailor the graphics, content, and messaging to their requirements. By tailoring your website to the needs of users you’re not only creating a good user experience but also building a site that is more engaging, delivers a clearer message, and stands a better chance of promoting users to take the required actions.

Use Relevant Keywords

Another characteristic of effective web design is the correct use of terminology and relevant keywords throughout the site. The use of relevant keywords should not be confused with keyword stuffing that is simply using relevant keywords as often as possible to the detriment of readability.

While using relevant keywords throughout your site can increase your exposure to potential consumers, making use of search engines, keyword stuffing, and overusing keywords can prevent your site from ranking for relevant terms as search engines today treat this as a form of spam.

Include Multiple Points of Contact

With the multitude of devices, resolutions, and platforms that users employ when accessing your site, it’s more important than ever to ensure that you include multiple points of contact throughout your website. Desktop users may be up for completing a form to request more information, but mobile users would not, and they would most likely prefer a click-to-call button which makes it easier for them to request information.

Maintain a Consistent Look and Feel

Another characteristic of effective website design is the maintenance of a consistent look, feel and tone throughout the site (and across all business collateral including stationery, banners, etc.) This is achieved by paying special attention to the following website design aspects:

Color Scheme

Color is an extremely powerful element of design. Color can convey tone and trigger emotional responses from users when used effectively. For more details about the role of color in web design and using color effectively, see my previous post about How to Choose the Best Color Palette for Your Website.

Effective Typography

There’s more to typography than just typefaces and legibility. Typography also influences the style and flow of your website design. An example of this is a classic serif font such as Times New Roman which is not only good for improving the readability of paragraph text, it also has a classic look which is associated with formality, timeless style and has a certain regal quality about it.

Typography, like color, is an aspect of design where a little goes a long way. When designing your website, limit your font usage to one or two families, using one for titles and headings and the other for paragraph or body text. Also, thanks to services such as Google Fonts and font pairing showcases such as FontPair.co. It’s now easier than ever to utilize fresh new fonts in your designs and also pair them with other complementary fonts.

Graphics

Graphics refer to any imagery that will be employed to enhance your content and your messaging. Avoid adding graphics to designs unless they serve a specific purpose, inserting graphics just to fill a space or because of an affinity for a particular image should be avoided at all costs. Every part of your page is valuable real estate which should serve a purpose, and if a graphic does not enhance your message or serve a purpose, it should probably be removed. Consistency across graphical elements should also be a goal, keep the style of your illustrations consistent and when working with photos, which are very different from one another, experiment with a subtle color filter to “tie them all together”.

Layout (UI)

Layout, also commonly referred to as UI (user interface) refers to the spatial arrangement of how your website is laid out. The layout is one of the most important aspects of design as it dictates the environment in which your users will interact with your content. The general rule of thumb here is to use what works. The web has matured and with it, common design patterns have come to the fore and these patterns are familiar to users and facilitate the interaction. An example of this is the common blog layout which includes a page header, main content area, sidebar, and page footer.

Calls to Action

Last, but certainly not least are calls-to-action. Whether you’re selling products or services or trying to get people onto a mailing list, calls-to-action are most likely one of the most important items on your website. Without calls-to-action, there is no action! As a general rule of thumb, ensure that no matter where users are within your site, or within a page, that there is always a call-to-action close at hand that users can interact with when they decide to take action.

Make Navigation Easy

Although experimental navigations systems are fun and interesting to use, they’re probably not the right solution for your business website if it makes navigation difficult for users to figure out. Attention to clear headlines, effective calls-to-action, and consistent navigation will make your website easier to use, keep visitors engaged, and ultimately make a bigger positive contribution to growing your business.

Optimize for Speed

Nobody enjoys sitting around waiting for things to happen. Not offline, and certainly not online. If your web pages do not load quickly for users and provide them with the information they need, when they need it, you run the risk of not only losing visitors but losing them to your competitors! Minimize the use of overly “heavy” technologies such as Flash, overly elaborate scripting, and un-optimized images that slow down page loading times.

Build Credibility Through Content

Because the web is a virtual space, it’s important to demonstrate to your site visitors why they should choose you over your competitors. The best way to do this is to build credibility through the content you produce.

Show users what you do and that you’re the best at it using the appropriate method E.g. Galleries, case studies, before and after photos, etc. Other great ways to demonstrate your expertise is to provide users with plenty of FAQ’s and links to articles, reviews, or features on external sites which endorse your business and reinforce your expertise to users. Also, be sure to monitor, manage, and highlight your reviews on local business review sites such as Yelp or Angie’s List.

Encourage Social Sharing

No article on effective web design or the anatomy of web design would be complete without the mention of social media. Be sure that you include links to your social profiles on your website, and include links to your site on your social profiles. This makes it easier for your customers to find you and interact with your company using the platform of their choice.

Focus on Getting the Basic Items Outlined

Phew, that was a long one, thanks for sticking through it with me all the way to the end. Designing an effective website can be a stressful undertaking, but if you focus on getting the basic items outlined above right, the hard work will pay dividends for a long time to come.