facebook

8 Basic Principles of Good Web Design

Chapter 2

When I talk about website design, most business owners think about the look and feel of the site. And that is a big factor. People prefer sites that look attractive. But successful website design isn’t just about making it look pretty. It involves function too – making sure your layout is easy to use and provides a great user experience.

While most business owners aren’t actually doing the designing, it’s important for you to know what goes into creating an effective web design. These 8 basic web design principles will teach you what to look for so you can better critique your own site.

Video Summary

Don’t have time to read? Watch this short video summary for the highlights:

1. Keep it Simple

When it comes to website design, simple is usually better. Too often, business owners make the mistake of trying to cram too many elements on a single page. I get it – you have a lot of things you want to tell your visitors. But trying to do it all at once will confuse your message and distract potential customers.

Instead, remember the purpose of your website that you defined during your planning. What do you want visitors to do? And what are they looking for?

Use a clean, simple layout to help focus your visitors’ attention and make it easier for them to navigate and use your site.

For example, take a look at this before/after version of this local energy company’s homepage.

They want to make sure visitors get to the right part of their site, based on their geographic location. By simplifying the homepage and removing excess text, it’s super simple for people to choose the right service area – so simple it’s hard to do anything else, which is the point!

2. Tell People Where to Look

All designs use standard elements like color, shape, texture, space, and size. A good design applies these elements to speak to your target customer and tell them what’s important. Put simply, design tells people where to look.

Here are a few of the most common design elements you should know about that help guide your eyes:

Size

Large things draw more attention than small things – meaning people tend to focus on bigger elements first. Using different sized text and images on your website let your visitors know what’s important and what they should focus on first.

Take this example from a Lancaster, PA pest control company, who uses size to great effect:

The dominant image of all those crawly ants draws your attention first. Feeling slightly grossed out, your eyes move to the main headline (get rid of those creepy ants!) followed by the call to action. Next, you look at the paragraph of text below the headline, followed by the line of icons, which both provide more motivation to Learn More (in case the ants aren’t enough). The top navigation is last, so you can easily move to other areas of the site.

Color

Used responsibly, color can create a beautiful website design that is both attractive and user-friendly.

You don’t need to be an expert in color theory to know that certain colors look better together, and different colors create a different “feel.” Choosing the right color palette helps create visual harmony across your layout, and can communicate the personality of your business. Navy blue, for example, symbolizes trust, strength, and reliability, making it a common choice for brand logos and websites.

Color is also an important tool for guiding your visitors’ eyes. Contrasting colors make text easier to read, and vibrant colors can draw attention to buttons and other calls to action.

Take a look at the example below from a Lancaster County dairy farm, and see how they use brightly colored imagery and a vibrant red color bar to draw your attention to their CTA button.

Kreider-product-page

Just be careful to avoid using too many colors. This can lead to a website design layout that feels cluttered and confused. Generally, 3 or 4 colors is a good rule of thumb.

Space

Web designers love talking about white space. A lot. To the point where it’s annoying. But what is white space and what’s so great about it?

White space, or negative space, is the area in and around all the elements on the page. It’s what gives your design room to breathe and prevents it from looking congested.

As business owners, we’re tempted to look at white space as just empty, wasted screen real estate that needs to be filled, but it’s actually the most critical part of your website layout. Websites without white space are often so cluttered with text and graphics that they’re hard to read and even harder to find your way around. They’re often even perceived as cheap or low quality.

Like actual real estate, people like open space. If you were trying to sell your house, you wouldn’t cram every square inch full of furiture and wall-to-wall knickknacks. You’d try to keep it clean and clear to make it feel as spacious as possible.

In the same way, white space on your website gives your design the “clean” look that people love. Not only that, but it helps prospects scan and understand your content more easily, making them more likely to stay on your website and become customers.

Apple-homepage

Apple is a master of clean design and using white space to their advantage. Your attention is immediately drawn to the bold image of the new iPhone, and there’s almost nothing else on the page to distract you. It feels so simple and easy it’s hard not to click (which is probably why they made the whole image clickable).

3. Use Readable Fonts

Despite the increasing use of images, video, and rich media online, text is still the backbone of most small business websites. Make sure yours is easy to read.

Many businesses make the mistake of choosing fancy fonts that look interesting, but they’re difficult to read. If you make reading a chore for your website visitors, they probably won’t do it, and most of them will leave.

font-readability-example

It’s OK to choose attractive typefaces that create the right mood for your website, just don’t get carried away with fancy fonts. Also, make sure your font size is large enough that you don’t need to zoom in to read it, especially on smaller screens.

4. Use Impactful Images

While text is certainly important, images are at the heart of beautiful web design. Use powerful visuals that appeal to your audience, draw their attention to what’s important, and communicate your message.

Here’s an example of a Lancaster, PA cabinet manufacturer who does a great job of using impactful images to inspire their customers and make them desire beautiful cabinets.

Remember though: photos that are small and grainy aren’t beautiful. Make sure you’re using professional, high-quality images. Consider investing in professional photography if you don’t have your own images, or look at stock photos, infographics, or video content.

5. Consistency is Key

A consistent design makes your website look more professional and helps inspire trust. Not only should the layout design on each page follow a logical pattern, but your design elements should look similar across the entire site.

On each page, think about organizing your content in grids and sections so elements don’t feel randomly placed. Next, identify the fonts, sizes, colors, button styles, etc. you use, and make sure they look the same on every page. Websites that aren’t consistent can confuse visitors and make them doubt the legitimacy of your business.

Especially if you have a well-known company, your customers probably recognize elements like your logo, colors, or style. Your entire website should consistently reflect your business and help reassure people who know you that they’re in the right place.

Looking for design inspiration? VIEW OUR GALLERY

6. Make it Easy to Find Information

People on your site are looking for information. An effective web design will provide that information as quickly and easily as possible.

Research shows that once on your homepage, 86% of visitors look for product or service information, 65% seek contact information, and 52% want to see “About” information. If your design makes these things hard to find, your visitors will quickly go elsewhere. That’s why you see many designs following similar patterns, like featuring prominent links to service pages or putting phone numbers in the upper right-hand corner.

Lancaster-PETS-homepage

7. Make Navigation Easy

An effective web design should provide a great user experience, and your navigation plays a huge role here. People have a short attention span, so make it as simple and streamlined as possible for them to get where they want to go – ideally, within 3 clicks.

First, make sure your navigation menu is obvious. People expect to find navigation menus on the top or left-hand side of the page. They also look for common headings like “About,” or “Contact Us.” Navigation isn’t the place to get cute and clever – follow the standard conventions.

Second, make sure you have a logical hierarchy for your pages. If you have a lot of sub-pages, consider using breadcrumbs to help people understand where they’re at in your site structure.

Finally, try to limit the number of options in your navigation (7 or less is a good rule of thumb). Huge branching menus can get very confusing, and people are actually paralyzed by too many choices.

For example, look at the before/after version of this Lancaster County hardware store website. They sell a wide range of products, so their old website had a large main navigation, plus a huge number of items in each drop-down menu. It was overwhelming.

Bombergers-homepage-BEFORE

The new site streamlines the navigation options and groups their services into fewer clear, easy-to-understand departments.

Bombergers-Homepage-AFTER

8. Make it Look Great on Mobile Devices

Mobile device usage continues to grow, and especially since Google switched to a mobile-first approach, a mobile-friendly website design is critical to staying relevant online. In fact, 85% of adults think a company’s mobile website should be as good or better than their desktop website.

For today’s websites, good design goes well beyond the static page or a desktop display. A responsive web design ensures that your website looks and operates great on devices of all sizes. If you don’t have a responsive website by now, you’re almost certainly losing out on potential customers who are searching for your business on their mobile devices.