Six Revisions » Web Design

The Difference Between Good Design and Great Design

Jacob Gube — Tue, 07 Sep 2010 10:30:49 +0000

What’s the difference between a good design and a great design?

When you sit down and start a new project, that should be one of the questions at the forefront of your concerns.

Yours is a quest to constantly outdo your own past work. To go further and genuinely become better at what you do rather than falling into complacency, stagnation, and eventually, obsolescence.

Unfortunately, the answer to the riddle of what makes a design great isn’t a simple, straightforward formula that you can apply to every design. There is no secret way of designing something that will suddenly make you a hero amongst your peers and lead to your work being featured on every CSS gallery on the web.

Instead of a quick, one-size-fits-all solution to becoming a great designer, this article will present a threefold response that arises from viewing design through three necessarily different perspectives: the designer, the client and the user.

The Designer’s Perspective

This one is my favorite. As designers, our ideal audience are those individuals who understand us the most because they are just like us.

We want to design for the kind of people that will drool over the beauty of our use of CSS3 no matter how impractical the implementation; people who will comment on the aesthetic quality of the textures, the richness of the color palette and the excellence of the typography in the design.

After all, compliments feel good and there is no niche more qualified to provide them than the design community.

As this site and many others prove on a daily basis, this is in fact a legitimate audience. There is money to be made catering to the interests of the world’s designers, and countless sites are designed specifically with this group in mind.

As an example, take the recent redesign of Inspiredology shown above. This is a site created by designers for designers. Consequently, it’s heavy on eye-candy. The header is a beautifully goofy piece of art that always grabs your attention for a few seconds no matter how many times you’ve seen it.

As you scroll around the page, you can see that the quality of the visual appeal is carried on throughout the design.

The difference between good and great design from the designer’s perspective is therefore simple: aesthetics. Put two websites in front of a professional designer, ask him to choose which is the best and chances are that you’ll see the prettier site chosen over the uglier alternative.

It’s simply the way we’re wired. Our knowledge of aesthetics isn’t something to be scoffed at — it’s what makes us valuable. If everyone could make something look beautiful on their own, we’d be out of a job. Attractive graphics have the unique ability to capture the attention of people who would otherwise be uninterested in taking the time to hear what it is you have to say.

However, possessing the ability to see past pure aesthetics is an important aspect to understanding truly great design. Which brings us to our next perspective: the client.

The Client’s Perspective

Unfortunately, not all designers can create primarily for the delight of other designers. In fact, only a tiny percentage of designers can enjoy this luxury. Most are forced to satisfy different types of people whose thought processes drastically differ from their own.

I used to spend my days working for a major marketing company designing dog food ads. Sounds fun, right? There was no one to ogle at my typography or compliment the complex layouts that I was forced to pull off in record time to meet deadlines; only a group of suits with bigger paychecks and zero design training who possessed expert knowledge of how to sell the product.

In this situation, focusing purely on aesthetics won’t garner you a single "great job" or "atta boy!" In fact, corporate advertising — be it print, web, or video — is infamous for an age old battle between creatives (the designer types) and marketers.

The creatives argue that customers will choose the product with the most attractive graphical representation.

Marketers counter by suggesting what customers really want is to have their demographic and psychographic needs addressed while forming a lasting connection with the brand (make-the-logo-bigger mentality).

This same dilemma carries out of corporate marketing offices and into the relationship between freelance designers and small business owners all over the world. The guy running the local auto shop doesn’t care if you win design awards for creating his website, he just wants it to be effective in driving customers into his store.

The difference between good design and great design from the client’s perspective is whether or not the product you’ve provided meets the goals that were originally presented. Though one of these goals is bound to be aesthetics, it is often the case that the final product is a less-attractive but more on-target version of what you originally presented.

As an example of a good client-focused design, consider the site below.

Here we see both perspectives at work. First of all, the designer has created a really great-looking site (not stunning or overly original, but attractive nonetheless). It’s bright, colorful, friendly and quite easy on the eyes. However, if you stop by the site you’ll really get a feel for how much information has been placed on the home page. This is undoubtedly a marketer at work (notice that it is in fact a marketing website).

Here the client needed to present a lot of information and the designer’s job was to do so in an attractive manner. Given complete control, the designer would’ve likely moved a lot of the text to another page — but ultimately the two sides worked together and were probably both forced to compromise a bit to create the finished product.

The User’s Perspective

This is where the ultimate goal of both marketing and design come together in either a harmonious or chaotic attempt to incite and/or facilitate a desired action. The difference between good and great design from the user’s perspective is that one paramount piece of the puzzle that trumps everything else.

When a design finally hits the real world, stereotypes go out the window. Real people don’t fit into the neat little boxes that we try to put them in. They’re complex, unpredictable and each one different than the next.

Some users will care a great deal about aesthetic appeal, others won’t give it a second thought. Some users will analyze every grammatical nuance while others will barely scan a few words.

In the realm of the web, the one thing that ties all your users together is whether or not the design is functional. From the perspective of the user, a great design is one that works. If they can jump on your site, locate the information they want and perform the actions they need to without getting confused, misdirected or frustrated — you’ve won them over.

As much as we designers love to criticize their profound lack of design, Google is the king of this category.

Whether or not you think Google’s strategy is appropriate, the fact is that they currently own 65.8% of the search market, with their competitors Yahoo! and Bing trailing behind at mere 17.1% and 11% respectively^[1].

A main contributor to their rise to the top was the simplicity to which they clung to for so many years and are only just now starting to relax in response to those gaining competitors.

This example proves that most people want to use a search engine to do just that: search. And when you look at the iconic Google page, there is no mistaking how to go about this task.

Google users don’t want a bunch of superfluous art or lengthy marketing ploys to distract them, they want the search bar.

As crazy as it sounds, in the case of Google, great design can be attributed to the lack of design.

Bringing It All Together

From peering into the three unique perspectives of the major participants in the professional design world, we can create a picture of what great design really looks like.

To the designer, great design is beautiful design. A significant amount of effort must be placed into making the product attractive.

To the client, great design is effective. It must bring in customers and meet the goals put forth to the designer in the original brief.

Finally, to the user, great design is functional. It’s easy to read, easy to use and easy to get out of it what was promised.

It’s important to note that the lines between the three perspectives are not so clear-cut. Many marketers will care a great deal about aesthetics, many designers will hold effectiveness in high importance and many users will be keen enough to pay attention to all three variables.

Truly great design, then, is when these three perspectives are considered and implemented equally to create a final product that is beautiful, effective and functional.

Keep in mind that the product must be a synergistic realization of the three perspectives and not merely contain elements ideally suited for each. The design must be attractive enough to catch a user’s attention, the message strong enough to communicate effectively to the user and the functionality simple enough to cause the user to take action.

Example: Kaleidoscope

To see what great design looks like in practice, let’s look at an example of a site that’s gotten a lot of attention recently (for good reason). Below is a screenshot of a website for the Mac application, Kaleidoscope.

First, let’s think about the designer’s perspective. Is the site attractive? Absolutely! The colors and graphics are amazing, the typography is classy and the subtle animation in the logo (stop by the site to see it) is pure designer bait.

Further, the single-page site is broken up into five unique but cohesive sections, each with their own wonderfully attractive appeal (two of these sections are shown above).

Now let’s think about the design from the client’s perspective. In this case, the app developer and the site designer were probably one and the same, so the designer-client relationship has a bit of an unfair advantage!

However, if we consider the marketing interests of the creators of the app, they are in fact represented well. To effectively sell the app, the developers would’ve wanted a site that strongly conveyed what the purpose of the app is as well as the features present to get the job done. Also important is a sense of value to entice the customer to make a purchase.

One of the first things you see on the page is the headline "Compare files with Kaleidoscope." This instantly conveys what the app does (compares files) and is reaffirmed by the bolded text in the sub-copy, "spot the differences." This is of course followed by an entire section devoted to each feature of the app. Finally, the value statement is conveyed with the claim that Kaleidoscope is the "world’s most advanced" application of its kind. Even stronger is the statement that the current price is introductory, conveying a sense of urgency to the customer.

To top it all off, let’s think about the site through the eyes of the user. It is attractive so it pulls us in, it’s effective in conveying its message to us about what the app is, but is it functional?

There are three primary things that a user would want to do here:

Download the app
Buy the app
Find out more information about the app

As you can see, both the "Download" and "Buy" buttons are prominently displayed near the top of the site.

Also notice that the price of the app isn’t hidden (it’s 29 euros) on another page as with many Mac application websites. This is a critical piece of information to the user and the developers aren’t making you work to discover it.

Finally, if the user is unconvinced and wants to know more, the thumbnails at the bottom are quick links to the section of the site corresponding to that feature. Here they find screenshots, video tutorials and detailed explanations so they can be fully informed before making a purchase decision.

Simply put, this is great design. Not because it’s attractive, not because it’s effective, and not because it’s functional — but because it is all three.

The Gist

The difference between good design and great design is not a simple matter of implementing all the right colors, illustrations and effects. Great design is, instead, what results when the perspectives of all of the key players are appropriately considered and reconciled in a synergistic fashion.

Aesthetics, effectiveness and functionality are equally important and together comprise your ultimate goal as a web designer.

References

Yahoo Swipes Search Market Share From Google

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

Use the 80-20 Rule to Increase Your Website’s Effectiveness

Jacob Gube — Thu, 02 Sep 2010 10:30:49 +0000

Want to increase your website’s conversion rate? Want more subscribers, opt-ins, members, customers? How about doing less work while you’re at it?

Too good to be true? Nope.

It’s possible if you apply the 80-20 rule: focus on the 20% that will bring you 80% of the results.

By doing an 80-20 optimization of your website — whittling your pages down to the 20% of things that produces 80% of the results — you’ll not only have a simpler site that’ll convert better, but you’ll have less work in developing and managing it since there’ll be fewer elements to think about.

Okay, so the above claim about less work was only partly true — you’ll have to do a bit more work upfront, but the benefit is less work and more rewards afterwards.

80-20 Whut?

The 80-20 rule is another term for the Pareto principle.

While dropping the term "Pareto principle" will make you sound smart and hip to your friends — not to mention increasing your conversion factor with the opposite sex — we’ll go with the simple and self-explanatory "80-20 rule."

So what the heck is this 80-20 rule? It means that 80% of all outcomes come from 20% of the causes.

Business management thinker Joseph M. Juran suggested the principle and named it after the Italian economist Vilfredo Pareto who observed in 1906 that 80% of the land in Italy was owned by 20% of the population. Juran developed the principle after observing that 20% of the pea pods in his garden contained 80% of the peas.

The 80-20 rule is also a common rule of thumb in business, i.e. 80% of your sales come from 20% of your clients.

The 80-20 Rule Can be Applied to Your Website

The 80-20 rule applies to anything. Personal tasks, business, software, whatever.

The 80-20 rule can even be applied your website.

Hey, websites — that’s the topic of this article. What a coincidence!

Applied in designing and running a website, we can interpret the 80-20 rule to say that 20% of things on your site would give you 80% of your desired results. What this means is that you should focus on that 20% and really perfect it, instead of spreading yourself thin.

Ruthlessly get rid of the other 80% of things as they’re non-essential details that only give you 20% of the results (the return of investment for that other 80% is low).

Some examples:

Sidebar widgets that aren’t being used
Social media buttons (how many users do you think click on the Digg button on the article out of the thousands that visit it?)
A list of the latest blog posts on the sidebar (users can go to the front page, it’s redundant)
Main menu links that aren’t being viewed much such as FAQ and Help pages (move them somewhere else)

After taking things out, perfect and focus on what’s left.

Why Care About 80-20?

Yeah, yeah, so the 80-20 rule is all fine and dandy, you might say.

"But what’s in it for me?" you might ask. "Why should I care about 80-20-ing my website? What are the benefits?"

All valid questions.

First, here’s how it benefits your website visitors:

Your visitors experience a lean, mean and simple site
Less distraction and clicking away from the main goal or call-to-action
Faster page response times
The stuff that’s left will be higher quality because you can concentrate on them and perfect them

And, even better, here’s how it benefits you:

Higher conversion rate: more subscribers, opt-ins, members, customers
A higher percentage will go to your primary call-to-action
Less work to do and more time to do it since you’re only doing that 20% which actually matters
Easier design and management work — less elements to deal with

5 Steps to 80-20 Your Website

Figure out what’s your main goal and/or call-to-action (the 20%).
Round up all the rest of the things and elements on your site that don’t pertain to your main goal/call-to-action (the 80%).
Toss out the unneeded elements from your site; easier said than done, but it’s a critical step.
Determine if your changes are effective; use split testing.
Tweak and perfect your site’s design and interface so that the remaining 20% are prominent and emphasized.

Think 80-20 Is Bullshitake? Here’s Proof It Works

80-20 rule proponent and analytics wizard Tim Ferriss has a website optimization case study of how an 80-20-optimized website received a 20%+ higher conversion rate.

The best part? Only a few simple changes were needed to be made.

It was just a matter of reducing the homepage such that it only contained 20% of the elements that produced 80% of the results. The rest were tossed out.

These are the essential 20%:

Clean call-to-action button
Simple value statement
Clear media credibility indicators

The Case Study: Daily Burn

The homepage originally looked like this.

Not bad, right? Nice, simple design.

But can you tell why it wasn’t optimized?

Go ahead, look. I’ll wait.

Back? Okay, so there’s actually a bunch of unnecessary elements on that homepage that didn’t fit with the main objective of the page; the 80%.

The things that don’t relate to the main call-to-action, which converts visitors by getting them to register:

A number tracker of how many calories burned
User activity list
Latest blog posts
A bunch of junk in the footer
Menu navigation at the top

So the website was 80-20-optimized by trimming the unimportant 80% of the elements from the homepage.

The simplified homepage now looks like this.

What a huge improvement.

80% of the items were removed, leaving only the 20% of items that function to increase the conversion rate:

The value statement and description
The call-to-action button
Media credibility indicators

So how did they know that the conversion rate increased? Two separate tests were done, split testing the simplified home page against the original (50% of visitors were sent to one design, 50% to the other).

In the first test, there was a 21.1% increase in the conversion rate. In the second test, a 19.8% increase.

So, there was a 20% increase in the conversion rate just from 80-20-ing their website. As you’ve seen, pretty simple stuff was done — no heavy overhaul needed.

But they didn’t stop there — they freakin’ 80-20′ed even more. It’s how it should be done.

They came up with 2 more variations of a new design that was even simpler.

Variation B

Variation C

And sure enough, both were an improvement over the new simplified design, with variation B being the clear winner.

Why?

There are 2 big changes:

Value statement was made even more clear
Much more noteworthy: one signup button instead of both the signup and tour button (so now instead of 2 options, a visitor has only one option)

By using the 80-20 rule to simplify their homepage, these folks optimized their site and increased the conversion rate.

So yeah. The 80-20 rule. It really works in improving a website’s effectiveness.

80-20 Your Website to Increase Conversions

If you want to increase your website’s conversion rate — and set yourself up to do less work while you’re at it — then you absolutely need to 80-20 your website.

You’ve now hopefully seen that the 80-20 rule applied to your website isn’t bullshitake but something that’ll actually help you.

Look at what 20% of things on your site would give you 80% of your desired results: more subscribers, opt-ins, members, customers. Then only have those elements on your site, while getting rid of the rest of the 80% of elements.

By using the 80-20 rule to optimize your website, you’ll be well on your way to increasing your site’s effectiveness.

Now go out there and destroy that unnecessary 80% from your website, soldier.

About the Author

Oleg Mokhov is the world’s most mobile electronic musician and co-founder of the royalty free music store Soundtrackster. He was born in Russia, but raised in the US. Follow him on Twitter as @olegmokhov.

Designing By Numbers: Data Analysis for Web Designers

Jacob Gube — Tue, 31 Aug 2010 10:30:43 +0000

Judging what’s best for an audience is never far from the web designer’s mind. The ability to predict whether a web design will soar like an eagle or sink like the Titanic is among the most subjective and complex measurements you will encounter.

While resources that explain best practices exist, and your visitors contacting you about serious issues and offering you feedback relating to your site will occur if you have the proper mechanisms in place — it’s ultimately your responsibility to be proactive and research, investigate, and determine the what, why and how to ensure widespread usability.

Designing by Numbers

Before we examine the types of statistical information you should be looking at — and the relevance they have to your web design projects — we first need to go over the 3 single-word questions that relate directly to all the design decisions you will make.

These 3 questions are ultimately at the heart of your research, analytics and motivation behind designing by the numbers.

What, why, and how is a simple design process that:

Defines what the issue is
Proves why it is an issue
Determines how to fix the issue with the optimal solution (if it is an issue)

What?

Of all the questions that may enter the mind of a web designer, "What?" is probably the word that relates to the task at hand. The process of understanding relevance and the usefulness of information explicitly relates to the decisions we undertake.

What do site users need?
What things frustrate site users?
What can I do in this design to accomplish the site’s objectives?
What’s wrong with the site?
What’s right about the site?
What can be made better?

Asking "What?" will yield to a lot of information that will help you make optimal design decisions.

What your audience requires is a fundamental principle of designing by numbers. Get Satisfaction is a feedback tool you can use to help you design by the numbers.

Why?

Next on the list of list of determining factors is the question of "Why?"

Because making changes or implementations beyond what you initially set out to achieve may cost time, money or resources — the ability to back up your ideas with hard data and facts will be enough to even make the bean-counting bosses go weak at the knees and take your professional guidance and ideas more seriously.

Why are people not using the comments?
Why is the community participation on the site low?
Why are users having trouble finding what they need?
Why do we need to support Internet Explorer 6?

Knowing what needs to be done is one thing — knowing the justification to why it needs to be done is another.

Reasons for why cross-browser support should be implemented can easily be seen when you calculate the percentages of users that use certain browsers.

How?

The last single-word question is "How?" which makes sense in that once you know what needs doing and why it’s required, the method of actualizing the "What" is important.

How should I go about increasing user engagement?
How can this design improve community participation?
How can I fix the issue of users not finding the product they need?
How can I create a design that works in Internet Explorer 6?

Statistical/Gathering Methods

When determining the best course of action for your visitors, there are 3 essential statistic types that will come into play in helping to answer the "what" question. (We shall come to the "how" and the "why" later on, so don’t worry!)

Each of these data gathering techniques have their own benefits and pitfalls so there isn’t ultimately a perfect solution.

However, designers wanting a well-rounded experience would be better off using a mixture of all 3 as they not only give you a range of quantitative results (raw numbers) but also qualitative research (such as open-ended responses and feedback).

On-Site Data

On-site data are the kind of information you obtain from website analytics software and monitoring user activity on your website.

While this type of data is often ideal in that they relate directly to your visitors, it often takes a while for activity on a new website to build up — and as such, depending on these alone may leave you in the dark as to your visitor’s basic primary needs upon launching the service.

In sites with limited or no traffic, or sites that are still in development — analytics software fails because there is no (or limited) data sources; you’re pretty much in the dark.

Most websites have some kind of visitor tracking mechanism installed, such as Google Analytics.

Third-Party/Generalized Data

Independent data are often the most useful to new websites, usually produced by large firms who provide demographic services like Net Applications or W3Counter.

These third-party data-gathering sites offer a glimpse at the general population, and by that, it will include useful details such as the browsers and devices they use, their country of origin, and so forth.

On-Site data gathering methods is going to be more accurate and will reflect your particular situation much better — for example, a web development blog will have a different audience than a cooking blog) — but accounting for independent statistics can aid you by providing a baseline to work from, especially if you have no user base.

There are plenty of statistics on the web, you just need to look! The figure above shows statistics from A List Apart’s survey of web designers.

Social Data

Socially-sourced data are a relatively new concept that has come out of the rise of networking sites like Facebook or Twitter, where people can promote or discuss your creation through an external site.

While there are still a large number of people who aren’t interested in the "social" aspect of social networking, the importance of leveraging these statistics of what visitors like, dislike and their comments attributing to such information can actually be more useful (in different ways) to the conventional number-based statistics from analytics packages.

Social networking can provide you with useful feedback to work with.

Designers Demographics

Now that we have covered the "what", we need to examine the "why" (and by association) the need to focus our attention on all the pretty percentages, pie charts and graphics that appear everywhere.

Ensuring your visitors can use and enjoy their experience with your web design is important and determining how we can provide that experience will all be down to using the statistics methods above and then narrowing the focus down onto what is most relevant for your audience.

While pretty numbers may seem impressive on their own, they’re not worth anything if they don’t speak to your niche, so successful sourcing of your data is critical.

Review websites are notorious for having subjective criteria of questionable validity.

If you’ve exhausted local statistics and have a general idea of the visitors you’re getting (and perhaps where they found you), and if you’ve gone further afield to seek out related demographics relating to research on an area which affects your niche, its worth going beyond the number crunching and seeking out "intelligent hits" that may help guide your decision making. Asking your community (or perhaps your competitions if you don’t have one!) what would enhance the experience can be great, just don’t try to please (or annoy) everyone and only implement what will benefit your users!

Getting to know your visitors can simply be a matter of knowing how to communicate.

With all of this information in regards to what you’re investigating the "why" (as in why changes need to be made) will become quite apparent. While it may seem natural, it’s quite easy to become so fixated on the number of visitors or re-tweets we get, that we actually ignore the most important thing a statistics package (or some solid research) can tell us – that our visitors will have their own specific set of needs and requirements that need addressing. As a final point on the matter of "why", if we don’t actively seek out ways to improve ourselves, we can’t hope to gain new customers.

Visitors may have JavaScript disabled which could leave them excluded from statistics.

A Quick Measurement

The next thing to take into account is how to filter the information once you’ve collected it (which meets the "how" element). Having lots of statistics and ideas may help, but filtering the stream of data will be critical to making sense of the best route to take in fixing a common problem or deciding the next step. The simplest way to prioritize your data is to follow the below, the higher up on the list the item is, the better and more potentially useful and reliable your research will be. Once the best information is extracted, you can refer to the numbers when making decisions for the design.

Determining the quality of your information is a mission critical part of the process.

Importance of Location:

Local
Independent
Social

Importance of Type:

Statistics
Research

Importance of Reliability:

Proven
Trends
Unproven

Importance of Margin:

Significant
Proportionate
Insignificant

Note: Using the above, a locally sourced bunch of statistics that are proven (by a significant margin) to be the best course of action would ultimately be the peak of what you can gather. Though as your research will lead to talking with customers, individual needs should be accounted for as well.

Variable Considerations

Before rounding up this article, it’s important that we consider the variables which may impact your statistics. While it’s great that there are plenty of studies that may assist you in decision making (like how to build a perfect font stack or what browsers you should support), it’s very important that we highlight the issues that will break down the cold harsh numbers and give you a little more to work with. Without making this article particularly heavy going (which isn’t the intention), the two types of variables you want to consider are mechanical and personal, and both relative to the visitor.

The first of these (mechanical) will directly affect the way in which your visitor interacts with your site, this isn’t as a result of their physical being, but more of their circumstances and equipment. In web design it’s obvious that the device used, the OS installed, the browser used, the scripting or plug-ins available or something else will affect their experience. While these are usually listed as independent statistics in packages, they are often related to each other in that a single user will contribute to a number of these breakdown listings, thereby it may directly affect the results.

Nothing forces greater demands on a website than the range of browsers that exist.

The second and probably one of the more important factors are the personal variables. The reason why these variables are so important is because they will often not appear in statistics packages and require you to undertake independent research to get the numbers or determine the viability of catering to their needs. Such factors include the accessibility level being required, the usability of a site (which won’t be a number) and the findability of information. While harder to pin down, it still makes sense to account for such variables as they directly and quite dramatically affect visitors.

Note: Error Margins also play a part in statistics, research made by a human rather than a computer can be subject to biases, errors and omissions – some of which may go unnoticed. The significance of information can also fluctuate depending on the audience who visit the site at any given time.

Research Matters

While this article is not a comprehensive guide to research and statistics (there are entire books on the subject), the importance of knowing your visitors is showcased. When you come to build a site or implement a new feature, it’s important that you do your homework to avoid falling into a pitfall that could have otherwise been foreseen earlier. Taking the time to understand how products like Google Analytics work, what their weaknesses are and how to get a well rounded overview and an intimate knowledge of your visitors gives you the best possible chance of hosting a great experience.

It’s also worth noting that while this article does indeed focus on the numbers and opinions that lead to decision making, it’s very important not to forget the individual as a person who visits your realm (no person should be directly treated as a statistic, they are all just as important to the full equation as each other) and while numbers are great for measurements, opinions often lead to the most amount of innovation. With this article highlighting the benefits of research and accounting for more than a personalised view of a site, hopefully you will go on to target a loyal audience in the future!

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Craftsmanship in Designing Websites

Jacob Gube — Mon, 30 Aug 2010 10:50:14 +0000

With high pressure from clients and crazy development schedules for web designers, it is easy to forget to spend the proper amount of time crafting a design.

In the interest of speeding things up, it’s tempting to skip over small details. This is an easy pitfall to which to succumb, but in the end, it can hurt your overall career.

This article will share methods and simple tools for building better portfolio pieces, having happier clients, and imbuing your work with more value.

Professional Pride and Value

If you do not take pride in your job, strive to build better value, and feel rewarded in your work, this article is not for you. The first step to being a better craftsman is care for your work no matter what it is.

Regardless of whether or not the subject is close to your heart, as a designer you should always be proud of your work. It is true that clients, deadlines, and projects will occasionally force you to make decisions that you do not agree with, but part of being a valuable and effective professional is genuine care for your work and your clients.

Love your craft and it will pay off. Real value starts at the core of how you handle your work in your practices, presentation, and approach.

Naming and Organization

Many designers do not think of file naming, organization, or conventions as a craftsmanship issue.

A common practice among particularly zealous designers is to jump right in and start designing, throwing caution and a naming structure to the wind.

This may seem fine at first, especially for small projects, but this approach will quickly turn your files and presentation into an inescapable rabble of confusing lists and vague labels. Clearly, this is not the beginning of a world-class design.

Properly labeled files and organized project structures will not only make you more efficient, they will also make you appear more professional.

You may be thinking that naming and organization is an internal issue. Think again. If you are working for a larger client, you will eventually have to send the files off to the client, a developer, or another party. People are always pleasantly surprised to find clearly named and organized files, a sensible layer structure and easy-to-understand internal documentation. This can be a brilliant opportunity to make a strong and distinct impression on your clients. Every little bit counts.

Sweat the Small Stuff

It is easy to tell yourself that the little details and meticulous little changes are lower priority and the overall layout or function is all that is important.

Before you go any further, think of any product that is successful; especially products designed to last: large appliances, cars, computers, clothing, etc. Chances are that the difference between a top-notch version and a cheap one are not in one dramatically different aspect, but rather in the sum of their parts.

Quality is in the Details

You have probably heard the old adage, "You get what you pay for." There are really no exceptions to this.

For instance, think of something pretty simple like jeans. Some cost $10.00 and some can get into the hundreds of dollars.

What are the differences? A good pair of jeans will have better fabric, more solid stitching, finely tuned details, durability, and an overall better fit.

These are subtle differences, but they add up to a substantially different experience. You might save a few bucks by going with a cheap pair of jeans, but at the end of the day, they will fade quicker, rip easier, wear out faster, and probably look more baggy and unkempt. Quality counts.

Do you want to be a premium developer or a discount outlet?

My point is simple: Sometimes the smallest differences are the most important.

I know you aren’t designing jeans, but a website is still important to design with purpose.

A website should achieve an objective, speak subtle cues, offer better conversion, help the client be more professional, and last long enough to be a worthwhile investment.

This kind of value is not achieved by rushing through a layout, cutting corners, leaving elements unlabeled, or leaving open ends.

What Details You Should Sweat

The benefit of paying attention to small details is clear, but what does this mean for a website designer? Here are a couple of common elements that have a high probability of being overlooked in most web design.

Using Guides and Purposeful Alignment

First, don’t eyeball it. Guides are an essential tool for carefully calculating alignment, flushing text and images, and checking your measurements.

Use guides to make alignments and ensure that your elements are cleanly and evenly laid out. Ctrl/Cmd + R to bring up the ruler in Photoshop, then click and drag from the top or side rulers to create the guide, then drag to place.

Alternatively, you can use View > New Guide from the Photoshop’s application menu for even more pixel-perfect accuracy.

Now that you have guides in place, make sure to use them correctly.

Symmetry is one of the only standards of beauty that is agreed upon across all cultures. Symmetry can also mean consistency. When your design is planned, consistent and not arbitrary — it will feel more complete and solid.

When you start designing, be sure to create gutters, margins, and spacing setups to lay out elements clearly.

Take the extra time to find a relative unit of measurement (such as the X-height of the logo’s typeface) and make sure that the spacings and alignments consistently use that unit.

Great alignment doesn’t happen by accident; it’s well-thought out and purposeful.

Another advantage of spending time on alignment and using sensible guides is that you will have less discrepancies from the mock-up stage to when it is handed off to the developer.

Don’t expect your web developers to fill in your blanks. Many developers use the site mock-up to create exact spacing and styles.

Send it off with all the right alignments, placements, and layout elements. Your client, your developer, and your budget will thank you.

Render and Identify Browser Type

It doesn’t matter if you are using @font-face, Typekit, or good ol’ fashioned browser-safe typefaces. Your designs should reflect which elements are to be rendered from the browser and which will need to be converted to images as CSS background text image replacement.

It is true that Photoshop cannot render type exactly how it appears in the browser, but it can get close enough.

Also, keep in mind that various browsers and operating systems will anti-alias text in slightly different ways. In the example below, I am using Windows 7 with Firefox 3.6.

Remember, your clients are not artists and will usually take a mock-up at face value, so it is important to effectively communicate what fonts will actually look like and how they will work within the context of the web medium.

Further, your designs should act as a guide for the developer. A good practice is to place the size, color hex-value, weight, and font in the placeholder copy. This helps the developer know exactly what colors and fonts to use at a glance, without having to check the PSD file or ask the designer.

What does this mean? Simply put, if you intend for an element to render from HTML/CSS, turn off the anti-aliasing.

If you change the kern or leading, make sure you use values that are easily measurable to CSS letter-spacing and line-height.

Use solid round font sizes when designing. A font rendered at, for example, 13.73px will not translate as cleanly as it could for the web.

Bottom line: don’t create any guesswork for the developer and the client.

Design with Real Content

Design is about problem-solving.

Designing without content is like trying to come up with a solution without knowing what the problem is.

You should begin every web design with as much information as possible. You can’t begin a project unless you know your client’s goals and intended points of conversion.

When in doubt, always push for more information.

Ideally, your client will supply you with a final draft of the content that needs to go online. Unfortunately, this isn’t always the case. You may find yourself working with no assets from your client.

So what should you do when you have no imagery or copy? Make it up!

If you haven’t been provided with any images to work off of, don’t just use any old placeholder. Instead, find a free stock image that supports your design.

If you don’t have any official copy, do your best to emulate it. As a rule of thumb, you should have enough information to fill out all the main headers.

Never use Lorem Ipsum for headers. It is a design element, not a replacement for copy. Lorem Ipsum is useful for conveying the size and shape of a block of text or a long list, but it does not say anything of the content that will eventually be there.

Having real content empowers you to create the best approximation of the final site possible, saving you countless days of revisions.

In the absence of real content, an educated approximation will make it easier for your client to give you useful and constructive feedback rather than frustrating, time-consuming revisions.

Your website design means nothing without relevant content and copy.

Designs that can live without their content are called templates because they are generally designed to give generic results and fit a wide range of simple needs.

Your clients probably aren’t hiring you for a template. They want a custom design, which means they want relevant content and copy.

Gradients and Texture

I can’t tell you if the website you are working on calls for texture or gradients, but they are essential techniques that the pros use to convey important elements such as dimension and personality.

Texture

Texture is by definition a subtle feature, but it is instrumental in conveying personality. Personality is critical in custom website design.

This is clear for a simple reason: your client chooses to hire you instead of buying a generic solution. A major point you need to communicate to their users is their unique nature or personality. If a user cannot gain a basic understanding of who your client is, then you have failed on some level.

Every business, no matter the size, has culture and interest that they exude via their products, branding, customer support, and other related services.

In general, a texture is a subtle but extremely detailed way to communicate these ideas.

Think of how you feel when you walk into a store. Recall the smell, the cleanliness, the staff’s helpfulness, etc. These are important sensations and associations. Unfortunately, we can’t put all of this onto the web, but we have a number of tools to communicate some key parts of it.

For example, when you walk into a Longhorn Steakhouse (recently re-branded), you see a clean slightly classy atmosphere, decor that is reminiscent of ranches, smoothly polished wood, and the faint aroma of leather.

If you were designing their website, you would start with these cues. For instance, you might use polished and worn wood textures, touches of leather texture with imagery like cowboy boots, ranch clips, and branding irons.

Texture can be a pattern, imagery, an actual tactile texture, or even consistent usage of color, but it is key to starting a conversation with the user.

Here are some fantastic examples of textures in website design.

Here are a few more excellent examples of using textures in web design.

Gradients

A gradient is basically a subtle shift in color from one value to another. It is a fundamental method of conveying volume and form. In other words, gradients can make elements feel more three dimensional and active so they pop off the screen a bit.

While sometimes flat color is appropriate, most times designers are being lazy instead of being thoughtful.

Keep in mind that gradients should be used to highlight items or create visual hierarchy.

Not everything in your design requires a gradient. Ideal candidates for usage of this technique are call-to-action buttons, action copy or navigation bars.

A good exercise when you have 20 minutes or so is to visit a few CSS gallery websites and pay careful attention to where designers are using gradients or shifts in color to highlight items, make them pop-out more, or convey more depth.

Once you have a few in front of you, sketch them on paper. Keep your eye on how subtle the shift in color or values are, if they go from left to right, or top to bottom, and even where the designer has placed a highlight to communicate light or a reflection.

This will really help you grasp what a gradient is actually achieving when you use it.

Here are some great examples of effective gradients in website design.

Here are a few more sites that use gradients well.

Design with Purpose

You have probably heard this before, but it bears repeating: design details should never be random details. You should always apply design elements, highlights, gradients, and careful alignments to assist the content and build a visual conversation with the user.

That’s easy to say, I know, but what does this mean for a designer in a real situation?

Let me suggest another exercise. Before you actually start your design, grab a notepad, and write down all your basic elements and how they tie to their content. For instance:

Navigation bar: allows access to major topics
Buy Product button: takes user to purchase the widget
RSS icon: takes user to RSS feed
Search bar: allows users to search the website

Once you have done that, rank them based on importance to your client’s goals.

Now that you know what is most important, start designing.

Once you get to a halfway point in your design stage, go back to your list. Start applying careful details to your priorities. Is the Call Us button the most important? Is the RSS icon placed in the right location? Will people use a Search bar designed this way?

Give your design elements a complementary color, or a high contrast analogous color with a dimensional gradient, a sharp 1px white highlight on top, and a thin but smooth drop shadow.

Move to the next element (say, the navigation bar). Give that a slight gradient to make it pop out and then give it a bright 1px underline to separate it from the content top.

Hopefully, you get the idea.

These are very specific examples, but you should be able to see the thought process.

Design details are powerful tools, not just pretty flourishes.

Smart Mock-Ups

If you have a cool jQuery rollover, hover state, or drop-down menu — don’t explain it — show it.

Not only will this practice help you work through potential design problems before they happen, but it will make your developer and client love working with you.

Imagine that you are building a house, and you get all the plans and the architect has left out all the windows and doors from the plans. You would be pretty annoyed, right?

Not only is that lazy, but now you will have to do all the problem solving, scoping and planning that was the architect’s job.

Not cool.

This is what it is like for a developer who gets a design with no hover states, no drop-down designs, or special element designs.

Furthermore, you just created a grab-bag of guesses that the client has not approved and may hate when the developer figures something out.

Better to do the legwork now and get it wrapped up in a nice neat little package.

Learn Some CSS

There is nothing more annoying for a developer then getting a mock-up ready for coding and finding that 80% of the stuff in it is barely feasible in CSS or is clunky and time-consuming.

Do yourself and everyone a huge favor and learn some CSS. Specifically, learn what CSS can and can’t do — and learn what it does well.

For instance, CSS is ideal for creating reusable and consistent elements, CSS can quickly (and at smaller file sizes) render color, type style, and more.

The newest specifications of CSS is powerful and can replicate many design features that previously required images and allows for new techniques that couldn’t be done before. Learn your weapons before you charge in to battle.

Take the example below. (These are by no means attractive but you will see my point.)

The call-out box on the left uses a browser-rendered typeface with no anti-aliasing, a solid 1-pixel outline and the heading uses a looping header gradient. This would be simple for a developer to code and reuse.

Now, the same theoretical call-out on the right uses an inner glow, a radial gradient on the inside content box, the header typeface is not browser compatible, the rendered Arial has anti-aliasing, the header uses a non-loop-able gradient and a fading divider line, and the whole box has a soft drop-shadow.

It is possible to do a few of these things with CSS3, but in order to keep the same look, developers will usually export the image to a file.

Technically, this works, but an image like that is not reusable, not scalable, not attractive, and requires the developer to export a new image for every box.

Bottom line: know the capabilities of CSS and use them to your advantage.

CSS is semantic, so it’s fairly straightforward. Want to adjust the font size? There’s a font-size property. Want to change the color of something? There’s a color CSS property. It’s not as complex as you would think and the language is very close to plain English.

Understanding what your building blocks can actually do is a powerful asset in building optimized and efficient design.

Remember, the more control you have over the actual implementable design, the better it will be in final practice.

Developers love solving technical problems but not design problems. Keep your job to yourself, and both of you will appreciate it.

Here are some great resources for an introduction to CSS:

Presenting Your Designs

This should be obvious, but many designers forget to put the time in to do this. Presenting a design to a client is half the battle.

Why is this important? Because your client will likely be making more emotional judgments than logical ones.

Make sure you treat their brand with love and respect. Put the mock-up into a nice PDF with a cover page or print it out (yes, I know its web resolution, but you can scale up to 300 dpi for this one).

Include a list of your decisions and always use positive language. You are here to lift up your client, so make sure to avoid negative comments.

This is where your underlying structure will really work for you. Take the following example under consideration. Imagine that you had to hire a designer by just seeing their desk. How would you make your decision?

Your clients will judge your level of professionalism and reliability by the way you present your work.

A good presentation exudes expertise, organization, and clear purpose in your designs. When you present the whole package in a clean and attractive way, you will have a happier more attentive client every time.

Conclusion

If you take nothing else away from this article, please remember this: love what you do, and let it shine through.

By respecting yourself, your work and your process, you will build value in yourself as a designer and produce satisfied, referral-happy clients.

Keep in mind that this article is only a primer. The road ahead is long, but if you truly love what you do, it will trickle down into meaningful improvements all across your life.

About the Author

Shawn Borsky is an interface and brand designer. Shawn runs Anthem Design Group and posts thoughts on branding and design via his blog, The Borsky. You can follow Shawn on Twitter or get in touch with him through his blog.

How to Use Illustrations to Spice Up Your Web Design Work

Jacob Gube — Thu, 26 Aug 2010 11:30:00 +0000

Graphic illustrations have become commonplace in today’s web design. They can add a unique branding element into an otherwise bland world of templates and corporate logos.

Although just 5 years ago you would be hard-pressed to find many websites looking for illustrators, times have changed, and we’re on the brink of many new and exciting web design trends.

Illustrations that come in the form of beautiful background scenery, animals and mascots for branding, or even cartoon versions of authors and designers can be found all over web design portfolios spanning the globe. Web illustrators and branding gurus have become a staple and have come to be high in demand in the web design industry.

I’ll be touching upon a few tips for incorporating illustrations in your web designs by looking through a handful of websites that use illustrations effectively.

I’m talking about digging deeper into the bedrock of design; truly searching for what makes illustrations "click" in the mind of our website visitors.

Why Branding is So Important

When you build a website, you want the look and feel of the design to be an extension of your business. Whether this means incorporating an already existing logo into the design or creating a memorable experience, the site needs to fit your brand.

When visitors fall into your site, you also want to make sure it leaves a lasting impact. By this, I mean that you want them to remember your site.

Illustrations help a lot with making a site memorable because with an eye-catching graphic scene or vector artwork, the page jumps out and has a visual element that’s unique just to that site. This is what helps your brand stick like fresh sap out of a maple tree!

Users eat creativity up; it shows that you really care about your brand and your site to go through the trouble of incorporating illustrations, which are difficult to conceptualize and pull off effectively in the context of websites.

Let’s take a look at a good example of how illustrations can be used effectively to establish a brand identity: an SEO company called ten24 Media.

Their site uses a background of a circus tent with a beautiful skyline and open grassy fields to entice readers into the upper area of the web design. The concept of using circus tents as a central illustrative element is from creative wordplay: their name spelled out is "tentwentyfour media." The web layout includes a brief description of what they do, as well as a link to their Services page ("Enter the Show").

The branding is consistent throughout the site; continuing onto other pages, you’ll see the circus tent outline near the top navigation links.

In addition, the site’s footer contains more grassy hills.

All these illustrative elements keep the whole site feeling very innovative and fun — the perfect positive emotions you want to create, especially to dispel negative misconceptions some people have about the SEO profession.

Simple Illustrations Work Well

Never underestimate the power of a simple illustration. Adding too much to your design will overwhelm your readers and have the opposite effects you are looking for.

Fatburgr is an interesting web application. Many would classify their design into the realm of new age "Web 2.0" gradients and fluff, but the concept actually stands for itself.

Just browsing the site is appealing and you can enjoy the cartoony aspects of each area.

The footer is good for a few laughs as well. Imagining the detail put into such a web design is breathtaking.

You can recognize each piece and understand how it ties into the overall site brand. Even the buttons and text areas have additional creative effects added to them.

Keeping content where it belongs will help your readers decipher what you’re trying to say a lot faster. Easy-to-read paragraphs with large enough font sizes and plenty of spacing is essential — simplicity at it’s best.

Another concept to take away from this example is the importance of typography.

Typography should match your illustration design concepts; they should be big, and almost pop out to your visitors — something illustrations and simpler structures can complement.

Implementing Your Illustrations into the Site’s User Interface

The next point I want to discuss is creating harmony with the site’s functions and the illustrations you use.

You can see this happening with Forrst, a new community for designers and developers for sharing code snippets and snapshots.

Although currently in private beta, you can check out their homepage with a flourishing background of trees and wooded areas.

In the foreground, you can see a park ranger parading around with a Forrst badge attached to his uniform. You can also see a brief description of the site and informative signs transposed on wooded backgrounds. This all adds to the ambiance of the site, including the clever "log in" log floating on what appears to be some sort of cloud.

And if that were all, you could consider Forrst quite the visual inspiration.

However, they push the use of illustrations further. You can go beneath the ground into the dirt below to see a sign up form. You can apply for membership quickly with just a few details, and the web form looks great.

A design like this can get complicated and will require plenty of skills. To produce this level of illustrative work could take years of practice in software like Adobe Illustrator to master, but they can be just the perfect touch in boosting your site design into the big leagues.

Never Use Illustrations Just for Aesthetics

Looking good is important. But adding design elements just to fancy up your site is the wrong attitude because a web design is a functional product.

All elements of your design should hold a purpose and have importance, including the addition of beautiful intricate illustrations.

Do you really need illustrations? How do they help meet your site’s objectives? These are a couple of questions you should be answering constantly as you conceptualize and execute your illustration ideas.

Sit down with a pen and paper to draft up ideas before even stepping into the digital world. This will help hash out a lot more ideas at once without locking yourself into the medium you use to design websites with.

Using similar ideas for inspiration can help a lot. CSS and graphic design galleries can be found everywhere. Go through a few and take notes on how their designs play out. Do they go a bit overboard compared to what you want? Maybe they don’t use color correctly? How does their content mesh with their illustrations?

Asking these questions will help get you on track. It’s always a long process when designing for the web. Keeping your designs in line with check and balances is a very handy skill to master.

The examples above are just simple ideas, but larger concepts can be implemented to realizing amazing results. Not everybody is an illustrator; I certainly don’t claim to be anywhere near an expert in creating illustrations like Brad Colbow or the guy over at Behind the websites. But with the power of Twitter and other networking tools, it’s not very difficult to meet very creative and talented designers from all over the world.

Your website’s design is a very important piece of the puzzle. It’s the part of a website your users can actually see.

About the Author

Jake Rocheleau is a social media enthusiast and an Internet entrepreneur. Having spent over 4 years working freelance web design, he frequently writes articles involving new-age design concepts and personal motivation. You can find him all around the web via Google Profile or on Twitter as @jakerocheleau.

Minimalism in Web Design: A Guide

Jacob Gube — Mon, 23 Aug 2010 11:30:48 +0000

Minimalism is a word that gets tossed around in a lot of different contexts. Whether it be a lifestyle or an art form, saying something is "minimalistic" can take on a variety of meanings.

In the web design field, minimalism is carving out an ever-increasing niche among designers that are looking to convey important content in a new way. Like just about any trend or theory in the web design world, minimalism can be easy to get wrong.

So what is minimalism in web design? Just as important, what is it not?

It’s easy to see how a minimal web design can be misconstrued as something that requires less effort or time to create. After all, conveying the feeling of simplicity and a primary focus is really the purpose of a minimal design.

However, saying that it requires less work couldn’t be further from the truth. Minimal web designs are strategically stripped of excess features and gimmicks in order to deliver a clear and concise message to the target audience.

A Minimal Mindset

In order to properly execute minimalism in your design, a focus needs to be established. Being able to present a clear message to your visitors is the core function of a minimal design.

Trying to execute a broad scope of information while still maintaining a minimal style can have pretty disastrous results, so before you dive into the actual design process, having a project plan and narrow scope will go a long way.

Take the time to consider what this site is going to be about. Not all sites can afford to dedicate themselves to a single mission and if this particular project is one of those sites, a different method of design may just be the best way to go.

If you have a clear focus, the next step is to consider what bits of information are going to be vital to your design and structure them in order of significance.

You may be surprised at how little information really needs to be presented to the user at a time in order to get your point across.

The Art of Taking Away

French writer Antoine de Saint-Exuper once said, "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."

Designers are often praised for the ability to create. Starting from a blank screen or canvas, we sculpt beautiful works of art — often from scratch.

Because of these trained skills, the art of taking objects away from a design can be a hard one for some to master.

Designers love to invoke visual stimulation anywhere they can, which usually spells out bad news for minimal designs.

Sometimes the best practice can be to design out a full site — and once the design feels complete, start removing all of those objects that don’t fulfill a functional need for the site. True, this can be a painful and time-consuming process, but if done right, the results can be stunning. Practice the concept of reductionism.

Smarter Color

Minimal web designs are notoriously black and white, but that certainly isn’t a rule written in stone.

Minimalism in web design does not imply a lack of color; instead it calls for an intelligent use of well-planned color palettes.

With that said, when it comes to colors, black and white do tend to be the weapon of choice. This is because it leaves the door wide open for pretty much any accent color, allowing designers to match an existing brand image.

More unique color options can be just as effective. The key here is not just that you use color, but rather, how you use it.

In a minimal design, a continuous background color can be used to set the tone and emotion of a site while an accent color is used to capture the viewer’s attention and highlight the most important features of a web site. A properly used accent color will be used sparingly and never draw the user’s eye to more than one bit of information at a time.

The colors embedded in a minimal web design play a huge role in the feeling a site conveys. From sleek and sophisticated black and white designs to vibrant and bold colors across the spectrum, minimalistic web design is not prejudice to any color.

Typography

Designs that have been stripped of all the unnecessary bells and whistles place extra emphasis on the content. Naturally, this magnifies the importance of well thought out typography.

With fewer distractions for the user, it comes down to the text to maintain attention and develop the flow of the web site.

As the internet grows to embrace more flexible options for typefaces, the art of typography is finding a major foothold in the hearts and minds of web designers. Minimal designs are some of the best ways to showcase what can be done with well-selected type, as they should be.

The typefaces that you decide to use — and the way that you implement them — will leave a lasting impression of your design. Typography has the power to convey structural importance and will add a lot of personality to any site. The basic choice between using a serif or sans serif font can be anything but a simple one.

Be sure to embrace the variety of text styles available to you. Going beyond changes in size and color and into leading, kerning, weight and style will open up a wide array of possibilities for your content to help build up your site structure.

Layout Structure

Having a minimal design does not always imply a simple site structure. Oftentimes, dialing back the visual overload of a site means turning up the effort put into an intelligent layout.

Not many things can destroy the effectiveness of a minimal web design quite like a poorly thought out site structure.

Is your logo in a relevant location? Is your site navigation easy to find and convenient to use? These are huge questions that will make or break the functionality of your site without over-the-top graphics to back these important elements up.

If your design requires users to think about how they should use it or look around for the content they need, then you are breaking one of the cardinal rules of web design.

Even though we see many well-executed minimal designs are brilliantly easy to navigate and visually index, they are not inherently that way. Instead, a massive amount of effort and great visual sense is required to pull off such a natural flow that seems effortless.

Negative Space

The art of properly spacing content will separate the men from the boys in any area of design — and when the goal is to make less mean more, negative space becomes one of the most powerful tools available to designers.

Varying amounts of negative space acts as a subconscious visual guide, giving us important feedback on what items on the screen are the most important.

Simply put: The more an item stands alone, the more attention it is going to get.

Additionally, negative space is used to group similar bits of information together which helps to solidify the structure of a design.

The empty space between these information groups gives our eyes and brains a needed break from information. As a designer, it’s easy to want to fill this space with graphics and pretty doodads to look at, but acting on these urges will quickly result in a cluttered and disorganized design.

Find the Balance

With all of this talk about taking away and avoiding graphical gluttony, it may seem as though images are the enemy here.

On the contrary, a minimal design allows images to hold even more meaning. The increase in negative space and the use of simple color palettes in a minimal web design provide images with a real opportunity to shine as true focal points of the screen.

An important concept to remember when placing graphics or images is the need to maintain a balance. Does your image work to support the content at hand? Avoid placing images for the sake of consuming space or displaying color, make sure they hold relevance to the content and support what your users are reading.

In some cases, elements such as infographics, charts or pictures can serve to clean your site up even more. They say "a picture is worth a thousand words" — and if you can use a picture to replace a thousand words, then do so!

Along the same lines, charts and graphs can be a more intelligent way to display information and actually be less sloppy in your minimal design than several paragraphs of verbal explanation.

What to Take Home

At the end of the day, it is most important to understand what goals we hope to achieve with a minimal web design. If you are building a minimal web design for the sake of trying out a new trend, then you have all of the wrong reasons.

More than just another trend, minimalism transcends the medium of the internet or the computer and holds a place in art, architecture and even philosophy. Minimalism is the practice of putting forward only the most important message and removing unwanted distractions.

Having an entirely minimal design will not always suit the needs of a design project. As a matter of fact, more often than not, you will find that minimalism will not be the right fit for the task at hand. However, it is always important to underscore the principles of communicating information in a minimalistic nature.

How About You?

Have you tried to express minimalism in your projects? Or have you found some of the theories behind minimalism important in executing parts of more traditional projects?

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly web sites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

Gestalt Principles Applied in Design

Jacob Gube — Tue, 17 Aug 2010 13:00:42 +0000

Web designers, like other artists and craftsmen, impose structure on the environment. We enforce order and beauty on the formless void that is our blank computer screen.

We do it in different ways — creating an organized layout first, writing text and content first, or even basing a design concept on an image, a color palette, or something that visually trips your trigger, whether it’s a sunset or a Song Dynasty painting.

Wherever you gain your inspiration, it’s often not just the particular element that sparks your artistic impulse; it’s the totality of the element and its surroundings.

Grasping that totality concept — both the individual element and the whole in which it exists are important both separately and together — is essential to understanding how gestaltism influences our design choices.

We’ll cover 6 principles related to gestalt, in the context of design, and they are:

Proximity
Similarity
Prägnanz (Figure-Ground)
Symmetry
"Common Fate"
Closure

Gestaltism: A Matter of Perception

I think it’s imperative that we should use psychological techniques more in our designs.

I’m not saying design should be completely scientific or mathematical, but I do believe the best design comes when proven theory works in harmony with art.

The idea of the "gestalt" is a fairly old one, originating with early 20th century philosopher Christian von Ehrenfels along with his contemporary, psychiatrist Max Wertheimer, among others.

At its simplest, gestalt theory describes how the mind organizes visual data. The stronger the clarity of form, the more effective the design.

Let’s start with an illustration. This is called the "subjective triangle." What do you see when you look at the figure below?

Source: Dr. Russ Dewey.

If you said "a hamburger," go get some lunch and come back.

If you said "three Pac Man-looking things chomping on a triangle," then you’re on target.

Except where’s the triangle?

The triangle is implied. It isn’t there, except as whitespace.

But look at it and tell me the triangle isn’t there. Yes, it is.

One of the bright minds of gestaltism, Kurt Koffka, made the famous statement, "The whole is other than the sum of its parts."

His statement is often mistranslated as the much more familiar "The whole is greater than the sum of the parts."

Mr. Koffka didn’t like that translation, and pointed out that in his statement, he means the whole exists independently from the component parts.

The famous "Dog Picture," shown below, illustrates a Dalmatian dog sniffing under a stand of trees. When you squint at it for a moment, you see the dog "come together" from the disparate black and white blobs of the picture.

Source: José Pedro Gomes.

You don’t say, "Oh, I see the feet, and the legs, and the head, and the trees, and okay, now I see the entire picture."

You look at it for a moment and say, "I see it, a spotted dog sniffing the ground near some trees."

You went from the initial "What the heck?" straight to "Ah a spotted dog under trees" — no stopping to list items and deduce from that list that you must be looking at a dog sniffing the ground near some trees.

This is an illustration of the concept of totality — you grasp the "totality" of something before worrying about the details. As Interactive Telecommunications professor Clay Shirky puts it, "you cannot understand all of the properties of water from studying its constituent atoms in isolation."

So “the whole is greater than the sum of the parts” misstatement is wrong. The whole is not greater than the sum of its parts.

We’ve seen this concept dozens of times with beautifully executed websites that have one glaring flaw — a poor graphical or typographical choice, bad use of spacing, a dysfunctional chunk of JavaScript, a dropped bracket in the CSS file that renders the whole thing less than what it should be, sometimes to the point of non-functionality.

The whole is different than the sum of its parts; not greater, not less than, just different.

We’ve seen this time and again as well, with sites constructed with simple design choices that work harmoniously and beautifully together.

The whole is important.

The parts of the whole are important.

The whole as it is comprised of its parts is important, and separate from the other two.

Let me stop before I start sounding like Yoda.

Proximity

The concept underlying the concept of proximity is grouping. When we have a group of objects, we tend to see them as forming a group.

Proximity in Site Navigation

One basic concept of grouping in web design is with navigational links, where not only do we keep the navigation links together, but also group them internally, putting links to similar pages together, categorizing them into sub-categories, and so on.

The example below is from the site of a Lake Tahoe ski resort. Like most dropdown menus, it’s fairly simple at first glance, consisting of a single row of seven primary navigation link items (four are shown in the screenshot).

Site source: Alpine Meadows.

Hovering over a primary navigation link item reveals more sub-navigation links.

When a user hovers over or clicks on one of the primary navigation link items and sees that it reveals a dropdown sub-navigation menu, he’ll expect the same thing to happen with the next item.

They look the same and they’re grouped together — they should act the same way. And if we’ve done our job, they will.

Nothing new here, I know, but it’s something we use frequently, and we didn’t need to know about proximity to pull it off. But now perhaps we know more about why this design pattern works so well.

Proximity in Grouping Images

The 2002 Europe Music Awards site illustrates a different use of grouping. The MTV and Europe Music Awards logos form a separate group in the top left corner, while the logos of the sponsors form a group in the bottom right corner.

Source: Mads Soegaar.

The white space helps form the two groups, as do the two blue triangles in the corners. Note that the triangles are not present in the "unoccupied" corners, thus they reinforce the notion of the two groups.

Also note that the two organizational logos are larger and positioned top-left, thereby increasing their importance in relation to the cluster of smaller logos to the bottom-right.

The two clusters of logos not only form groups for design purposes, but for semantic purposes.

Proximity in Web Forms

The next example is of a fairly straightforward Web form from Yahoo!. Notice how the form is grouped into three segments: personal information, ID generation, and alternate ID provision.

The form implies that first set of fields is the most important and the third is the the least important.

They are grouped by headings (themselves ordered by number and set apart by color), and the fields themselves are arranged vertically, with the left sides of the field aligned with one another.

All of this reinforces the relationships of the of three groups of information, sorted by importance. Proximity is used to indicate grouping and importance.

Proximity in Icons

Another aspect of proximity is the propensity to perceive items arranged on a line or curve to be related to one another.

Web designer Stu Nicholls created a nifty (albeit non-traditional) circular menu in 2008.

Source: Stu Nicholls.

Because of the circle that all eight icons sit on, and because of the light gray circles that compose the "background" of the menu, the icons are perceived to be part of a similar group.

It also helps that the icons are thematically similar — with similar colors, sizes, and styles. In Nicholls’s live menu, hovering over an icon brings up a menu description inside the inner circle.

Are you grouping things correctly? Are you using proximity to help imply importance and relationships?

Similarity

We’ve already seen this illustrated above — an example of parts of a whole (totality) working together to achieve a specific goal.

We group things perceptually if they appear similar to one another. This is also why so many designers prefer to use blue, underlined links, or at least have all the links appear distinct and the same as each other.

Similar appearance equates to similar function.

In the screenshot of the Opera browser’s old Preferences dialog window, the menu items are grouped by color.

Source: Mads Soegaard.

The gray background of the first four menu items group them together, and also sets them apart from the other items.

They are also highlighted by the icons that sit beside the first item in each group.

Inadvertent Dissimilarity

Like everything in life, incorrectly applying the similarity principle can cause unwanted effects.

During the 2008 US presidential campaign, People Magazine ran a cover photo of the McCain family, with then presidential candidate John McCain in the center.

Source: Melissa McEwan.

The McCains’ adopted daughter Bridget, a young woman from Bangladesh, was apparently "shoved into the corner," occupying the bottom left corner of the magazine cover.

Combined with the effect of the top line of the cover text — which, if extended to the left, essentially "cuts" Bridget out of the picture — the photo gave some observers the idea that the McCains (or rather, the McCain campaign) were trying to "segregate" Bridget from the rest of the far more homogeneous family group.

One blogger, Melissa McEwan, noted that at the store she visits, the plastic holders that contain the magazines on the store displays blocked Bridget from view by potential buyers.

Truth be told, I’m no fan of John McCain, but I have no reason to believe that he does anything else except love and support his daughter.

The effect of the arrangement went unrealized, I’m sure, by McCain and the family members (who were on the other side of the camera and unable to see the effect of the arrangement until too late).

But because of the compositional choice of the photographer, art director, and the various editors involved in designing the cover, the image gave viewers the idea that the McCains were trying to hide the only member of their family that looked dissimilar physically, and caused John McCain, Bridget McCain, and the other family members some unasked-for grief.

McEwan wrote of People, "It doesn’t matter whether they intended to diminish Bridget on their cover, or merely failed to consider what message that would send. Either way, it’s a mess."

And a mess that an understanding of similarity could have prevented.

What elements of your designs are you unintentionally over- or under-emphasizing as a result of a misuse of the principle of similarity?

Prägnanz (Figure-Ground)

Our perception of the figure-ground relationship allows us to organize what we see by how each object relates to others.

– Andy Rutledge

The "figure-ground" principle has to do with objects portrayed against a background.

There’s a reason why design gurus started telling us sometime in 1998 to stop using busy tiled graphics for our backgrounds — because they took away from the foreground objects.

This is Design 101. Foreground objects should be more prominent than their backgrounds.

There’s more to the figure-ground principle than just using appropriately unobtrusive backgrounds. The contrast and the visual tension between the figure (foreground object) and the ground (background) makes for interesting graphics and logos.

Examples of the "Figure-Ground" Principle

Take, for example, the old Visit Norway logo shown below.

Source: Mads Soegaard.

The designers made use of both the foreground and background, creating three irregularly shaped objects (ocean waves, a tree branch, and a lump in a bird’s stomach — okay, I won’t swear to that last one) that combine to form the outline of a person with his or her arms outstretched.

Don’t see it? Think of the triangle illustrated above, and look again. If you still don’t see it, then you must have had the same trouble with those "magic eye" illustrations that I did; those things are all about figure-ground, as are many optical illusions.

Or you can just find the two people in the Hope for African Children Initiative logo below. Hint: a child is looking up at a woman, presumably his mother. (That’s why Namibia seems to have grown some real estate on its western coastline.)

Linux users will quickly recognize the old Gnome Desktop Environment logo.

It’s a "G", yes indeed, but it’s also a footprint.

And Macintosh fans know that the Mac logo shows not just a happy face — but a happy face in profile, presumably looking with delight into their computer screen.

On the other end, we can see how the figure-ground principle is horrendously violated in this horse-training site. Usually I don’t hold up examples of sites doing things wrong, but since Vincent Flanders and "Web Pages That Suck" outed this site some time back, and the site proprietors left the problematic design in place anyway, I feel no compunction to show restraint here.

For those of you who sensibly hesitate to click the link, the site designer uses an animated background image of a lightning strike that’s tiled all over the page. Eeek!

It doesn’t take a sophisticated web designer to know that putting an obtrusive, visually aggressive image like that as your background takes away from your foreground objects.

Either those objects get lost in the background — which pretty much defeats the purpose of having anything in the foreground — or the foreground objects have to "shout" to be "heard" over the background "noise" usually by being very large and brightly colored to overcome the attempt of the background to dominate the design.

In two years of teaching web design and construction to middle- and high-school students, this is the biggest single challenge I’ve had; "weaning" them off of using extremely "loud" and obtrusive background designs. Many of them would love that lightning strike, almost as much as they love those "background" images of Waka Flocka Flame. I kid you not. I blame MySpace.

Rutledge points out that rounded buttons with gradient or other non-solid color backgrounds can be important in establishing them as calls to action.

Here’s Jacob Gube’s slick and clean call-to-action button as an example.

The rounded corners, borders, gradient color scheme, and resulting illusion of 3D "depth" set the button apart from its surroundings, inviting the user to perceive as something apart from the background and makes it easily identifiable as something that can be activated.

Lose the rounded corners, the borders, and especially the gradient color, and the button loses something of what makes it stand out from the background

Some of the most visually stimulating designs I’ve seen recently actually blur the lines between figure and ground elements, even interweaving the two. This is a classic example of understanding the intricacies of a rule; essentially once you have understood the rule completely you have a license to break it.

– in.house.media

Are your foreground objects working with your backgrounds to create a lovely, harmonious whole? Are your foregrounds fighting for the users’ attention? Are the backgrounds serving as an aesthetically and functionally workable backdrop to contain and set off your foreground elements?

Symmetry

Basically, the principle of symmetry tells us that when we look at certain objects, we see them as symmetrical shapes that form around their center.

You don’t have to get into advanced design to know that humans like symmetry, and find it aesthetically appealing.

When your designs are asymmetrically, you know you’d better have a good reason for making your design "askew."

Symmetry occurs in nature, in math, in molecules, in everywhere.

Usually, symmetry to the average viewer means an object that is made up of two complementary halves.

What designers sometimes fail to realize is that when a viewer sees two unconnected elements that are symmetrical, they subconsciously integrate them into a coherent whole.

Finland’s CSC (the nation’s Center for Science and Technology) has a very simple logo that illustrates the idea of symmetry in design.

Though the logo sports two separate elements pointing in different directions and having different colors, the logo is easily viewed as a single entity because of symmetry.

Unlike most graphics and designs that deliberately employ symmetry in their design aesthetic (and that’s pretty much all of them — even the most grungy and off-kilter sites are aware of the principle; if only to use it minimally to contrast against all the asymmetry in their work), this one is almost perfectly reflective in its two elements. The only real difference is in the colors used.

Most designers use at least a trace amount of asymmetry to give their designs some character. Some use considerably more, to dramatic and beautiful effect.

Pepsi’s Famous Mid-2000s Logo

No longer in use in the US, the old Pepsi logo is an excellent example of near-perfect symmetry. Aside from the artistically "randomized" ice crystals, the logo is perfectly symmetrical both horizontally and vertically, with a wavy "axis" dividing the upper and lower halves.

Even the 3D airbrush "light and shadow" effect is almost perfectly symmetrical, varying just enough to give the image a realistic appearance of depth. The "ice" and the airbrushing are excellent examples of how "pops" of asymmetry liven up a largely symmetrical design.

Pepsi’s Asymmetrical Redesign

Pepsi redesigned its logo in 2008, using a variant on the old logo (itself a variant on an even earlier one) that some felt diverged too strongly from the symmetry of the earlier offering, with the tilted, variable-width axis and the red area far larger than the blue.

How do you feel about the newer design?

Symmetrical = Successful?

Bizcovering did a feature on ten symmetrical (and successful) corporate logos in 2007. The article poses the question, "All are symmetrical, perhaps this has something to do with their effectiveness?"

What do you think?

Asymmetry in Ransom Note Design

A more extreme example of asymmetry is the classic "ransom note," which traditionally is made up from letters cut out of magazines, pasted onto a sheet of paper, and delivered to the victim during a thunderstorm with ominous music playing in the background. The whole thing stands for disorganization and a likelihood that the perpetrator isn’t concerned about delivering Aunt Gertrude home safe and sound.

Image generated by the Ransom Note Generator.

Notice anything symmetrical about the lettering? Most of them line up quite nicely, which is unusual for mad kidnappers with no sense of balance and form. I think the folks at Ransom Note Generator let their inner designer impose some unwarranted symmetry in their work.

Part of the reason why the ransom note is considered "scary" is because of its random, chaotic nature; asymmetry means action and the wildly asymmetrical nature of the letters implies action escalating into violence.

How’s the balance between symmetry and asymmetry on your sites?

"Common Fate"

I think I watch too many crime shows on television, because the first time I came across this concept, an image popped into my mind of some hardboiled New York cop slamming his fist down on a table and yelling, "If you don’t roll on your brother, you’re gonna suffer the same fate he does! Is that what you want, both of you doing twenty up in Attica? Sharing a common fate?!?"

If the idea unnerves you, then you probably watch the same shows I do, and you shouldn’t worry, you won’t go to jail by employing the principle of "common fate."

The idea of "common fate" is simple: We perceive items or objects moving (or appearing to move) in the same direction as related to each other, more so than elements that are stationary or appear to be moving in different directions. Those related items are sharing a "common fate."

The cars in the photo below form two "streams," the left "stream" moving from top to bottom of the image (essentially "toward" the viewer) and the right "stream" moving from bottom to top, "away" from the viewer.

Source: stock.xchng

Although this is an entirely static image, movement is implied, and relationships immediately form.

In our designs, elements that "move" with one another relate to one another, while elements that resist that common movement or move in a different direction, do not relate.

This is a powerful, primal sensory cue among humans. Just think of the drivers’ reactions when a car comes down the lane in the opposite direction from everyone else. Consternation and chaos ensue within moments.

Common Fate in Dropdown Menus

Drop-down and sliding menus such as the one from RedBrick Health shown below — especially the ones that "slide" as opposed to just appearing in the blink of an eye — appeal to the "common fate" principle.

This main menu item has a slide-out sub-menu, so do the others. therefore the two items are related in our minds.

Common Fate in Tooltips

Tooltips also form an important informational relationship. If your tooltips always contain secondary but pertinent information, it won’t take long for a site user to put together — subconsciously — the relationship between moving/hovering the cursor and bringing up new information. As Rutledge notes, "[p]ointer-plus-information all moving together is a useful association."

Counter-Example of Common Fate

This doesn’t just apply to moving elements, but also the orientation of designs. In my earlier days, I designed a site with two background color gradients inadvertently "fighting" with one another. The header gradient went from light to dark, left to right; the navigation bar immediately underneath went from light to dark, top to bottom. Individually, they worked well enough, but together, they clashed.

The horizontal "movement" of the header gradient didn’t go well with the vertical "movement" of the bottom gradient.

The "movement" of the two gradients flow against one another. The effect violates feng shui and "common fate" both.

Are there design elements in your work that fight instead of flow together?

Closure

Closure means that we "close" objects that are themselves not complete; not only completing the figure in our perception, but perceiving the figure as having an extra element of aesthetic design; we look for a simple, recognizable pattern.

Take a look at the old IBM logo.

You recognize the letters as an I, a B, and an M, no problem there.

But they aren’t letters at all; the whole thing is a compilation of bright blue horizontal lines arranged to create the perception of a set of letters.

Does it put you in mind of the old ASCII art that was so popular during the 70s and 80s? It does me.

Here’s a 1975 rendition of a Spanish conquistador, created by using punched cards and reprinted in a 1978 Dominican newspaper:

Source: Wikipedia.

One of my favorite examples of closure is depicted on the cover of Paul Thagard’s book called Coherence in Thought and Action.

It’s a nifty three-dimensional cube hiding in among the "spotlights" of lighter red. They are, in reality, 24 dissimilar red shapes on a darker red background. Our perception fills in the blanks.

Another example hit the newspapers in the late 1990s, when the "Face on Mars" stirred the public imagination. Some people were put in mind of the monolith of 2001: A Space Odyssey, wondering if aliens hadn’t left us some cyclopean artifact for our use if we could just find a way to get to it, while others thought about War of the Worlds and stockpiled their bunkers with ammunition and MREs.

Source: Wikipedia.

A closer look proved the "Face" was just a landform. Guess we didn’t need all those MREs after all.

Pulling It Together

This article is just a quick look at the principles of gestalt as they apply to design. There is far, far more to the topic than can be addressed here. Do remember, though, that we introduced the concept of "totality" in the beginning of the article. Mindful of that concept, think back over the 6 principles we delineated.

None of them stood apart from the other; each one employed other principles as well as standing on its own.

For example, Nicholls’s circular menu depended as much on the laws of similarity and symmetry as that of proximity. Make the icons dramatically different from one another, for example, and the menu loses much of its functionality and aesthetic appeal.

Same with the "triangle that isn’t there" — it depends as much on the principle of closure as it does on figure-ground.

The RedBrick Health menu featured in this article not only employs the principle of "common fate" in its drop-down, but also the principle of similarity in its color choices.

None of these principles stands alone, and all of them function "in totality" with one another.

The concepts work with one another to achieve a totality of function, elegance, and aesthetic appeal.

Some of the best designers in the world know nothing of gestalt principles. They use them intuitively; when designs look and feel right, usually they incorporate gestalt principles whether the designers knows the terminology or not.

Gestalt principles aren’t artificial constructs that people have concocted to apply to design; they are attempts to describe and verbalize how we naturally perceive things.

It’s arguable that in at least some sense, "design talent" is an ability to naturally — and perhaps even unconsciously — understand how human perception works, and how to create designs for websites, paintings, or wedding dresses that are artistically beautiful and functionally efficient by appealing to it.

It doesn’t matter if you use these principles by instinct or by deliberation; what matters is how they can help you make better designs.

Sources and Further Reading

About the Author

Michael Tuck is an educator, writer, and freelance web designer. He serves as an advisor to the Web Design forum on SitePoint. When he isn’t teaching or designing sites, he is doing research for the History Commons. You can contact him through his website, Black Max Web Design.

The Art of Distinction in Web Design

Jacob Gube — Tue, 10 Aug 2010 15:12:08 +0000

One of the hardest tasks we undertake in the user experience field is trying to gain and hold a visitor’s attention in the right way. Distinctive design and the ability to focus eyes where they are needed in our web designs is a tricky task, but is something that we should have a firm grasp of.

Understanding the artistic traits of influence and distinction allow us to balance important details over our regular content and thus gives us the opportunity to have a great impact and influence on our consumers.

This article aims to highlight various factors you should account for when using distinction in your designs.

Distinctive Design

Distractions in a design lead to a breakdown in communication and can confuse users, paralyzing their ability to quickly determine what to focus on or where to go next.

Distinctive design alleviates this by putting forward a few fundamental principles which appeal to the user’s needs. Effectively at their core, it underlines the ideal that highlighting content based on importance rather than its position is beneficial and worthwhile.

What is distinctive design? It’s a simple goal to make important information visible.

Principles of distinctive design include:

Not giving prominence to objects unless it has a real need to attract attention
Limiting the importance you give to all content within the page to avoid diluting the strength of the important content
Deemphasizing less important content
Taking the time to help guide the user’s eyes through the page to ensure content is read in the right order
Avoiding too much information on the page to reduce the noise
Ensuring that what you display fits the ideas you wish to convey

Distinctive design is important to ensure the end-user can find what they require.

While too much focus being demanded on a page (with violent levels of distinction) can be damaging to the user experience, bland data with no focus or selective highlighting can be equally disruptive.

It can make unassuming content (even well written material) appear dry, dull or even hard to read.

While the majority of your content should be neutrally styled (it should have no emphasize), there will always be content in a site that needs reinforcing. And whether you use images, stylistic effects, color, appearance, animation or something else, appropriate distinction is extremely important.

Plain text documents have no distinctive flourishes and is often hard to read.

Noise Margins

One key principle in maintaining a distinctive design is the function of noise margins. Have you ever visited a website that has far too much going on? That’s the kind of problem that can make it next to impossible for users to find what they need.

By simply reducing the amount of information that appears within the website design, or by breaking it down further into several pages (or sections using headings), you can increase the way people interact with your work because relevant information will be more contextually visible and easier to locate.

Noise can distort the overall message of a website in unnaturally large quantities.

Within a user interface, noise can occur in many formats. Anything intended to grab the user’s attention in the design can be a key component of drawing focus away from the content. Ideally, you should have as little of these devices or interface quirks as possible.

Interface noise can result from too many elements appearing within a website.

Even sites with little in the way of noise-inducing components can have noise pollution problems. Text content can suffer issues if it’s not laid out effectively. In this case, breaking large clumps of data into tables, bulleted lists, sections and styled content can aid readability.

Images with too much on display can also become like an optical illusion (like a "Where’s Waldo?" book) as the search for any relevant points may be lost, which brings attention to the task of trying to simplify diagrams, graphs and infographics to maintain a level of neutrality and visibility.

Content isn’t free of noise either! Huge blocks of text can frustrate end-users.

Spatial Awareness

Another principle tied closely to the aspect of noise is spatial awareness. While it’s important to know how much content will be displayed in a page, the knowledge of how we represent content can help end-users identify their own surroundings.

Whilst designing with an emphasis on simplicity — introducing much needed whitespace within even the most lengthy of documents can allow the user to focus within those sections that hold meaningful content. In addition, complex background images or patterns can reduce the effectiveness of added whitespace.

Giving a website plenty of breathing room increases the awareness of space.

Organization is the key to any goal, and conventions have evolved within web design for just such a reason. The complexity of any object can be determined by both how easy it is to not only know what function or purpose it has, but also the way it is presented can help that old friend of ours, readability.

Whitespace has a key function in not only breaking sections apart (through space) but also in increasing awareness of how those sections are maintained, thus making the design a more pleasant experience which can help elements meet the impact needs of their environment.

A well structured and organized site layout will be easy to navigate around.

While the idea of flexible layouts showcase that the amount of visible space may differ drastically for the end-user based on the device they have, small screens have highlighted the way in which a web browser and it’s viewport with scrollbars dictates the cascade and priority information gets.

It’s a well-established and notable fact that information at the top of a website holds more priority than what is at the base of the page (due to the order in which it’s likely to be seen). Therefore ensuring your content is provided in a balanced manner which follows the convention is worth considering.

Conventions show that content should be given priority based on importance.

Drawing Focus

One of the key principles of distinctive and attentive design is based on the idea of drawing focus to content and design elements of importance. While making good use of space and reducing noise levels can be beneficial to drawing focus naturally, there are ways to grab the attention of visitors by focusing or drawing the eyes to something onscreen.

While using such elements can be beneficial to the end-user, it’s worth highlighting that if you fail to balance the need for attention with the need for neutrality, you might end up counteracting your efforts to showcase importance.

The dConstruct website draws focus towards the famous speakers taking part.

As with many aspects of design, the idea of drawing attention can be achieved through a general understanding of psychology (so getting that book on the subject may pay dividends).

There are a great number of different ways people can be drawn to content. Methods to draw focus are usually based around clever wording (humour is effective), figures (like prices or dates), relevant terms which are easily recognised (like the word contact), pictures denoting what’s being mentioned (infographics), and animation (which naturally focuses to understand an effect).

By using words that the reader can relate to, you’re more likely to draw interest.

While natural attention can be drawn through psychology and relating data in ways which attract the end-user, visual attention is usually more obvious and easy to snatch focus.

An example of this can be seen through people use Flash animations that naturally blur the relationship between grabbing attention for the content and attracting the attention to the user interface (rather than its content value). While forcing the attention of something through visual effects can be a quick (if not crude) way to ensure a visitor reads something, it should be done with some restraint and care.

Visual attention-seeking can result from animated effects that result from actions like hovering.

Contrasting Mediums

Another key principle of distinctive design is the idea of contrast. Color has become one of the vital components of many website designs and the way in which shades and variants interact with each other can determine not only the visibility of the information, but in worse case scenarios, they could even be an indicator of underlying problems of readability.

One of the simplest ways to measure contrast is to examine how visible the foreground object (like text) is from background content such as a block color or image.

The most common contrast you’ll encounter is background and foreground colors.

As mentioned, web accessibility plays a common role in contrast as the visibility of information in general can have consequences to who can access the information. While low contrasting combinations may give the impression of subtlety and softness, if contrast is insufficient, or if two shades which are known to conflict in certain vision conditions like color blindness are used, you may well end up with a negative visibility issue that not only makes text less distinctive but impossible to read. Visibility disorders are the most common conditions that suffer from poor color contrast choices.

Accessibility is closely tied in with how well content contrasts in its surroundings.

The benefits of contrast and the use of color psychology can draw user attention in some unusual ways. A primary example of this is what is known as color symbolism, where people visit a website rich with certain shades of colors that remind them of certain things and emotions. This richness which goes unstated can draw their focus.

Depending on the audience type and the culture of the crowd, the interpretations of color may differ, but contrasting and complementing the harmony of your palette will give added emphasis and targeted emotional triggers to make use of.

Color not only evokes emotion (and attention) but it also can make things distinct.

Highlight for Impact

The final principle I want to highlight (no pun intended) is the idea of manually adding distinctive impact to your website through selective effects.

So far, we have focused on taking away objects of unnecessary value and pulling eyes to a section through emphasis and contrast. This method takes a different approach entirely by taking something that already has a user’s attention (like a block of text) and then boosts certain parts of that content to increase its visibility around elements which surround it. Of course, this is aimed at natural highlighting in context to an existing range of content.

Just highlighting passages of text can give the content a boost of emphasis.

Highlighting a segment of text may seem subtle, but it can be surprisingly effective. In browsers like Google Chrome, you can actually change the color of highlighted text which may give the manual selection of content a better contrasting (and easier to read) platform to work from.

Of course, apart from using a background color there’s a whole range of ways in CSS to draw attention, such as the use of icons besides text, coloring links of unique segments or simply changing the font, size, color or style (bold, italics, underlines, strength and emphasis) of the information needing added visibility.

Common stylistic traits that are anything but the default can represent content well.

The use of color in highlighting for impact and giving distinction go through psychology and design with ease and it can be said that only using color selectively will give your work added impact (like how more whitespace gives impact to less content).

However in certain cases (like children’s sites), using a sharp array of bold colors and vibrant shades can actually draw attention well enough for the subtle restriction of color to be a non-issue. While in many sites aimed at adults, it’s better to keep a firm focus on color usage, sites aimed at a younger audience can get away with such vivid use of shading.

Using an appropriate sharp group of colors can highlight sections uniquely.

Attention to Detail

While there aren’t any strict rules to dictate how much strength you should give content, I find that a good balance is as follows:

85% of the design is neutral (with no focus)
5% of the design has minimal highlights (like banners)
5% of the design is emphasized (such as bold, italics, link colors, and other strength)
5% of the design being very important content which requires immediate priority

Though, factors which affect how the distribution balances out should be accounted for, such as its position within the viewport, if the content is "fixed" and the amount of strength given (like size and color).

The above graph may help you decide how to breakdown the distinction barrier.

JavaScript and advanced CSS selectors have improved the situation of designing with consideration towards distinction. With the ability to simply hide content (or restrict how much content is visible) at any one time, and the ability to animate or control how information will appear depending on viewport availability or device type, we can put ever increasing efforts into making the most out of the little flourishes we choose to have on display. While such complexity can make us feel like we need to take advantage of it all at once, a controlled approach can simplify our designs.

Scripting and cool CSS techniques aside, single page designs have boomed in popularity.

The key principle of attention is that of the designers own eye for detail, there is little excuse to make things either bland or boring even when the content arrives in beauty and simplicity. The modern advances of scalable designs, flexible layouts and minimalistic ethos have laid down some great methodologies for making information easier to access, read and use.

Taking time to consider how each event or effect may be interpreted, your visitors’ ability to read what you produce and assigning yourself the goal of attempting "less is more" (in context) will boost your content’s value.

Everything in moderation is the best policy as there’s no point wasting effort!

The art of distinction is in the way we portray information and how the important and relevant bits manage to push their way past the flourishes and useful engaging elements which give that content added substance.

While the web evolves (like our tastes and abilities) it’s a fact of life that portraying information effectively will become (as it remains) one of the most important philosophies that the design community has to offer.

In reflection, distinctive design gives your content the best chance of being read, understood and enjoyed in the future — which is fantastic if you want to be noticed!

About the Author

Reductionism in Web Design

Jacob Gube — Thu, 05 Aug 2010 10:00:35 +0000

In the field of design, the phrase "complexity is the enemy" speaks to how keeping things simple makes our work more functional.

With the modern crop of technologies that dole out increasing amounts of functionality, it’s important that we take the time to ensure a balanced level between oversimplification to the level that insults our visitor’s sense of competency and extreme complexity which endangers their experience.

In this article, I want to talk about the idea of reductionism — a process that improves the efficacy of our designs as well as the time we spend making and maintaining them.

Going "back to basics" and challenging the way we design, write code and produce content will de-clutter our interfaces, improve the readability of our web copy, speed up deployment, make things easier to use, and reduce our maintenance requirements.

Reductionism in Web Design

It’s important to define what reductionism is in the context of web design. While ideas towards reductionism vary depending on who you ask, a simple definition is that reductionist methods boil down complex things to simpler things, which might include modularizing the system into more digestible components; all of this while avoiding losses in value (fidelity) and usefulness.

Essentially, it means that if you have something that’s bloated, heavy or complex — removing some bulk will improve your work.

Reductionism doesn’t mean minimalism – but they can work hand in hand.

Understanding the complexity of things by reducing them into smaller components allow us as "web scientists" to better maintain and organize what we produce.

While reductionism allows us to objectively strip away the complexity and see the fundamental principles that guide our work, it specifically highlights the importance of knowing what is beneficial to the end user and to us as the makers of these products.

As a practice, we can save ourselves time and money (by not undertaking unnecessary work) and free our visitors from distractions.

Benefits for the User Experience

Sometimes, we as web professionals spend a great deal of time trying to plan and "pre-react" to situations that will unlikely happen.

We want to give all users every single function that they want/may want. This mentality — though well-intentioned — usually backfires and we end up with something over-engineered and scaled to epic proportions.

But if we just provide our users the things they really need (and nothing more), it reduces the amount of thinking and cognitive processing we subject them to.

If we think about the concept of reductionism in this way, having more features, spending more development time in things practically no one will use, and pre-planning every single potential situation actually makes it worse for our users.

Reducing the amount of content a visitor needs to give to sign up for a web service is an example of reductionism.

The key point to take away is that reductionism is more than just some quick technique to boost your work’s quality. It’s a way of life and a beautiful ideology for maintaining a tight workflow.

Principles of the Methodology

In web design, there are three main places we can apply reductionism:

Website content
Code
Design

Additionally, you could apply reductionism in the way your web design business works and how you approach developing solutions to a client’s problems.

The three reductionist methods relative to building and creating websites.

Whether you’re trying to apply a reductionist methodology to your content, code or design, the principle remains the same: You want to ensure that everything in your product is absolutely critical to the people who’ll be using it.

End users hate being confused or feeling like they’ve lost control; giving them the power of having more time to read your content, achieving a task with your user interface quicker and so forth improves their experience.

The defining characteristic of our work then becomes quality rather than quantity. It’s not going to be about having 100 features, it’s about having two really great ones.

Content Reductionism

Content reductionism can be approached in many ways. The simplest way is taking your copy, reading through it, and paying attention to ways you can simplify the structure, reduce the word count, remove redundancy, strike out jargon, and just anything that doesn’t really add any value to it.

Of course, there’s more to content than text. Image or visual sensory reductionism can be performed by taking out gratuitous graphics that simply serve as eye-candy and page bloat, but doesn’t really help drive your points across to the reader. Remember that a picture should be worth a thousand words. Using an image should reduce the amount of stuff you have to write, otherwise, it doesn’t belong in your copy.

Breaking content into what’s necessary and what can be omitted increases readability.

Code Reductionism

Code reductionism is all about simplifying your code and making sure it can’t be written any better.

However, this process isn’t that simple, and we also have to make micro-decisions in certain cases and go in favour of semantic and web-accessible, yet lengthier code.

Code reductionism can also take place in the amount of web technologies we use. If you can produce a satisfactory effect using CSS (such as this CSS-only hover effect), there’s no point in over-engineering the effect by making it dependent on JavaScript or Flash.

Semantic and minimal code will increase the speed at which your website loads.

Design Reductionism

Design reductionism can be established through the ideals of simplicity, usability and stating the obvious.

Steve Krug’s book, Don’t Make Me Think!, has a title that summarizes the concept well. We ought to pay attention to the intuitiveness in our designs and by reducing design elements, our designs require less thinking and processing on our user’s behalf.

If you have doubts about a particular design element — it probably means you can take it out.

Increasing the simplicity through functional design will boost end-user satisfaction.

Reductionism Tips

The key point to maintain is that when you apply reductionism to your work, the final product should be better or equal to your current state. It’s worth noting that reductionism doesn’t preach arbitrarily taking things out just to reduce bloat, but rather, encouraging careful and thorough thinking to see if we can make things better by way of simplification. Sometimes things need to be complex or complex things are already as simple as they’ll get.

Remove that waffle! End users don’t want lengthy complex documents to read.

To Achieve Content Reductionism

Focus on the quality of what you produce, not how long it is
If you can say it in fewer words while still getting your point across, go for it
Reduce at the end so that you can see how taking something away will affect the entire picture
Avoid technical language and jargon, it makes content convoluted and exclusionary
Know who you’re writing for and learn what they need/want to know
Use visuals to reduce the amount of text you have to write and to improve comprehension
Use headings to modularize your content into logical groupings
Make things easier to read by using bulleted points instead of paragraphs

Using the right element for the right job makes website maintenance a lot easier.

To Achieve Code Reductionism

Have a solid plan and idea of what you’re going to develop
Examine your code frequently and be vigilant against redundancy when you spot it
Decide which technology will do the job you require with the least amount of code
Look at your specifications and think of ways it can be done better with less code
Visit your code regularly and eliminate the zombies
Experiment with your code and see if you can simplify the structure
Minify your code to reduce file size
Try to write code natively before using an abstracted layer (like MooTools or jQuery)

To Achieve Design Reductionism

Reduce the number of clicks and mouse movement required to find content
Whitespace gives breathing room for the eyes and for the content of a website — avoid cramping things together
Simplicity is beautiful: reduce how much information is thrown onto the screen
Don’t use unnecessary flourishes and widgets
Split test and see if people are accessing things optimally
Reuse design elements to avoid redundant objects
Ask yourself what the value of a design element is and if it deserves to be included in your canvas

Keep it simple, stupid (like in Occam’s razor)! Complex solutions are much harder to use.

To the Power of 50%

One reductionist method I follow is the "power of 50%" concept. In essence, it’s about taking whatever you have right now and then breaking it down until you eliminate 50% it.

Whether you’re reducing your web copy in half, cutting down your code base to 50%, or taking out half of the design elements you’ve plugged in — the theory is you reduce the dilation of your product and enhance the quality of what’s left.

While this may seem difficult, the guideline holds true in that, in many cases, the amount of excess that exists in all manners of things is far too disproportionate.

Removing 50% of a website’s excess can have profound effects on its usability.

Keep in mind, though, that going over the top with reductionism is possible. If you keep squeezing the juice out of what you create, you may not have enough to drink. Therefore, it makes sense to be thoughtful when applying reductionism.

Final Thoughts

Determining the best way to apply reductionism to your work will differ on a project-to-project basis.

It takes time and effort to get into this mindset of being proactive in creating less stuff, but the ideology it pertains to is grounded in a simple truth: people hate complexity and unnecessary stress. There’s nothing worse than being confused or feeling like you’ve lost control.

Simplified information architecture is just one way to succeed in reductionism.

Reductionism benefits you in the long run and applying its principles to web design is simple. While we accept that over-thinking solutions occurs regularly and we can get a bit sloppy as a result — the reductionist method stands as a way of improving the overall quality of work, which results in us gaining a greater appreciation for refining our thoughts and our products.

In your next project, think of ways to drain away some of the excess.

About the Author

A Web Designer’s Guide to Linux Fonts

Jacob Gube — Tue, 03 Aug 2010 10:00:56 +0000

"Many people find Linux to be an afterthought as far as target audience is concerned, but Linux is exponentially increasing in popularity as an alternative to other operating systems. … Web design should be bulletproof and your choice of type should be no different."

– Jonathan Christopher

Linux Users and Web Design

One area in which few Linux users see any representation is Web typography. In 2003, Linux user and software developer Jeremy Zawodny howled about the dearth of decent fonts for Linux.

At the time, he was right. But that situation has since changed, even though many Web designers still believe fonts designed for (and included with) various Linux flavors are all just icky.

That’s not true any longer either. But the perception remains.

As with so many other aspects of Web design, Linux users are expected to tag along behind the Windows and Mac crowd, doing the best they can with the fonts they have.

What fonts Linux users (in all their diversity) have depends on a lot of factors, including their particular flavor of operating system, desktop environment, their own interest in expanding their font collections, and so forth. Most non-designer Linux users tend to have a somewhat motley group of fonts at their disposal.

It’s time to let Linux users, in all their variegated versatility, be fairly represented in your font stacks. They might not outdo Windows and Mac users in numbers, but they tend to be more active — and certainly more vocal — than the average Web user.

You can make an outsized impact among the small but highly engaged community of Linux users making use of your designs, and you can do it without disturbing the typographic sensibilities of your Windows and Mac users.

Short Shrift: The Microsoft Core Fonts

"When I was starting out in Web design," the old codger grumbles around his plug of chewing tobacco, "all we had was those Microsoft core fonts. Eleven dingy little fonts, and we could only use about seven of ‘em. It’s all we had, and we was grateful to have ‘em! Seven fonts, designing with ‘em every day! In the snow! Coding uphill! Both ways! Hand me my spitty cup, and quit yer whining!"

Times have moved on, Gramps, and we shouldn’t have to be restricted to using Microsoft’s all-too-familiar fonts to view the Internet in all its fractured glory.

When Web designers consider their Linux users’ needs at all, they commonly assume that Linux users have access to the same core fonts that Windows users have, and that a font stack designed for Windows users covers their Linux users, also. This is not the case.

A good number of Linux users either had the core fonts package (msttcorefonts) included with their particular setup, or downloaded and installed it themselves. But many did not.

Let’s take a look at the typographical lens we’ve been viewing the web with:

Sans-serif fonts: Arial Black, Arial, Comic Sans MS, Trebuchet MS, and Verdana
Serif fonts: Georgia and Times New Roman
Monospace fonts: Andale Mono and Courier New
Fantasy fonts: Impact and Webdings

As the old guy says, only about seven of these are routinely used in Web designs. Thus, for your sans-serif text, you have the compelling choice of Arial, Verdana, or — if you’re feeling rowdy — Trebuchet MS.

For your serif text, you have the Web-ready Georgia and its old school, print-sourced buddy, Times New Roman.

You have two choices for your monospace text.

And you might choose Impact or Arial Black for the occasional header.

Is it any wonder so many sites look so much alike?

These "core fonts" are a large reason behind that. No one’s criticizing Microsoft for providing them for our use — we appreciate it.

But, especially for Linux users, that can’t be the only set of options.

The "core fonts" provide a very basic font foundation that will serve most users for most sites — more or less. But Linux users expect and deserve more than the short shrift provided by these core fonts — which were never designed for their systems in the first place, and which many hard-core Linux users refuse to use (though according to a 2007 survey, 74% of Ubuntu users have the core fonts package installed, for what that’s worth).

Another reason why many Linux users shy away from the Microsoft fonts: Almost by definition, Linux users have to be more computer-savvy and (usually) more Web-savvy than the average grunt who wants his computer up and running ten seconds after slicing through the packing tape.

Many Linux users are aware there are a good number of different (and free!) fonts for their operating systems out there, and they’re savvy enough to download them and install them.

As you can imagine, it has to be quite frustrating for them to have the spiffy, Linux-centered fonts and have only a very few Web sites make use of them.

We can change that.

The Linux Fonts

Let’s first take a look at some of the more common Linux fonts available to Linux and other users. In most — not all — cases, these fonts work perfectly well on Windows and Mac machines as well.

The wonderful pedants at CodeStyle give us a monthly survey of what fonts Linux users have on their machines. (The surveys exist for Windows and Mac users, too.) The number of survey participants isn’t as large as I would like, but we’ll take what we can get.

As of the July 2010 results, the five most common fonts on Linux machines are, I bet, not prominently featured in your designs.

Coming in at #1 is Century Schoolbook L, an old-school print serif that is found on almost 98% of Linux machines. If you’re coding with any of the top five fonts, chances are it’s this one, or a variant thereof. The Century fonts tend to be strong and quite readable, if not completely Web-friendly and a bit fusty in their appearance to some eyes.

About half of Windows users have this font, and somewhat less than a third of Mac users have it as well. Considering its market penetration, it isn’t the first choice for many designers.

Second on the list is URW Chancery L. It’s a decorative calligraphic font found on very few Windows or Mac machines, but on almost 98% of Linux computers. It’s very similar to an Adobe PostScript font called Zapf Chancery, to Apple Chancery, and (less accurately) to the MS Office font Monotype Corsiva.

Third up is another font from the URW font foundry, URW Gothic L, owned by almost 98% of Linux users. It’s a very clean serif font similar to the old Futura font. Very few Windows or Mac users have this font. It’s similar to the Adobe PostScript font called Avantgarde.

Fourth is yet another URW production, URW Bookman L. Very close to the Adobe PostScript font Bookman, it’s a clean serif font. Windows users have Bookman Old Style, a close approximation; some Mac users have either the Adobe or Windows version.

The first "Linux" font on this list is fifth-place entrant, Nimbus Mono L, a monospace font with around 97% penetration of Linux machines, very similar in appearance to Andale Mono. Very few Windows or Mac users have this font.

You have to go down the Linux list to #19 to find a font, Lucida Bright, that many Linux users have (under the font name "Lucidabright") and that other operating systems have as well. That font has roughly the same market penetration on Mac computers (75%); less than half of Windows users own it.

After scrolling past a few more members of the Lucida family, you pore on down the list until you find the "ubiquitous" Arial, at 68%. The common wisdom that "everyone has Arial" doesn’t hold for Linux users.

Note: Visibone runs a different survey for a similar purpose, and often gets significantly different numbers.

So what does all of this mean?

Well, in short, the Linux folks have a fundamentally different set of fonts than either Mac or Windows users. Common font wisdom as it pertains to the other two operating systems has to be jettisoned entirely for Linux users.

To me, that’s unacceptable.

How Many Fonts Make Up a Plethora?

Wikipedia image featuring the Linux Libertine serif.

With all of that in mind, let’s look at a list of some of the major fonts being made available to Linux users — and, as noted above, to Windows and Mac users if they would download and install them.

Linux users may not have a plethora of fonts per se, but they do have an ample number of lovely and quite usable fonts.

With very few exceptions, all of them are licensed free for public use, so as long as you don’t sell them, you can use them pretty much as you like — @font-face enthusiasts, font embedders and Cúfon users, rejoice!

Some of them are open source, which means if you’re up to the challenge, you might like to try and tweak them to make them even more usable.

Remember, different Linux fonts come with different flavors of Linux. If you’re going to include one Linux font in your font stack, you should include two or three more to make sure you hit all the (main) bases.

1. Bitstream Vera Fonts

The Vera family was designed by the font foundry, Bitstream, and released primarily for use with the Gnome desktop environment. It is a TrueType family of fonts released free for public use.

Its drawbacks include a relative lack of hinting and a relatively modest glyph base, having only common alphanumerical characters and some diacritics.

It is usually distributed with Oracle’s OpenOffice office suite, though recent versions now feature the nearly identical DejaVu fonts.

In recent years, the DejaVu fonts have overtaken the Veras in popularity, largely because of the larger DejaVu glyph base (and because, oddly, the Veras lack italic versions).

Development for the Vera fonts is essentially dormant, though it’s worth noting that Arev Fonts has added a significant number of glyphs to the Vera base.

Code maven Cody Boisclair writes that the Vera Sans font reminds him of a cross between Frutiger and Verdana. He’s particularly fond of the Vera Sans Mono font for his coding, while others warn that the Mono font doesn’t always render well in Windows.

To my eye, the Vera and DejaVu serif fonts are a good bit larger and heavier than typical serif fonts, particularly the narrower fonts such as Times New Roman, and almost qualify as slab serifs.

2. DejaVu Fonts

Like their older siblings, the Bitstream Vera fonts, the DejaVu fonts are free for public use. They are almost identical to the Bitstream Veras, but they have the advantage of having a significantly larger glyph base — more Unicode characters, fully covering the Latin, Greek, Cyrillic, and Georgian languages, and partially covering others such as Hebrew and Lao; work continues on covering more languages.

The DejaVu fonts are also more completely hinted than the Bitstream Veras. They come in three varieties: Sans, Serif, and Mono; all three have numerous variants, including bold, oblique, condensed, and so forth, though only the Serif font has italic varieties.

The DejaVu Fonts wiki offers an enormous number of PDF examples of the various fonts.

Several varieties of GNU/Linux, such as Red Hat Fedora, Ubuntu, OpenSUSE, and Mandriva Linux, come with DejaVu fonts, and OpenOffice now includes DejaVu fonts as well, with Fedora making DejaVu its default fonts.

As noted above with the Vera serifs, I consider the DejaVu serif almost a "slab serif" because of its size and weight in comparison to other, common serifs.

3. GNU Free Fonts

Also known as "Free UCS Outline Fonts": The GNU Free Font project contains the usual suspects: FreeSans, FreeSerif, and FreeMono. All three have relatively large glyph bases, so unless you’re writing your pages in Tagalog, the Free fonts can take care of you.

The last release of anything done with the Free fonts was in January 2009; I’m not sure what, if anything, is being done to update and tweak them.

The Free fonts are very close in appearance to the Nimbus fonts (more on this later). The primary between them seem to be in licensing, with the Free fonts being, well, free to use for whatever purpose suits you, and in hinting (the Free fonts lack pretty much all hinting, which means you should test them thoroughly to see how they look for you).

Many of the font variants come from the URW++ Ghostscript program.

4. Liberation Fonts

Originally distributed by Red Hat in 2007, there are three flavors:

Liberation Sans, which emulates Arial, Helvetica, Nimbus Sans L, and to a lesser extent Bitstream Vera Sans/DejaVu Sans
Liberation Serif, which emulates Times New Roman, Nimbus Roman, and to a lesser extent Bitstream Vera Serif/DejaVu Serif
Liberation Mono, which emulates Courier New, Nimbus Mono L, and the Bitstream Vera/DejaVu monospace fonts

The Liberation fonts are licensed under the GPL+font exception, which means that you can use them pretty much how you like, in any document on any desktop operating system, without having your document fall under the GPL or other licensing requirements.

In 2004, after clashing with Microsoft over the use of their core fonts, Red Hat contracted with Agfa Monotype to provide three alternates for the three core fonts: Albany, Cumberland, and Thorndale. Fun fact: notice that the first initials of these fonts are identical to Arial, Courier New, and Times New Roman. The fonts were neither open-source nor were they free, and Red Hat didn’t like that situation.

The Liberation series fonts, designed by the Ascender font foundry for Red Hat, are the result of the Red Hat initiative. The Liberation fonts are not identical clones of the three Windows core fonts (though they do work nicely in the font stacks with the three Windows fonts), and unlike the core fonts, they are designed to work together in a single design schema.

Ascender vice president Steve Kuhlman says the company spent "hundreds of thousands of dollars" designing the fonts. As of version 1.04, they are fully hinted.

OpenSUSE, Debian, and Fedora, among other Linux variants, include the Liberation fonts in their software.

Web designer Leigh Beadon calls the fonts "a perfect tool for Web design," praises them for their rigid metrics, and notes, "[T]hey are new and different and they expand our options…"

5. Linux Libertine and Biolinum Fonts

Developed as an open-source collaborative project, the Libertine serif has won some notice after being chosen for the Wikipedia logo (for which the foundry designed the emblematic "crossed W").

Currently, the font family only comes in Libertine Serif, which like most all alternative serifs is designed to emulate Times New Roman.

Libertine has a glyph base of over 2000 characters, meaning that it has its own Western, Greek, Cyrillic, IPA, and special characters along with the usual letter/number inclusions.

It comes with italic, bold, bold italic, and small-caps varieties. A sans-serif font called Linux Biolinum is in development, but isn’t touted as suitable for large blocks of text; think Trebuchet MS instead of, say, Verdana — though the font is less decorative.

A monospace font called Linux Biolinum Keyboard is also in development. Although the perception seems to be that the overall font family is called "Libertine," it appears that the designers intend for "Libertine," "Biolinum," and "Biolinum Keyboard" to be the designations for the individual fonts.

Libertine is designed as a general-purpose print font, as opposed to Times and Times New Roman; font designer Philipp Poll says both the older fonts have limitations that his Libertine does not have.

Poll recommends Libertine primarily for print work, and says other Linux fonts such as Deja Vu Serif work better for screen displays. Bold and small-caps varieties are available, and, Poll says, a sans-serif version of Libertine is in the works.

6. Luxi Fonts

The Luxi family of True Type fonts (formerly known as the Lucidux font family) was originally designed for the X Window System. They are similar to the Lucida family of fonts, not surprising since Lucida designers Kris Holmes and Charles Bigelow also gave us the Luxi family.

If you’ve ever used Red Hat’s Bluecurve theme, you had the Luxi fonts as your default. Unlike many fonts used in Linux distros, Luxi fonts are free to use but not to modify. As a result, they were removed from Fedora and Debian distributions (though Fedora users can get it back). They are also available through OpenOffice’s FontOOo wizard.

The fonts come in the usual Sans, Serif, and Mono flavors, each with four types: regular, bold, oblique (the opposite of italic), and bold oblique.

Some users find the Luxi fonts questionable because of their lack of hinting.

7. Nimbus Fonts

The Nimbus family of fonts originates with the German font foundry URW++. The family has a huge variety of entrants, but Linux users usually only get the freebies:

Nimbus Sans L, which emulates Helvetica and Arial
Nimbus Roman No9 L, which emulates Times and Times New Roman very closely
Nimbus Mono, which emulates Courier and Courier New fairly closely

Nimbus fonts are available in the OpenOffice software package. URW++ is releasing (commercially, not for free distribution) "Nimbus Global" versions, that have larger glyph bases designed to support languages, such as Arabic, Hebrew, and Korean Hangual, that don’t rely on Latin characters. The Nimbus family of fonts appears in many Linux distros, and was included in some older packaged versions of OpenOffice before being supplanted by the Liberation family.

8. Gentium

This font is a rather stylized serif font produced by SIL International (formerly the Summer Institute of Language), a US-based nonprofit organization that, among other activities, produces a wide variety of fonts designed to support multiple languages.

Gentium’s biggest claim to usefulness, besides its unique decorative appearance, is its large glyph base, supporting Latin, Greek, and Cyrillic alphabets.

There are three varieties of Gentium: Regular, Basic and the slightly heavier Book, which only supports Latin glyphs as yet. All three come in bold, italic, and bold italic varieties, and all are released under the SIL Open Font License.

Gentium is still waiting to catch on among Linux (and other) users. Linux maven Bruce Byfield called the font "a mixture of the practical and aesthetically pleasing."

9. Charis

Another SIL International production, Charis is a stylized serif True Type font designed to approximate the appearance of Bitstream Charter, a font found on most Linux machines but not on many Windows or Mac computers.

Mac and Windows users are more familiar with fonts such as the Palatino variants, Book Antiqua, and even the Garamonds. It’s also very similar to the older, apparently obsolete Doulos SIL font, which is even more obscure.

It comes in the usual variants of bold, italic, and bold italic.

Using Linux Fonts in Web Design

Now we come to it. How do you integrate all these nifty, if somewhat unfamiliar, fonts into your CSS font stacks, focused as those stacks are on Windows and Mac users?

First, realize what fonts the Linux crowd doesn’t have that Windows or Mac users will:

Sans-serif fonts: Charcoal, Helvetica, Geneva, Lucida Grande, Lucida Sans Unicode, MS Sans Serif, and Tahoma
Serif fonts: Book Antiqua, New York, and Times
Monospace font: Lucida Console
Fantasy fonts: Symbol, Wingdings, and Zapf Dingbats

Some of these are no real loss to Web designers or Web users: MS Sans Serif and MS Serif, for example, are old bitmapped fonts that few Web designers use any more; and the fantasy fonts are of little use except in very specialized circumstances.

Others, however, are tough losses for Linux users, particularly the more ornate Palatino/Book Antiqua serifs, the ubiquitous Helvetica, and the utilitarian Geneva.

Okay, what does the "average" Linux user have that we can use? Bearing in mind that different Linux systems come with somewhat different font libraries, we can draw some very rough parallels.

Remember, these fonts are not identical alternatives by any stretch. The following are suggested Linux fonts along with the percentage of Linux users that have them installed.

If you’re using a font stack based on a narrow sans-serif such as Helvetica/Arial, Tahoma, or Charcoal, you can use:

Nimbus Sans L (94%)
Liberation Sans (72%)
FreeSans (73%)

If you’re designing with a wider sans-serif such as Verdana or Geneva, you can use:

Deja Vu Sans (91%)
Bitstream Vera Sans (80%)

If you’re designing for a narrow serif such as Times New Roman, you can use:

Nimbus Roman No 9 L (94%)
FreeSerif (74%)
Liberation Serif (72%)

If you’re designing around a wider serif such as Georgia, you can use:

Bitstream Charter (91%)
Century Schoolbook L (98%)
DejaVu Serif (86%)
Bitstream Vera Serif (73%)

If you’re designing for a more old-fashioned serif font such as Garamond, Book Antiqua, Palatino Linotype, or Palatino, you might try:

URW Palladio L (96%)
Bitstream Charter (91%)
FreeSerif (74%)

If you’re designing for a monospace font such as Andale Mono, Courier, or Courier New, you can use (note that the Bitstream/DejaVu fonts are significantly larger than their Courier/Courier New and Andale Mono cousins):

Nimbus Mono L (97%)
DejaVu Mono (94%)
Bitstream Sans Mono (81%)
Free Mono (74%)
Liberation Mono (73%)

Tip: It’s better to use all of the Linux fonts rather than just picking one from the pile, because of the variances among Linux distributions.

Sample CSS Font Stacks Using Linux Fonts

Playing on my firm belief that life is easier when others do some of the heavy lifting, here are some very basic font stacks using Linux fonts and their (relatively) comparable Mac and Windows counterparts.

The general rule of usage here is: Linux fonts first, then the closet Mac equivalent(s), then the Windows equivalent(s), and finally the generic fallback value (i.e. serif or sans-serif).

All you need to do is copy, paste, and adapt to your needs.

Please recall that because so many different Linux distros exist, with so many different fonts included with them, to cover our Linux bases fairly completely, we have to use several Linux fonts in our stacks.

Narrow Sans-Serif

font-family: "Liberation Sans", "Nimbus Sans L", "FreeSans", "Helvetica Neue", Helvetica, Arial, sans-serif;

Wide Sans-Serif

font-family: "DejaVu Sans", "Bitstream Vera Sans", Geneva, Verdana, sans-serif;

Narrow Serif

font-family: "Liberation Serif", "Nimbus Roman No 9 L",  "FreeSerif", "Hoefler Text", Times, "Times New Roman", serif;

"Antique" Serif

font-family: "Bitstream Charter", "URW Palladio L", Palatino, "Palatino Linotype", "Book Antiqua", serif;

Wide Serif

font-family: "DejaVu Serif", "Bitstream Vera Serif", "Century Schoolbook L", "Lucida Bright", Georgia, serif;

Monospace

font-family: "Liberation Mono", "Nimbus Mono L", "FreeMono", "DejaVu Mono", "Bitstream Vera Mono", "Lucida Console", "Andale Mono", "Courier New", monospace;

Some of the ordering in these stacks is strictly personal preference. For example, I like the Liberation fonts, so I put them first whenever possible. You certainly don’t have to accept my preferences, though I would suggest that you place the DejaVu fonts in front of the Bitstream Veras.

It should go without saying that these fonts are not identical replacements for one another. Your size, width, letter heights, kerning, and other typographical elements will vary. Test your font stacks in as many different systems and machines as possible.

Since virtually all of the Linux fonts are free to use and distribute, there’s no problem in keeping the fonts on a flash drive and installing them on all of your test machines as you go.

And of course you are free to add and subtract fonts to suit your fancy.

Wrapping Up

According to survey results from May 2010 as reported by NetMarketShare, the percentage of Linux users among all computer users hovers a smidge over 1%.

A W3Schools analysis drawn from their logs puts the figure higher, at around 4.5%. The NetMarketShare tends towards the mass user profile, while the W3Schools survey is likely slanted towards a more technologically proficient user profile.

In contrast, the two survey put the percentage of Mac users between 5% and 7%.

Your mileage will, of course, vary; you should check your site stats to see what the numbers for your site look like.

It wasn’t that many years ago that designers routinely questioned the need to design for Mac users. Some even went so far as to question the need for testing their designs in any other browser besides Internet Explorer. The majority rules after all, right?

Well, we know better now. Designers always include the needs of their Mac users in their work, and routinely test in Safari along with the usual Windows-specific and cross-system browsers. And they provide Mac fonts along with the Windows-specific and "universal" fonts in their font stacks.

It’s time to extend the same consideration to Linux users. Savvy Web designers are already beginning to test their designs in Linux browsers such as Konqueror and Epiphany (at least in Browsershots if they don’t have access to a Linux machine) along with the other browsers that are part of their testing regimen.

There is no reason that I can see not to do the same with Linux fonts in your font stacks. Since very few Windows and Mac users have the Linux fonts, the vast majority of your Windows and Mac site visitors will see your design in the same fonts they would have before you made your site’s typography Linux-friendly. To my mind, that qualifies as an example of the overused term "win-win."

Linux users might make up a small part of your user base, but they’re technologically savvy, engaged, and often quite vocal. You’ll win some well-earned appreciation and support by serving your Linux users’ needs in allowing them to see your site in "their" fonts. Besides, it’s the right thing to do.

Things Left Unsaid

One of the biggest issues not discussed in this article is anti-aliasing. That’s because many of the more popular distros such as Fedora have anti-aliasing enabled by default (though apparently it is not enabled properly by default in Ubuntu).

Six Revisions » Web Design

The Difference Between Good Design and Great Design

The Designer’s Perspective

The Client’s Perspective

The User’s Perspective

Bringing It All Together

Example: Kaleidoscope

The Gist

References

Related Content

About the Author

Use the 80-20 Rule to Increase Your Website’s Effectiveness

80-20 Whut?

The 80-20 Rule Can be Applied to Your Website

Why Care About 80-20?

5 Steps to 80-20 Your Website

Think 80-20 Is Bullshitake? Here’s Proof It Works

The Case Study: Daily Burn

80-20 Your Website to Increase Conversions

Related Content

About the Author

Designing By Numbers: Data Analysis for Web Designers

Designing by Numbers

What?

Why?

How?

Statistical/Gathering Methods

On-Site Data

Third-Party/Generalized Data

Social Data

Designers Demographics

A Quick Measurement

Importance of Location:

Importance of Type:

Importance of Reliability:

Importance of Margin:

Variable Considerations

Research Matters

Related Content

About the Author

Craftsmanship in Designing Websites

Professional Pride and Value

Naming and Organization

Sweat the Small Stuff

Quality is in the Details

What Details You Should Sweat

Using Guides and Purposeful Alignment

Render and Identify Browser Type

Design with Real Content

Gradients and Texture

Texture

Gradients

Design with Purpose

Smart Mock-Ups

Learn Some CSS

Presenting Your Designs

Conclusion

Related Content

About the Author

How to Use Illustrations to Spice Up Your Web Design Work

Why Branding is So Important

Simple Illustrations Work Well

Implementing Your Illustrations into the Site’s User Interface

Never Use Illustrations Just for Aesthetics

Further Reading

How to Create an Illustrative Web Design in Photoshop

30 Creative Illustrative Website Headers

30 Beautiful Photoshop Illustration Tutorials

30 Creative Examples of Illustrations in Web Design

Getting Comical with Brad Colbow

Related Content

About the Author

Minimalism in Web Design: A Guide

A Minimal Mindset

The Art of Taking Away

Smarter Color

Typography

Layout Structure

Negative Space

Find the Balance