5 Ways to Design a Captivating Website

August 16, 2010 Posted by: Michael Hendershot

As a business owner, you know your company cannot survive off one strong quality. If you have a great marketing campaign to bring in the customers, but have a terrible product, you have a problem. The same is true if you have a great product and no way to get the word out (take sliced bread for example, which gained no interest and made essentially no profit until taken under the wing of Wonderbread). If you cannot manage your finances, then neither marketing nor a great product will keep your business alive.

A visually captivating website is similar to a fully functioning business. It only comes about when all design elements of the site are working together. These design elements include layout, color, texture, imagery, and typography. Although the functionality of a site is your main goal, the fine-tuning of these specific elements together makes a world of difference. Just keep in mind that the most important goal of these specific design elements is to work in congruence with what was previously discussed: the business objectives, usability, and functionality of code of the website. Let's take a look into each of these 5 design elements.

Layout

Balance - Balance of a webpage is similar to the physical balance of an object. Each element (photo, text, or graphics) on the webpage carries weight, and that webpage is balancing like a seesaw. Large elements are heavier than small elements. Dark objects are heavier than light-colored objects. Symmetrical balance occurs when elements are placed evenly on both sides of an axis line, like a mirror image. Asymmetrical balance is more challenging and occurs when elements of different size, shape, color and tone are placed on each side of the page but are placed so they still equalize the weight on each side. For example, you can place one large object on the left side, balanced by several small objects on the right, or a dark, small object on the left and a large, light-colored object on the right.











Unity - Unity is how the elements of your website interact with each other. Whether it's text, images, or graphics, it's important that they flow smoothly and consistently throughout the site. Use one main navigation area throughout the site. If you have individual links on each separate page, keep them in the same general area on each page. This also includes using the same header font, body font, link font, margin, and padding on each page, as well as consistent colors and spacing.

Emphasis - As mentioned, all design revolves around the business objectives, functionality and usability goals of the site. Emphasis is used to make a certain element draw the user's attention, and should be aimed to meet these goals, for example, making an Order Now button stand out, or leading the eye to your contact info. This can be achieved in 4 specific ways: placement, continuance, isolation, and contrast. Placement is simply putting the object of importance in a very visible location, like the direct center of the webpage. Continuance, often used in magazine ads, is the idea that once you start looking in a particular direction you will continue looking in that direction until you see something significant. You can utilize this in your site by leading the eye with a line to a point of interest, like a Buy Now button. Isolation focuses on the principle that empty space is just as important as filled space. By clustering less important information in one area of the site, and placing that Buy Now button in the area of empty space away from this clustered text, you're using isolation to create focus on this button. Contrast is similar to this but creates isolation by making that Buy Now button a different color or hue from the less prioritized information, so that it stands out.

Color

"Color increases a viewer's tendency to act on information by 26%."
On many occasions, I've asked clients to view their competitors' sites to get an idea of qualities they like or dislike. They can quickly tell me within seconds whether they love or hate a site, but often cannot tell me why. Your clients will react the same way to viewing your site before even reading a single sentence on it. So what cues are causing this illogical judgment? Color is one very subtle, but very effective element that can captivate or deter that potential customer before they know anything about your business. Why? Psychologically, we've used color all our lives to interpret our environment, and have gotten consistent results from recurring colors. For example, blue is almost never naturally found in food and as a result, blue generally does not entice hunger in an individual. The other reason is that color is used consistently in our culture to convey certain feelings, like in symbols, signs, advertisements, movies, and more. The set of psychological implications associated with certain colors below is not the only way to determine a color scheme, but is something to keep in mind.

Psychological implications
RED is associated with love, passion, adrenaline, danger, warning, excitement, food, harvest, impulse, action, and adventure.
BLUE is associated with intelligence, stability, trustworthiness, success, faith, seriousness, calmness, power, and professionalism, and is a universal color.
GREEN is associated with money, nature, freshness, healing, life, harmony, and can be a very versatile color.
ORANGE is associated with activity, energy, creativity, appetite, fun, youth, affordability, and is occasionally seen as a non-corporate color.
PURPLE is associated with royalty, wealth, justice, ambiguity, uncertainty, luxury, and fantasy, and is one of the least used web colors.
WHITE is associated with innocence, purity, cleanliness, light, and simplicity.
YELLOW is associated with curiosity, playfulness, cheerfulness, happiness, activity, and visibility.
PINK is associated with softness, sweetness, innocence, youthfulness, tenderness.
BROWN is associated with earth, nature, tribal, primitive, and simplicity.
GREY is associated with neutrality, indifference, and reserved.
BLACK is associated with elegance, power, strength, seriousness, darkness, mystery, and secrecy.














Choosing Your Color Combination
Company Colors
The color combination you choose will depend on different details. If your company is really trying to create brand awareness, it may be beneficial to follow those brand and logo colors. If you have one solid logo color, a monochromatic website may strengthen users' memory of your brand. If your brand has two strong complementary colors, then your website can achieve your goals with that complementary color pattern.

Emotional Appeal
If you're trying to create or envoke a strong emotion in your user, follow a color scheme that fits those emotions. For example, if you are developing a therapy site and are going for a soothing and tranquil feel, an analogous scheme of blue and green shades will envoke this in the user.

Contrast
If you have certain parts of your site that must really stand out (remember our discussion of contrast), then this may require a combination other than monochromatic. The standout portions, like the Buy Now button, could be a strong shade of one color, while the rest of the site is a lighter shade of its split-complements.

Regardless of the color scheme you choose, it must be handled very precisely, because any mistouch in color can throw off the overall aesthetics of the site. If you do not have a strong grasp of color design, it would benefit to have the site handled on a professional level, through a web design team or freelancer.

Texture

Although very subtle, texture gives a website a very clean, professional touch. It's similar to applying the wax after cleaning a nice car. Texture is adding that "feel" to the surface your website. So go ahead, give your online image that polishing touch by providing your customers with the 3rd dimension. Just follow some of these ideas:

Imagery

"Adding visuals increases the amount of retained information by as much as 55%"
Imagery is the powerhouse of a visually captivating website. One background image will change the entire look and feel of your website, so choose wisely. So where do you start in this process of choosing images and photos for your website?

1. Is it relevant?
Does the image introduce the reader to the topic you're discussing? Does it go hand in hand with the text adjacent to it? As mentioned, most website visitors are in search of the quick answer, so an image can give them part of that, leading them into the text to find the rest. In addition to providing a visual lead or supplement, because it stands out, the image will serve as a a visual placeholder to the block of text you've previously read.

2. Is it appealing?
Relevance isn't the only criterion. Don't go choosing the first image in Google that is relevant to the concept of your message. This could throw off the unity and look of the whole site. Is the image visually aesthetic? A sloppy or cheap-looking photo can take from the professionalism and credibility you've built up, so invest your time in an attractive image.

Page 1 2 3