Web Design: Essence

by Jin, 10-08-08 // 19 comments

A film is – or should be – more like music than like fiction. It should be a progression of moods and feelings. The theme, what’s behind the emotion, the meaning, all that comes later.

–Stanley Kubrick

When I was younger, my ambition was to become a film director. To me, film making embodies the discipline of all art forms. A good director involves the use of fine art, fashion, sound, imagery, dialog and cinematography. All these elements come together to give people a gratifying experience. A good film can make you laugh, cry, scared or even angry.

I never pursued the film career path. Instead, I became a web designer.

When I first started my journey in web design/development in 1995, my focus was heavily on the techniques. Techniques as in how to achieve a certain effect in Photoshop, and knowing all the ins and outs of HTML. As the web progressed, so did my skill in techniques. I went on learning Javascript, CSS, Flash, server-side scripting and even database programming. I kept up with graphical software as quickly as Abobe/Macromedia pumped new versions out. I followed A List Apart‘s push on web standards and David Siegel’s Highfive on design showcases. I made trendy websites with the latest technology. I was a damn good web designer. Or so I thought.

I had a humbling experience in 2000. I met up with a client to show her a mock-up I was doing for her company site. A mock-up I was quite proud of. It had all the latest design trends. (yes, 45 degree lines were a trend at one time, so was tiny font and bar codes). She looked at the mock-up and seemed puzzled, “It looks pretty, but I’m not sure if our audience would feel it’s who we are.”

“Then your audience doesn’t have taste, and neither do you. You are not a designer…” My ego murmured silently. After all, I wasn’t used to rejection. I don’t remember how the rest of the meeting went exactly, but I do remember going to Barnes and Noble afterwards.

Flipping through creative magazines over a cup of coffee always put me in a better mood. As I was being marveled by the designs I was looking at, I wondered what made these designs great. “Because they look cool” just didn’t seem like a satisfying answer. In fact, some designs didn’t seem cool at all, they were rather subtle. I grabbed more magazines and books on photography, fine art and even architecture. I think I had a need to reassure myself of my taste. As I went on, the same question still lingered in my mind. What made a particular photo prevent me from flipping to the next page? Why were Frank Lloyd Wright’s designs so simple, yet so captivating? Why did certain rough sketches keep my attention longer than a fully rendered oil painting?

Then it hit me. All these great works from different fields captivated me because they triggered an emotional response. They did so not by looking glamorous, in fact some photos looked downright depressing. Like the one that captured the despair in a starving child’s eyes. Some figure drawings were so abstract, but they captured the body’s motion in full force. This is the key to great design and art: to capture the essence, to provoke an emotional response.

I felt rather foolish that it took me so long to realize that. The whole time I was so focused on chasing the trend and technical know-how, but ignored the fundamentals. Re-examining the mock-up I designed, I saw that it was an utter failure. All the design elements I used did nothing to convey the client’s branding, or the type of feedback they expected from people visiting their site. It was more of a showcase of my Photoshop knowledge.

Since then, I’ve focused on designing for humans. I know it sounds funny, but too often we forget this simple concept. To learn how the human psyche responds is a difficult thing to grasp. Once you develop a certain level of mastery on this subject, everything else is simply a means to an end.

People make everyday decisions based on emotions. This is why companies invest vast amounts of money in marketing and advertising. Successful products, movies, TV shows, books, music or even presidential candidates capitalize on these emotions. Web design is no different.

Graphic design is not art, for graphic design is visual communication whereas art is subjective and self expressive. Web design shares an undeniable bond with graphic design and art, but has its own intricacies that’s often associated with product design. Good web design requires multiple disciplines. We need to possess a keen eye for aesthetics, understanding of usability and technical skill to make it all happen.

Form follows function – that has been misunderstood. Form and function should be one, joined in a spiritual union.

-Frank Lloyd Wright

In order to trigger the appropriate emotional response we require a thorough understanding of the subject matter. Before we even start that napkin sketch, we need to know what the site is trying to do. Starting this thought process early helps us form the correct final picture. If we go straight to the aesthetics without  thinking about the essence of a site, then no matter how strong our technical skills are, we’d only end up with a pretty wallpaper without any soul.

This is why I think as web designers, we need to avoid the use of templates, or simply mimic what the popular look is when creating sites for clients. What works for one site doesn’t always work for another. We need to figure out specifically for each site we build, what type of feeling we want to provoke. Once we nail that down, then use the full design arsenal at our disposal. The so called styles such as “grunge,” retro,” “minimalistic,” or even “web 2.0″ are simply byproducts of of a clear thought process.

Emotional response doesn’t have to be triggered by pure visual stimulations. Take Google for example, it’s known for its “non design” design. Millions of people use it daily because it’s fast and reliable. This is what people associate Google with. All the other popular web apps share the same essence. Web sites range so vastly in nature but as long as we go with the “design for emotion first” approach, we’ll end up with a good design.

In a way, we’re a lot like film makers. We command a slew of cast members from all aspects. Like film making, our work succeeds or fails, based on how much it affects the human psyche.

19 comments

also feel free to contact me on twitter or via email
Dean 10-08-08

Jin,

Emotion is a huge player in how we perceive everything. Take this website: http://www.breathingearth.net
The first page is extremely simple, black background and white writing, but the emotion it puts out is strong and prepares you for the next page after you enter. If you skipped that page and went directly to the main page, I firmly believe that how you felt would be different.
The main page does not entirely give off the desperation, and it can’t to do what it’s designed for, which is to give you statistics and information on a world wide scale. The enter page is what puts you in that “depressed mood”.
Good web designers can learn a lot from your blog post, and from websites that make them feel! Not just are cool to look at. After all, what is it that stays with you? A cool graphic or a feeling?

[...] Web Design: On Essence | 8164 “It looks pretty, but I’m not sure if our audience would feel it’s who we are.” Tags: design web branding usability [...]

Jin 10-08-08

@Dean, thank you for your comment.

After years of resisting Apple products, I finally got an iPhone last year. For the longest time I thought Apple stuff is just pretty eye candy. Now I realize it’s more than that. Apple products give you a “feeling.” That feeling is conveyed with best use of form and function.

Yorkali 10-08-08

I have read many articles and numerous blog posts about design/web design/tools, etc for a very long time. I’ve studied architecture up to the graduate level and I have been a designer since 1997 and I must say, this is the most insightful article on web design I have EVER read!

Jin 10-08-08

Thank you for your kind words Yorkali.

I’m still learning everyday.

Dmitry 10-08-08

Great post Jin. This ties in to the general umbrella of identity design. If your marketing direction and management is smart, your branding and marketing will flow through every part of the organization and media you produce — from press releases, marketing brochures to websites.

The website’s style must reinforce that branding direction. Obviously a website isn’t just a banner — it has a lot of everything: art, usability, design, marketing — which is why it’s a real skill to be able to really *design* websites and not just put together html and images. Using the latest techniques won’t give you the most effective results. Selecting which techniques to use carefully, knowing why you’re doing it and what you’re trying to achieve will.

Jeremy 10-08-08

Great post, Jin. As artists and designers we try to engage our audience, connect with them, make them feel empathy with our point of view. We cannot achieve this by mere technique; our work needs to resonate on an emotional level that touches the soul. This ususally involves stepping outside our comfort zone, trying new ideas, often stumbling around in the dark and failing many times before we succeed.

In this context I often think of musicians who are not technically brilliant, but can still produce music that stirs the soul. The Beatles, for example, intuitively had the gift of reaching out and connecting with their audience. And they never stopped experimenting and pushing forward the boundaries of their art.

Jin 10-08-08

@Dmitry: Branding is very important. In most cases, as you said a website is just an extension of the marketing campaign as a whole. When the client(mom ‘n pop biz) isn’t big enough to have a dedicated market department, web designers play a bigger role in enforcing branding.

@Jeremy: I agree with the musician example. Same for writers too. A great writer doesn’t have to be someone who uses all the fancy words or literary devices. As long as she/he can capture reader’s imagination, the book will sell.

Doug Greathouse 10-08-08

Wow! You nailed it! As a fellow designer, and life long student of art and design and also an owner or partner in several businesses, I completely agree with you that you need to put the emotion that you want the consumer to feel first before all else.

Antti K. 10-10-08

Jin,

In the days of template websites and “speed is the key,” I am glad you brought up the point of trying to capture the emotions and branding in each design.

In the beginning of “web work” pretty much every design was made from scratch for each client. Although not every design was a piece of art, at least design was an integral phase of the project, and clients also understood that it would take time.

Fortunately there still are clients who have a vision of what their presence on the web should look and feel like – something that’s almost impossible to achieve with out of the box templates – and they’re also ready to pay to achieve it.

Too many times, however, it becomes impossible to justify budgeting tens of hours for design when the client says “I can go on the Internet and get a template for fifty bucks!” There is no use in talking about emotions and branding, when you see the client crunching numbers in their heads.

It’s not just design that this “template” approach has discounted, its effect is much more deep-rooted than that. In my opinion, it has discounted the appreciation for web work in general. Clients expect to get increasingly complex sites with less money – quicker.

Some have the luxury of simply not dealing with such clients – most of us don’t. So how do we solve the problem of trying to come up with meaningful designs, quality work, while staying within a reasonable budget and maintaining our sanity?

Jin 10-12-08

@Antti, you raised a very good point.

Too many times, however, it becomes impossible to justify budgeting tens of hours for design when the client says “I can go on the Internet and get a template for fifty bucks!” There is no use in talking about emotions and branding, when you see the client crunching numbers in their heads.

This is a common scenario. Often, clients only see money saved upfront, as opposed to return on investment(ROI). We need to stress to them the importance of branding. Show them their successful competitors’ sites.

However in reality, as you said, some clients may just want to stick with a template, no matter what. In which case, you have two choices.

1) Turn down the project. If the client is the type that cuts corners, chances are he’s not willing to pay you much for the project anyways. You have to weigh if the minimal amount of money he’s paying is worth your reputation as a designer.

2) Choose a template that’s best suited for the client. There are some nicely designed templates out there. Find one that’s best matching your client’s branding. This is not something I’d recommend though, as I stated in my article. The main reason is, when you’re using a template, you’re not really designing. You’ll just be a production monkey. It won’t add anything to your portfolio. Also, the client won’t get a quality site.

Just my $0.02. I’d like to hear what others think on this topic too. Thanks Antti for bringing it up.

Jason Armstrong 10-13-08

Great post! Thanks for sharing and giving me a different perspective. I haven’t been a designer for very long, so it’s always nice to get ideas, views and thoughts of someone who has been in the game awhile.

Jin 10-14-08

@Doug, Thank you for your comment.

@Jason, thanks. Best luck with your web design career. It’s fun!

I’m sending this article to a friend/client of mine. In this case, it’s my client that wants all the bling and decoration which is totally unsuitable for what she is promoting.

This might help to put things into perspective for her.

Thanks Jin.

Jin 10-16-08

@Joomla, thanks for reading

Tushar More 10-18-08

Hi jin

my story is very similar to urs and I also came down to the same conclusion only my degree in advertising helped to understand it … still I m lazy guy and had not fixed my own site yet http://www.creativetushar.com

Nathan Beck 10-20-08

Lovely article, puts things into perspective.

Design, and web design in particular is a continuous learning curve. Not only is it constantly evolving rapidly, but it encapsulates so much and reaches so many people all over the world, all the time.

The only way to reach your highest potential is to work hard, constantly learn, accept and aim to improve on criticism, look at yourself and your work from all angles and it takes a good knocking down every now and again to make you step back and realise that no matter how far you may have come, there’s still so much farther to go.

Jin 10-20-08

@Tushar, Nathan: Thank you for your comments.

There’s always room for improving. I think that’s the beauty of web design field. The technology aspect keeps driving us forward, while the art/design aspect makes us reflect on the past. There’s never a dull moment.

[...] Visit Source [...]