In lessons 1 and 2 of our Website Design Boot Camp we looked at website purpose and website design. This week, we look at effective use of media.

Once you have your structural design in place, you’re ready to make your website really pop. To do that, you have to understand how to use aesthetic principles and various media resources—including images, video, animation, and more.

Aesthetics

The aesthetics of your website are a critical part of the design. What does it actually look like? Here are a few of the most important considerations:

• Color. What color scheme do you want to use for your website? The colors should match your brand, while also being clear and easy to read. That is to say, don’t use similar colors for both your copy and your background; you want the information to stand out. And don’t use a hard-to-read color like yellow for big blocks of text; it’s very tough on readers. If you’re not sure what colors to use, be aware that psychologists have put a lot of research into the ways we as people respond to different colors. Look at our “Color of Branding” infographic to learn more.
• Consistency. As we discussed with the layout, the aesthetics of your site should stay consistent from page to page. Once you pick a color scheme, stick with it! When you incorporate images and video, be consistent in how you display them. A powerful, professional website looks like it’s all of a piece, not a hodgepodge of related items.
• Space. Just because there’s a whole page full of space, doesn’t mean you have to fill every square inch with content. In fact, resist that urge! Leave a lot of white space (or whatever your background color might be) around the edges and between elements on your page. That gives room for what you include on your pages to breathe. Things stand out more, and visitors can more easily see and understand what is there. When visitors are presented with a wall of text, with images, videos, and paragraphs stuffed into every corner of a page, they don’t know where to look! It’s overwhelming. If you have too much to say to fit on one page, consider going back to your structure and adding another submenu page. On an over-stuffed page, nothing stands out. If you have multiple pages, but each one is clear and uses lots of white space, visitors will get all the information you need to give them, as they need to get it.
  • Use of space: As a general rule, people will look first at the top left corner of a website and move across from left to right, then scan down the left-hand side. So prioritize your information based on that visual pattern.
• Fonts. You might think Wingdings looks cool. Just don’t use it on your website. As a general rule, avoid handwritten fonts, narrow or bolded fonts, or cursive fonts (unless there’s a specific branding reason). Use a clean, clear font that is easy for anyone to read. You can use bolding and italics on specific words and phrases that you want to stand out, but don’t overdo it. If everything is important, then nothing is important.

WordPress help site WPBeginner.com follows the principles discussed above well. They utilize white space and consistency of color and font. Note the choice of the color orange for their call to action at the top. This color is frequently used to draw attention and create mental stimulation. They also take advantage of the basic instinct of a visitor to scan the top of the site from left to right first and then move down the left-hand side of the page.

Free Download: [eBook] Analyzing Google Analytics 

Using Multimedia Resources

One of the great things about a business website is including all kinds of media, including not only images but video, audio clips, and animation. But a word of caution: don’t get carried away! Media resources can add a lot when used properly, but if you start including too much just because it’s “cool,” it can overwhelm the site and distract from the information you’re trying to convey.

Some general rules:

• Size images to match the text around them. Images should complement and support the text around them—both in terms of what they are portraying as well as the actual presentation of the image on the page. If you have a small line of text, you don’t want a huge, page-covering image. The text will simply disappear. But if you have more text, feel free to use a larger image. Keep the page elements in balance.
• Use short video clips. That 58-minute video you recorded? It’s unlikely somebody’s going to watch it—especially somebody who’s new to your business. But if you incorporate 1–3 minute clips, a lot more people will watch. Avoid auto-playing videos; people like having control over what they’re viewing.
• Keep animation to a minimum. That cool whoosh effect when you open a page might look pretty cool the first time—but what about the 10^th time? The 100^th time? Something that is cool once can quickly grow tired. There are ways to use animation and other “cool” effects, but when they are too frequent and get in the way of actually using the website, they lose their power.

As a news provider with tons of video content, USA Today would be a logical candidate to include auto-playing news videos, but they don’t. Instead, they use eye-catching static images to get the visitor to click further into their site. Note the text sizing as well. The headline story has the largest image and text. Other stories have smaller images and text.

It might sound like a lot of things to think about, but when a site gets these visual design elements right, it shows. Do you need help getting the look and feel of your website to the next level? Talk to one of our web design experts today.

Before next week’s lesson, think about these questions:

✓ Does the color of your website match the tone you are trying to convey?
✓ Do all of your pictures have meaning?
✓ Does the multimedia on your page distract or add to the content on your website?

[latest_posts header=”More on Marketing” limit=”” category=”8″]