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.
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 website 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 web design elements you should know about that help guide your eyes:
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 website design.
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.
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.
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.
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 design 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 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.
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 design 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. Website designs 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 design should consistently reflect your business and help reassure people who know you that they’re in the right place.