The Web Designer’s Theory of Relativity

Relativism is the concept that points of view have no absolute truth or validity. For web designers, this has monumental implications. What is beautiful? Which typeface is perfect for this design? Red or Blue? The questions that we have to deal with on a regular basis often leave us, knowingly or not, returning to notions of relativity in order to walk away from a project without going insane. For the perfectionists among us (and most of us are perfectionists, are we not?!), this is little consolation though. Today we’ll discuss the theory of relativity as it applies to us… Read on Young Einsteins!

My grandfather told me this story once: He was buying some cloth and when looking at one of the cloth designs… and he thought to himself “that is so ugly!” He barely finished the thought when another customer came running in with her fiancé and mother-in-law and went directly to that same design he was thinking about shouting, “Here it is, the design we were looking for!” and bought the whole lot!

Read my full article here: http://webdesign.tutsplus.com/articles/design-theory/the-web-designers-theory-of-relativity/

Visual Direction in Web Design

One of the big secrets of design is learning how to guide the visual direction of viewers; This principle is often overlooked by even the most experienced designers, so today we’re going to take a deeper look at how it works. Visual direction is controlling the eye movement of the user; this can be achieved by carefully selecting your images and by well-placed and aligned design elements.

It is greatly established that the default eye movement throughout the page (in an LTR – Left to Right – layout) is from the top left towards the bottom right, however; this can’t be further from the truth, by arranging the composition elements in a certain way, a designer can control and force the movement of the viewer’s eyes in and around the layout of the design. For example, the eye will travel along an actual path such as solid or dotted line, or it will move along more subtle paths such as from large elements to little elements, from dark elements to lighter elements, from color to non-color, from unusual shapes to usual shapes, etc. Graduation of size, and repeated shapes and size of related elements subtly leads the eye as well.

Read the rest of this article on http://webdesign.tutsplus.com/articles/design-theory/visual-direction-in-web-design/

Concept and Inspiration: Design Theory for Web Designers

Why Developing a Concept Matters in Web Design…

In my last article, The Gestalt Principle: Design Theory for Web Designers, we established the need to start any design with the containing shell design first before going into the details, in this part we will discuss the methodology of coming up with a shell design.

Any containing shape should have a concept behind it – but sadly, lots of designers focus only on a nice-looking shape that really has no meaning behind it. Or worse, they design an entire website based on pre-existing frameworks without even a moment’s thought for how an original design might bring some real meaning to the project.

“Truly great design has meaning behind it – it’s not just pretty shapes, filters or typography – each element should actually say something about the underlying project.”

At this stage, if you followed the methodology of creative requirements gathering (How to Get the Right Creative Requirements From Your Client), you should have enough input to build upon and work out what container shape or style your design will fit in.

Start By Collecting a Library of Reference Images

One of the easiest and simplest ways to find ideas is to have asked your client to give you some keywords to describe how he wants people to feel about his site…. energetic, fresh, young, solid….etc, by simply entering these keywords in any image search such as Google or Bing.

Choosing from these images the ones you like, you will easily find yourself with a large library of brainstorming ideas to start from…

Read the full article here: http://webdesign.tutsplus.com/articles/design-theory/concept-and-inspiration-design-theory-for-web-designers/

How to Get the Right Creative Requirements From Your Client

Getting the correct creative requirements from your client can often be one of the biggest hurdles in any creative project… but it seems to be an especially difficult task in the field of web design, where clients often know a lot less about their actual needs for a website than we tend to give them credit for. Today’s article examines how to get accurate, meaningful, and actionable creative requirements from your clients.

There is a classic case in which the tenants of a large office building complained about the increasingly poor elevator service. A consulting firm specializing in elevator-related problems was employed to deal with the situation. It first established that average waiting time for elevators was too long. It then evaluated the possibilities of adding elevators, replacing existing elevators with faster ones, and introducing computer controls to improve utilization of elevators. For various reasons, none of these turned out to be satisfactory. The engineers declared the problem to be unsolvable.

When exposed to the problem, a young psychologist employed in the building’s personnel department made a simple suggestion that dissolved the problem. Unlike the engineers who saw the service as too slow, he saw the problem as one deriving from the boredom of those waiting for an elevator. So he decided they should be given something to do. He suggested putting mirrors in the elevator lobbies to occupy those waiting by enabling them to look at themselves and others without appearing to do so. The mirrors were put up and complaints stopped. In fact, some of the previously complaining tenants congratulated management on improvement of the elevator service.

Read full article here: http://webdesign.tutsplus.com/articles/workflow/how-to-get-the-right-creative-requirements-from-your-client/

The Gestalt Principle: Design Theory for Web Designers

The way that people see our designs strongly effects the meaning that they take away from them. The Gestalt Principle examines this phenomena; As such, it’s one of the fundamental principles that each and every web designer should consider when moving through the design process. We’ll also examine how understanding gestalt will improve your own workflow!

 Trying to come up with a good and creative design may seem easy for someone who has attended a design school, but for the 90% of web designers out there who never attended any design course or school coming mostly from either development or generally non-design backgrounds. The question still remains… what really defines a good web design? Is it just talent? A person who possesses some kind of “special” eye that knows what works out and what doesn’t? Or is there logic and scientific methodology behind all of this that can guide designers, critics and even clients into coming up with a great design.

This is part of a series of design-theory articles that will guide you through the basic principles of the design process. We’ll be focusing on the most important fundamental ideas that can make great differences in the final design.

Read the full article on Web Design Tutsplus: http://webdesign.tutsplus.com/articles/design-theory/the-gestalt-principle-design-theory-for-web-designers/

Color Usability (part 2)

Back in October 2008 I wrote about color usability, and recently during my lunch break on one of my business trips I noticed the below packets:

Mayonnaise & Ketchup Packets

Mayonnaise & Ketchup Packets

I had just put Mayo on my fries and Ketchup on my salad!!!, A white Ketchup packet and a red Mayo packet… how creative! According to the Gestalt theory, the mind easily views the whole of the object without really going into details, and according to this without reading the text, I assumed red=Ketchup, white=Mayo…

I would love to know if any of you have similar or related examples to both Part 1 and Part 2 of this series, drop me a comment if you do…

How to sell your design, and get it signed-off…

One of the most difficult steps in any design is selling that design to your clients or stakeholders and getting an approval sign-off, and it is something that I have grown to really enjoy as I have gotten older and became more experienced.

A lot of people would think that if you’ve understood your client and project well enough, made the right decisions and put lots of hard work, your design should sell itself and the meeting will go on very smooth, but as much as you would like your design to speak for itself, walking a client through the design and discussing comments always has a stronger impact and a higher probability for approval.

This article gives a few tips and tricks to help you turn this fearful step into something you would enjoy and look forward to…

read the full article on WebDesign Tuts+ 

Color Usability (part 1)

Anyone who’s had a flight on Egyptair during the past few years would have noticed that food is usually presented in blue platters, of all the colors in the spectrum, blue is an appetite suppressant. Weight loss plans suggest putting your food on a blue plate. Or even better than that, put a blue light in your refrigerator to suppress that craving for a midnight snack… Blue food is a rare occurrence in nature, consequently, we don’t have an automatic appetite response to blue. Furthermore, our primal nature avoids food that are poisonous. A million years ago, when our earliest ancestors were foraging for food, blue, purple and black were “color warning signs” of potentially lethal food.
Subjects presented with food to eat in the dark reported a critically missing element for enjoying any cuisine: the appearance of food. For the sighted, the eyes are the first place that must be convinced before a food is even tried. This means that some food products fail in the marketplace not because of bad taste, texture, or smell but because the consumer never got that far.

Its strange how large companies with highly experienced people have no idea of this critical concept of color usability…

Comfort Tropical AD

Comfort Tropical AD

Watching the above Comfort AD, what impression do the green vapors give? tropical scented perfumes, or bio hazard poisonous fumes?

On the other hand, notice how the brand and product colors for a lot of fast food chains like Arby’s, Hardee’s, KFC, Pizza Hut, McDonalds, Mo’men, Al Baik, and Wimpy usually have red or orange… a coincidence? Food researchers say that when humans searched for food, they learned to avoid toxic or spoiled objects, and red was the most popular food color.
The predominance of the color red in many restaurants is there only to make customers hungry, and to encourage them to order more than they normally would. Red walls and décor also cause people eat faster, since the color increases our normal levels of energy, it increases your appetite by increasing your metabolism.

Another part of the science of color usability, is the art of combining colors together, certain colours evoke particular emotions that can vary from one person to another based on certain experiences, More than half a century ago, Aemelius Müller, professor at the academy of Winterthur, Switzerland, came up with a formula that could predict the appreciation of a color-combination. In other words: Müller was able to predict which combination of colors most people would probably like, some online tools such as Kuler can help us calculate comfortable color combinations.

I have known several designers who would stick a certain color in each and every site they design regardless of brand colors or site purpose… I have also known project manager’s who would refuse a certain color regardless of its purpose or usage just because they hate it not knowing that there is a science involved in the process… people do not go to art or design schools for several years just to pick colors randomly based on their personal taste.

Check out Apple’s color video to get a stronger understanding of how color is perceived and download this free Color Theory PDF.

For further reading: