Real Web Marketing Blog

How to Prepare for a Re-Designed (or New) Web Site

by John Eberhard

When it comes time to re-design your old web site, or when you want to put a new web site together, there are certain steps you need to take to ensure the web design results are good.

Survey the Industry: The first step to take is to look at other sites in your industry and see what they look like. I do this every time before designing a web site. The point of doing this is to see what the other sites are doing in terms of design, and to see the general look and feel of these other sites. You will probably find that all or most of the sites in your industry have a similar look to them, or use similar design elements.

The way I do this is to search on search engines for other sites in the industry. Then as I find sites that are above average, I will paste the web addresses into a Word document, making a note of the ones that are really good. That way I can easily review them any time I want. (Press Control click in Word to open a link in a browser.)

The point to this is not to just copy those sites or to have their commonly used design elements limit you or box you in. But it does pay to know what they are doing and to stay within certain parameters. You don’t want your site to look like a gothic rock band if you are selling dental services. And I always find that I get great design ideas when doing this.

Decide on CMS or Not: One of the big design decisions is whether or not you want your site to be in a Content Management System (CMS). A CMS will allow you to log in and make changes to your site yourself, without extensive web design knowledge. You can change or add text to pages, add new pages, and add pictures or videos. Bear in mind that there are limits to what you can do with CMS unless you do have extensive web design knowledge. There are several choices of CMS’s, including Wordpress, Joomla, and Drupal.

I have been using Wordpress for clients that want a CMS, as I feel it is very easy for them to use and has a lot of features and plugins that add functionality to a web site. To me it looks like it is shaking out that Wordpress will be the dominant CMS in the future. It was designed originally as a blogging system but people are using it as a CMS because it is so easy. When I design a site for someone using Wordpress I give them an instruction document I created on how to use it. Note that adding a CMS will likely add cost to the design project.

Work Out Your Pages and Navigation Structure: The next thing to do is figure out what pages you want on your site. If you are re-designing, start with a list of your current pages, then decide what new pages you want to add, and if you want to eliminate any from your current list.

Once you have your list, work out how you want the pages to appear in your navigation structure. I favor a navigation structure these days that has a relatively short list of buttons, say 10 or less, and each of these buttons represents a major category of things. Then you can have a dropdown menu appearing under each button when you mouse over it. That gives a compact navigation system, which can also allow for a lot of overall pages.

Write Your Copy (Text): Now that you have a list of your pages, start writing the copy (text) for each of those pages. If re-designing you can start with your current copy on those pages, and edit it to ensure it is fresh and current. If starting from scratch, gather up all your promo pieces, brochures, ads, etc., and lift copy from them or use them for ideas.

These are some of the things you need to do to prepare for getting a new web site designed. If you are working with a designer and you do all these things, it will make the web design whole process go a lot more smoothly.

Posted via email from Real Web Marketing's Posterous

Use of Color in Design, Part 2

by John Eberhard

Last week in part 1, I covered the importance of a color scheme and how you can use the color wheel in selecting colors that will go well together.

After I sent out that article I got an email from friend and associate Jane Millan, owner of Precision Design in San Francisco. She said:

“I might suggest in your next email mentioning the Split-complementary Color Scheme rather than the complementary color scheme (opposites on the wheel) which you mentioned in this email. The Complementary color scheme does have a strong visual contrast, but because they are opposites (thus reflecting the opposite light-wave band) there is a lot of tension in a color scheme like that (hard on the eye if used predominantly).

“The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement, rather than its complement.

“This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension. It’s also hard for beginners to mess up.

“Also, I might mention warm vs. cool colors. A great rule of thumb (and one that isn’t generally known or used, but I use it) is that if you use a predominantly warm palette (lots of oranges, yellows, reds) that you use 20% cool (blues, blue-greens). And vice versa. This gives a very dynamic feel to a palette. There are of course bluey-oranges and reddish-blues, etc. so this can be played with a lot, but the 80-20 rule is a great rule of thumb.”

Thanks Jane for that insight.

Here are some excerpts from “Color Harmony” by Hieaki Chijiiwa on the effects achieved by the use of various colors:

“Red: Red is passionate, the color of hearts and flames: it attracts our attention, and actually speeds up the body’s metabolism. Red is popular among the young, and pink in particular is associated with romance. Deep red, on the other hand, looks aristocratic.

“Yellow: Yellow is lively and happy, the color of sunshine and daffodils. Because it is to relentlessly cheerful, we tend to tire of it quickly; an apartment painted in bright yellow would be oppressive, but pale yellow would make it breezy and springlike.

“Green: Green is tranquil and pastoral, the color of trees and grass. Bright green reminds us of spring and fertility, but it’s also the color of mildew, poison, and jealousy. Dark green is an eloquent color, and brings to mind the deep quiet of a pine forest.

“Blue: Blue is the color of the sky and the sea. Like green, it has a calming effect, but it’s also quite powerful – the strongest of the familiar colors after red. Light blue looks young and sporty, but royal or navy blue has a dignified, wealthy air.

“Purple: Purple is a sophisticated color, long associated with royalty. We don’t often see it in nature, so we think of it as an ‘artificial’ color, and find it a bit hard to take. The lighter shades of purple have dominated women’s fashions in recent years.

“Brown: Brown is rich and fertile, like soil, and it’s also sad and wistful, like the leaves in autumn or an October moon. Light brown, tan, and beige give fabrics and housewares a rustic, natural look, while dark brown suggests opulent hardwoods and leather.

“White: White is the color of purity, virginity, innocence and peace, but it’s also associated with hospitals, sterility, and winter. The dichotomy is also seen in white household objects: they either look expensive (like bone china) or disposable (like paper plates).

“Black: Black is the color of night and death, and is often linked with evil (‘black magic’). Its unorthodox appearance has made it popular with artists, but it’s also associated with wealth and elegance (black household items tend to look expensive).

“Warm Colors: The hues from red to yellow, including orange, pink, brown and burgundy, are called warm colors. In fact, the wavelength of red light is very close to that of infrared radiation, which transmits heat. Warm colors are bright, splashy, and aggressive, like the molten lava flowing from this crater. More than any other colors, they attract the eye and excite our emotions.

“Cool Colors: The hues from green to violet, including blue and all the shades of gray, are known as cool colors – perhaps because they remind us of snow and ice, as in this photograph of a summer cruise to Alaska. Cool colors have exactly the opposite effect as warm colors: they slow down the body’s metabolism, and are even used in hospitals to calm manic patients.

“Light Colors: Light shades of any color look soft and ethereal, like cotton candy or fleecy clouds floating in the summer sky. The hue is relatively unimportant: even shades of orange and purple have a gossamer, fairy-tale quality.

“Dark Colors: Black and other dark shades feel heavy, like rain clouds dense with moisture. Black, in particular, seems as strong and as solid as the cast-iron boiler of this old-fashioned locomotive. Dark red, dark purple, dark green and dark blue are the colors most often associated with royalty.

“Vivid Colors: All vivid colors have powerful personalities. Red stands out (looking at all the red in this photograph is like listening to headphones at full volume), but blue and yellow are also vivid, and paradoxically, so are black and white. However, when you combine two or more vivid colors, the result is cacophony – too many voices shouting at once.”

I strongly recommend the “Color Harmony” book.

Good luck with your color scheme selection.

Use of Color in Design

by John Eberhard

Color and the selection of colors in the development of a color scheme is one of the most vital elements to use properly in graphic design, and is one area where non-professionals are usually not well trained.

Although the use of color is very much subject to opinion, you might be surprised to know that there is a considerable technology of the use of color. And if you follow the general rules, you will usually have a color scheme that is integrated and aesthetic, and if you violate the rules, you can end up with a color scheme that is disjointed and hideous.

The first thing to know about color and color schemes is the use of the color wheel. I have scanned and included here a copy of a simple color wheel from the book “Color Harmony” by Hieaki Chijiiwa, which I recommend.            

When you’re deciding on colors for a color scheme for a web site, a promo piece, a direct mail piece, an ad, or a page or spread in a magazine, you want to keep it simple. You should have no more than two dominant colors (not including black and white) in that web site, promo piece, ad, spread or whatever. When I say “dominant colors” I mean the colors that are represented in large areas. You can have other colors in small areas (called “spot color”). But for your big, broad areas of the piece, you want only two colors, or at the most three.

So how do you select those two colors? Well the color wheel can be your guide. One method I use frequently which works well is to select color opposites on the wheel. Use of color opposites tends to give you an integrated and aesthetic look. By this I mean, mainly: blue-orange, red-green, yellow-purple.

I have used blue-orange a lot in designs during my career, usually with great results. Red-green tends to give you a sort of Christmas look, but you can get around this by using subdued shades of either green or red, like dark green or burgundy. Yellow-purple can give you some very striking results and I have seen it used very well. Although technically according to the rules it should not work, I have built color schemes using blue and red and achieved very good results.

It’s good to have a near-balance between the two dominant colors, but usually with one color being more dominant.

Once you have your dominant colors in there, you can start adding some spot colors to make your design more alive. For example, if you are working with a blue-orange color scheme, you should figure out a way to bring in some small areas of yellow or red. This makes the design more alive. But don’t make these other colors dominant or you could end up with a mess. For example, you would not want to make a design with equal parts of blue, red and yellow. I’ve seen it done and it is not pretty.

I advise spending a little time looking at some web sites, promo pieces, advertisements, magazine spreads, etc., to see how they use color and how they put their color schemes together. You will see some that are hideous and garish in their use of color, and some that are works of art.

“Saturated colors” are the pure color without adding black or white. The colors shown in the color wheel above are saturated colors. “Shades” are when you add black to the saturated color to get a darker result. “Tints” are when you add white to get a lighter color. Saturated colors tend to make your design feel brighter and more alive, and more masculine. Tints, i.e. pastels, tend to give a more feminine feel. Darker tints make it feel heavy.

Next week I’ll cover a bit about what each of the colors and color types communicates.

New Web Site for RealWebMarketing.net

We are pleased to announce the launch of a newly designed web site for RealWebMarketing.net. The new site features an upgraded design, along with new information on social media marketing, our staff, client testimonials, and much more. We invite you to visit the site.

New Sites and Blogs

Here are some new web sites and blogs we have completed recently. Enjoy!

	NovelloBlog.com This is a brand new blog we created for Acclaimed Jazz Keyboardist/ Composer/ Producer/ Music Educator and Author John Novello.
	Through the Woods Design This is a re-design we just completed of the site for Through the Woods Design, a high-end landscape designer and contracting firm in Los Angeles. We worked with associate Rex Perry of Perry Multimedia on the Flash elements of the site.
	Tax Matters Blog - Aero & Marine Tax Professionals We set up this blog for Aero & Marine Tax Professionals, a company that consults with the purchasers of airplanes and vessels on how to save money on their sales tax.
	My Sister Says We re-designed this web site that sells natural skin care products.
	The Direct Mail News Blog This is a new blog we set up for The Addressers, a large mailhouse and fulfillment house in Los Angeles. This blog is specifically for press releases.

 

Web Design and Eye Trail

by John Eberhard

One of the worst offenses on the senses perpetrated by bad web sites and bad web design today has to do with the complete lack of correct eye trail.

“Eye trail” is defined as how your eye travels across or down a promo piece, advertisement or web page. Proper eye trail means the design was well done so that your eye travels across or down the piece in a logical progression. Proper eye trail allows you to really get the communication.

Bad eye trail is caused by design where the designer in most cases did not even consider the idea that eye trail existed, and so he tried to jam too much stuff into the piece and did not lay it out in any logical order or pattern or sequence. Just for fun, I will link to some of the worst offenders I’ve ever seen a little later in this article.

A logical type of eye trail has evolved for web sites over the years, usually consisting of:

• A masthead at the top which gives the company name, logo, and sometimes contact info.
• A navigation bar that usually goes along the top underneath the masthead, or down along a narrow left-hand column.
• A central area, below the masthead, and either under the navbar if it is along the top, or to the right of the navbar if it is in the left column, which contains the one point of that page. This is one of the things that the worst sites violate, trying to cram a bunch of things into this central area. Each page should have one main topic, not six or ten.
• Often on sites these days, there will be a narrow right sidebar, usually below the masthead, which contains links to special items of interest.
• Footer: There is an area at the bottom which contains the text links and copyright information and sometimes a link to the web designer.

Some more comments on the elements above and how they relate to eye trail:

Masthead: The masthead is usually the entire width of the content of the page. I think these (and your whole page content) should be a minimum of 800 pixels wide today, usually centered in the page. I think 900 or 1,000 is better. The majority of web viewers today have their screen resolution set at 1152 x 864 (49.19% of visitors to my site this year), followed by 1024 x 768 (15.74%), and 1280 x 1024 (11.09%). Those percentages add up to 76.02%. So why are some designers still putting up tiny little sites that are 600 or 700 wide that take up a quarter of the screen? I guess that’s a good idea if you want to make a site with less impact (why would you want that?). But if you want to make a site that has good impact, then “use up some of that real estate” as a former boss of my wife (and trained marketing executive) used to say. But do NOT make the masthead and main content more than 1,000 pixels wide, forcing people to scroll from left to right to read it. And the masthead should be relatively narrow from top to bottom, not more than 150 or 200 pixels tall.

Navigation Bar: I think a good navigation bar should include no more than say 10 items in it. If you have more than that, then arrange the navigation in major categories with drop-down menus, or have sub-menus on pages as you drill down into the site.

Central Area: As I said, I generally think the central area of the site should be mainly about one thing, but I’ve seen as many as three topics tastefully arranged in the central area.

Right Sidebar: This is becoming more of a chic thing to have a right sidebar, with links to special things you wanted to highlight, sell, etc.

Footer: I think a footer should always be included with text links to all the main pages shown in the navigation bar above, with copyright info, etc.

The Good, The Bad, and the Ugly

The Good

First I am going to show some sites that I think have good eye trail.

	EmployeeTestingCenter.com I designed these first two. Note the home page is very compact, which is the way the client wanted it, with minimal nav buttons showing, but with drop-down menus giving all the links. The sub-pages include a footer and right-hand sidebar.
	877SmileToday.com This site features a Flash animation on the home page that goes all the way across the width of the content (900 pixels), a right sidebar, and a footer.
	Yahoo.com No I didn’t design this one (I wish), or any of the subsequent sites. But I think they have laid this page out and offered a lot of information and options, but done it in an elegant and logical way that is not hard on the eyes.
	Microsoft.com What a clean page. You get a lot of options in the form of extensive drop-down menus.
	Apple.com Apple always has a very clean looking web site. Right now they’re promoting this tiny iPod Shuffle that is the size of your thumb.
The Ugly OK, here are the stinkers.
	HavenWorks.com This was selected as the #1 worst site of the year for 2008 by www.webpagesthatsuck.com. This is possibly the worst eye trail I have ever seen on a web site.
	FabricLand.co.uk This was selected as the #2 worst site of the year for 2008 by www.webpagesthatsuck.com. Aside from the garish colors and lack of a pleasing color scheme, there is no eye trail. What are you supposed to look at?
	YvettesBridalFormal.com This was selected as the #4 worst site of the year for 2008 by www.webpagesthatsuck.com. Check out those colors! I think the designer thought he was getting paid by the color. Plus, eye trail? Nope. And you have to scroll way to the right to see that picture of an airplane and oriental writing.
	CleanIsHappy.com This was selected as the #5 worst site of the year for 2008 by www.webpagesthatsuck.com. I include this one not because the eye trail is so bad but because it is perhaps the most ridiculous things I’ve ever seen presented on a web site. It is promoting a bidet (look it up if you don’t know what that is, I’m not gonna tell ya), and starts out showing naked butts of these various people and then switches to their faces talking and telling you about the Washlet bidet.
	AlternativeTransportServices.co.uk/ This was selected as the #8 worst site of the year for 2008 by www.webpagesthatsuck.com. Once again this is an eye trail stinker.

Summary

The moral is design sites with good eye trail and people will find your site pleasant and will want to spend more time there.

New Blogs We Designed

I want to share links to several new blogs we have designed.

	Through the Woods Design Blog This is a blog we set up for Through the Woods Design, a firm providing landscape design and installation services in Los Angeles.
	Dental Tips and News We set up this blog for 877SmileToday.com, a web site that helps people find a dentist in their neighborhood.
	The Direct Mail Blog This is a new blog we set up for The Addressers, a large mailhouse and fulfillment house in Los Angeles.

New Web Designs

by John Eberhard

I want to share links to several new web site designs I have completed of which I am particularly proud.

	The Employee Testing Center This is a brand new site we designed for the Employee Testing Center, a company that offers online personality and IQ testing for business owners, so they have a better idea of who they are hiring and can more easily find honest, dependable, and trustworthy employees.
	Smile Today This is a brand new site we designed for Smile Today, which helps people find a friendly, caring dentist right in their neighborhood. The company serves Southern California.
	Shea Roofing Inc. This is a new site for Shea Roofing Inc., a Burbank-based company that has been providing roofing services for residential homes around the Los Angeles area for 20 years.
	All Power Services This is a new site for All Power Services, which provides electrical, HVAC (Heating, Venting and Air Conditioning) and refrigeration services for residental, commercial and industrial buildings in the Los Angeles area.

 

Web Authoring Programs

By John Eberhard

In an earlier blog post I advised people not to use Content Management Systems for the overall design of a web site, as these typically place huge limitations on what you can put on a page, where it can go and how big it can be.

I advised people to instead buy one of the popular web authoring programs like Dreamweaver of Adobe GoLive, or Microsoft FrontPage.

A couple colleagues emailed to tell me that Adobe, as of the Creative Suite 3 (CS3) package, no longer sells GoLive, which they sold up until CS2.

Another colleague told me that Microsoft no longer sells FrontPage, and now they sell a program called Expression Web2. I haven’t used it and know virtually nothing about it.

Personally, for web site design, Adobe Dreamweaver, along with Photoshop to make your graphics, is the best ticket I recommend.

Web Design: the Vital, Desirable, and Trivial, Part 2

By John Eberhard 

Last week I discussed some aspects of web design that are vital, desirable and trivial. Sort of a "good, bad and ugly" list. Unfortunately I didn't get to any trivial things before I had a pretty long article. So in case you were wondering where the trivial stuff was, in Part 2 I will tell you some trivial stuff and even some undesirable stuff you should stay away from.

Frames

Frames are a certain technique of putting a web site together where different parts of the sites are separated into frames. Stay away from this in web design, as it prevents search engines from indexing the site. Most designers aren't doing this any more.

Content Management System

More of my clients are asking me about these. A content management system is an online interface where you log in with a username and password, and it allows you to make changes to your site and put up new content, without having to use a web authoring program like Dreamweaver.

My experience so far with content management systems has been poor. The ones I have used or been exposed to had their own proprietary way of designing or modifying a page and took a lot of time to learn. And they placed incredible limitations on what you could do with a page, in terms of where you could put things on a page, how big the pictures could be (mostly tiny) and so on.

I understand that some web site owners would want to be able to add things or change things on their site without depending on a web designer. I think a better way to accomplish this is to have someone at the web site owner’s company learn the simple basics of a web authoring program like Dreamweaver (the market leader), Adobe GoLive or Microsoft FrontPage. I personally think the learning curve would be roughly similar to a content management system and you would then not have the stupid limitations that the content management systems place on you.

Guest Book

Definitely trivial. No one signs guest books anymore and these were a bright idea of designers about 10-12 years ago.

Buy Buttons

If you sell something directly on the site, you definitely HAVE TO have buy buttons in obvious places on every single page of your site. This is a vital thing. You want your visitor to be able, at any time, anywhere on the site, when he decides he wants to buy your product, to do it right then. Make it obvious so he doesn't have to work hard to find it.

If you don't sell a product directly on the site but use the site for lead generation, make the "contact us" button easy to find.

Graphics and Style

Every industry has a certain style that you can observe when you look over the existing web sites in that industry. This includes things like the type of graphics used, the color schemes, the types of backgrounds, the types of navigational buttons used, whether the graphics look 3D or flat, the types of pictures used and how many pictures, and so on.

Software company sites will look quite a bit different from sites for a health care practice, which will look quite different from the site for a rock band.

I don't think one has to copy the other sites that are out there, but I think that you should design a site that is in a similar style to the what's out there. If you're designing a site for a veterinary practice, it should not look like a site for a Gothic rock band, with a black background, etc.

This is not to say that you can't ever stretch the envelope a bit when you design a web site, but the point is that before you begin you should look at other sites and be aware of what that envelope is. And be aware that for a commercial enterprise, you are creating a web site to market and sell your products or services, and that the purpose of marketing and selling those products or services is senior to creativity and originality. That sort of defines the difference between "graphic arts" and "fine arts." The application of graphic arts is toward the commercial purpose of marketing and selling.

Navigation

Obviously a site needs to have a navigational structure, usually along the top or in the left-hand column. Here's a rundown of which navigation buttons you really need.

Home - This is vital, although some designers design the site so the logo in the top left corner links to the home page.

About Us - Desirable, usually is a blurb about the company or its history or tells about the principals.

Services or Products - Depending on whether you sell products or services, one or the other is vital in your nav.

Contact Us - This is vital, and should either be a page giving your address, phone, fax, and email, or a form that people can fill out for more information. But if it's a form, that page should also include your contact info.

Gallery - If your product is especially visual, like if you are an architect, pond designer, pool builder, paving stone installer, or landscaper, you need a gallery section of your site that shows photos of your work. And you will usually find these page are the most heavily viewed on your site.

Web Statistics

Many people don't realize how vital it is to have a web statistics program or service for their web site. If, for example, your site is not getting any leads or sales, the first thing you want to know is how many people are going to the site. It lets you zero in on what to fix.

Some web hosting companies will include a free web statistics program with their service, and frankly most of these are pure crap.

I have used a lot of statistics programs and services over the years. But a couple years ago Google introduced a service called Google Analytics, where you sign up and they give you a piece of code that you put on every page of your site. And it's free. If you have a Google AdWords account you can set it up as part of that account, but you can also set it up if you don't have an AdWords account.

With Google Analytics you can tell how many people are going to your site each week, what pages they are visiting, and where they're entering and leaving the site. One of the most valuable things is that you can know where your visitors are coming from, what sites are referring them to you. In other words, other sites will have links to your site, and Google Analytics will tell you how many people are coming to your site from each. That includes the search engines and other sites which may have links to yours. And for search engines, it shows you what keywords people entered in the search engines to find your site, and how many people ended up coming to the site via each keyword.

These are all pretty standard things that any decent web statistics program will tell you, but the cool thing about Google Analytics is that it's free, and most of the other good programs or services (that you pay for monthly) are not free or even cheap.

Web statistics are vital and I urge you to set up Google Analytics on your site if you don't already have a solution in place.