http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/

I came into my first job as a Web designer for Boeing back in the mid-1990s, with no formal design training. I was lucky to get some training on the job, and I would guess that my experience there was similar to that of many who are reading this article. I had the opportunity to work with some very talented and highly experienced designers who all had made the jump from other design fields to the Web.

It was there, as part of that training, that I learned about critiquing, both giving and receiving, through regular design reviews.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Formal Design Reviews = Fun? Maybe not. Educational? Heck, Yeah.

Image source

Those reviews weren’t fun. They were difficult and demanding and required quite a bit of effort. However, they were also meant to yield the best possible design work through careful evaluation and constructive criticism. They weren’t inherently negative, but they did focus on what was wrong with a design and what could be improved, rather than what was working—which, to some degree, makes sense. The goal was to improve the quality of work.

Many days I left those reviews feeling like a failure, and some days I felt unnecessarily beat up. But I was often reminded that these reviews weren’t personal and were tough for a reason. In hindsight, I’m glad I had them. They improved the quality of my work immensely and taught me quite a bit about how to evaluate my own work as well as the work of others. Still, I look back and can’t help but pick out problems—not with the process or intent, but with the specific things we used to evaluate our design work.

Almost exclusively, we evaluated the designs based on established visual design principles, many of which are sound and worthy of consideration when evaluating a website design. But, at least in the beginning, we rarely touched on things that went beyond the visual design of the websites and products we were building. I think we could be forgiven that; again, Web design was new then, and we were all learning.

Shortly thereafter, I got involved with the Web design community outside of Boeing (though Boeing had a thriving, diverse and rather large community in its own right), and I began to see how the rest of the world judged design work. It was mostly limited to informal comments in forums and such, again very much “thin-slicing” and focused on snap judgements and gut reactions related to style and visual design. I felt lucky to have what I had: formal, informed, passionate and professional feedback, even if it wasn’t as deep as it should have been.

How We React

This hold true today, more than 10 years later. A person tends to critique a design in one of several ways. The most common, and usually least valuable, is by gut reaction. Gut reaction is valid and can be valuable; in fact; if you look at most established design principles, you’ll see something about emotional connection. On the Web especially, this connection is often formed in an instant. It can and often does develop over time, but the initial reaction should be noted and can be important to the overall success of a design.

Gut reactions often hold little value in a critique because they are not properly articulated. The person giving the critique will reduce their initial reaction to words like “suck,” “awesome,” “like,” “hate,” which does nothing to help the designer improve their design. These kinds of reactions are fine to note, but to be valuable they need to be articulated well. This requires a longer look at the design and a clear understanding of what the designer is looking for.

The most common reason the process breaks down is because it’s hard to follow. It takes time, attention and an understanding of what is being evaluated. Unfortunately, people don’t seem willing or able to go that extra step to make their feedback, whether positive or negative, helpful. They’re more concerned about getting their gut reaction off their chest and moving on. In some cases, they simply don’t have the tools to reflect on and articulate their reaction. A good critique requires time and a grasp of fundamental design principles.

Honestly, why else would a designer fire off a “That sucks” comment? If you’re reviewing a fellow designer’s work, you should feel obligated to make your review as helpful as possible. Those unhelpful comments result more from a lack of understanding than a lack of willingness to put in the effort. To this end, I wanted to see whether established principles exist by which to judge Web design and whether we have guidelines along which to offer critiques. So, I did some research.

As With Most Things, Begin With Research

I began with some extensive research on Web design criticism and critique. I didn’t find much, but a few things are worth sharing. Jason Santa Maria, who is a wonderful designer and a leader in our field, wrote a good article about giving and taking criticism. He has some good advice there, and through his formal schooling he seems to have had a similar experience with criticism and design reviews that I did. He goes into the specifics of critiquing itself, and any designer could benefit from a quick read of it. As well, a few months ago a good post on responding to criticism was posted here on Smashing Magazine. It’s about responding to criticism rather than giving it, but some useful ideas are there.

As interesting as those articles are, I couldn’t find anything on giving critiquing Web designs in particular or on established design principles by which to judge websites and applications. In hindsight, and after many revisions to this article, I’m not all that surprised. Given the broad and multi-disciplinary nature of the Web, the subject is difficult to tackle.

Any Universal Web Design Principles?

Some attempts have been made to define universal principles for Web design, here on Smashing Magazineand over on the much-missed Digital Web, but these (for me at least) are too broad to be readily usable. They’re a good place to start, though, and worth studying.

More helpful would be to dig deeper and look at more specific principles, such as Principles of Design and Jakob Nielsen’s Usability Heuristics. With these, we could begin to dissect a Web design into its component parts and critique each individually. But let’s be realistic: not many will take the time to do that.

Learning the principles of usability, user interface, typography, visual design and so on is something every Web designer should work towards. This understanding will give you some of the language and criteria you need to effectively criticize. The rest is effort.

In addition to my research, I’ve spoken to many other designers about what makes for a useful critique. While one would expect many of the answers that were given, most people believe that it depends largely on engaging with the design and the designer, on having a conversation with them. I’ve noticed a lot of this happening in Dribbble, a great community for designers that’s currently in beta. I have a few invitations, which I’ll give to those with the best comments. Just note in your comment that you’re interested in the Dribbble invitation.

After all this research and reflection, I’ve come to define a good critique as one that takes a gut reaction, applies context and understanding to it, and then communicates that in a constructive, conversational way.

To this end, I’ve formulated some simple rules for judging a Web design.

Some Guidelines For Constructive Web Design Criticism

1. Note Your Gut Reaction, But Take Time to Explore It.

If you can’t articulate your reaction, stop there and keep it to yourself. As I’ve said, gut reactions can be valuable, but we need to explore them. Think of the last time you saw one of your favorite websites after a redesign. You may have liked it or hated it right away, but after using the website for a bit, your opinion (hopefully an intelligent one) became more moderate. Take the latest redesign of Facebook, for example. I was immediately confused. I think I actually typed something to that effect in the search field, which had been moved to where I thought the status update field would be. But I quickly found my way around and was soon comfortable with it. What’s more, the changes made a lot of sense overall. My gut reaction was expected; big changes can be disruptive, but I needed to look more closely to see that these changes were positive.

2. Learn to Articulate Your Observations, and Invite Being Questioned.

A designer should never, ever critique another designer’s work unless they are willing to have a meaningful conversation about it. This is a biggie. Expressing an opinion without offering to talk about it holds little value. You may be passionate about your craft (and your opinion for that matter), but for that passion to have much merit, you need to be willing to have a two-way conversation about it. Off-hand comments, particularly anonymous ones, are unhelpful for a number of reasons, most of which are pretty obvious. The point is simply that if you’re going to form and share an opinion, be willing to go a bit deeper and have a conversation about it.

3. Be Specific, and Offer Suggestions if Appropriate.

This is related to the last point. The more specific you are in praising or knocking a design, the more helpful you critique will be. Use descriptive terminology, speak the language of design, relate your opinion back to established principles. Think of your critique as one side of a debate in which you have to defend your opinion.

4. Always Consider Context and Audience-Appropriateness.

A personal website can be judged on how well it captures the personality of the designer. A mobile-specific website should be evaluated on a mobile device. And so on. This one can be hard, especially if you don’t know the context or audience. That said, avoid critiquing a design without knowing the context going in. Sure, by understanding visual design principles, you can critique just about any design on that level, but that’s usually just scratching the surface—helpful, but not nearly as helpful as it would be if you took the time to go deeper.

5. The Most Important Measure of a UI’s Success Is How Well It Meets Expectations.

I recently wrote about this in depth. The point is that you should judge the utility of a user interface by how well it meets your expectations. Of course, if your expectations are exceeded in some way, that’s great, too, but simply having everything behave as you expect is a good start.

6. Subjectivity Is Fine if Labeled as Such and Articulated Properly.

Following on the point about noting your gut reaction, judging a design subjectively is perfectly fine. Sometimes, even after having taken our time and knowing the context and audience and all that, a design still just doesn’t feel right. As long as you articulate that in a way that makes it clear you’re not sure why you feel that way (and if you accompany it with other helpful remarks), the feedback is probably worth sharing.

7. Don’t Neglect the Content.

Unless you take the time to use the website and to read and absorb the content, your review will likely be superficial. While content doesn’t often fall under the responsibility of the designer, it’s still a big part of the design. Judge a design based on how well it presents the content and facilitates its use or consumption. Of course, here we have one of those “it depends on the website” situations, so context is doubly important.

8. Study the Principles Used to Judge Design, and Learn the Language.

I’ve touched on this quite a bit already. It’s probably the best thing you can do to give better criticism and to become a more educated designer. In order to properly form and articulate an opinion about a design, we need to know the principles and patterns we’re dealing with. And without understanding the language, we can’t easily have a conversation about the quality of the design.

Conclusion

Giving a great critique isn’t rocket science, as long as you take some time and use a proper frame of reference (knowledge, context, criteria) to engage and think critically about the design. So, what do you think? Agree? Disagree? I’d love for readers to weigh in here on what they think makes for a useful Web design critique and share what they think makes a Web design successful. Also, feel free to critique this article… I know I could use it.

Hyperlinks (or links) connect Web pages. They are what make the Web work, enabling us to travel from one page to the next at the click of a button. As Web Standardistas put it, “without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”. So without links, we’d be lost. We look for them on the page when we want to venture further. Sure, we pause to read a bit, but inevitably we end up clicking a link of some sort.

[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]

Styling Links

When you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should also indicate where they will take the user.

Let’s start by looking at CSS selectors and pseudo-classes:

a:link { }
Unvisited link.
a:visited { }
Visited links.
a:hover { }
The user mouses over a link.
a:focus { }
The user clicks on a link.
a:active { }
The user has clicked a link.

The TLC uses not only plaint text links, but also icons to communicate the corresponding file types.

Ensure Contrast

Links should stand out not only from the background but from the surrounding text. If the font color is black and the link color is black, you have a problem. Make your links stand out by using one or more than one of the following techniques.

text-decoration: underline;
Underline.
font-weight: bold;
Bold.
font-size: 1.4em;
Enlarge.
color: #ed490a;
Color.
background-color: #c0c0c0;
Background.
border-bottom: 2px solid #a959c3;
Border.
If you decide to make links blue, then make sure no other text (including headings) is blue, because users will expect it to be a link, too.

Also, don’t underline text that isn’t linked because users expect underlined text to be a link. And keep in mind users with poor sight. Red won’t stand out to someone who is color blind, so consider underlining or bolding links, in addition to changing the color.

A helpful technique that I always use is to slightly blur the focus. Links with good contrast should still stand out when you look at the page.

Don’t Forget About Visited Links

Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.

Give visited links a darker shade of color, so that they stand out but aren’t as obvious as unvisited links.

Use the Title Attribute

The title attribute is usually overlooked, but it’s a convenient way to add descriptions to your links and can be especially useful for those who rely on screen readers.

1    <a href=”example.com” title=”This is an example link”>Example</a>
Use Button Styles

To make really important links stand out—say, a call to action or a “More info” link at the bottom—use a button style. And you can reuse the style again and again without having to edit any graphics.

For more information, check out “Super-Awesome Buttons With CSS3 and RGBA” and “Call to Action Buttons.”

Hover State

Offering feedback to users that they’re hovering over a link is good practice. The best way to do this is to change the background color, change the text color or remove the underline.

1    a:hover { text-decoration:none;
2    text-shadow: 0 0 2px #999;
3    }

The mouse pointer usually turns from an arrow into a hand when the user hovers over a link. But this functionality is sometimes lost; for example, in IE when the link contains a span element, or on “Submit” buttons. Fix this by adding the cursor type via CSS.

1    a:hover span { cursor: pointer }
Active State

Provide visual feedback to the user to indicate that they have clicked a link, so that they know to wait. One nice effect is to move the link down one or two pixels, which gives the link the appearance of being pressed.

view source
1    a:active { padding-top: 2px; }

Apply Padding

Here is a good usability tip. Add padding to your links. This way, the user doesn’t have to hover over the exact point of the text. Instead, they can hover in proximity and still be able to click. This works well for navigation links.
1    a { padding: 5px; }

Use Icons for File Types

If your links point to files in various formats, inform the user of as much using icons. This prepares them for the file type they are about to open, whether it’s PDF or JPEG, for example.

For some great resources, check out “Fam Fam Fam Silk Icons” and “Social Media Mini Icon Pack.”

Use Icons for Recognition

Just as you would use icons for file types, use icons to identify where links go or what they do. This user can more quickly absorb a visual icon than text.

Make Anchor Text Descriptive

Use meaningful text, not “Click here.” The problem with the latter is that it forces the user to read around the link to understand why they should “Click here.” Anchor text such as “See Britney on a beach” speaks for itself. It’s also more SEO-friendly.

Link Your Logo

Always link your logo to the home page. Most users expect this convention across the Web. That said, don’t assume that users know this. Regular surfers expect it, but a number of users still look for the “Home” link.

1    <h1><a href=”/” title=”Homepage”>Site name</a></h1>

1    h1 a {
2    background: url(images/logo.gif) no-repeat top left;
3    display: block;
4    text-indent: -9999px;
5    width: 200px;
6    height: 60px;
7    }
Don’t Open New Windows

Just don’t do it. Let the user decide when and where to open a new tab or window. Users expect links to open in the same window. If you really must do it, at least add an icon to show that this will happen. There are exceptions; for example, it you don’t want to break the flow of a check-out process.

Micro-Formats

As the Web becomes more semantic, consider incorporating micro-formats into your link structures, to help machines understand how a link fits into a page and its relationship to other pages. For example, the following…

1    <a href=”http://myfriend.example.com” rel=”friend met”>My Friend</a>
tells search bots that this text links to a friend who I’ve met, which is useful for discovering connections between links. You can also read more about micro-formats.

Showcase Of Links In Web Design

Komodo Media

Link is here

This post is part of our ReadWriteStart channel, which is a resource and guide for first-time entrepreneurs and startups. The channel is sponsored by Microsoft BizSpark. To sign up for BizSpark, click here.

In the last few months several startups have asked me how to approach corporate blogging. Judging by the frequency of requests, Gartner was right in suggesting that corporate blogging is rising up the “slope of enlightenment” and about 2 years away from widespread mainstream adoption. The road to enlightenment has been a long one. In the past ten years we’ve learned that company blogs should not be press releases, sales pitches or plagiarized quotes from Dale Carnegie. You reach enlightenment when you learn to respect your readers. If you want someone to bookmark or retweet your posts, then give them a useful resource. Below are a few approaches you can take to increase the dialogue and comments on your blog.

1. The Operations Blog: Many company blogs focus on the internal workings of the startup and how teams have managed to increase efficiencies. For example, marketing teams have dissected their efforts, COO’s have talked about their transition to cloud services and HR teams write about their employee wellness plans. Sometimes your story along with links to useful vendors is a great resource for others.

2. The Veteran / Inspirational Blog: This type of post is best suited to the second time entrepreneur, agency founder or well-established investor. It often offers stories about the climb to a position of power as well as some of the lessons learned along the way. If you’re attempting this approach you should already be in a position of mentorship for others. You want people linking to your article in the hopes that they’re revisiting it as a point of inspiration.

3. The Prediction Blog: Both the iPad and Google Buzz have been huge news stories in the last few days. Your little corporate blog isn’t likely to outshine the stories from major tech blogs and media outlets, but you can provide some relevant predictions for your specific industry. For example, if you’re a consumer facing web startup with a real estate focus, you could highlight the use cases for Buzz and its geo-locational features.

4. The Research Blog: If your company deals with large amounts of anonymized data or your startup specializes in analysis or monitoring, then the research blog is a good way to aggregate your findings and pinpoint trends. The best way to write this post is to summarize key findings and make suggestions on how others might adapt. If you’re not confident in your recommendations then you can ask for quotes from industry veterans. This method is often used by analysts and real-time monitoring startups.

5. The Community / Advocate Blog: This type of blog only really works if you have a large number of stakeholders who need your support and direction. Planet Mozilla is a great example of a resource that focuses on internal events; nevertheless, these internal events help thousands of open source developers contribute to Mozilla projects. If you’ve got lots of 3rd party developers, designers or contributors, this may be a good option for you.

6. The Coolhunter Blog: This blog is perhaps the toughest one to pull off because not only do you have to be confident in your ability to spot emerging trends, but you also have to make sure that the trends are relevant to your community. On-demand manufacturing site Ponoko does a great job of showcasing design while inspiring community members to build their own pieces.

Parents who want their children to discover a passion for music, sports, or other hobbies should follow a simple plan: Don’t pressure them.

By allowing kids to explore activities on their own, parents not only help children pinpoint the pursuit that fits them best, but they can also prevent young minds from obsessing over an activity, a new study finds.

“Passion comes from a special fit between an activity and a person,” said Geneviève Mageau, a psychology professor at the University of Montreal. “You can’t force that fit; it has to be found.”

The study focused on what psychologists call autonomy, the basic need to feel like you’re acting based on your own values and desires, not those of others. Controlling parents chip away at their child’s autonomy, by pushing them into a hobby, the researchers say. So when the kid picks up his clarinet it’s not out of a desire to play music, but due to a sense of obligation or a fear of disappointing his parents, according to Mageau.

To connect passion to autonomy, Mageau and colleagues performed three studies in which they surveyed hundreds of athletes and musicians ages 6 to 38 with different skill levels.

The surveys asked questions about the subjects’ level of passion, such as how often they practiced a hobby or how much they loved it. The psychologists then measured how much volunteers agreed with statements such as, “I have a tough time controlling my need to do this activity” to determine if their passion was obsessive and interfering with other aspects of their lives. To measure autonomy, the researchers also asked participants whether they agreed with statements such as, “I have a say in what happens and can voice my opinions regarding my activity.”

In one study, the researchers followed 196 middle-school students as they picked up a musical instrument for the first time. After five months, the psychologists found that one major variable that predicted whether children developed a passion for music was if their parents allowed them the freedom to practice on their own schedule. The passionate kids on average scored 9 percent greater on the autonomy scale than the non-passionate kids, which is a big effect in a psychology study, Mageau said.

The two other studies also showed that children who had little autonomy but did develop a passion for an activity were more likely than others to take it too far, becoming obsessed with the hobby.

Not only could these children miss out on truly enjoying their hobby, the result could grate on their self-esteem, according to the researchers. Obsessively passionate people attach their self-esteem to the pastime: If they play the clarinet flawlessly one night, they feel great, but if they miss a note, they can get depressed.

One of the three studies involved swimmers, skiers and musicians performing at a national level. Results showed that the participants’ level of autonomy best predicted if they had an obsessive passion compared to a harmonious one, with higher autonomy linked with harmonious passions. This freedom mattered more than the child’s own desire to specialize in their hobby.

The difference between forming a healthy and an unhealthy passion is to strike a balance between, say, the clarinet and hanging out with friends. “They don’t see [the activity] as defining their whole self,” Mageau said. “It’s a big part of who they are, but they have other interests too.”

But the study’s results don’t mean parents should let their kids run wild.

“I’m not telling parents to let their kids do whatever they want without limits,” Mageau said. “The most important message is to focus on the child’s interests and not to impose one’s own on them.”

LiveScience.com chronicles the daily advances and innovations made in science and technology. We take on the misconceptions that often pop up around scientific discoveries and deliver short, provocative explanations with a certain wit and style. Check out our science videos, Trivia & Quizzes and Top 10s. Join our community to debate hot-button issues like stem cells, climate change and evolution. You can also sign up for free newsletters, register for RSS feeds and get cool gadgets at the LiveScience Store.

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.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

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.

Another example of a traditional analogous scheme.

And the above theme modified for use in a website design.

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.

Another complementary color scheme with a wide range of chromas.

Don’t forget that beige and brown are really tints and shades of orange.

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.

Another palette with a wide range of chromas.

Triadic

Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.

Examples:

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.

It works just as well for darker color schemes.

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.

Adding in Some Neutrals

Neutrals are another important part of creating a color scheme. Gray, black, white, brown, tan, and off-white are generally considered neutral colors. Browns, tans, and off-whites tend to make color schemes feel warmer (as they’re really all just tones, shades, and tints of orange and yellow). Gray will take on a warm or cool impression depending on surrounding colors. Black and white can also look either warm or cool depending on the surrounding colors.

Black and white are the easiest neutrals to add into just about any color scheme. To add a bit more visual interest, though, considering using a very light or very dark shade of gray in place of white or black.

Adding browns, tans, and off-white hues are a bit trickier, but with some practice you’ll find adding them gets easier. For browns, consider using a very dark, chocolate brown in place of black. A pale off-white can be used in place of white or light gray in many cases. And tan can be used in place of gray, as well (create a tone by adding some gray to make it even easier).

Using Photos for Color Schemes

One of my personal favorite ways to create a color scheme is to use a photograph. There are automated tools online that can do this automatically for you (Adobe Kuler is one of them, and my personal favorite), or you can do it in Photoshop yourself.

Using Adobe Kuler, you can either browse or search for photos on Flickr, or you can upload your own image. If you’re stumped for what colors you want to use in a website design, try searching for related words on Flickr. Sometimes this can result in finding color schemes that you might not have thought of on your own.

Let’s try this method out, both ways (using Kuler and Photoshop). Find a photo you like on Flickr, one that you think evokes the feeling of the design you want to create. I chose this one:

Here’s the original color scheme that Kuler gives us when using this image:

One of the coolest features Kuler has for creating color schemes from images is their “Select a Mood” option. Included here are Colorful, Bright, Muted, Deep, and Dark. These are the schemes we get when using each of those moods with the same photo:

Colorful

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.

The Easiest Color Schemes

We’ve touched on this a bit before, but adding a bright accent color into an otherwise-neutral palette is one of the easiest color schemes to create. It’s also one of the most striking, visually. If you’re unsure of your skills in regard to creating custom schemes, try starting out with these types of palettes.

Here are a few examples to give you an idea of what I’m talking about:

You can see here how using browns instead of grays makes the entire scheme look warmer, even with the blue accent color.

You can use tones of any color instead of gray or brown in this type of scheme, just keep it very close to the gray end of the spectrum for the most fool-proof results. As a general rule, cool grays and pure grays are best for more modern designs. For traditional designs, warmer grays and browns often work better.

How Many Colors?

You’ll notice that throughout this post we’ve used color schemes with five separate colors. Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes.

A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors, and then add or subtract as you see fit and as you progress through the design process.

The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.

10 Sites With Great Color Schemes

To give you more inspiration, here are ten websites that have excellent color schemes. Some of the schemes below might look a bit odd at first glance but seeing how they’re actually used shows the wide range of possibilities color schemes can present.

Wentings Cycle & Mountain Shop

Scheme:

Trivuong.com

Scheme:

Oscar Barber

Scheme:

North East Peace III Partnership

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.

Further Resources

Here are some additional resources that should help you in creating your own color schemes, as well as some links with more information about traditional color schemes.

10 Super Useful Tools for Choosing the Right Color Palette
A round-up from Web Design Ledger that covers ten great tools for finding and creating color palettes.
100 Random Colors 2.0
This page will load 100 random colors, with hex codes. It’s a great place to check if you’re looking for color inspiration.
Classic Color Schemes
This article from Color Wheel Pro covers all the traditional color schemes in detail, with examples.
ColorMunki
Another color scheming tool. Their library colors tab is particularly useful for finding and creating monochromatic color schemes.
ColorSchemer
A color scheme gallery and tool with a free online version.
ColourLovers
A community for color and design that includes a huge gallery of color palettes, search functionality as well as tools to create your own color palettes.

http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

Smashing Magazine: http://www.smashingmagazine.com/2010/01/19/design-and-build-an-email-newsletter-without-losing-your-mind/

“We really love this new website you’ve built! Now we’d like to send out an email to all of our customers, friends and anyone, and it should look exactly like the website except with a spinning mailbox at the bottom, and have my photo, and my cat’s photo…” Ever had that conversation with a client? You’ve built plenty of websites in your time and could knock off a blog template in your sleep, but HTML email? Seriously? HTML email has the reputation (often well deserved) of being a horrible design medium.

The mere mention of it sends some designers into physical shock (try it if you ever get stuck in a tedious conversation about XHTML vs. HTML 5). The truth remains that businesses and individuals the world over send and receive email in HTML format by default every day, and many of them genuinely prefer it to plain text. So designers have a choice. We can stick our fingers in our ears, cover our eyes and hope it all goes away or we can learn to make the best of a challenging design medium and produce something that raises the quality level a bit.

This article gives you the information you need to plan, design and build an HTML newsletter that renders well and is actually useful to recipients. It’s a quick and dirty guide to effective email newsletters.

If you’d like to get started right now, here are the cheat notes to get you on the right track. Read on for more detail, examples and resources.

Respect your reader. Don’t waste their time or attention.
Ask nicely first.
Focus on relevance.
Design with a goal in mind, so that you’ll know if it worked.
Make unsubscribing easy.
Code like it’s 1999 (literally) and use inline CSS.
Always include a plain text version.
Don’t assume that images will be viewed.
Follow the law.
Test everything before sending, because you can’t take it back.
[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]

1. Respect Your Reader. Don’t Waste Their Time or Attention.
The email inbox is a noisy busy place for a newsletter to land. Hundreds of other emails are already on the pile, with folders, calendars and notes on all sides. The typical user is probably not waiting with bated breath for your email to arrive.

So when your email does arrive, make sure it doesn’t waste their time. Get to the point quickly, instead of burying the value under a mountain of greetings and headers and hilarious photos. Figure out why someone would want your email, and then tell them what that is right away.

One excellent example of getting to the point is the recent Haystack announcement. No need to guess what Haystack is for when you read the top of this email:

2. Ask Nicely First
When you are excited about something, you want to tell everyone. Clients often assume that everyone they have ever met, and many they have not, would love nothing more than to receive their latest news. Of course, this is not the case, and laws are in place to back them up.

If you are using an external email service, it will have its own policies on what permission you need in order to email people. Know which policies apply to you and your clients before you send. Explicit permission is best: ask people directly if they would like to receive emails about your topic. If you can show an example of what they’ll get and let them know how often they’ll get it, all the better.

People might forget actually asking to receive your email, particularly if they don’t send emails very often or signed up as a result of entering a competition. A short message at the top of your email will help people remember and make them more likely to read on. Here’s an example of a well-executed permission reminder:

In this case, the recipient gets an explicit reminder of the time and the place they gave their permission. Following up soon after the sign-up also ensures that the recipient doesn’t forget.

In 2006, Return Path conducted a survey that showed that “knowing and trusting the sender” was the biggest factor in whether recipients opened an email, so avoiding complaints of spam isn’t good enough.

3. Focus on Relevance
Even if you have met your legal obligations and have the explicit permission of your recipients, they don’t necessarily want to read your emails. Have you ever agreed to receive “special discounts” on an item, only to be bombarded by endless advertisements for different items from the same company? Sending valuable, relevant information to your subscribers is vital. You might not want to send information to everyone on your list just because you can. Consider carefully whether the information is useful to them and what they expect from you.

ISPs and email providers now consider relevance in their definition of spam, giving you even more incentive to focus on relevance.

4. Design With a Goal in Mind, So That You’ll Know If It Worked
Approach newsletter design as you would a website. Know why you’re sending the email and what result you want to achieve. We’ll cover this in more detail in the planning section below. The email below makes it very obvious what action its authors would like their subscribers to take:

Sit down with your client or boss and ask them plainly, “What is the one thing you want people to do when they get this email?” You might have to force them to pick only one to begin with! Designing to meet 10 different goals is hard, but you can design to support just 1 or 2. As we’ll discuss later, you can measure whether you’ve reached your goal in plenty of ways.

5. Make Unsubscribing Easy
We’re all tempted to hide the dull disclaimers and terms and conditions in Tiny Gray Font Land at the bottom of the page, but putting the “Unsubscribe” link there is a bad idea. There’s no point in emailing people who are not interested in your content any more. If your content is no longer relevant to them, let them unsubscribe easily. Making it hard will likely only lead to complaints of spam and leave people with a bad impression of your company.

Much better to make it clear and prominent; that way, if they decide in future that they would like to receive the information you’re offering, they will be confident in signing up.

It doesn’t have to be boring either. One of my favorites is, “You can unsubscribe instantly, but if you do we may scream, cry and then call you at 2:00 am begging you to come back. It’s your choice.” Not appropriate for every client, but you can have fun with more casual emails.

6. Code Like It’s 1999 (Literally) and Use Inline CSS
While most of us have put down our tools of trade from the browser wars, the fight goes on in the jungles of the email client, like those soldiers who don’t find out about the peace treaty until decades later.

Instead of a handful of browsers, we find more than a dozen major email clients, with HTML and CSS rendering ranging from great to appalling. So, to get decent results across a lot of clients, we’re back to using structural tables. Joy! Read on for tips and tricks to make coding the HTML and CSS in your design a not entirely frustrating experience.

Some email clients strip CSS out of the head but leave style blocks in the body (as invalid as this is). Gmail goes further and strips out all CSS from the head and body but leaves inline styling.

So, once you’ve completed your design, you will need to go through and add inline styles to your elements. Some email services help you with this; or you could use Premailer. You can also use some nifty tools for CSS inline styling, such as The Automatic CSS Inliner Tool or Inline Styler — the latter converts CSS rules into inline style attributes.

7. Always Include a Plain Text Version
Some people just don’t like HTML in their emails. They might be using older systems, or their system is locked down and they just can’t view HTML. Provide a plain text alternative to every email, so that the reader’s own email server or program can choose which version to display.

Again, your email service probably provides that capability. Plain text can be hard to read, so spend some time making it scannable and useful. Here is a recent example from Mark Hurst at Good Experience:

8. Don’t Assume That Images Will Be Viewed
If you have used Outlook or Gmail, you’ve seen that “Images in this email are not displayed” message many times. In many of the major email clients, your images will not be shown by default. Readers have to click a link or button to download and display them. Here is a recent email we saw. On the left is the intended design (well, the top half of it), and on the right is how it appears in Gmail by default. Not exactly clear!

You may be able to work around this with some types of embedded images, but they have their own issues, too. No matter how perfect your images are, they may have no impact, or even a negative impact, on the success of your email.

If your client insists on a pixel-perfect design, an all-image email may seem like a good option. But if images are not shown to the user, and they see no text, all they’ll get is a big fat annoying blank message. Always ensure that your email has HTML text as well as plain text. Many people might not realize they can choose to show images, and some just won’t bother. So you can’t assume that people will actually see your images at all. For a full rundown on what the default settings of each email client are, check out current conditions in image blocking.

How do you work around this? Here are a few ideas:

Avoid images for important content such as headlines, links and calls to action.
Add a prominent text-based link to a Web version of your newsletter.
Get recipients to add you to their address book or whitelist.
Use the alt attribute for all images to give Gmail users a better experience.
Specify height and width for images to ensure that the blank placeholders don’t throw your design off.
Test your design with images turned off before sending.

9. Follow the Law

Review any relevant commercial email regulations for your country. The best known of course are the US CAN-SPAM laws, but there are many others. For a great starting point, visit Email Marketing Reports.

You might need to include a physical building address in your email or include something like “[advertisement]” in your subject line. Many email marketing tools help you build templates with these required elements, to ensure your client does not send out emails without them.

Even though you may not be at risk for the largest CAN-SPAM fine ever, you could easily get into trouble with your email service if recipients complain and you have not adhered to the law. Legitimate providers have little tolerance for people who send emails that don’t meet legal requirements and could close your account or blacklist your server.

10. Test Everything Before Sending, Because You Can’t Take It Back
While reviewing current email client standards is a great start, nothing beats actually testing a newsletter in as many clients as possible. Several services help with design and spam testing, and the service you use may already have this built in. Make sure every link is working and that any personalization appears as expected. We always spot problems two seconds after hitting “Send,” so send some test emails to people who can give you feedback, and save yourself the despair of sender’s regret.

Tips, Tricks And Resources To Build Your Email
Though harder to find than general advice on Web design, plenty of help is available online for building a successful newsletter. Over at the excellent 24 Ways, Dave Greiner has a great list of technical tips and tricks that is worth reading in full (the comments, too). Here are a few of the best tips:

Use tables for structure, instead of CSS.
Nested tables are more reliable than padding and margins.
Avoid CSS shorthand. (Use full definitions.)
Don’t use PNG images because Lotus Notes 6 and 7 do not show them.
Explicitly set a margin for every paragraph, because the defaults vary a lot.
Read the “Rock Solid HTML Emails” article for all of the tips and follow-up comments. Your next step should be to bookmark the following links and save a bunch of time (and maybe your hairline, too).

HTML email templates and design galleries:
Campaign Monitor’s research on HTML rendering in email clients:

Testing tools:
When you’re sick of dealing with problems…

Everything else…

42 HTML Email Design Resources
A summary of the best HTML email design resources, covering overviews, guidelines, standards, templates, checklists, design tools, galleries and more.
Planning for Email Newsletters

We’ve covered some of the big design and technical factors that make HTML email a unique challenge, and this might be all you need.

Designing is not about lumping together HTML, CSS and a few images, though. It’s about solving problems, and email newsletters require planning, just like websites. Building an email is technically tricky but not impossible.

Building a newsletter that actually achieves its purpose is a different thing entirely. Your client (or boss) is paying you not so much to “design” as to help them sell more products, get more donations or win back clients.

If you don’t understand what an email is for, you won’t be able to give it the best design, unless it’s by accident. Here are a few questions to ask your client before putting mouse to pixel.

Who are you sending these emails to?
What is your main reason for sending these emails? (To drive sales? Build a relationship with subscribers? Start conversations?)
What type of emails are you planning to send?
What type of content do you want to send?
How often do you want to send emails?
Would you like to match the emails to an existing visual design?
Do you have examples of other emails that you like?
With answers in hand, you can set some measurable goals. One measurable goal might be to “Get 10% of subscribers to click through to the sales page,” or “Get the email forwarded to at least 100 new people this month.”

Keeping these goals at the front of your mind as you layout the newsletter changes the way you design. Suddenly you have something to help prioritize the content and a standard for deciding what stays in and what’s left out.

The work really begins once you actually send the email and can start measuring results against previous efforts.

Measuring the Success of Your Newsletter

Once you’ve set one or more goals, you’ll need to set up tools and processes to determine whether those goals have been met.

These might include sales figures from a particular department, reports from your email service provider or analytics from the website. If you use a specialized email sending service (such as Campaign Monitor, which is the one I use), you’ll get plenty of information in your reports.

Some common metrics:

Open rates = How many of those who received your email actually read it.
Click rates = How many of those who opened the email clicked a link.
Forwards = If your software has a “Send to friend” function, you can see how many people used it.
Unsubscribes = How many people have unsubscribed from your newsletter.
Conversion rate = How many of those who clicked through to your website went on to buy your product, download a trial or perform some other trackable action. Software such as Google Analytics can be used to record such actions and connect them to their source, including if it was your email campaign.
Statistics from one campaign are hard to interpret. For example, what is a good click-through rate for your particular audience? That’s very hard to know. When you send your next newsletter out to that same audience, you’ll have something to compare it to, and you’ll know whether you’re getting better.

You can use those statistics and metrics to persuade your client to listen to your proposals. If a picture is worth a thousand words, then a graph showing a solid climb in click-through rates is worth at least 3,000 words and a cup of coffee.

Make a change, test the result, make another change and then test again. If your software supports A/B testing, then you can easily compare two subject lines or pieces of content in a single campaign and save yourself a lot of time.

Learn More About Email Marketing

Once you have the newsletter down, you may be interested in learning more about how email marketing works. Adding email marketing as a service to your own Web design business or freelancing skill set could really pay off. Convincing clients to pay a fair rate for design can be tough, but email marketing is much more easily measurable. If you can show your client that they are making x amount of money from each email, charging them accordingly isn’t so hard.

Here are some of my favorite email marketing websites to get you started:

Instant Inspiration For Your Email Campaigns
Here are just a few top-class HTML email designs, selected from the Campaign Monitor customer gallery and other sources. Use these to spark your own ideas; but remember, they belong to the original designers and clients and so are not for copying. Click each image to view the gallery entry and full email. Please notice that some of the designs featured below were selected not by the authors of this article, but by the Smashing Editorial team.

Get Out There And Do It
The next time your client asks you to design an email newsletter, you’ll have all the tools required to do a great job. Even if you don’t personally like HTML email, you’ll be in a position to give every one of their subscribers a helpful and readable newsletter.

Either we step up and get it done or the marketing team, armed with a CD of 10,000 clip-art images, will do the job for us… and we all know how that ends up. If you have any questions or comments, leave a comment below; I’ll address as many as I can