As a professional Web designer with 11 years of experience, I have established the look and feel for all kinds of Web sites—ranging from big name brands to small shops. Regardless of the size or type of business, there are several design fundamentals that are essential to building a successful site. I call them design must-haves. Two of these essentials are intelligent page layouts and the strategic use of color. You can effectively customize your site with the must-haves in mind using these features:
Captivate your audience with a custom color scheme
If you have built a site using Microsoft Office Live Small Business, you've probably had fun tinkering with the site color schemes. If you have not played with this feature yet, try clicking from Iris to Mint to Spicy and you will see how dramatically your design changes in a matter of seconds. Startling, isn't it?
Design your own color scheme. In Site Designer, take a look at the bottom of Site color schemes drop-down list. You will see a link that says Create custom color scheme — click it! With the color picker tool, you can customize colors for the following:
-
The header area with primary and secondary color choices
-
Page content background and Web site background
-
Navigational elements consisting of the background bar, buttons, and button text (both on and off states)
-
Footer area that includes the footer background and text links
If you are not seeing the exact color that you would like to work with in the Create custom color scheme dialog box, click More colors to open an advanced method of selection with the option to specify a hex number. (A hex number is a six-digit number used in HTML code to represent a color. You can find hex charts on the Internet).
I'll bet by now you are ready to create your own custom color scheme, but before you do, take a moment to consider a few basic questions I always ask my clients before I begin designing anything. The questions are a starting point to get you thinking about how color not only defines your site's appearance, but dictates the type of impression you want to make on your audience.
-
How do I want my business to be perceived? Serious? Whimsical? Trustworthy?
-
Who am I trying to attract? Parents of small children? Sports enthusiasts?
-
What key messages do I want my site to communicate? Our spa has an incredible location? Our coffee prices can't be beat?
When you are designing a scheme, get creative and explore beyond your logo colors. The unexpected can be exciting!
Gain creative control over your layouts with zone resizing
You can easily achieve a more customized approach to your site's page content with the help of the Page layouts feature in Page Designer. There are 11 layouts to choose from. That's great, but you can customize each layout even further by resizing the width of each content zone. This means greater layout flexibility! With zone resizing, you can:
-
Build your own page pathway. A pathway is like a deliberate visual trail you want your viewers to take through the page. Zone resizing gives you more control over how the paths can be set up.
-
Refine your layout solutions. You can easily rank, prioritize and arrange page content so that you can communicate in a more targeted way with your viewers. Your audience will also appreciate how simple it is to understand your site because your layout solutions will be more polished.
-
Experiment with different types of content. Some fresh content ideas you may not have previously considered trying out: seasonal ads, a highlighted product or service, bulleted links to recent news and expertly positioned photos to spark interest.
Give your site more visual impact with background options
Intensify your site's style by adding page backgrounds and a site gradient. Just to be clear, a page background relates to the interior content space of an individual page and a Web site background, or site gradient, affects the exterior of the entire site.
Let's start with a page background. You can create a stronger distinction between your pages by using different images or use the same image if you are striving for a uniform look.
To begin, open Page Editor for a page that you want to add a background image to. In the Advanced group, click Page background. Select artwork from your Image Gallery or upload an image from your computer. Consider the following tips when you are deciding which images to use:
-
Think subtle —select pictures that do not visually compete with your copy.
-
Find images that complement your site's colors and add value to your design.
-
Be careful of the “too much" factor —don’t overwhelm your audience with a congested layout.
Next, try a site background. Custom color backgrounds and gradients are another step towards shaping your site into a masterpiece that best represents you and your business. A customized site background color will also help your business stand out from the crowd.
You can find the background display options in the Site Designer under Advanced; click Options. Next, under Display options, select either flat color or gradient. The colors are automatically pulled from your current color scheme to generate the gradient or flat background.
If you choose the gradient, notice how much your site is transformed from flat to fabulous. I'm a fan of gradients because it's a simple way to instantly add depth to a design.
Note: You can also add solid colors, color gradients, and images to the background of a Web page zone (a specific area on your Web page). This opens up endless design options for the look and feel of your page. For instructions, see Add a background color or image to a Web site, page, or zone.
Before and boosted
Finally, let's compare the original Fourth Coffee site and a boosted makeover version we've named "French Roast" that uses all three of the customization features and the design must-haves. Behold!
Before: the original Fourth Coffee site
After: "French Roast," the boosted site design
About the author Sara Richardson-McCreery is an 11-year veteran Web developer with proven expertise in custom Web site design, development and usability for clients ranging from big brands to start-up organizations. She is the creative director and founder of Spike Likes Web Design, an award-winning Web design company located in the Washington, D.C., area.
Top of Page