Someone was curious about the “mood” image on the home page of my website.  My daughter made a puppet in 8th grade art class.  First I photographed the puppet as a standard portrait:

Then I wrapped it in black fabric and startled it with a spotlight pointing up towards the face!

I took this image and used Photoshop to paint around the face and hands with black.  Then I used the perspective tool (Edit – Transform – Perspective) to distort the proportions.  Finally, I used Curves to saturate the colors for a more lurid effect.

Photos by Alice Gebura    Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

Copyright 2010,  Alice Gebura,  All Rights Reserved.

I attended a workshop in Ikebana,  the Japanese art of flower arranging. The Ikebana concept that impressed me the most was that of visual motion.  Ikebana strives to keep the eye engaged by eliminating any element that would stop the continuous scanning motion of the eye.   Some examples of such eye stopping elements are:

• Straight lines
• 90 degree angles
• Absence of  negative space (space between objects)
  

The photo to the left shows an Ikebana arrangement.

Example of Ikebana

Notice the following:

• Simplicity, only 3 elements: white calla lilies, pink azaleas and black tray
• Curved lines, no straight lines
• Only 5 upright flowers grouped as 3 + 2, creating negative space between the vertical elements, the stems
• Negative space between the horizontal elements: calla lilies at the top,  azaleas and tray at the bottom

Despite the sparse, simple aesthetic, its visual interest  pulls you in and keeps you there.  Isn’t that what we want for our own web sites?

I gave some thought to how I could  apply this to web design.  I believe when you drill down and understand your goals and core values and how to realize them, you arrive at a truth that can be expressed simply and effectively.

If you don’t really understand who you are and what you’re doing, what better way to cover it up than to keep piling on more and more until you get a web site that looks like this:

Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

Home Page, Web Site of Louis Lortie

Monday, March 1 marks the 200^th anniversary of Frederick Chopin’s birthday.  In honor of one of my favorite composers let’s talk about the web site of pianist Louis Lortie.  For me this web site is the epitome of why we bother to build web sites.  Louis Lortie is a  concert pianist and recording artist.  At his site there is a great depth of information about him, his career and discography, and, most interesting, it showcases his thoughts about music interpretation and its challenges.

Here’s the treasure you’ll find on just one page, Chopin:

• An excerpt from the score of a Chopin Etude
• A series of videos
• A photo of Chopin

The series of short videos showcase  Lortie playing two of the Chopin Etudes (a glorious aural experience) and Lortie, at the piano, talking about his approach to playing the etudes while playing excerpts to illustrate his thoughts.  As each video plays, its title  changes from black to lavender so you can keep track of where you are in the series.  Or, you can click on the one you want to hear.  Great user interface design!  Notice that underneath the video the timer is presented as a musical staff!  Clever design!

Chopin Page, Web Site of Louis Lortie

My only criticism is that the text on the home page is hard to read – a result of using a justified right margin and the italic font with very little line spacing.  The  opacity factor on the font doesn’t help either.

Lortie has created a passionate web site with great depth of information that gives us a window into his soul and the beauty of the music he plays.

Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

Another argument emerges for simple web design (see my previous post  Creating Your Web-Scape)  in Drake Bennett’s article on cognitive fluency, Easy=True. Cognitive fluency is  the psychological precept that “people prefer things that are easy to think about to those that are hard…In any situation where we weigh information, fluency is implicated in our decisions about everything.”

In a nutshell, when information is easier to mentally process, people feel attraction and belief.  The opposite,  disfluency – making things difficult to grasp,  creates a cognitive roadblock that makes people wary and uncomfortable.

While this might seem intuitively obvious, evidence abounds that plenty of businesses (and web designers) don’t get it.

Bennett’s article is a terrific resource for more information on fluency and disfluency and the supporting research.

For the purpose of this blog let’s take a look at the practical implications of fluency and  disfluency in terms of web design.  Keep in mind this is all based on research, not my own preferences.

Disfluency:the art of making things difficult -

Web Design that Loses Business

Here are some characteristics of a disfluent web site that will leave web site visitors with a negative impression.

Inaccessibility

• Unfamiliar words (for example, technical jargon and acronyms)
• Names and words that are difficult to pronounce
• Complex syntax
• Illegible text (see my previous post The Dog and the Lotus)
• Missing information or convoluted instructions
• Functions that don’t quite work

Sensory Overload

• Overcrowding the page
• Visual distractions
• Multiple columns of disparate text
• Little or no white space
• Flickering animation

Inconsistency

• Confusing navigation
• Poor organization

Fluency:the art of making things easy to understand -
Web Design that Encourages Business

Here are some characteristics of a fluent web site that subliminally suggest to visitors that your business is reputable and trustworthy.

Repetition

• Consistent navigation and page layout across the web site
• Artful repetition of key ideas(note: repetition is good, redundancy is bad – know the difference)

Clarity

• Legible fonts and color coordination
• Plenty of white space
• Language and syntax that everyone can understand

Simplicity

• Message boiled down to its essence
• Graphic design and content that are easy to assimilate (accessible) both visually and conceptually

Web Site Analysis: The Glass House

Let’s take a look at the web site for The Glass House and see how well it does fluency wise.

Repetition: The grey box is repeated throughout as the background to the title (I like the opacity that reminds us of the see through quality of glass), the background in the drop down menus, and the background for other important pieces of information.

Clarity: The site contains a lot of information,  notice how it’s been logically organized and categorized.

Simplicity: One column layout, plenty of white space.

Verdict: Fluency.  I’m convinced this is a reputable organization dedicated to professionalism on all levels.

Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

Two web sites caught my eye recently.

Blue Box Layout

The Guthrie Theater web site has a great layout. Blue boxes in all different sizes contain information, photos, slides – I really like the blue and gray stripes behind the horizontal navigation links (someone tell the webmaster to fix the padding on the second line of links so they’re centered) and the way they change colors as they stretch beyond the content area.

Innovative Navigation

The web site for artists Louviere + Vanessa: New Orleans is definitely outside the box. I love their images. To navigate the site you use your mouse to draw an arrow in the direction you want to go. You’ve got to try it and see what you think of it. It’s really strange, but I love the user interaction. If I were truly trying to find information, this would be a disastrous experience. But the site is an art gallery and it’s so much fun to wander through the gallery with this unusual navigation gizmo. Gotta find out how they do it!!

Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

One of my favorite photographers Bruce Percy says the following about creating a landscape photograph:

“The strength of an image lies many times in what we exclude from it.  Putting more things into a scene can often dilute the strength of the message. Keeping it simple is key.”

Web designers would do well to follow this advice.  Similar to creating a landscape, creating a web site should isolate and focus on what’s important by carefully selecting and streamlining graphic components.  We create something ugly and unfriendly when we clutter a page with multiple ideas, extraneous information, or unnecessary functionality.  Choose one idea and execute it well.  Don’t add stuff just because you can.

Redundancy

For an example of what I’m talking about, let’s visit the Harvard Parks & Recreation web site.  The left column provides links to the rest of the site.  When I mouse over the Main Page tab, the same content links appear (see screen shot on the left).  Why do I need to see the same links twice?

Ugly Graphics – and lots of them

There are three different graphics on the home page.

Landscape photo – used as background for title. Note the gray, out of focus, pixelated photo.  If you can’t find a great photo locally (hard to believe), why not spend $3 for a decent image from iStockPhoto?  The landscape theme is relevant, though.  The message it conveys is “lake/recreation/swimming/boating/fishing.”

Tree logo in the left corner. Suggests a conservation theme.  Relevant?  Not really.

Lawn – close up photo used as background. The obvious message to me is lawn care. Also worth noting are the unnecessary functions that create more visual clutter.  The text next to the check box is barely legible.  Just because it’s easy to count and display visitor numbers, doesn’t mean it should be included.

Three different graphics with three different meanings create visual and mental confusion.  Extraneous functions and poor design contribute to usability issues.

A Simple But Effective Layout

An example of a simple yet effective web site is that of screenwriter Zen Freese.  The coffee stain graphic, the horizontal lines, and the tape are things that remind us of the writing process. We write at our desk, cup of coffee on top of the last draft, taping the latest revision to a page in progress.  Our tools, represented by the two fonts, are a typewriter and a pen.  The message is clear.  Nothing extraneous distracts us from the message.

Web design is about common sense way before it is about how much functionality or other junk you can stuff onto a page.  Keeping it simple for both impact and usability is key.

Commentary by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

“The web design of this web site is horrible.” My daughter was rather annoyed. She had looked up the web site of a local bookstore because she wanted to call them about a book. All she needed was the phone number. Her irritation increased the more she had to click around to find such an obvious piece of information.

How many businesses get caught up with slick, flashy web design but forget to take care of basic information? How many times have you had to click Contact Us to get to a phone number? I’ve visited sites where the phone number or location are seriously buried.

If you want people to call you or locate your place of business, put that information in a prominent location on every page, and never beneath the fold. Consider other factors that contribute to visibility: contrast, font size and color, reverse type, and so forth.

Check out these business sites and see how long it takes you to find the phone number.

Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

Copyright 2009, Alice Gebura, All Rights Reserved.

Do you like animation or flashy motion effects on a web site? In general, I don’t, unless they provide added value to me. A scrolling or jumping animation might catch my eye for a second, but it takes less than a second to click to another web site that isn’t so irritating.

I detest advertising. We all do, that’s one reason why TiVO is so popular. Advertising invades our mind space without asking our permission. When a web site is more flash than info, it starts to look like a TV ad. Instead of pressing the Fast Forward button, I’ll just click to another web site.

There are instances when motion graphics are useful. For example: slide shows for art galleries, photographers, etc. Or, high quality embedded videos when they are relevant, make me laugh, or teach me something. One of the keys to success, if you’re going to put something flashy on your site, is to give control to the visitor. I don’t want to passively sit while something runs. That’s why I always click Skip Intro (you know what I’m talking about).

Why Do It?

Why do web developers build junky animation? It seems, because they can. Here’s an example. If you go to the Longy School web site, you’ll see Latest News scrolling vertically on the right. Since it’s moving, I can’t read it. So what’s the point? This site also has a video tour of the building. I care about ambience only when I’m booking a hotel room. Irrelevant information just creates visual clutter.

Award Winners

Beantown Web lists its picks for best web sites in 2008.

There are some cool sites listed here. My favorite is James Zabiela’s site. He’s a high tech DJ so it makes sense that his web site puts on a high tech show. I like this twist: instead of placing motion graphics against a static background, he puts motion graphics in the background and places static text over it. I also like the sleek and elegant music player he provides unobtrusively in the upper right corner.

What’s Appropriate for You?

A super flashy web site is expensive to build. Keep in mind it also screams “high priced” to visitors. It could scare off potential customers who might infer you are too high priced to do business with. What is your message and do motion graphics enhance or undermine it? Know your target customer. Make the site comfortable for them. And, put them in control of the graphics.

Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

Copyright 2009, Alice Gebura, All Rights Reserved.

As a designer I’m always looking for visual inspiration.  One place I find it is Flora in Winter at the Worcester Art Museum, an event where floral designers interpret various art works in the museum.  It’s not just a matter of putting some flowers in a vase.  The designer studies a painting for color, texture, line, movement, pattern, etc. and recreates the experience using floral material.  This event takes place every February when I deeply appreciate all the plants and flowers I’ve missed since the first snowfall.

Interpretations can be rather literal, or they can be abstract.  In any case, a successful designer creates a symbiotic relationship between the painting and the floral arrangement.  The more we see of the painting in the floral design, the more we see in the painting itself.  Below are highlights from this year’s Flora in Winter.

What does this have to do with web design you might ask.  When I work with a client I observe who and what the business is about.  My job and my challenge is to visually interpret what I find and create a web site design that reflects that.

Last but not least, a reminder that spring is just around the corner.

Photos by Alice Gebura    Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

Copyright 2009, Alice Gebura, All Rights Reserved.

Web Designer Wall posts engaging and stimulating information for web designers including several collections of web sites that Nick La finds appealing. I especially like his collection of Large Background Web Sites. Instead of your page floating on a solid color or pattern, the contents is integrated with an oversize photo or illustration. For example:

Very impressive. The image quality is outstanding. However, I would think twice before choosing this design approach and here are my reasons.

Web Site or Billboard
The visual impact of a large background web site is undeniable. But are you reminded of something you’ve seen before? I am. I’m reminded of billboards and magazine spreads: seductive images and catchy tag lines, but not much useful information. In other words, advertising.

Message
The images on a web site should be more than pretty pictures. Images should relate to the purpose of the web site. I chose two non-english web sites with large background design. I really do have to rely on the images to understand what’s going on. Let’s see what happens.

What is it?

Construction company? Aerialists? Gay men’s chorus? Beats me.

What is it?
Witty and unusual. I guess he’s a graphic designer because of the animations. The plant throws me a bit – is he in horticulture?

Web Designer Depot posts some of the challenges of creating a large background web site. If you’re considering this approach, read up so you’ll be knowledgeable about how time + effort = cost.

Analysis by Smart Alice Web Design.

Copyright 2009, Alice Gebura, All Rights Reserved.

The experience of good web site design feels like settling into a comfortable chair. However, when the design is visually exhausting, it repels the user instead of inviting him or her in. Let’s take a look at how two yoga studios present themselves on the web and see how we feel about them.

First, the Dog

When I look at the home page of Laughing Dog Yoga the first things I notice are a) the layout feels awkward and b) there are way too many fonts. The layout is basically an endless list. This creates big blank spaces. It makes my eyes tired to scroll through it. On a more personal level, I find the color scheme unattractive.

Font Crazy

There are six different fonts in the left navigation pane and five different fonts in the content area, for a total of 11 different font variations. Fonts vary by color, size, style (bold, italic, etc.) and typeface.

Note the links in the navigation pane are all caps and in white with a drop shadow for an overall blurry (that means hard to read) effect.

The design principles of repetition and clarity should govern your font selection. Too much variety prevents the user from finding and focusing on information.

My overall experience: Uncomfortable

The Lotus – Love Those Colors

By contrast, Mudita Yoga Studio features a beautifully composed photo on the home page.

Look closely at the colors in the lotus blossom. You’ll see these same colors used throughout the site for backgrounds and borders. A collection of related colors form a color palette and this is one characteristic of good design.

I see only three fonts used on the home page. Each one is distinct and each one has a function. There is a font for the name of the business, a font for the navigation buttons, and a font for the main content. Immediately my eye understands and I feel comfortable reading and investigating the site further. I might revisit the sight later just to enjoy the photos. If some of the photos change, that’s even better.

My overall experience: Enchanted

What do you think? Which site do you prefer? Send me a link to another yoga site and tell me how the design affects you.

Analysis by Smart Alice Web Design.

One of my all time favorite web sites is David Lebovitz, Living the Sweet Life in Paris. Lebovitz is an all star pastry chef. His web site/blog has fabulous food photos (I’ve included an example here). The images are superb – beautiful, professional photographs that instantly tell you this guy is serious about food and food quality. He uses those gorgeous photos to illustrate his various culinary adventures with ingredients and funky kitchen gadgets.

Why Should You Care About the Quality of Photos and Images on Your Web Site?

If you are a film buff like I am, you know that a movie typically relies on visuals to relate 60% of the story. For example, let’s say a character is a devout Catholic. It would be heavy handed for the character to announce “I’m a devout Catholic.” Instead the director might, for example, zoom the camera in on a rosary placed on a table.

Much like a movie, a successful web site uses a combination of images and text to convey who you are and what you do. The art is in creating images that are meaningful, relevant, and tell the right story.

Analysis by Smart Alice Web Design