4 Common Design Mistakes

When building your website, there are a few simple things to keep in mind that can drastically improve the quality of your online presence. Today’s web viewers are fickle and move fast, and if your site makes one of these common design mistakes, you might lose a potential customer.

Background Blunders

Using patterns or textures is a fantastic way to make your website seem alive. A solid color background with a contrasting color font is the go-to as you can never go wrong with keeping it simple. But, nowadays, designers around the world are revolutionizing the use of textures in web design by taking the previously sterile world of web design and introducing textures that we’re familiar with in our day-to-day lives. Wood grain, linen, paper, leather, and metal are finding their way from our homes and our possessions onto the websites we visit. When used properly, they can inject a tremendous amount of life and familiarity into a design and can help your website stand out against the rest.

However, variation in textures and patterns is also dangerous because it’s easy to overdo. Bold, colorful backgrounds often distract from the content, and even worse, if used behind the body of your website, they can make your text difficult to read. That can turn into a lost visitor. In general, high-contrast backgrounds that use more than one distinct color are usually unfit for a website background.

Here are a few examples of background choices gone wrong. The backgrounds themselves are not fundamentally flawed – I chose images and patterns that were nice on their own – but if they don’t play nice with your text, or draw the eye away from your content, your site will drive visitors away.

example1

example2

Now for a few examples of a good use of texture. These examples use simple, subtle patterns to breathe some life into the design while keeping the text legible. They don’t use bold colors, and look good with a wide variety of text colors, which means you can switch things up in your headers or titles on your page to draw the eye of the visitor.

example3

example4

Bold backgrounds can be very effective and striking when used properly – that is, with your text placed on a contrasting, solid color background or simple texture.

example5

Not Enough White Space

Just like harsh background choices can cause a visitor to close your site quicker than you intended, hitting your customer with a wall of text, an erratic layout or a strange content structure will make a mess of your first and only opportunity to keep your visitors on your site.

Instead, make sure your content is organized in a way that makes it clear where the visitor should look. Only put emphasis on the most important points. On the Internet, a cluttered page will feel daunting to read so remember to use white space to break up content into easy to read chunks.

I like to use Apple.com as a perfect example of a beautiful, clean home page:

appleexample

Apple uses descriptive text, beautiful product photography (always a huge plus!) and an extremely simple layout.

Unreadable Fonts

Fonts come in two basic types: serif and sans-serif. The word ‘serif’ refers to the decorative lines and strokes attached to characters, and of course, ‘sans-serif’ refers to those characters without those decorative strokes. Here are some examples of serif vs sans-serif fonts:

fontexample

Serif fonts tend to look more distinct and are sometimes easier to read, which is why they’ve been used for years in print – books and newspapers historically use serif fonts almost exclusively. They tend to give off an air of quality, personality, warmth, and intellect. If you’re going for a professional, classic feel, a serif font like Times New Roman or Georgia is a great choice.

Sans-serif fonts are missing the traditional decorate strokes of serif fonts, but they are often better suited for computer screens. Compared to a serif font, sans-serifs look clean, crisp, cool, minimalist and modern. A simple sans-serif like Arial or Verdana is familiar and looks great.

There are a few font no-nos out there that are good to stay away from. Any fonts that may be difficult to read like scripts, comic fonts, handwritten fonts and bubble letters can distract from your website copy. It’s important to remember that the visitors to your site could be absolutely anyone, with any computer screen or mobile device, at any resolution. And let’s not forget those with less than perfect eyesight. If your fonts are tough to read, your text won’t get read – it’s that simple. Some common culprits of this include Comic Sans MS, Papyrus, and Bradley Hand ITC. If you absolutely must use them, keep them to page headers or graphics and leave your body text in a simpler and much easier to read serif or sans-serif font.

fontexample2

Autoplay Music or Video

I don’t know about you, but I know when I stumble across a website and it starts making noise at me, I frantically dig through my open windows, find the culprit, and close it immediately. I think many web users can probably say the same. Multi-tasking on the web is the new standard, and it’s common for users to have several websites open at once, all while checking email, instant messaging, listening to music, and watching a video. If your site auto-plays music and your visitor already has their own music playing, guess which one probably wins?

The same goes for YouTube and other embedded videos. It’s tempting to have your video roll immediately when your site is opened, but consider this: what if your unsuspecting visitor has their speakers cranked to 10 from the last video they watched? You might scare them out of their chair if they weren’t expecting it, especially if they’ve opened your site in a new window or tab they haven’t looked at yet. Not a great first impression.

Always let your user choose to play content on your site. Place it in an easily accessible way, draw attention to it if you must, but don’t auto-play it. It’s the website equivalent of a pushy salesman pouncing on you the moment you walk through the front door of a store.

Conclusion

There are a lot of ways to make your website stand out, but the best way to build your website is to think like your visitors. No doubt you are a visitor to many websites yourself, so put yourself in those same shoes when you are building your site. What kind of things do you like and dislike when visiting websites and shopping online? What kinds of things draw you in and make you want to read more? What kinds of things send you running from your browser as soon as you see them? Building a website is all about your visitors and providing them the best possible experience – and if you can make a sale in the process, even better. A good website is like a good retail store: clean, organized, inviting, and easy to navigate. Following some of our tips can get you well on the way to success on the web!

5 Secrets to Great Website Design

Web-design-tipsGreat website design doesn’t have to be complicated. In fact, simplicity can make a small business website much more effective as a sales tool than a site filled with crazy fonts, music, and flashing images. A clean and straightforward website makes you look professional and trustworthy.

Here are a few “best practices” for design to keep in mind as you review or make your own website:

Be Consistent
Pages that vary a lot in design can be confusing for customers, even sometimes making them think they’ve jumped to a new website. Examples of things to keep consistent: fonts, colors, image sizes, buttons.

Make it Easy to Scan
Attention span is short online and if your customer can’t find what they’re looking for quickly they’re likely to leave your site. Use “easy-to-read” fonts and make important information more obvious with images, bigger text, or colors. Align text to the left and use bold headlines to describe what paragraphs are about.

Use Whitespace
Whitespace, or empty space, makes your website easier on the eyes and helps your visitor sift through your content more easily. Break up large blocks of text into smaller paragraphs with whitespace in between. Also leave a bit of space around your images.

Consider Your Customer’s Setup
Remember that your visitor may view your site with a monitor that’s much smaller or bigger than yours, which can affect how your pages are displayed to them. By setting the page width to a common size, like 760 pixels, you make sure that your content doesn’t get stretched and hard to read.

The BIG GOAL is to Educate
Your customers come to your site to learn about you and your products, so remember that when you’re tempted to get carried away with your designs. Reserve your creative flare for less information-centric parts of your website, like the header or sides.

Following these web standards doesn’t mean that your website will be boring or just like all others out there. There is a lot of room for creativity, it just needs to be in the right places. Remember that your message is what’s important and if your visitor is distracted by glitz and glitter, they might not ever really connect with what you’re trying to say.

Win a $10,000 Small Business Website Package

2009-09-30-consulting_packageThank you for all your entries! The contest is now closed and we’ll be announcing the winner shortly.

In celebration of Small Business Month in Canada, we’re giving away a small business website package and a full day of one-on-one consulting with our team of online marketing experts, including Dean Gagnon, a co-founder of CityMax.com and one of BIV’s “Top Forty Under 40”.

If you’re the lucky winner, you’ll be invited to spend the day at CityHall, CityMax.com’s legendary headquarters, located in the heart of historic Gastown, Vancouver BC.

Once there, you’ll receive one-on-one consulting on:

  • How to Get MORE Targeted Traffic to Your Website
  • The Secrets to Converting More Visitors into Leads & Sales
  • Easy, Inexpensive Ways to Generate Free PR for Your Business

The winner will also receive a custom-designed CityMax.com website or a complete makeover of their existing CityMax.com website from our award-winning in-house designers.

This full day of consulting and web design with our team of coveted experts is valued at $10,000, but in celebration of Small Business Month in Canada it’s free to the winning entrant!