WSI Internet Marketing

Good websites are not always about radical thinking and quirky design… but sometimes just an accumulation of small subtle and eloquent touches collectively have a subliminal effect that separates them from the comatose inducing vanilla website designs churned out hourly by Bob’s Website Shack (I’m hoping I just made that up).

I’m pretty demanding when it comes to the creative look and feel of our website designs, so we only hire the best and the brightest. Still, sometimes that creativity has to be harnessed.

The last thing I want to do is stifle the creative juices of my design staff, but at the end of the day we’re not filming an episode of “designers gone wild”, we aren’t designing websites for ourselves. Believe it or not, we aren’t even designing them for our clients. We’re designing websites for our clients’ clients.

Whenever we bring in a new designer to the team, I usually like to have a “philosophical orientation” to create the expectation of quality design standards. These are typically interactive sessions, but I thought you might like to see my outline:

Website Design 101

I generally start with a list of attributes that I look for when evaluating my designer’s work:

1. Restrained use of soft shadows in the right place
2. Image Interaction
3. Color and shape balance
4. General composition
5. Appropriate design for the industry and the target market
6. Appropriate image selection (meaningful images with the right colors)
7. User friendly (and interesting) navigation
8. Easy to read text (appropriate font, size and spacing)

One surefire way to get the point across is to show actual examples as we explore the finer points of web design. The website we developed for CalPac online charter schools in California is a good example because my designer Adrian did a phenomenal job of tying in all the elements of good design into a package that showcases this online charter school while telling the compelling story to the students and parents of students.

Let’s take a closer look at some of the more subtle elements of design:

Soft Shadows: notice how the slight shadows around some of the basic shapes give them a 3-D feel as they seem to pull away for the page. The use of shadows is very common in web design, but I applaud Adrian’s restraint to not over use them…and in keeping the “spread” minimal so that there is just a subliminal hint of shadow instead of overstated “in your face” wide shadows. The watch-word here is “restraint”.

Image Wrapping: Actually the images don’t technically wrap around each other, but by placing one image on top of the other and allowing it to extend past the edge, it gives the appearance of wrapping behind the base image and enhancing that 3-D effect. Notice on the CalPac site how the navigation on the upper left, and the decorative ribbon on the lower right appear to wrap around the back. Clever and restrained use of image and shadow.

Color & Shape Balance: This is a little harder to explain. It’s also something that is difficult to teach.  It’s more something you have to feel… or sense. Everything on a page has what I call “visual weight”. Colors and shapes can draw your attention…not necessarily by themselves, but in conjunction with each other.

It is typically a good idea to stick with a primary pallet of colors and a secondary highlight color. In this case it’s various shades of blue and green while the photo selection brings in a variety of complimentary colors.  How colors and shapes interact? That’s the part you need to have a gut feeling for.

The other elements in my list are somewhat self explanatory, however there is one more bit of subtlety that I want to draw your attention to. That is the way Adrian treated the navigation. Hold your mouse over the navigation buttons on the Home page and any of the “Enroll Now” buttons. Notice how the colors gently reverse out, signifying that is the button you are interacting with at the moment. Did I mention small eloquent touches?

By the way, here is another article I wrote on my personal blog featuring Six Website Page Layout Tips you Absolutely need to Consider! That article focuses more on the layout aspect of a web page rather than the graphic design elements.

Kreative Webworks, Inc. is a professional digital marketing firm in Orange County California since 1999.  Our website designers are always on top of their game, and throughout the year I will be showcasing and critiquing their work from our website portfolio. Even if you don’t have the patience for my comments, you’ll probably enjoy our website designs.

In the last few years Search Engine Marketing and Social Media have stolen the spotlight away from some basic Internet marketing principles. That is; the user experience and the fundamental way that website pages are laid out and organized for your visitors (human beings…not search engines). After all, what visitors do once they get to your website is purely the result of what they see on the site.

Here is where I would normally turn the conversation towards content. However there is something even more fundamental I want to address; Usability and Visual Appeal…

Your top banner and navigation layout are major considerations because they will generally be used consistently throughout the site. However the individual page layouts (what is unique on each page) is what adds personality to the site.

• Think magazine…not flyer: Actually think somewhere in between. Print layout is not the same as web layout, but the basic rules of design apply. Flyers typically feature oversized fonts centered down the middle of the page. Magazines are typically more “artsy”. An effective layout combines the simplicity and directness of a flyer with the flair and interest of a magazine. Professional touches might include wrap-around text, multiple columns and strategic (but limited) attention getting devices. Add flair to your layout…not distractions.
• Spacing considerations: Unless you are publishing a term paper online you will probably not want to indent each paragraph. Instead you might consider separating each paragraph with a double space. This technique is cleaner, easier to read, separates individual points into manageable blocks and is certainly more contemporary. Here is an example of a Huntington Beach Personal Injury Lawyers site where we spaced each paragraph in blocks, and actually have each line at about 1.5 spaces for easer reading.
• Text wrapping: Wrapping text around images can have a very professional “magazine-like” effect on your page layout. A common mistake is allowing the text to butt directly against an image, creating an unintentionally crowded feel. Make sure that you use “cell padding” or another technique to create a small buffer around your images so that the text does not physically touch the images.
• Scrolling v. White Space: Decide what is more important, an uncluttered design, or letting the visitor see everything without scrolling. Minimal scrolling is acceptable and preferable to jamming all your content into the top portion of your page. An even better solution is to aggressively edit your content. Visitors inherently breeze through websites with an unprecedented level of impatience. On the web…less is more. Here is an example of site we designed with minimal scrolling. Note there really isn’t a lot of text on this popular healthy lifestyle Edamame website. We allowed the graphics to do the talking.
• Background images and textures: Unless you have an absolute compelling reason to do so, it is best not to use any sort of image background or textures behind the body text. This has a tendency to appear gimmicky and it obscures the readability of your text. It might also compromise the load time (the amount of time it takes for your web page to materialize).
• Appropriate use of Flash: Animation has several advantages, but it also has a tendency to be over used. A little animation can go a long way towards distinguishing your brand or demonstrating a technique. However it can also be a distraction to your real message and cause unnecessary load time.

Try to avoid testing the patience of your visitors with gratuitous eye candy. Moderately animated logos and slogans in the banner of your Home page (or landing page) are great for branding, but once someone has seen it and has decided to venture deeper into your site, there is no point in repeating it endlessly. The repetitive movement would be akin to someone walking back and forth in front of you while you are trying to read. Here is an example of a glass and mirror company in Dallas where we rotated the flash through once, and let it settle on the frame with the written message. It doesn’t rotate any longer and never animates on internal pages.

An example where flash serves a purpose above and beyond branding might be a website that promotes women’s lipstick products where a flash sequence demonstrates the proper technique for applying the product. As a general rule, anything that says “Skip Intro” or “Enter Site” should probably not be there to begin with.

We can influence the search engines and make our cases through Social Media channels, but at the end of the day your own website is one of the few things that you actually have total control over…

Chuck Bankoff is Director of Web Services for WSIeWorks, a full service Digital marketing firm in Orange County California.

Well actually his name was Mark, and he didn’t have a British accent, but the ensuing discussion was pretty accurate (sort of).

The cardinal rule of effective web design is to design for your target audience…not yourself. There are of course industry best practices…tempered with common sense.

Websites that are able to stand the test of time have three things in common:

• Appropriate theme for the target market
• Uncluttered design
• Unambiguous navigation

Not necessarily rocket science, however these elements take a bit of upfront planning, and should not be trivialized. Good website design by its very nature is subjective, but bad design is just…well bad. Here is my checklist of what NOT to do:

• Too much Flash: Improper use of flash is gratuitous and may detract from the purpose of the website. Make sure that flash is used judiciously and not just as “eye candy”.
• Pages that are too long: Long pages are subconsciously interpreted as too much work to read. It is much better to break content into multiple, well organized pages.
• Pages that are too cramped: Not everything has to be seen all at once to be appreciated. Too much collocated information is in itself a distraction.
• Unnecessary repetition: Give your visitor a little credit. Convenient navigation is one thing, but force-feeding it to your visitors is something else.
• Too many attention getting devises: If everything is highlighted, then nothing stands out.
• www.WebsitesThatSuck.com: (just in case you need additional clarification).