Psychology of Web Design - Smashing Magazine
Psychology of Web Design - Smashing Magazine
Psychology of Web Design - Smashing Magazine
Table of Contents
Designing For The Mind
Persuasion Triggers In Web Design
Designing For A Hierarchy Of Needs
10 Useful Usability Findings And Guidelines
30 Usability Issues To Be Aware Of
Designing For Start-Ups: How To Deliver The Message Across
Color Theory For Designers, Part 1: The Meaning Of Colorhyperlink
Color Theory For Designers, Part 2: Understanding Concepts And
Terminology
Color Theory For Designer, Part 3: Creating Your Own Color Palettes
About The Authors
Designing For The Mind
Francisco Inchauste
“Many years ago I received a tree identification book for Christmas. The
first tree in the book was the Joshua tree because it took only two clues to
identify it. Now the Joshua tree is a really weird-looking tree and I looked
at that picture and said to myself, ”Oh, we don’t have that kind of tree in
Northern California. That is a weird-looking tree. I would know if I saw
that tree, and I’ve never seen one before.”
So I took my book and went outside. I had lived in that house for thirteen
years, and I had never seen a Joshua tree. I took a walk around the block,
and there must have been a sale at the nursery when everyone was
landscaping their new homes — at least 80 percent of the homes had
Joshua trees in the front yards. And I had never seen one before. Once I
was conscious of the tree, once I could name it, I saw it everywhere.
Which is exactly my point. Once you can name something, you’re
conscious of it. You have power over it. You own it. You’re in control.”
GROUPING
When you look at a design layout and notice subtle touches — like the links
of a specific color — this is not just a nice design touch, or good usability. It
is tapping into the way your mind groups together things like shapes or
colors. This technique is used heavily in design and plays off the mind’s
natural tendency to try and find connections in elements. For example, in
logos like FedEx, the arrow is created in the mind by grouping the negative
space between the “E” and the “X.”
The neural mechanisms that we are tapping into are the same as those that
evolved as a survival trait in the brain to protect us from predators and defeat
their camouflage. Consider an early human seeing a golden color behind
some foliage. The mind grouped those together as one whole so we can tell
that there is a lion waiting behind the leaves. There are a set of design
principles known as Gestalt Theory which breakdown the various types of
grouping into specific categories. These can be explored for further
understanding of grouping.
So, when we create symmetry and balance in a design through the use of
guides like the grid and specific sizing of elements, we are creating
something that is more perfect (almost hyperreal) compared to what is found
in naturally created objects or organisms. It can be argued that most design is
asymmetrical, however there must be a balance in the design. If that balance
is not there, the mind will see the layout as asymmetrical and potentially
awkward or wrong.
PEAK SHIFT
Peak shift is how the mind reacts to differences between elements. The more
you exaggerate those differences the more you are drawn to them. For
example, If you were to present a lab rat with a square and a rectangle and
teach it that the rectangle will get them food, and the square will not, it will
obviously go for the rectangle. If you add a third element, a longer, skinny
rectangle, the rat will be drawn to that more than the other one because the
form has been exaggerated.
We notice this done in many designs with lighting for example. The shadows
and reflections, or soft spotlights behind elements is an exaggerated version
of what occurs with natural lighting. By pumping up these effects we are
creating a more aesthetically appealing lighting in our compositions.
ISOLATION
As designers we learn to create focus on the essential elements of a layout
and simplify the message that we are trying to communicate. In art, a drawing
that is merely a minimal outline of the subject can be much more powerful
than a 3D rendition of the same thing. This is why a sketch is more effective
as art than a full color photo.
CONTRAST
We know contrast well as a graphic design principle in relation to light versus
dark, curves versus angles, and dynamic versus static. This contrast is in how
the human retina and brain respond more to the edges and sharp stepped
changes in color or gradation. The visual information mainly is in the area of
change like the outline/edge of a person and the color wash background.
Therefore, this becomes a more interesting and attention grabbing area for the
eye and brain to focus.
So, by adding other dimensions of contrast to the design, like texture or color,
the design attracts the cells and holds their attention. Contrast can also exist
as repetitive elements like black and white lines that create a sort of visual
rhythm for the eye to follow. Creating areas of that contrast each other is vital
to a dynamic and well-composed design.
GENERIC VIEWPOINT
When given an object to view the mind prefers a less complex vantage point.
Take for example the cubes in the image to the right. The one on the left
looks to us like what a cube should look like, because it is from a generic
viewpoint. The cube on the right appears to be a flat hexagon to most people
because it is from a very specific viewpoint. With the sides filled in with
color we can finally see the cube. So although there are exceptions to this
rule, this more generic viewpoint is usually more aesthetically pleasing.
METAPHOR
Designers understand the use of metaphor very well. It is used in creating a
familiar user experience by tapping into real objects that people already
understand. In this case the understanding of metaphor is a bit different. The
metaphor is a sort of mental tunnel between two objects that at first seem
unrelated. On an unconscious level though, the mind has already made the
association.
Some examples of this are Shakespeare saying, “Juliet is the sun.” In this
case he is relating Juliet to being warm and nurturing, not that she is an object
in our solar system. Good metaphors are easy to grasp and universal. Some
design or imagery is compelling — because of the use of metaphor — the
moment we see it. That is because before we even understand why, our mind
has already deciphered it.
Knowledge Is Power
Great artists, like Monet, were experts at employing principles like peak shift
into their work. Although, I’m not sure he ever had to present designs to a
client like we do today. Sometimes it seems like a lack of (design)
understanding gives the client an upper hand. The difference between you
and your client’s neighbor’s friend’s 13 year-old kid with a copy of
Photoshop is that they have to pay you more. Which really means that
unfortunately to many clients you are both the same.
Experience and your portfolio of work certainly matter. But each client is
completely different with how they judge design. Paul Rand described
business clients as this:
How do you make decisions? If you’re like most people, you’ll probably
answer that you pride yourself on weighing the pros and cons of a situation
carefully and then make a decision based on logic. You know that other
people have weak personalities and are easily swayed by their emotions, but
this rarely happens to you.
You’ve just experienced the fundamental attribution error — the tendency to
believe that other people’s behaviour is due to their personality (“Josh is late
because he’s a disorganised person”) whereas our behaviour is due to
external circumstances (“I’m late because the directions were useless”).
Cognitive biases like these play a significant role in the way we make
decisions so it’s not surprising that people are now examining these biases to
see how to exploit them in the design of web sites. I’m going to use the term
‘persuasion architects’ to describe designers who knowingly use these
techniques to influence the behaviour of users. (Many skilled designers
already use some of these psychological techniques intuitively — but they
wouldn’t be able to articulate why they have made a particular design choice.
The difference between these designers and persuasion architects is that
persuasion architects use these techniques intentionally).
There are 7 main weapons of influence in the persuasion architect’s arsenal:
• Reciprocation
• Commitment
• Social Proof
• Authority
• Scarcity
• Framing
• Salience
How do persuasion architects apply these principles to influence our
behaviour on the web?
Reciprocation
Fig. 1: Book publishers offer free sample chapters in the hope that you’ll reciprocate the
favour and buy the book.
Fig. 2: Seth Godin knows how to leverage the principle of reciprocation. This comes from
one of Seth’s free PDFs and you’ll notice he’s not shy of asking you to return the favor.
Large view
Commitment
Persuasion architects apply this principle by asking for a relatively minor, but
visible, commitment from you. They know that if they can get you to act in a
particular way, you’ll soon start believing it. For example, an organization
may ask you to ‘Like’ one of their products on Facebook to watch a video or
get access to particular content. Once this appears in your NewsFeed, you
have made a public commitment to the product and feel more inclined to
support it.
Fig. 4: Oxfam uses the principle of commitment in the knowledge that a small change in
behaviour will lead to larger changes later on.
Social Proof
Some familiar examples of social proof on the web are, “People who shopped
for this product also looked at…” feature and Amazon’s, “What do customers
ultimately buy after viewing this item?”.
Persuasion architects also exploit this principle in the power of defaults. They
know that the default setting of a user interface control has a powerful
influence over people’s behavior. We tend to see the default setting as a
‘recommended’ option — the option that most other people would choose in
our situation. There are many examples of this being used as a black hat
usability technique, where additional items (like insurance) are sneaked into
the user’s basket.
Fig. 6: When you book a flight, RyanAir sneak travel insurance into your basket too.
Authority
Fig. 7: A tweet from @smashingmag is likely to be retweeted because the brand has such
authority.
For design guidance, we can turn to the Stanford Persuasive Technology Lab
(founded by B.J. Fogg) as they have developed a number of guidelines for the
credibility of web sites. These guidelines are based on research with over
4,500 people and are based on peer-reviewed, scientific research. Thanks to
their research, we know that you should highlight the expertise in your
organisation and in the content and services you provide; show that honest
and trustworthy people stand behind your site; and avoid errors of all types,
no matter how small they seem.
Persuasion architects exploit this principle by providing glowing testimonials
on their web site. If it’s an e-commerce site they will have highly visible
icons showing the site is secure and can be trusted. If the site includes a
forum, they’ll give people the opportunity to rate their peers: for example,
some web forums (like Yahoo! Answers) let users vote up (or down) answers
to posted questions. The top ranked answer is then perceived to be the most
authoritative.
Fig. 8: UXExchange allows users to vote up and vote down answers to questions, ensuring
that the most authoritative answer rises to the top.
Scarcity
Fig. 9: Phrases like ‘only 4 left in stock’ seem to stimulate a primal urge not to miss out.
Framing
Salience
Fig. 11: After placing an order for a TV at the Comet web site, the designers encourage
you to add other relevant items to your basket. This is exactly the right time to make the
offer: once you’ve ordered the TV they remind you that you’ll need to install it.
Designing For A Hierarchy Of Needs
Steven Bradley
USABILITY
How easily can users accomplish basic tasks? Can the person with the MP3
player easily figure out how to turn it on and off? What about how to play,
stop, pause and select a song? These are usability needs. Your design now
works consistently. The question is, can people figure out how to use it?
In addition to being easy to use, is your design forgiving? Pressing the wrong
button shouldn’t delete all of the songs on your MP3 player. Consequences
for simple mistakes shouldn’t be dire. If a slip of the finger deletes all music,
then the MP3 player has failed to be usable.
Usable designs are perceived to be of moderate value. We do have some
basic expectations of usability, but we recognize that many things don’t quite
work as we expect or would like. A usable design partly distinguishes your
website from those on lower levels.
A usable website has a navigation system that is easy to understand and use,
an organization that makes content easy to browse, readable text, and a layout
in which orienting oneself is straightforward.
PROFICIENCY
Does your design empower people to do more and to do better? Does the
MP3 player allow you to build playlists and easily search through songs?
Does it provide an easy mechanism for downloading songs from the Internet
and transferring them to and from other devices?
These are proficiency needs. It is not imperative that your MP3 player makes
recommendations of new songs based on your favorites, but it is desirable
and would improve the design considerably.
Designs regarded as proficient are perceived to function at a high level. A
design that allows people to do things not previously possible and to expand
on basic functionality is considered to be great.
A proficient website might include advanced search options, the ability to
combine data from different sources into more sophisticated levels of
information and Web-based tools.
CREATIVITY
Once all of the lower-level needs have been met, your design can move on to
creative needs. With these met, your design can now interact with people in
innovative ways. The design can explore and create things that expand on the
product itself.
Perhaps your MP3 player teaches music theory by making recommendations
based on the musical structure of the songs you listen to most, and it provides
chord charts and notes that play visually in time with the audio. Your MP3
player might allow custom skins or allow you to combine parts of songs to
create new music. Your MP3 player might be the most beautiful one on the
market.
Designs that meet creative needs are perceived to be of the highest level.
They generate a loyal fan base. If you’re confounded by Apple’s success,
wonder no longer. It satisfies creative design needs.
A creative website might include AJAX effects, aesthetic appeal and
interaction through voice commands.
CRITICISM OF THE DESIGN HIERARCHY
The same criticism applied to Maslow’s hierarchy could be applied to the
design hierarchy. Does a design have to be reliable before it can be usable?
Can’t you meet both at the same time? Could your design satisfy proficiency
needs for advanced users while not being the most usable for beginners?
Do we really have to get everything right at one level before committing
resources to higher levels? Will a market tolerate a product that fails for no
reason 10% of the time if it does everything beyond expectations the other
90%?
Again, while the hierarchy intuitively makes sense, the needs and desires of
the market will likely determine what is most critical to improve in the
hierarchy.
If you’ve ever written code, you can easily see how this hierarchy fits in with
both Maslow’s and the design hierarchy. It too is intuitive and could be given
the same criticisms as Maslow’s. Sure, poorly functioning code has to be
fixed right away, but there’s no reason one couldn’t write elegant and
efficient code from the very first line.
Examples
All of the websites below are well designed. Each has its own style and, for
our purposes, addresses a different level in the design hierarchy. Most
naturally meet lower-level needs, but some are more concerned with higher
levels and neglect some lower-level details.
Oliver James Gosling
Y3K
The websites of Oliver James Gosling and Y3K are both single-page
portfolios. They both meet functionality and reliability needs. They are also
aesthetically pleasing and start to meet creative needs. Oliver’s website has a
“Back to top” link that moves down the page as you do; this nice touch in
usability is absent on the Y3K website. Oliver also offers a PDF containing
all the information of his website, perhaps adding a bit of proficiency to the
design.
Cellar Thief
Cellar Thief meets functionality requirements and is another aesthetically
pleasing website. The aesthetics match the overall message about wines. But
reliability and usability could both stand some improvement. The three main
links at the bottom of the home page (“Choose a wine,” “Tell your friends,”
“Feel good”) all lead unexpectedly to the “About” page. Also, the website
sells only the three wines of the day, which is perfectly fine but not
immediately obvious.
Elan Snowboards
Elan Snowboards meets basic functionality and has an interesting aesthetic. A
lot is going on, and it’s hard knowing where to look. Links aren’t always
obvious, and as you click deeper into the website, it’s not always clear where
you are. On the other hand, the website offers a forum, community blogs and
video, all of which make the website more proficient for visitors. Overall, the
website focuses more on higher-level needs at the cost of some lower levels.
Given the audience of the website, this approach is probably justified.
CSS-Tricks
CSS Tricks is likely familiar to most of you. It meets needs of functionality,
reliability and usability. Chris Coyier has sections for a forum, screencasts,
freebies and code snippets, giving the website a layer of proficiency.
Creatively, the website has a nice, albeit familiar, blog aesthetic, and it has
appropriate touches of AJAX in the sidebar. Chris has also put a lot of work
into small details that help to fulfill creative needs.
Ali Felski
Ali Felski’s website is a combination portfolio and blog. It functions
consistently, and finding your way around is easy. With the three lower-level
needs met, the website adds creativity. One of the nice things about the
design is that you could remove all of the aesthetic touches and still have a
highly functional, reliable and usable design.
Positioning labels on the left also poses another problem: do you left-align or
right-align the labels? Left-aligning makes the form scannable but
disconnects the labels from the fields, making it difficult to see which label
applies to which field. Right-aligning does the reverses: it makes for a good-
looking but less scannable form. Labels above fields work best in most
circumstances. The study also found that labels should not be bold, although
this recommendation is not conclusive.
And now the baby is looking at the content. Notice the increase in people looking at the
headline and text.
We don’t know if Fever app is any good, but the sleek user interface and website make a
great first impression.
One interesting finding of these studies is that users really do judge a book by
its cover… or rather, a website by its design. Elements such as layout,
consistency, typography, color and style all affect how users perceive your
website and what kind of image you project. Your website should project not
only a good image but also the right one for your audience.
Other factors that influence credibility are: the quality of the website’s
content, amount of errors, rate of updates, ease of use and trustworthiness of
authors.
This is most important for the home page, where most new visitors will land.
So provide the core essentials there:
1. Name of the website,
2. Value proposition of the website (i.e. what benefit users will get from
using it),
3. Navigation for the main sections of the website that are relevant to the
user.
However, users’ habits have significantly changed since then. Recent studies
prove that users are quite comfortable with scrolling and in some situations
they are willing to scroll to the bottom of the page. Many users are more
comfortable with scrolling than with a pagination, and for many users the
most important information of the page isn’t necessarily placed “above the
fold” (which is because of the variety of available display resolutions a quite
outdated, deprecated term). So it is a good idea to divide your layout into
sections for easy scanning, separating them with a lot of white space.
For further information please take a look at the articles Unfolding the fold
(Clicktale), Paging VS Scrolling (Wichita University – SURL), Blasting the
Myth of the Fold (Boxes and Arrows). (thanks, Fred Leuck).
Google keeps all links on its websites blue for a reason: the color is familiar to most users,
which makes it easy to locate.
What color should your links be? The first consideration is contrast: links
have to be dark (or light) enough to contrast with the background color.
Secondly, they should stand out from the color of the rest of the text; so, no
black links with black text. And finally, research shows (Van Schaik and
Ling) that if usability if your priority, sticking to blue for links is best. The
browser’s default link color is blue, so people expect it. Choosing a different
color is by no means a problem, but it may affect the speed with which users
find it.
Apple‘s search box is a little too short, cutting off the query, “Microsoft Office 2008.”
In general, search boxes are better too wide than too short, so that users can
quickly review, verify and submit the query. This guideline is very simple but
unfortunately too often dismissed or ignored. Some padding in the input field
can also improve the design and user experience.
Notice the big content margin, padding and paragraph spacing on The Netsetter. All that
space makes the content easy and comfortable to read.
White space also makes content more readable. A study (Lin, 2004) found
that good use of white space between paragraphs and in the left and right
margins increases comprehension by almost 20%. Readers find it easier to
focus on and process generously spaced content.
In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page
(including white space, headers, indentation and figures) may not measurably
influence performance but does influence user satisfaction and experience.
The biggest issues are usually discovered by the first one or two users, and
the following testers confirm these issues and discover the remaining minor
issues. Only two test users would likely find half the problems on your
website. This means that testing doesn’t have to be extensive or expensive to
yield good results. The biggest gains are achieved when going from 0 test
users to 1, so don’t be afraid of doing too little: any testing is better than
none.
9. Informative Product Pages Help You Stand Out
If your website has product pages, people shopping online will definitely
look through them. But many product pages lack sufficient information, even
for visitors doing a quick scan. This is a serious problem, because product
information helps people make purchasing decision. Research shows that
poor product information accounts for around 8% of usability problems and
even 10% of user failure (i.e. the user gives up and leaves the website)
(Prioritizing Web Usability).
Apple provides separate “Tech Specs” pages for its products, which keeps complicated
details away from the simpler marketing pages, yet provides easy access when they’re
needed.
Provide detailed information about your products, but don’t fall into the trap
of bombarding users with too much text. Make the information easy to digest.
Make the page scannable by breaking up the text into smaller segments and
using plenty of sub-headings. Add plenty of images for your products, and
use the right language: don’t use jargon that your visitors might not
understand.
The square banners on the left sidebar of FlashDen are actually not ads: they’re content
links. They do look uncomfortably close to ad banners and so may be overlooked by some
users.
That said, ads that look like content will get people looking and clicking. This
may generate more ad revenue but comes at the cost of your users’ trust, as
they click on things they thought were genuine content. Before you go down
that path, consider the trade-off: short-term revenue versus long-term trust.
7±2 PRINCIPLE
Since human brain has some limits on its capacity for processing information,
it deals with complexity dividing information into chunks and units.
According to George A. Miller’s studies humans’ short term memory can
retain only about 5-9 things at one time. This fact is often used as an
argument for limiting the number of options in navigation menus to 7;
however there are heated debates about The Myth of “Seven, Plus or Minus
2″. Therefore it’s not clear how the 7±2 Principle can, could or should be
applied to the Web. Miller’s studies.
2-SECOND-RULE
A loose principle that a user shouldn’t need to wait more than 2 seconds for
certain types of system response, such as application-switching and
application launch time. The choice of 2 seconds is somewhat arbitrary, but a
reasonable order of magnitude. Reliable principle: the less users have to wait,
the better is the user experience. [UF]
3-CLICK-RULE
According to this rule users stop using the site if they aren’t able to find the
information or access the site feature within 3 mouse clicks. In other words,
the rule emphasizes the importance of clear navigation, logical structure and
easy-to-follow site hierarchy. In most situations the number of clicks is
irrelevant; what is really important is that visitors always know where they
are, where they were and where they can go next. Even 10 clicks are OK if
users feel that they have a full understanding of how the system works.
FITTS’ LAW
Published by Paul Fitts in 1954, Fitts’ law is a model of human movement
which predicts the time required to rapidly move to a target area, as a
function of the distance to the target and the size of the target. The law is
usually applied to the movement of the mouse visitors have to perform to get
from point A to point B. For instance, the rule can be important to place the
content areas in a more usable way to maximize their accessibility and
improve click rates.
INVERTED PYRAMID
The inverted pyramid is a writing style where the summary of the article is
presented in the beginning of the article. This approach makes use of the
“waterfall effect” well-known in journalism where writers try to give their
readers an instant idea about the topic they’re reporting. The article begins
with a conclusion, followed by key points and finally the minor details such
as background information. Since web users want instant gratification, the
inverted pyramid style, as supported by Nielsen, is important for web writing
and for better user experience.
SATISFICING
Web users don’t prefer optimal ways to find the information they’re looking
for. They aren’t interested in the most reasonable and sound solution to their
problem. Instead they permanently scan for quick’n'dirty-solutions which are
“good enough”. Applied to Web, satisficing describes exactly this approach:
users settle with a solution to a problem that is “good enough” — even if
alternative solutions can better fulfill their requirements in a long run. [I-D]
BABY-DUCK-SYNDROME
Baby Duck Syndrome describes the tendency for visitors to stick to the first
design they learn and judge other designs by their similarity to that first
design. The result is that users generally prefer systems similar to those they
learned on and dislike unfamiliar systems. This results in the usability
problems most re-designs have: users, get used with previous designs, feel
uncomfortable with new site structure they have to find their way through.
BANNER-BLINDNESS
Web users tend to ignore everything that looks like advertisement and, what
is interesting, they’re pretty good at it. Although advertisement is noticed, it
is almost always ignored. Since users have constructed web related schemata
for different tasks on the Web, when searching for specific information on a
website, they focus only on the parts of the page where they would assume
the relevant information could be, i.e. small text and hyperlinks. Large
colourful or animated banners and other graphics are in this case ignored.
Source: Banner Blindness: Old and New Findings
CLIFFHANGER-EFFECT (ZEIGARNIK-EFFECT)
Human beings can’t stand uncertainty. We tend to find answers to
unanswered questions we are interested in as soon as possible. Cliffhanger-
effects are based upon this fact; movies, articles and plots with Cliffhanger-
effect have an abrupt ending, often leaving with a sudden shock revelation or
difficult situation. The effect is often used in advertisement: asking the
visitors unanswered and provocative questions advertisers often tend to force
them to read the ad, click on the banner or follow a link.
Found out by Bluma W. Zeigarnik in 1927, this effect establishes an
emotional connection with readers and is extremely effective in terms of
marketing. Visitors can better remember what the ad is about and even
smallest details are stored more clearly and precisely. In Web writing the
Cliffhanger-effect is also used to bound the visitors to a web-site (e.g. “Grab
our RSS-Feed to ensure you don’t miss the second part of the article!”).
GESTALT PRINCIPLES OF FORM PERCEPTION
These principles are the fundamental rules of human psychology in terms of
human-computer-interaction-design.
• The law of proximity posits that when we perceive a collection of
objects, we will see objects close to each other as forming a group.
A real-world example of the law of proximity from MTV Music Awards 2002. Source.
• The law of similarity captures the idea that elements will be grouped
perceptually if they are similar to each other.
• The Law of Prägnanz (figure-ground) captures the idea that in
perceiving a visual field, some objects take a prominent role (the figures)
while others recede into the background (the ground).
The Macintosh logo can be viewed as a regular happy face and a happy face in profile
(looking at a computer screen). Source.
• The law of symmetry captures the idea that when we perceive objects
we tend to perceive them as symmetrical shapes that form around their
centre.
• The law of closure posits that we perceptually close up, or complete,
objects that are not, in fact, complete.
We perceive the letters ‘I’, ‘B’, and ‘M’ although the shapes we see, in fact, are only lines
of white space of differing length hovering above each other. Source.
You can find more information in the article Gestalt principles of form
perception
EYE-TRACKING
Eye tracking is the process of measuring either the point of gaze (“where we
are looking”) or the motion of an eye relative to the head. eye tracking
monitor records every eye movement and highlights the most active areas on
the site visually. Eye-tracking studies can help to estimate how comfortable
web users are with the web-site they’re browsing through and how quickly
they can understand the structure and system behind it. You can find some
interesting usability findings from recent eye-tracking study Eyetrack07.
Eye-Tracking: Source.
FOLD
The fold is defined as the lowest point where a web-site is no longer visible
on the screen. The position of the fold is, of course, defined by the screen
resolution of your visitor. The region above the fold (also called screenful)
describes the region of a page that is visible without scrolling. Since the fold
is seen directly without scrolling, it is often considered as the area which
guarantees the highest possible ad click rates and revenues. However, Fold
area isn’t that important. [Usability.gov]
GLOSS
Gloss is an automated action that provides hints and summary information on
where the link refers to and where it will take the user once it’s clicked. Hints
can be provided via title-attribute of links. From the usability point of view
users want to have the full control over everything what is happening on a
web-site; clear and precise explanations of internal and outgoing links,
supported by sound anchor text, can improve the usability of a web-site.
GRANULARITY
Granularity is the degree to which a large, usually complex data set or
information has been broken down into smaller units.
HOTSPOT
Hotspots are clickable site areas which change their form or/and outer
appearance once they are clicked. This is typical for :focus-effects when a link
or any other site element is clicked.
LEGIBILITY
Legibility indicates how clear the text is visually.
MINESWEEPING
Minesweeping stands for user interactions which aim to identify the links on
a web-site. In most cases minesweeping is a clear alarm signal for usability
problems. Usually minesweeping involves the user rapidly moving the cursor
or pointer over a page, watching to see where the cursor or pointer changes to
indicate the presence of a link. [Usability.gov]
PHYSICAL CONSISTENCY
This concept describes the consistent outer appearance of a web-site – e.g. the
position of logos, navigation, the use of graphic elements and typography.
Physical consistency is essential for better orientation and effective site
navigation.
READABILITY
Readability describes the degree to which the meaning of text is
understandable, based on the complexity of sentences and the difficulty of
vocabulary. Indexes for readability usually rank usability by the age or grade
level required for someone to be able to readily understand a reading passage.
Readability is not legibility.
WALK-UP-AND-USE DESIGN
A Walk-up-and-use design is self-explanatory and intuitive, so that first-time
or one-time users can use it effectively without any prior introduction or
training. [I-D]
WIREFRAME
A wireframe is a basic structure — skeleton — of a site that describes the
ideas, concepts and site structure of a web-site. Wireframes can be designed
as presentations which explain to the stake holders how the site is designed,
which functionality it offers and how users can accomplish their tasks.
Wireframes usually don’t have any visual elements or a complete page
layouts; they are often first drafts and sketches designers create on paper.
Example?
Wireframes: Example.
Designing For Start-Ups: How To Deliver
The Message Across
Andrew Maier
As a user experience designer, consultant and member of the New York tech community, I
instead advocate for using the Preactive Procedure:
1. Who’s itchy?
2. That itch isn’t being scratched.
3. This is how to scratch that itch.
By acting sooner, you are actually achieving more. You are creating the
future instead of just predicting and accommodating for it. You are
inventing a new reality, based half in what people need, and half in what
you want them to have. You can observe behavior sooner and course-
correct. It is the most transformative of all three procedures for both the
subject and the object.
No one would argue that determining what’s “good” for a Web design is
subjective, which makes it a frightening prospect. As D. Keith Robinson
wrote on A List Apart all the way back in 2005:
Knowing what people want on the Web can be hard. You either need to
have incredible empathy or have done fairly extensive research. This
empathy I’m talking about, in my opinion, can really only be built up over
time observing all kinds of people doing all kinds of things on all kinds of
websites and applications. Even then, as you move from project to
project, the people, problems and needs change.
With every new project comes a new target user, a new person to empathize
with. And just as with meeting a new person, understanding what they like
and don’t like takes time. If designers are to appeal to this new person, they
first have to get to know them. As both Whitney Hess and Cennydd Bowles
have asserted, focusing on a rapid proactive process — decide, act, think —
gives most start-ups a solid plan of attack. Not only do teams get to test
market viability first, they can then think about how they’ll differentiate the
product shortly thereafter.
Yes, this process makes brand-conscious designers uneasy, and
understandably so. In the beginning, though, without the context that a
prototype creates, designers must lean towards the relatively “safe” side,
where all interaction design begins: buttons look like buttons, drop-downs
look like drop-downs and perhaps even the names of start-ups sound like
start-ups. Robert Hoekman, Jr. calls this Designing the Obvious. I call it
designing the boring bits.
Because what this approach makes up for in usability, it certainly lacks in
propriety. To determine what’s appropriate (which is subjective), designers
must conduct field research.
Color in design is very subjective. What evokes one reaction in one person
may evoke a very different reaction in someone else. Sometimes this is due to
personal preference, and other times due to cultural background. Color theory
is a science in itself. Studying how colors affect different people, either
individually or as a group, is something some people build their careers on.
And there’s a lot to it. Something as simple as changing the exact hue or
saturation of a color can evoke a completely different feeling. Cultural
differences mean that something that’s happy and uplifting in one country
can be depressing in another.
This is the first in a three-part series on color theory. Here we’ll discuss the
meanings behind the different color families, and give some examples of how
these colors are used (with a bit of analysis for each). In Part 2 we’ll talk
about how hue, chroma, value, saturation, tones, tints and shades affect the
way we perceive colors. And in Part 3 we’ll discuss how to create effective
color palettes for your own designs.
Warm Colors
Warm colors include red, orange, and yellow, and variations of those three
colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises,
and are generally energizing, passionate, and positive.
Red and yellow are both primary colors, with orange falling in the middle,
which means warm colors are all truly warm and aren’t created by combining
a warm color with a cool color. Use warm colors in your designs to reflect
passion, happiness, enthusiasm, and energy.
RED (PRIMARY COLOR)
Red is a very hot color. It’s associated with fire, violence, and warfare. It’s
also associated with love and passion. In history, it’s been associated with
both the Devil and Cupid. Red can actually have a physical effect on people,
raising blood pressure and respiration rates. It’s been shown to enhance
human metabolism, too.
Red can be associated with anger, but is also associated with importance
(think of the red carpet at awards shows and celebrity events). Red also
indicates danger (the reason stop lights and signs are red, and that most
warning labels are red).
Outside the western world, red has different associations. For example, in
China, red is the color of prosperity and happiness. It can also be used to
attract good luck. In other eastern cultures, red is worn by brides on their
wedding days. In South Africa, however, red is the color of mourning. Red is
also associated with communism. Red has become the color associated with
AIDS awareness in Africa due to the popularity of the [RED] campaign.
In design, red can be a powerful accent color. It can have an overwhelming
effect if it’s used too much in designs, especially in its purest form. It’s a
great color to use when power or passion want to be portrayed in the design.
Red can be very versatile, though, with brighter versions being more
energetic and darker shades being more powerful and elegant.
Examples
The dark shades of red in this design give a powerful and elegant feel to the
site.
The true red accents stand out against the dark black background, and give a
powerful and high-end feeling to the site.
The very bright red accents on this site give a sense of energy and movement.
The dark red on this site, because it’s combined with grunge elements, seems
more like the color of blood.
Dark red, when combined with white and gray, gives a very elegant and
professional impression.
ORANGE (SECONDARY COLOR)
Orange is a very vibrant and energetic color. In its muted forms, it can be
associated with the earth and with autumn. Because of its association with the
changing seasons, orange can represent change and movement in general.
Because orange is associated with the fruit of the same name, it can be
associated with health and vitality. In designs, orange commands attention
without being as overpowering as red. It’s often considered more friendly and
inviting, and less in-your-face.
Examples
The bright orange box draws attention to its contents, even with the other
bright red elements on the page.
Yellow is often considered the brightest and most energizing of the warm
colors. It’s associated with happiness and sunshine. Yellow can also be
associated with deceit and cowardice, though (calling someone yellow is
calling them a coward).
Yellow is also associated with hope, as can be seen in some countries when
yellow ribbons are displayed by families who have loved ones at war. Yellow
is also associated with danger, though not as strongly as red.
In some countries, yellow has very different connotations. In Egypt, for
example, yellow is for mourning. In Japan, it represents courage, and in India
it’s a color for merchants.
In your designs, bright yellow can lend a sense of happiness and
cheerfulness. Softer yellows are commonly used as a gender-neutral color for
babies (rather than blue or pink) and young children. Light yellows also give
a more calm feeling of happiness than bright yellows. Dark yellows and gold-
hued yellows can sometimes look antique and be used in designs where a
sense of permanence is desired.
Examples
The bright yellow header and graphics used throughout this site give a sense
of energy and positivity.
The light yellow is used almost as a neutral in the header here, and combined
with the hand-drawn illustrations gives a very cheerful impression.
The bright yellow accents bring attention to the most important parts of this
site.
The bright yellow sunflower reminds visitors of summer on this site, and
combined with the antique-yellow background, it gives a homey and
established feeling.
The bright yellow header here adds a bit of extra energy to this design.
Cool Colors
Cool colors include green, blue, and purple, are often more subdued than
warm colors. They are the colors of night, of water, of nature, and are usually
calming, relaxing, and somewhat reserved.
Blue is the only primary color within the cool spectrum, which means the
other colors are created by combining blue with a warm color (yellow for
green and red for purple). Greens take on some of the attributes of yellow,
and purple takes on some of the attributes of red. Use cool colors in your
designs to give a sense of calm or professionalism.
GREEN (SECONDARY COLOR)
The bright green header of this site mixed with the leaf motif gives it a very
natural and vibrant feeling.
The more olive-toned green of this site gives it a natural feeling, which is
very appropriate for the content.
The brighter, more retro-looking greens of this site give it a very fresh,
energized feeling.
Blue is often associated with sadness in the English language. Blue is also
used extensively to represent calmness and responsibility. Light blues can be
refreshing and friendly. Dark blues are more strong and reliable. Blue is also
associated with peace, and has spiritual and religious connotations in many
cultures and traditions (for example, the Virgin Mary is generally depicted
wearing blue robes).
The meaning of blue is widely affected depending on the exact shade and
hue. In design, the exact shade of blue you select will have a huge impact on
how your designs are perceived. Light blues are often relaxed and calming.
Bright blues can be energizing and refreshing. Dark blues are excellent for
corporate sites or designs where strength and reliability are important.
Examples
The dark blues give this a feeling of reliability, while the brighter and lighter
blues keep it from feeling staid.
The dark blue gives this a site a professional feeling, especially when
combined with the white background. But the lighter blue accents add a bit
more interest.
The bright, sky blue of this site gives it a young and hip feeling, which is
emphasized by the reddish accents.
This site combines a range of blues, which gives it a refreshing feeling
overall.
The light, muted blue of this site gives a very relaxed and calm impression.
PURPLE (SECONDARY COLOR)
Purple was long associated with royalty. It’s a combination of red and blue,
and takes on some attributes of both. It’s associated with creativity and
imagination, too.
In Thailand, purple is the color of mourning for widows. Dark purples are
traditionally associated with wealth and royalty, while lighter purples (like
lavender) are considered more romantic.
In design, dark purples can give a sense wealth and luxury. Light purples are
softer and are associated with spring and romance.
The dark shade used here evokes the royal heritage of purple, which is very
appropriate for the Asprey luxury goods brand.
The light and medium purples here work well to convey a sense of creativity.
The brighter, more reddish purple of this site gives it both a rich and
energetic look.
The dark purple background here adds to the creative feeling of the overall
site.
The dark purple accents on this site give a sense of luxury and refinement.
Neutrals
Black is the strongest of the neutral colors. On the positive side, it’s
commonly associated with power, elegance, and formality. On the negative
side, it can be associated with evil, death, and mystery. Black is the
traditional color of mourning in many Western countries. It’s also associated
with rebellion in some cultures, and is associated with Halloween and the
occult.
Black is commonly used in edgier designs, as well as in very elegant designs.
It can be either conservative or modern, traditional or unconventional,
depending on the colors it’s combined with. In design, black is commonly
used for typography and other functional parts, because of it’s neutrality.
Black can make it easier to convey a sense of sophistication and mystery in a
design.
Examples
The black accents, mixed with the brighter colors and very dark brown
background add an edgier look to the overall design.
Black, when mixed with icy blues, looks colder.
The black here, mixed with dark grays and lime green, and an overall grungy
theme, adds to the edginess of the design.
The black accents here add an extra layer of sophistication and modernity to
the site.
The strong black accents on this site add to the overall sophistication of the
design.
WHITE
White is at the opposite end of the spectrum from black, but like black, it can
work well with just about any other color. White is often associated with
purity, cleanliness, and virtue. In the West, white is commonly worn by
brides on their wedding day. It’s also associated with the health care industry,
especially with doctors, nurses and dentists. White is associated with
goodness, and angels are often depicted in white.
In design, white is generally considered a neutral backdrop that lets other
colors in a design have a larger voice. It can help to convey cleanliness and
simplicity, though, and is popular in minimalist designs. White in designs can
also portray either winter or summer, depending on the other design motifs
and colors that surround it.
Examples
The white on the Fuelhaus site is used to contrast against the electric blue.
White backgrounds are very popular on minimalistic sites, and provide great
contrast to black typography.
Here, white is used as an accent color, which lightens the overall effect of the
site.
White combined with gray gives a soft and clean feeling to this design.
Again, white used as a background lightens the whole design.
GRAY
Gray is a neutral color, generally considered on the cool end of the color
spectrum. It can sometimes be considered moody or depressing. Light grays
can be used in place of white in some designs, and dark grays can be used in
place of black.
Gray is generally conservative and formal, but can also be modern. It is
sometimes considered a color of mourning. It’s commonly used in corporate
designs, where formality and professionalism are key. It can be a very
sophisticated color. Pure grays are shades of black, though other grays may
have blue or brown hues mixed in. In design, gray backgrounds are very
common, as is gray typography.
Examples
Light gray gives a very subdued and quiet feeling to this design.
The light gray background here adds to the modern feeling created by the
typography.
The cooler gray on this site gives a modern, sophisticated feel to the site.
The dark gray background and lighter gray typography lend a decidedly
modern look to this design.
The wide spectrum of gray shades used in this design combine to give a
sophisticated and professional look to the site.
BROWN
Brown is associated with the earth, wood, and stone. It’s a completely natural
color and a warm neutral. Brown can be associated with dependability and
reliability, with steadfastness, and with earthiness. It can also be considered
dull.
In design, brown is commonly used as a background color. It’s also seen in
wood textures and sometimes in stone textures. It helps bring a feeling of
warmth and wholesomeness to designs. It’s sometimes used in its darkest
forms as a replacement for black, either in backgrounds or typography.
Examples
The grayish-brown here lends a sense of responsibility and dependability.
The orangish-brown here gives a very earthy and dependable feeling.
The dark brown used in the background here lends an earthy and steadfast
look to the overall layout, and lets the brighter colors in the design really get
to stand out.
Woodgrain is a popular use of brown, and in this case the warm brown adds
some friendliness to an otherwise minimalist site.
Ivory and cream are sophisticated colors, with some of the warmth of brown
and a lot of the coolness of white. They’re generally quiet, and can often
evoke a sense of history. Ivory is a calm color, with some of the pureness
associated with white, though it’s a bit warmer.
In design, ivory can lend a sense of elegance and calm to a site. When
combined with earthy colors like peach or brown, it can take on an earthy
quality. It can also be used to lighten darker colors, without the stark contrast
of using white.
Examples
The ivory background here has a warm quality that’s tempered by some of
the cooler colors on the site.
The grayish-cream background here is made warmer by the orangish-brown
accents.
The cream background adds a sense of understated elegance this site would
otherwise be lacking.
The cream background here reinforces the antique theme that runs throughout
the design’s graphics.
The ivory combined with other light colors and jewely tones makes this site
have a very elegant overall appearance.
In Brief…
While the information contained here might seem just a bit overwhelming,
color theory is as much about the feeling a particular shade evokes than
anything else. But here’s a quick reference guide for the common meanings
of the colors discussed above:
• Red: Passion, Love, Anger
• Orange: Energy, Happiness, Vitality
• Yellow: Happiness, Hope, Deceit
• Green: New Beginnings, Abundance, Nature
• Blue: Calm, Responsible, Sadness
• Purple: Creativity, Royalty, Wealth
• Black: Mystery, Elegance, Evil
• Gray: Moody, Conservative, Formality
• White: Purity, Cleanliness, Virtue
• Brown: Nature, Wholesomeness, Dependability
• Tan or Beige: Conservative, Piety, Dull
• Cream or Ivory: Calm, Elegant, Purity
Color Theory For Designers, Part 2:
Understanding Concepts And Terminology
Cameron Chapman
If you’re going to use color effectively in your designs, you’ll need to know
some color concepts and color theory terminology. A thorough working
knowledge of concepts like chroma, value and saturation is key to creating
your own awesome color schemes. In Part 1: The Meaning of Color of our
color theory series, we covered the meanings of different colors. Here, we’ll
go over the basics of what affects a given color, such as adding gray, white or
black to the pure hue, and its effect on a design, with examples of course.
Hue
Hue is the most basic of color terms and basically denotes an object’s color.
When we say “blue,” “green” or “red,” we’re talking about hue. The hues
you use in your designs convey important messages to your website’s
visitors. Read part 1 of this article for the meanings conveyed by various
hues.
EXAMPLES
The primary hue of the background and some of the typography on the
Happy Twitmas website is bright red.
Using a lot of pure hues together can add a fun and playful look to a design,
as done in the header and elsewhere on this website.
Pure red is a very popular hue in Web design.
Cyan has a high chroma and so really stands out against black and white.
Another website with a high chroma blue, though it includes some tints and
shades with somewhat lower chromas.
Combining high and low saturation in the same hue can make for a
sophisticated and elegant design.
Colors with very high chroma are best used in moderation, as done here.
The saturation levels of many of the different hues used here are similar,
adding a sense of unity to the overall design.
Combining colors with similar muted saturation levels creates a soft design,
which is emphasized by the watercolor effects.
Hues with lower saturation levels aren’t necessarily lighter, as shown here.
An excellent example of how using a hue with a high saturation against a
background with low saturation can make the former really stand out.
Aother example of how low saturation colors make nearby high saturation
colors really stand out.
Value
Value could also be called “lightness.” It refers to how light or dark a color
is. Ligher colors have higher values. For example, orange has a higher value
than navy blue or dark purple. Black has the lowest value of any hue, and
white the highest.
When applying color values to your designs, favor colors with different
values, especially ones with high chroma. High contrast values generally
result in more aesthetically pleasing designs.
EXAMPLES
The high value of the yellow used here really stands out against the lower-
value black and gray.
This website combines blue hues with two different values. Because the
different values have enough contrast, the overall look is visually appealing.
Combining colors with similar values makes for an energetic and lively
background (which is enhanced by the design itself).
The red here has a lower value than the light blue, which itself has a lower
value than the white.
The human eye can pick up differences in value even among such similar
hues.
Tones
Tones are created when gray is added to a hue. Tones are generally duller or
softer-looking than pure hues.
Tones are sometimes easier to use in designs. Tones with more gray can lend
a certain vintage feel to websites. Depending on the hues, they can also add a
sophisticated or elegant look.
EXAMPLES
Tones can give websites a sophisticated look while adding some vintage and
antique flair.
This website combines blues in a variety of tones, shades and tints.
Tones can be intensified by adding gray around them, as done here.
The tones used in the navigation and background design here give this
website a vintage, hand-made feel.
A great example of how a pure hue can really stand out against a background
of tones.
Some colors that we might consider gray are actually tones of other colors. In
this case, the background is a blue tone but with a lot of gray added.
Shades
A shade is created when black is added to a hue, making it darker. The word
is often incorrectly used to describe tint or tone, but shade only applies to
hues made darker by the addition of black.
In design, very dark shades are sometimes used instead of black and can
serve as neutrals. Combining shades with tints is best to avoid too dark and
heavy a look.
EXAMPLES
Caio Cardoso’s website has a variety of green tints in the background and in
other elements.
The blue tint on Fernando Silanes’s website creates a soft and sophisticated
look.
Blue tints are popular for sky and nature motifs.
Tints are also popular in watercolor-based designs.
Tints combined together make for a sophisticated gradient.
Conclusion
While you don’t necessarily have to remember all of these technical terms,
you should be familiar with the actual concepts, especially if you want to
master part 3 of this series (in which we create our own color schemes). To
that end, here’s a cheat sheet to jog your memory:
• Hue is color (blue, green, red, etc.).
• Chroma is the purity of a color (a high chroma has no added black,
white or gray).
• Saturation refers to how strong or weak a color is (high saturation being
strong).
• Value refers to how light or dark a color is (light having a high value).
• Tones are created by adding gray to a color, making it duller than the
original.
• Shades are created by adding black to a color, making it darker than the
original.
• Tints are created by adding white to a color, making it lighter than the
original.
Color Theory For Designer, Part 3:
Creating Your Own Color Palettes
Cameron Chapman
Previous two parts of this series on color theory, we talked mostly about the
meanings behind colors and color terminology. While this information is
important, I’m sure a lot of people were wondering when we were going to
get into the nitty-gritty of actually creating some color schemes.
Well, that’s where Part 3 comes in. Here we’ll be talking about methods for
creating your own color schemes, from scratch. We’ll cover the traditional
color scheme patterns (monochrome, analogous, complementary, etc.) as well
as how to create custom schemes that aren’t based strictly on any one pattern.
By the end of this article, you’ll have the tools and skills to start creating
beautiful color palettes for your own design projects. The best way to
improve your skills is to practice, so why not set yourself a goal of creating a
new color scheme every day.
A Quick Review
Let’s start with a quick review of what was covered in parts 1 and 2. In part
1, we talked about how all colors have inherent meanings, which can vary
depending on the country or culture. These meanings have a direct impact on
the way your visitors perceive your site, even if it’s just subconsciously. The
colors you choose can either work for or against the brand identity you’re
trying to create.
In part 2, we covered color terminology: hue (what color something is, like
blue or red); chroma (how pure a color is, the lack of white, black or gray
added to it); saturation (the strength or weakness of a color); value (how light
or dark a color is); tone (created by adding gray to a pure hue); shade (created
by adding black to a pure hue); and tint (created by adding white to a hue).
These are important terms to know as we move forward and create our own
color schemes.
Traditional Color Scheme Types
There are a number of predefined color scheme standards that make creating
new schemes easier, especially for beginners. Below are the traditional
schemes, with a few examples for each.
The basic, twelve-spoke color wheel is an important tool in creating color schemes.
MONOCHROMATIC
Monochromatic color schemes are made up of different tones, shades and
tints within a specific hue. These are the simplest color schemes to create, as
they’re all taken from the same hue, making it harder to create a jarring or
ugly scheme (though both are still possible).
Examples:
Here are three examples of monochrome color schemes. For the most part
with these schemes, the first color (if we look at this from left to right) would
likely be used for headlines. The second color would be used for body text or
possibly the background. The third color would likely be used for the
background (or body text if color #2 was used as the background). And the
last two colors would be used as accents or within graphics.
ANALOGOUS
Analogous color schemes are the next easiest to create. Analogous schemes
are created by using three colors that are next to each other on the 12-spoke
color wheel. Generally, analogous color schemes all have the same chroma
level, but by using tones, shades and tints we can add interest to these
schemes and adapt them to our needs for designing websites.
Examples:
This is a traditional analogous color scheme, and while it’s visually
appealing, there isn’t enough contrast between the colors for an effective
website design.
Here’s a color scheme with the same hues as the one above, but with the
chroma adjusted to give more variety. It’s now much more suitable for use in
a website.
COMPLEMENTARY
Complementary schemes are created by combining colors from opposite
sides of the color wheel. In their most basic form, these schemes consist of
only two colors, but can easily be expanded using tones, tints, and shades. A
word of warning, though: using colors that are exact opposites with the same
chroma and/or value right next to each other can be very jarring visually
(they’ll appear to actually vibrate along their border in the most severe uses).
This is best avoided (either by leaving white space between them or by
adding another, transitional color between them).
Examples:
A wide range of tints, shades, and tones makes this a very versatile color
scheme.
SPLIT COMPLEMENTARY
Split complementary schemes are almost as easy as the complementary
scheme. In this scheme, instead of using colors that are opposites, you use
colors on either side of the hue opposite your base hue.
Examples:
A scheme where yellow-green is the base hue. It’s important to have enough
difference in chroma and value between the colors you select for this type of
scheme.
Using a very pale or dark version of one color in the triad, along with two
shades/tones/tints of the other two colors makes the single color almost work
as a neutral within the scheme.
Alternately, using one very bright hue with paired muted hues makes the
single bright hue stand out more.
DOUBLE-COMPLEMENTARY (TETRADIC)
Tetradic color schemes are probably the most difficult schemes to pull off
effectively.
Examples:
A rather unimpressive tetradic color scheme. The best way to use a scheme
like this is to use one color as the primary color in a design and the others just
as accents.
Tetradic color schemes can work well for creating color schemes with similar
chromas and values. Just add a neutral (such as dark gray or black) for text
and accents.
CUSTOM
Custom color schemes are the hardest to create. Instead of following the
predefined color schemes discussed above, a custom scheme isn’t based on
any formal rules. Keep in mind things like chroma, value, and saturation
when creating these kinds of color schemes.
Examples:
The colors here all have similar chroma and saturation levels.
Again, using colors with similar chroma and saturation is effective and
creates a sense of cohesion across a color scheme.
Using one color with a high chroma among other colors with lower chromas
is another effective method (the higher chroma color can act as an accent).
Creating a Color Scheme
Creating your own color schemes can be a bit intimidating. But it’s not as
complicated as many people think. And there are quite a few tricks you can
employ to create great color palettes right from the start.
We’ve been over the different types of color schemes above. Now, let’s try
creating a few of our own. There are plenty of tools online that will help you
create a color scheme, but let’s forget about those for now and just use
Photoshop.
Lets try breaking away from the color scheme types already mentioned, and
create some custom schemes. While it’s important to know the ways that
different colors interact and how traditional schemes are created, for most
design projects you’ll likely create custom schemes that don’t strictly adhere
to any predefined patterns.
So, for the purposes of our project here, we’ll create three color schemes each
for two different websites. Our hypothetical clients are a modern architecture
design blog and a high-end women’s clothing retailer who specializes in
Victorian-influenced apparel.
We’ll start with a basic monochromatic scheme, just to get a feel for each.
While I mentioned that traditional color scheme patterns aren’t used as often
in design, monochomatic color schemes are the exception to that rule. You’ll
likely find yourself using monochromatic schemes on a fairly regular basis.
For our apparel store, here’s a traditional monochromatic scheme, with white
added in as a neutral.
For our design blog, we’ve gone with a color scheme made up of shades and
tints of gray.
This is almost an analogous color scheme, but we’ve left out one color. It’s
made up of shades of purple and reddish-purple. These two colors fall next to
each other on the color wheel, and work well together, especially when
they’re used in different values and saturation levels.
Adding a couple shades of red to the gray color scheme adds a lot of visual
interest and the potential for creating extra emphasis on certain parts within
your designs.
Here, we’ve gotten rid of the purple hues and switched over to a burgundy.
Again this is next to the reddish-purple on the color wheel. We’ve also added
in a very pale yellow tone, which sits opposite purple on the color wheel.
This serves as our neutral, and looks more like an off-white color when
compared to our other hues.
While this color scheme at first glance looks like another standard gray and
red palette, if you look more closely you’ll see that the grays are actually
tones of blue. Blue and red make up two thirds of a tetradic color scheme, but
work just fine together without yellow, especially when the red is kept pure
but the blue is toned down to the point of almost being gray.
WHY SHADES, TONES, AND TINTS ARE IMPORTANT
As you can see from the color schemes above, using tints, tones, and shades
in your color schemes is vital. Pure hues all have similar values and
saturation levels. This leads to a color scheme that is both overwhelming and
boring at the same time.
When you mix in tones, shades, and tints, you expand the basic 12-spoke
color wheel into an infinite number of colors for use in your designs. One of
the simplest ways to create a professional looking color scheme is to take a
few tones, tints, and shades of a given color (avoiding the pure hue), and then
add in another pure hue (or close to pure) that’s at least three spaces away on
the color wheel (part of a tetradic, triatic, or split-complementary color
scheme) as an accent color. This adds visual interest to your color scheme
while still retaining a sense of balance.
Bright
Muted
Deep
Dark
Now, let’s create a color scheme in Photoshop using the same image. This is
a bit less scientific than the way Kuler does it. I usually just pick a color with
the eyedropper tool, and then keep clicking on different spots in the image
until I find other colors that go with it. Here are the results (this took less than
five minutes to do in Photoshop, so it’s not as time-intensive as it sounds):
Creating color schemes from images in Photoshop is easiest with images that
are relatively monochromatic to begin with. With more colorful images, it
gets trickier.
Let’s try another one, something more colorful this time. Here’s the original
image we’ll work with:
And here are the five color schemes that Kuler gives us from this image:
Colorful
Bright
Muted
Deep
Dark
And here’s what I came up with in Photoshop using the same image:
As you can see, the Photoshop version I came up with is completely different
than what Kuler came up with, but all of the schemes above are visually
appealing. The Photoshop version here took a bit longer than the one above,
partly because of the diversity of colors present in the image.
Scheme:
TRIVUONG.COM
Scheme:
OSCAR BARBER
Scheme:
MBA ARCHITECTS
Scheme:
STUDIO 13
Scheme:
JOY PROJECT
Scheme:
MORPHIX BLOG
Scheme:
EL DESIGNO
Scheme:
LEMONSTAND
Scheme:
Conclusion
We’ve really only just touched on color theory in this series. There are
specialists out there who have literally spent years refining their ability to
choose colors that are appropriate to any situation.
The best way to learn to create beautiful color schemes is to practice. Create a
scheme on a daily basis. You can use automated tools to do this at first (like
Kuler’s tool for creating schemes from images), or just open up Photoshop
and start. If you see a particularly beautiful or striking color in your daily life,
try creating a scheme around it. And take advantage of all the sites out there
that let you upload your color schemes and organize them for later reference.
This makes all those color schemes more practical and easier to use in the
future.
About The Authors
Andrew Maier
Andrew Maier designs interactions and user experiences for a variety of
clients having formerly worked with Hashrocket, a world-class web
application consultancy. He writes, speaks, and teaches about design and its
intersection with the internet. In addition he serves as the editor–in–chief of
the user experience blog, UX Booth. When he's not crazy busy, Andrew likes
singing, practicing yoga and drinking coffee. You should follow him on
twitter, here.
Cameron Chapman
Cameron Chapman is a professional Web and graphic designer with over 6
years of experience. She writes for a number of blogs, including her own,
Cameron Chapman On Writing. She’s also the author of The Smashing Idea
Book: From Inspiration to Application.
David Travis
David Travis is a user experience consultant and trainer at Userfocus. He has
a BSc and a PhD in psychology and he is a Chartered Psychologist.
Dmitry Fadeyev
Dmitry Fadeyev is the founder of the Usability Post blog, where you can read
his thoughts on good design and usability.
Francisco Inchauste
Francisco Inchauste is a UX designer who enjoys writing. You'll find more
about his adventures in the world of design and user experience on his blog
Finch. You can connect with him on Twitter.
Steven Bradley
Steven Bradley is a web designer and WordPress developer who moved to
Boulder, Colorado to be near the mountains. He blogs at Van SEO Design
and owns and operates a small business forum helping people learn how to
run and market their business better.
Vitaly Friedman
Vitaly Friedman loves beautiful content and doesn’t like to give in easily.
Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine,
an online magazine dedicated to designers and developers.