One of the advantages of WSI is that you get to meet ICs from across the globe. Chuck Bankoff is based in Los Angeles and has an eye for good web design. Here is a post by Chuck on website design 101. – Francois.
The best website designs are not always a conceptual masterpiece… but sometimes just an accumulation of small subtle but eloquent touches that taken in their entirety, 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 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.