We hear this “staying simple” phrase a lot these days. Is it just a bunch of jargon or is there something to it? We found one approach that you probably haven’t considered.

We all know that we need to focus the website visitor’s attention on a few core features which bring value to the visitors. The minute you start adding too many features to please every visitor, you bargain for too much attention.

The result is that visitors get overwhelmed and confused without understanding the value. You’ve got to show the value to the user right away. You can’t waste too much of their time.

So the question becomes: what do you do when you have a crucial core feature that you want to add to a web product but you fear it might push the product too far from its core and overwhelm your visitors without showing value? The answer is: you build a new product. This is not just a theory. We tried it, and it worked like a charm.

Why a new product instead of new feature?

I know you’re a bit skeptical at this point in the article. You’re probably thinking: “Why should I really do this?” Here are the reasons we found:

● No clutter: New products don’t have existing customers to support and no pre-existing code to maintain. It’s an opportunity to start fresh.

● Greater freedom: This gives designers a lot of freedom to explore better solutions to similar problems. It makes it easier to be your own toughest competitor and have fun.

● It’s smaller: Turning a feature update into a new product forces us to make the product very small, very simple, and very focused. Your product can show value to the user without much clicking around. The side benefit of this is designers get greater depth in the details to delight people. It’s also fun to go deep into your design and development craft.

● The power of a “new” product
From a marketing standpoint a “new product” is a much better story than an “update” to an existing product. Fundamentally it’s open to a larger audience and offers you a chance to approach your old audience again. An existing product already has a position in the market with an existing audience to serve.

● Gradual engagement to paid products: If you want a route to gain exposure to paid products in a way that helps teach people how to use them before they buy them – this is the best way. A small free product that gives a user a taste of the real thing is the best way to show value without any barriers for the user.

● It’s opportunistic: Lots of opportunity on the table. Your goal is clear – develop more customers. You’ve got high energy and motivation from the team. It’s low cost development. It can be launched quickly.

What can you expect?

Here are our results… Rest assured that this is not a bunch of theoretical talk, we actually created an app from a feature in an existing product and had amazing results.

We took the annotation feature from Notable and turned it into a dead simple free product called Bounce.

Here are the results:

● Marketing exposure for both the free app and the paid product: This gave us an opportunity to spark new conversations with a new audience. In the first seven days after launch we had more than 30,000 websites covering Bounce from over 150 countries. Bounce went to #4 search result on Google for the word “bounce” in a month since it launched.

● Converting free app users to paid product: There is a clear upgrade path to Notable from Bounce. As a result of Bounce popularity, Notable sign ups increased.

● We learned how to rebuild a core feature 10x better: As a result of this exercise we made annotations in Notable much more intuitive and easier to use. Now that we have this awesome annotation feature we can use it in other apps. We’ve already folded the code and design from Bounce into our other private release app, Verify.

● Niftiness we can use going forward: We really focused on details when designing Bounce. We used some neat tools and techniques such as Bill Scott’s interaction grid to really focus in on every interaction. We also created some nifty fun bits like the bouncing ball and night/day themes. We can certainly use all of this niftiness in other instances moving forward.

Looking back at this endeavor – our hustle paid off. We’ve been blown away by the marketing success of Bounce.

We asked many Bounce users about the reasons they connected with the app. The same word kept coming up in their answers: “simple.” That was our goal.

Make it as simple as possible for anybody to understand the value. No sign ups. No multiple clicks. Just visit a URL, click a button, and get the value right away. One feature as a product.

This post was authored exclusively for WDD by Dmitry Dragilev, the Lead Marketer at ZURB a 12 year old interaction design firm which helps companies design better products & services through consulting, products, education, training and events. ZURB’s most recent claim to fame is their 10K Apart Competition entry Tiny Bounce.

What do you think of this approach? Please share your views below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

From browsers, to screen resolutions, to user interactions, we seem to constantly be struggling to find some way of thinking outside the tiny little box of “best practice” which we’re constrained by.

Limitations are abundant but are they really such a bad thing? Is it possible, even, that they actually produce far better results than if we did not have them?

Ikea for example, starts with price and then work backwards. Their main concern is the price of the product to the end user. It’s up to the designers to create something appealing which fits within that.

37Signals wrote a whole book about how they operate with similarly heavy restrictions when building web apps; they set a date to launch and then they stick to it, no matter what.

Sometimes Freedom Isn’t a Good Thing

Without constraints, things can get crazy. There is no better way of outlining this than by looking at a platform with generations of unrestricted designs that have been… well.. awful. We are of course talking about our old friend, Adobe Flash.

Now I’m not saying that all Flash sites are bad, or that all people who make them are bad designers. Nothing like that. The fact remains, however, that as a platform Flash has very few design limitations which has lead to some very questionable Flash sites in years gone by.

The sites I’m talking about are the ones which go full screen as soon as they load, have some crazy navigation that involves dragging a carrot over to a bunny rabbit and then waiting for a big animation to complete before the next page loads and you’re presented with equally confusing navigation options.

Designers of these types of interfaces often think they’re “fun” – but usability case studies frequently prove them to be nothing more than a visual explosion of terminal car accidents. Being able to do so much with Flash with relatively little effort is dangerous. It takes away the mentality of “What should I do?” and instead promotes the mentality of “What can I do?”

An animation, graphic, sound effect, or interaction without purpose isn’t design, it’s decoration. Unless what you’re adding to the design is in some way contributing to the message which you’re trying to convey to the user, it isn’t worth anything.

The most important part of any design is the message: good design sends the same message to everyone. It should leave no room for interpretation.

Limiting Color

Digging down into specifics, we can look at some key areas where limitations can greatly improve design. The first of these areas is color. Cited by Bill from GoMediaZine as the second rule of becoming a master designer, limiting your color palette is extremely important.

One of the easiest ways to spot an amateur designer is when they use every color under the sun in a single piece. So how far does this go? Well, as Bill puts it “Reducing the number of colors we use in our design will make the piece feel consistent. Basically, everything will look like it goes together. Just like a sports team’s uniform or a company’s branding – we want a uniform over-all look to the colors.”

Think about some of the best designers in our industry. Most, if not all, tend to use a small but vibrant palette for all of their designs. This is just one of the ways in which scaling back the number of variables in a design can make it more coherent, succinct and even unique.

Limiting Typography

Typography works in a similar way to color, if not on a more extreme scale. Bar a few exceptions, over-using many fonts within a single design can become confusing and even difficult to read. The human eye likes to settle into patterns of recognition, introducing brand new types of type (pun intended) can greatly hinder this and interrupt the flow reading.

Usually a fancy font will work well for large headings and will add to the look and feel of the design as a whole, whereas body-text works best with a fairly standard font that is easily readable at small sizes.

You probably haven’t seen any designs using Zapfino for all their body text any time recently for this very reason. Restricting our use of typography, once again, contributes to a better and a stronger overall design.

Limiting Size

In terms of web design, we’re currently at a very interesting point in history. Where are the screen sizes going? Some sites, particularly well known blogs, are starting to move towards the 1200px wide style layouts. There are even adaptations of the 960.gs CSS framework such as 1200.ws which support this move, but is it the right one?

Generally speaking, sites have now gotten to the same sort of width as a printed magazine in screen resolution. There’s an important question to ask here before considering making your site much wider and that is: Why are printed magazines not wider? The obvious answer is that they would be annoying to hold and slightly too large to carry around comfortably but there’s another important consideration too.

The human eye can only comfortably read a certain distance from one side to another. There comes a point where you have to start turning your head from side to side to be able to look at different segments of a page individually. When was the last time you took in a broadsheet newspaper in its entirity? Chances are that you never do. You fold it or you read it one segment at a time, turning your head in turn to see each area of the paper.

So where does this mean screens are going? Some people think they’re going to keep on becoming larger but devices like the iPhone and the iPad would suggest that they aren’t going to get bigger, they’re just going to get better. It’s great being able to fit more stuff into a larger, wider design but don’t forget to consider the repercussions. Sometimes size restraints, too, can be good thing.

Looking at Minimalism

Minimalism is mainly described as using very little of everything, but if you think about it more analytically; minimalism is simply the process of applying an extra layer of limitations to designs. Where you would normally limit yourself to two or three colors for a design, with minimalism you might take that a step further and limit yourself to just black and white. The same can apply to typography, space, contrast, content, and almost any other core element of design.

Apple’s products are a great example of this. They limit themselves to about six ports on the sides of their laptops where other laptops might easily have double that.

The iPod and the iPhone have always been noteworthy not because of how much they have, but how little. In a generation of twenty-button MP3 players, Apple introduced something with four buttons and a wheel which went on to be the most successful portable music device of all time.

Minimalism doesn’t just mean using less of everything however, it means using a few things really, really well. Elliot Jay Stocks for example, doesn’t use many overzealous gradients, borders, boxes, bars or any of the other ’standard’ layout conventions which we see plastered all over CSS galleries.

The main focus for the design of this site is on spacing and positioning. By cutting out many of the other variables, he uses positioning to the absolute maximum to convey levels of hierarchy and importance. Simple, but extremely effective.

Really good designers are always able to stand out from the crowd because they use these principles and theories as a starting point and then build on top of them. A fundamental understanding of all the different principles of great design is the best way to be able to weave them together into something beautiful.

Conclusion

Limitations can be a good, no, a great thing for design. Using them to your advantage is a great challenge and the more limitations which you impose upon yourself beyond those which already exist, the more of a challenge this becomes.

If you manage to work within tight limitations though, you can create something which is genuinely great and also genuinely  unique.

When you start out on your next piece of design work, try to put some of these principles into practice. Are there any areas which you can limit much more than you would usually? Try to work within tighter constraints to really push your creativity to the next level. You might just be surprised by what you end up producing.

This post was authored exclusively for WDD by John O’Nolan, a core member of the WordPress UI Team, writer and entrepreneur based in Surrey in the United Kingdom. John loves to talk to people, so why not follow @JohnONolan on twitter too?

What do you think? Have you used limitations within your work to create better designs? Have you found that limitations are actually a bad thing? Let us know your stories in the comments below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

As you’ll see below, weddings invitations have been overflowing with creativity, with couples wanting the guests to start experiencing their special day from the moment they receive the invitation, way before the big event.

This collection consists of 30 unique, crafty, and fun wedding invitations. You’ll see everything from circus-themed invitations to cards designed to look like comic book covers.

Enjoy the collection, and share your comments at the end of this post as well as links to other great wedding invitations…

Beach Theme

Tea-Towel Invite

Circus

Coca Cola

Comic Book Cover

Flip-Flops

Worldly

Dancing Dots

DIY Wheel

DIY

Cartoon

Travel Theme

Iceland

Fox and the Hare

DIY Box

Save the Date Photo

Lady in Red

Maine

Tree/Growth

Hearts & Squares

DIY

Handmade

Custom Button

Pacman

Puerto Rico

Demolition Derby

Letterpress Pomeroy

Rock Poster

Scout Books

Set Sail

Compiled exclusively for WDD by Zoe Ajiboye.

Which ones did you like best and why? Please share other great invitations below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

Gradients and colors and contrast are all good, but there’s a more important side to web design that many people overlook most of the time: Designing emotions.

Discussing emotion in design is a bit of a hot topic at the moment, it seems to be popping up in more and more blog posts and speaker sessions. In fact I saw at least three different web designers say that it was the subject of the talk which they had recently submitted for next year’s SXSWi.

So what’s all the fuss about? Today we’ll take a look at what that means, how you can do it and why you should. This is taking design to the next level, beyond the norm.

Emotion Design

Emotions are important in design because emotions are important in absolutely everything.

Everyone is trying to make their brand, their website, their name the most memorable thing possible but how are they going to accomplish that? Think of the most memorable times in your life, right now, go ahead.

I’ll wager a good amount of money that the three to four things that you just thought of all involved a lot of emotion. The death of a loved one, the birth of a child, your wedding, the day you bought your first car. We remember the things which instill powerful emotions within us.

In his book, The Alchemies of The Mind, Jon Elster emphatically states that “Emotions matter because if we did not have them nothing else would matter. Creatures without emotion would have no reason for living, nor, for that matter, for committing suicide. Emotions are the stuff of life…. Emotions are the most important bond or glue that links us to others…. Objectively, emotions matter because many forms of human behaviour  would be unintelligible if we did not see them through the prism of emotion.”

Using Emotion in Web Design

As a web designer, it’s very easy to get caught up in just the design of the graphics. Of course the next step beyond that which everyone gets stuck on is usability.

So many people talk about usability like it’s the be-all and end-all of web design. As one speaker at the Future of Web Design in London succinctly put it this year: “Designing a website to be usable is like baking a cake to be edible. It’s simply not enough. A usable website should be the minimum requirement, it should go without saying that a website should be absolutely usable. It’s time to look beyond that.”

At the most basic level of considering your users’ emotions, you can consider letting them choose how they want your site to work. What content do they want to see on the home page? What order do they want to see it in? What’s their favorite color? Allowing users to customize your site to their preferences (without having to sign up for anything) creates and emotional attachment to the site with which the user is interacting. They’ve just invested time, however little of it, to make this site perfect for them. They’re going to remember that. Check out the BBC website if you want to see this in action.

What about making users happy without them having to do any customizations though? What about creating something that is so naturally pleasurable to use that people can’t put it down? Well, allow me to introduce you to my good friend: The iPhone.

The iPhone isn’t actually the story here, it’s the touch based device, regardless of who it’s manufactured by. As human beings we live in a real world, touching real things, moving them with our hands. In fact, if you think about it, computers are incredibly unnatural to use: We move one thing on our desk that moves another thing on a screen, and we spend hours pushing complex button combinations with our fingers whilst looking in a completely different (vertical) direction.

People are enthralled with touch based devices because they make computers work in a way that we’re naturally programmed to understand. We see something, we touch it, and it responds in some way. I recently watched a three year old girl navigating her way around an iPhone with absolutely no problems at all. The best part? No one had ever taught her to use it.

Touch based devices create emotions within us: joy, intrigue, and surprise. We understand them perfectly and yet they still thrill us because they’re so clever.

Creating Emotions

So how can we create emotions for users of our websites outside of the UI? Well, to an extent you need to put your marketing cap on here. You need to think about people, not design.

You need to think about perception, not composition. If you can ask yourself a few vital questions about how your users are feeling, then you can go a long way to pleasing them.

Consider FreeAgent for a moment, a fantastic piece of accounting software in the UK, they know that typically people who visit their website are angry, frustrated, and fed up with trying to do their accounts (and failing). Their website is targeted almost solely at cheering you up and telling you not to worry, there’s an easier way to do things. They win.

Desire

But what about creating emotions at more of a root-level? Apple (yes Apple, no article about design would be complete without some mention of them, so we might as well get it over with) create astonishing levels of desire and jealousy amongst their customers.

Despite producing over-priced, under-performing, over-rated products they still retain unprecedented success, constantly. Apple are the biggest fashion label of the tech world. That’s not an insult by the way, sex sells, and everyone else needs to catch up. Apple makes desirable products.

“Thin, beautiful, portable, durable, accessible, powerful, unlimited, magical, revolution.“

Sound familiar? All of those words and sentiments were used in Apple’s 30 second advertisement for the iPad, and not a single one of them has anything to do with what the product does.

Sympathy

Another common case study of companies creating emotions in customers, and this is going to be a controversial one, is with charities.

Charities instill sadness and sympathy from deep within you, in order to make sales. Think of every advertisement you’ve ever seen for a charity… most of them go like this: “Sally is a [starving child / stray dog / person with a terminal illness], she’s all alone. Her parents died just after she was born and she’s been living on the streets like this ever since.”

The cause may be just, but don’t mistake the marketing tactics as legitimate sentiments appealing to your moral integrity. The people who create those advertisements know exactly what they’re doing. They’re making you sad, they’re making you sympathetic, and they’re making you want to reach out and help – with your wallet.

Anger

Possibly the most interesting way to look at deliberately instilling emotions in users is from the perspective of anger.

Now, this has been suggested before, but to my knowledge never confirmed. What do we consider to be great customer service? Usually it’s when a company gets something really wrong, they own up to it, give you a full refund and treat you really well.

It’s unexpected and we absolutely love it. It may be cynical, but is it really unreasonable to think that companies may now be screwing up your order on purpose? If I was running an ecommerce store I would deliberately screw up about 5% of all my orders – then give the customer a full refund and send them the product anyway.

You can’t buy publicity like the way they’re going to talk about that to all their friends.

Closing Comments

Just because something functions correctly, doesn’t mean it’s any good. We need to stop thinking about usability for two seconds and push ourselves to go a little further than that. How are my users feeling? Why are they even on this site? What is going on in their life that made them come here?

What emotional reaction are they going to have to this site?

You’d better hope the answer to that last question isn’t “nothing in particular” because if it is, then you failed.

Study emotion, understand it, understand how it fits into what you’re doing and then use it to your benefit. Whether you use your understanding for noble purposes or not is entirely up to you, but take the next step and start designing emotions and experiences, not just aesthetics.

This post was authored exclusively for WDD by John O’Nolan. John is also going to be authoring a short title on designing emotion with WooThemes founder Adii Pienaar, so make sure you follow @JohnONolan on twitter for updates!

What do you think? Have you come across any really good examples of companies instilling emotions in users? Better yet, have you used any techniques like these yourself and had success? Let us know in the comments below!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

Today we release a new set of icons which we call “Reflection”. It’s simple yet elegant and stylish at the same time. You’ll find these icons great to use at small sizes, such as for website navigation, menus and more. Both vector and raster versions are included.

The set contains 208 icons and is available free of charge for personal and commercial projects, with attribution required.

Redistribution isn’t allowed, so If you’d like to share these icons with your friends, please direct them to this page so that they can download their copy from here.

There is a full preview right after the jump… We hope you enjoy the new icons!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

This concept of a steady progression of shades can be used to present information as well.

This technique of tinting digital photos works well for presenting information and can improve usability.

Just as a gradient shows a range of colors, a monotone or duotone can be used to show a range of data.

In this article, we’ll learn how to apply color to enhance infographics.

Unless they’re calculating sales, most people don’t associate spreadsheets with fine-art photography. But even outside the world of accounting, tables and duotones can mix. The trick is knowing when to use color.

Tinting Enhances a Grayscale Image

Digitally sepia-toned images are grayscale images whose pixels have been colored slightly, usually with beige or blue. Orange or yellow can replicate the effect of aged photos, which were sometimes tinted with sepia pigment. Sepia tones (or, more broadly, monotones) can either “warm up” or “cool down” a black-and-white (grayscale) image without detracting from the composition.

The difference between a grayscale image and a sepia-toned one is the sepia’s tint, as seen above. Any digital photo can be turned into a sepia tone, although some photos work better than others. Images that rely more on color (specifically hue) than contrast often weaken in the transition to tint.

The striking pink shines in the original image above but disappears when the hues become uniform. Even if an image could work with a tint, the wrong tint may overpower the photo.

A tint can become a gimmick if the color is too obvious. Above, the original photo takes on a psychedelic air when too much blue is applied. The goal isn’t to add color but to add “flavor.”

Using more than one color in a tint is possible:

The three types of tints above are appropriately named. Monotones apply the same hue across the whole image. Duotones use one hue for shadows and another for highlights. Tritones add a third hue for mid-tones.

Duotones Provide Natural Ranges

Traditional tables and bar charts work in two dimensions, but not all data fits the row-column format.

A duotone is great for presenting a range of data because it is itself a range of colors. Aesthetically speaking, blends of two main colors tend to look like they belong together. But applied to data, ranges of colors have other benefits. First, because not everyone can see colors well, using a range of dark-to-light colors helps people with visual impairments to see the effect. Secondly, distinct shades are useful for representing different sets of data.

The charts below show the sales volumes of a fictional company over several years. How could color improve them?

Let’s take charts one by one:

• 1998: This standard bar chart uses space to explain data. The height and horizontal position of each bar tells us how sales went in each quarter of the year. It’s functional and clear.
• 1999: Color-coding the bars adds style but doesn’t tell us anything new. Colors could have been used to group the bars together, but because each bar is a different color, nothing is improved. We can tell the difference between each bar just as easily without color.
• 2000: Using colors vertically shows how the bars relate to each other. For example, notice how Q4 barely reaches the red area, a fact easily overlooked in the first two charts.
• 2001: This last one uses a duotone, but it doesn’t help. Adding an effect without making the data more informative doesn’t benefit the user. That’s the difference between a gimmick and an enhancement.

The charts above use color variation in lieu of solid bars. Both versions serve the same purpose: to show sales in increments per quarter. Color takes the data a step further.

• 2002: The break-even point adds some new information: sales must pass this line for the company to make a profit. The 2002 chart shows that the company operated at a loss in only one quarter.
• 2003: A difference in shading indicates the break-even point. But is it clear enough?
• 2004: The areas of the bars showing profit are indicated even more clearly here, but we’ve lost the increments.
• 2005: The opposite of the chart for 2004, this one marks increments above the break-even point, clearly indicating the company’s profit (if any) in each quarter and ignoring the rest.

Color is a powerful tool for non-verbal communication. Beyond aesthetics, it can be used to organize. How else could we use the colors in the last set of examples?

• 2006: Gradients indicate where each bar hits the $20,000 and $40,000 marks. This is helpful, but the break-even point is $30,000.
• 2007: Pure gradients grow darker to show higher sales—until we reach the break-even point. Because the colors above the $30,000 mark are similar to the background color, they fade away. High contrast draws attention to the fact that the company turned a profit in only three quarters.
• 2008: Reversing the gradient midway up the y-axis is an unusual approach. This implies that the $20,000 to $30,000 block is significant but not the $30,000 break-even point itself. Unlike the pure gradients for 2007, though, this graph clearly indicates every $10,000 increment.
• 2009: They say that some rules were made to be broken, but this graph breaks them for no apparent reason. None of the shades match the dollar increments, and the break-even point is hard to see. Shading works best when it tells the user something. Shading for its own sake is mere decoration.

More Examples

This technique isn’t limited to bar charts.

The data above compiles the star ratings of critics for several movies. The raw data on the left is legible but unhelpful; scanning each line of text for a single datum is possible, but it’s difficult to see the big picture. Presenting the data in a table (right) gives the viewer a sense of everything at once. We can at least clearly tell that there are five critics and seven movies, and we get a rough idea of who liked what.

Assigning a color to each star rating would reveal more about how each movie fared. But not any colors will do.

The table on the left follows the rules but not the spirit of color-coding. Telling the ratings apart at a glance is easy because each value has a consistent color, but there is no logic behind the color choices.

The table on the right uses color more purposefully. Dark shades are assigned to lower ratings, and light shades are assigned to higher ones. It would also work the other way around, but the effect is the same: a range of shades is assigned to a range of values.

Not only is this more visually pleasing, it reveals trends in the data. Now it’s easy to see that movie F scored well overall but movie B didn’t, that critic 2 was harder to please than critic 4, that all critics liked movie F but not movie D, and that they disagreed about movie A. Different shades of the same hue, then, can reveal more than the data on its own.

Monotones and duotones work best when information is arranged in layers, levels or a range. For example:

Source: infoplease

Source: An Event Apart, Boston 2010

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

Where else can a monotone or duotone help explain information? Share your thoughts in the comments section below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

It is named after the 14th-century logician and theologian William of Ockham.

But what the heck does Occam’s Razor have to do with web design? I’m glad you asked. To put it plainly, Occam’s Razor states that the simplest explanation is usually true.

For our purposes, to use Occam’s Razor is to do something in the simplest manner possible because simpler is usually better.

In this article, we’ll show you how to use Occam’s Razor to create better websites and to enhance the user experience, both for yourself and your clients.

Before we dive into the details, let’s look at a real-world example of Occam’s Razor as used by a company whose simple and effective products you are certainly familiar with: 37signals.

A Real-World Example

37signals founders Jason Fried and David Heinemeier Hanson are the brains behind some of the web’s most interesting products and technologies. Among their small yet influential ranks, they practice and preach a simplicity akin to Occam’s Razor.

It has served them well over the past decade. What began as a three-person Web design consulting firm in 1999 now has three million worldwide users of its software products (which include Basecamp, Campfire and Highrise). Basecamp alone generates millions of dollars for the company, and the company employs just 16 people. Did I mention that they are responsible for developing the wildly popular open-source programming framework Ruby on Rails? Here’s a quote to drive it home (from Rework, the duo’s latest book):

Lots of people hate us because our products do less than the competition’s. They’re insulted when we refuse to include their pet feature. But we’re just as proud of what our products don’t do as we are of what they do. We design them to be simple because we believe most software is too complex: too many features, too many buttons, too much confusion.

This business case makes clear, and Jason Fried would probably tell you so himself: doing things the simple way makes perfect business sense. It’s more than logical: it’s smart. Here’s how to make simple work for you.

Simple Web Design

Designing simply for the web is about removing barriers. If a user wouldn’t know where to click, tell them. If there are too many navigational choices, eliminate some. If the background image distracts from the message, tone it down.

In architecture, a cool design should not compromise the strength of the structure or make it difficult to get from point A to point B. Similarly, a cool web design shouldn’t compromise the clarity of the message you are trying to convey or make it difficult for the user to navigate from page A to page B.

When your goals are specific—such as converting visitors into customers or getting users to initiate contact—anticipating and eliminating potential obstacles is crucial, especially during the design phase. Too often designers build something cool without first figuring out how to achieve their goals or anticipating how easy the design will be to navigate, which can lead to constant redesigns, perpetual tweaking, lost time and lost money.

Simple goes hand in hand with easy. The next time you open Photoshop to begin a new design, ask yourself questions like these:

• Would a non-designer or non-programmer find this interface confusing?
• Do I need all of this information along the top that pushes the newsletter sign-up form below the fold?
• How easy will users be able to access the information they want?
• Are there too many choices?
• Will this interface be usable for my target audience, a 70-year-old person or someone with partial blindness?

You get the point.

Simple designs are good for another reason: differentiation. If you want your website to survive in a niche dominated by over-the-top glitz and glam, create some contrast by building a simple layout.

Simple Coding

A buzzword floating around the web right now related to coding is “lightweight,” which is just another way of saying “simple.”

It’s common knowledge that simple code loads faster and generally encounters fewer problems. If you could implement a solution using lightweight code rather than a bloated alternative, the choice would be obvious. What keeps developers from doing it then?

Bloated code has two main causes. One is laziness. People love to copy and paste. Code libraries such as jQuery and frameworks such as the 960 Grid System are useful, but they have fostered a lazy mentality, which can lead to bloated code. How can you be sure your website is as simple as it can be if someone else has written the code?

Just as a mechanic should be familiar with what’s under the hood, so a developer should be familiar with the code running their website. What if something breaks? How would you fix it? Just because a solution works doesn’t mean that it is the simplest or best way to handle your case.

The other cause of bloated code is lack of knowledge. Many designers and developers—even some who claim to be advanced—have become stuck using programs like Dreamweaver to code their websites, and they sometimes rely on them to produce code for them.

Sure, these programs can produce code, but they don’t always do it efficiently; they simply execute a command based on what they were programmed to do. Instead, by using tricks such as CSS shorthand, you can optimize code for faster loading times, which will ultimately improve the user experience.

Simple E-Commerce

When it comes to selling online, simplicity should knock content right off the throne and assume its rightful place as king of the realm of e-commerce. Why? Because what you’re selling won’t matter if making a purchase is too difficult. If making purchases is easy, fewer shopping carts will be abandoned and more sales will be made.

So, what can you do to make online shopping simpler? While each experience should be unique and tailored to the needs of the company and its users, there are a few easy ways to boost the effectiveness of an online store:

• Make the search box prominent. Searching will probably be the preferred navigation method of many users, especially if you offer hundreds or thousands of products for sale.
• Don’t waste people’s time by making them duplicate information. For example, make it easy for users to indicate that their shipping address is the same as their billing address by adding a simple check box to the form.
• Don’t crowd products too closely together.
• Don’t annoy shoppers with unexpected pop-ups and hover tips. There’s a fine line between hand-holding users and trusting them to do things on their own.

Simple Web Copy

The majority of websites rely on text to share their services, products and ideas. Doesn’t it make sense to phrase things so that they’re easily understandable? Remember, simplicity appeals to everyone regardless of their sophistication or ability.

The familiar KISS acronym (keep it simple, stupid) should hang on a giant plaque above the desk of anyone responsible for web copy. Your website is accessible from just about every corner of the globe, which means that simple copy is the best way to target the widest possible audience.

Forget about dictionary-style definitions and cramming keywords down people’s throats (those taste good only to search engines). Say what needs to be said as briefly as you can. Trying to sound smart on the web is just plain stupid: you’ll leave readers confused, and a more interesting website is always just a few clicks away.

Simple Business Practices

Sometimes you can make things simpler and easier for you and your client; other times you can make things simpler and easier for just one of you. If you have to choose, favor your client.

Online shopping carts are abandoned when things get too complicated; so too do clients abandon working relationships that are too difficult to maintain.

Ask yourself questions like: How easy am I to contact? How easy would it be for me to pay my own invoice? (If you wouldn’t want to pay your own invoice, think how daunting it must be for your clients, who aren’t tech-savvy.) If your customers have to press three buttons and wait on hold before speaking with you, perhaps you should rethink your phone system.

Conclusion

I can’t write about simplicity without mentioning Apple. Simplicity has real value, and it can be measured in cold hard cash. That much is clear to Apple’s CEO, Steve Jobs, whose personal net worth now tops $5 billion. He has delivered some of the world’s coolest, most user-friendly gadgets.

Simplicity is built into the iPhone and iPad; each device features only one button on the front. The MacBook is made from a single piece of aluminum. And simplicity is why so many designers imitate Apple’s website (the white space, the navigation, the large photography).

Apple even extends simplicity to its packaging. When I recently replaced my Dell workstation with an iMac, my jaw dropped as I shifted my gaze between the single power cord coming out of the back of the Mac to the pile of cords snaking along the floor next to the old Dell. That’s the power of simplicity. The team in Cupertino, California, puts Occam’s Razor into action and reaps the benefits.

You might ask… why would an advanced designer or developer want to simplify? Isn’t that regressing? I would say that while beginners must use a simple product because that’s what they are capable of handling, this isn’t necessarily the best case for simplicity. Pros choose to impose constraints on their work so that they can create a better product.

It might be time to rethink the way you design for the Web. Experiencing a website shouldn’t just be easy: it should be painless. Make navigation effortless so that users focus more on the content than on how to access it.

Written exclusively for WDD by Chris McConnell. He is an entrepreneur, designer and author who co-founded the design firm Brandeluxe and writes regularly on his blog, Freelance Review. You can also connect with Chris on Twitter.

Do you apply the Occam’s Razor principle in your designs? Why or why not? Share your opinion below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

To work well, a design has to have elements that play off each other’s strengths. Fortunately, every piece of content has inherent guidelines.

Layout, or the arrangement of content on a web page, is critical to a design’s success. Among other things, layout prioritizes content to lead people from one element to the next.

If done right, people will be so interested in the content that they won’t notice anything else.

Read on for more details and tips for creating layouts that work in your designs.

With the example below, most people will notice either the photo or the headline first, then the text and finally the links.

They may not notice that the headline, text and model’s face are set one third and two thirds into the page respectively (honoring the rule of thirds), or that the headline and links are written in colors sampled from the model’s lips, or that the curve of her shoulder leads the eye toward the calls to action.

Text, photo and headline make up a composition. If one falls out of place, the whole piece fails.

Arrangement Based on Mutual Respect

Where do we put things? Let them tell us. The quirks of graphics, photos and chunks of text become apparent when they meet on a page. Some work together better than others, and some work only when placed a certain way. For example, our layout technically works in two ways:

Figure 1 shows the layout used in our example above. Gray blocks represent the headline, photo and text.

Figure 2 shows how the same principles would apply to its inversion: one large element balanced by two smaller elements. This particular photo looks better on the right, though.

Our model is looking to the left. In figure 1, she’s looking at the text. In figure 2, she’s looking away from the text. That might have worked if she was looking at the camera, but because she’s looking away, it loses some impact. Not much, but enough to matter.

The model alternately shows interest in the text and, when inverted, ignores it. The arrangement of elements establishes either a positive or negative attitude.

Alignment Based on Landmarks

Sometimes the thing that makes elements work a certain way also provides clues about space and alignment. We noted how the model’s eyes point to the left, but the photo and text contain other visual cues.

Implied lines between landmarks in the typography and the image abound in this composition:

• The model’s eye and lips and the edge of her nose meet the edge of the right-hand column of text.
• The left-hand column of text meets the left edge of the headline. It almost reaches the edge of the model’s hair but falls short to stay consistent with the right-hand column.
• The model’s face (particularly the eyes and mouth) defines the vertical space of the headline.
• The bottom of the photo marks the bottom third of the composition (in the rule of thirds).
• The model’s eyes are one third from the top of the composition.
• The center of the model’s face and the right edge of the headline meet at the one-third and two-thirds points of the composition’s width.

Some landmarks have more power than others. Designers and photographers could debate, for example, whether the model’s eyes are more influential than her silhouette. But a layout based on any landmarks is better than a layout that ignores them.

Using Features to Create Harmony

Non-designers who try their hand at layouts sometimes arrange elements based on how they fit onto the page. Space should be respected, but it doesn’t always lead to the best design.

Figure 5 aligns elements to the page’s space and bases everything on the boundaries of the canvas.

Figure 6, though, bases its layout on focal points in the photo. The result is a more streamlined appearance.

Figure 5 is inefficient because viewers bounce around between focal points: to the headline, down to the face, up to the text. The simplest line is straight. Hence, figure 6 guides the viewer’s gaze easily from left to right, from one element to the next. The crux of the second layout is a narrow band running along the headline-face-text alignment.

In these images, readers are drawn to the model’s face, the headline and the text—usually in that order. That’s three different areas to look at. Aligning them gives the layout focus.

The Right Answer

All three layouts below use the same headline, photo and text elements:

The first layout has the most “breathing room.” The second respects the text. The third layout uses negative space to achieve balance. All three use landmarks but in different ways. Is one the best?

Hunting for an answer may blind us to the obvious: that multiple solutions can be equally valid when the elements work together. Visual landmarks are opportunities, not rules. Take another look at the first design.

The more the elements conform to implied lines, the more a non-conforming element will stand out. Here, the designer breaks the word “Landmarks” from the other text’s vertical alignment, thus emphasizing the keyword.

There’s no doubt about what the page is promoting. Success isn’t measured by how strictly elements conform to principles of design but by how well the page communicates its message.

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance writer and designer who solves communication problems with better design.

How do you follow landmarks on your designs? What works best for you and what doesn’t?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

But on occasion, they can come in very handy: at conferences, when we meet face-to-face with clients, or when we happen to run into someone we might want to do business with. Having business cards is a great way to promote yourself in the physical world.

Of course, since web design is a creative field, you’ll want your business card to serve as a sort of mini portfolio that displays your skills. You should put the same time and energy into designing your business cards that you put into designing a website.

And the skills necessary to design a business card can be easily adapted from those that are required to design a website. Read on for more information about how to design your business cards.

Size and Shape

Standard business cards are 2″ x 3.5″, in either vertical or horizontal orientation. Horizontal is more traditional, but plenty of people and companies now opt for vertical layouts.

There are a few benefits to the standard sizing, the primary one being that it’s generally less expensive because it’s common. The other big benefit is that it is immediately recognizable as a business card, and will fit in standard business card holders.

But just because business cards are traditionally a 2″ x 3.5″ rectangle doesn’t mean you can’t deviate from that size and shape. With modern printing and cutting techniques, virtually any size and shape can be used for your business cards.

Die cut cards are particularly popular. Some opt for a traditional rectable, but with rounded corners or some kind of cutout shape within the card.

Others opt for an entirely custom shape, often reflecting their logo or a company theme or mascot. Just remember that anything too complex is likely to get bent or otherwise misshapen, which may defeat its purpose.

Here’s a great example of a die-cut card, with letters cut out of the card itself.

Over-sized and under-sized cards are growing in popularity. Over-sized cards are often die cut custom shapes. Like die-cut cards, over- or under-sized cards can make your business card stand out from those of your competitors.

Folded cards are yet another option. You can choose to have the fold along the long or short side of the card.

The best option generally depends on the purpose of the folding parts and the orientation of the card itself. With a vertical-oriented card, you may want the fold along the short side, and with a horizontal card you may want it on the long side. But again, it depends on the overall design of the card.

Materials and Effects

The vast majority of business cards out there are printed on paper cardstock. Cardstock comes in a variety of weights, textures, and colors. Card stock weights are calculated a bit differently than text-weight paper.

A pound weight of card stock is calculated based on the weight of 500 20″ x 26″ sheets, while text weight paper is calculated based on the weight of 500 25″ x 38″ sheets.

Card stock is any paper with a weight of between 50 and 110lbs. It’s also sometimes referred to by points or mils, which is the thickness of the sheet in thousandths of an inch. So a 12 pt. card stock is .012 inches thick.

In addition to the weight of the paper, you’ll also want to consider paper color. Most business cards are printed on either cream or white paper. But virtually any color can be used. Ask your printer for options as they likely can get better deals from certain manufacturers.

The paper texture is also important. Decide whether you want your paper to be smooth or rough, matte or glossy, or anywhere in between. Your printer can likely give you samples to see what they have available. Alternatively, check out your local office supply store to see what they have on hand.

Coatings
While many business cards don’t bother with any kind of coating, you may want to opt for an aqueous (water resistant) or UV-protective coating. Either of these options make your business card more durable, but they do add to the cost.

Specialty Materials
While most business cards are printed on paper, there are a growing number of specialty cards that are printed on other materials. Plastic and wood seem to be the most popular, but there are also examples of metal business cards. Plastic cards are available clear, opaque, or frosted, and are even available in different colors, and aren’t significantly more expensive than good quality paper cards. Even wooden business cards have come down significantly in price, with single-color cards starting as low as $35/100.

Here’s an example of a business card made from wood, with a custom shape.

Embossing
Embossing is done by applying heat and pressure to create a raised area on a piece of paper or cardstock. Embossing is generally done without applying any ink to the raised parts. A logo, monogram or other image are all commonly embossed on business cards.

Embellishments
Depending on your budget, you can add virtually any embellishment you want to your business cards. To get an idea of some of the types of embellishments widely available, check out your local scrapbooking supplier. If you’re willing to put in a little elbow grease on your own cards, you can often pick up supplies in these shops. Alternatively, check with your printer to see what types of embellishments they might be able to handle (it will vary widely between printers).

A creative card design with hair pins as embellishments.

Printing Method

There are a variety of printing methods out there. There’s also a wide variety in the quality, look, and cost of the different printing processes. The most common process for commercial printing is offset, though unless you’re getting a very large quantity of business cards printed, it can be cost-prohibitive because of setup fees.

Digital printing methods are probably the most common ways to have business cards printed. Among digital printers, some use inkjet technology while most others use laser printers. Digital presses are usually more cost-effective for shorter print runs due to lower setup costs.

In addition to the common processes above, there are a few other options out there. Letterpress is a great choice for a card with a higher-end look and feel. Because printing plates with raised letters are pressed into the paper, the end result has indentations for each letter or printed image.

These are best limited to cards with only one or two colors, as each color has to be printed separately. Most letterpress shops are small, often using antique platen presses. The cost per card is high, especially for smaller quantities, but the end result gives a custom, bespoke feel.

Letterpress is often associated with more traditional designs, but it works well with a modern design like this one, too.

Engraved cards are also an option. Engraving is most often seen on wedding invitations and other social stationery, but it is an option for business stationery, too.

Engraving involves using printing plates that are engraved with metal gravers or acid etched. The printing plates are inked, and the ink fills the etched or engraved lines. Dampened paper is then printed using great pressure, to ensure it will absorb all of the ink from the plates. This results in a heavily-inked, sometimes raised effect. Thermography printing is sometimes used to achieve a look similar to engraving at a much lower cost.

At the absolute low-end of the scale are self-printed business cards. If you’ve ever set foot inside a stationery or office supply store, you’ve probably seen the pre-scored sheets of business cards you can buy to print your own cards on your inkjet or laserjet printer.

If your card is very simple, preferably black and white, and you have no budget, then printing your own cards can be acceptable. One trick, though, is that instead of buying the pre-scored business card sheets (which will have tell-tale remnants of perforations along each side), buy good-quality cardstock and a paper cutter. Use the templates for laying out your business cards, but then cut them apart yourself to eliminate the perforation marks.

Color and Style

Now that you have an idea of the options available for creating your business cards, it’s time to get down to actually designing those cards. You’ll want to take into account the style of your current marketing materials, including your website, as well as the image you want to portray to potential clients.

These business cards offer a great example of how color can be used in your design.

Your color choices can have a great impact on the type of printing process you can use, as well as the cost of your printed piece.

A standard, 4-color process is common with both offset and digital printing. While opting for a single-color business card on these types of presses can sometimes save a bit of money, it often has no effect on the cost of the project (especially with digital presses). By contrast, a one or two color design can be much more cost-effective with a letterpress or engraved business card, as each printing plate has to be custom-made for each color.

If your website and general style are minimalist, stick with a minimalist card. Pay close attention to typefaces and color and less attention to images and embellishments. With a minimalist design, you might consider using a more expensive printing technique like letterpress or engraving, especially if you’re only using one or two colors.

By contrast, if your style is more artistic or extravagant, have your business card reflect that. Go with a four-color printing process and really let your personal aesthetic style shine through. Be as creative with your business card design as you would be with your website designs.

Experiment with a few different card styles and designs, and then get estimates for how much each one will cost you to have printed at different quantities. Since business cards can range widely in price from only a few cents each (or less) to well over a dollar or more, your budget will likely have as great an effect on the final design as any other factor.

Information to Include

Remember that your business card’s primary function is for prospective and current clients to be able to access your contact information. The information you provide on the card is vital to how effective it will be.

But some designers and business people have a tendency to include every bit of information they can think of on their business card. Because of their smaller format, business cards are a prime case of less is more.

What you choose to include on your business card is highly dependent on the design and how you’re most-often contacted by clients. In the simplest incarnations, a business card might only include your website address. This can work if your domain name is your name or your company name, but otherwise it’s only likely to be confusing.

At a bare minimum for most cards, you’ll want to include your name and your company name, what you do, and your basic contact information (phone, email and website address). Other information you might consider including:

• Street address
• Twitter username
• Professional certifications or memberships
• A tagline or slogan

You may opt to include your logo, a background image, or some other complementary graphic. Alternatively, you might decide you only want text on your card (possibly on a colored paper background). Look at your other marketing materials and website and emulate their look and feel when it comes to graphics.

File Setup

For anyone with a background primarily in website design, print specifications can be a bit foreign. There are certain things that are vital in a printed file that are either irrelevant in a digital file or can be fudged quite a bit. But if you try to do that in something that will be printed, you’ll end up with a card that’s a mess and way less professional-looking than you might have hoped for.

DPI is one of the most important things to remember when you’re designing a printed piece. Your business cards should have a resolution of at least 300dpi for any images included. Fonts should be embedded rather than converted to images for the crispest edges. You’ll also need to factor in a bleed if there’s color or images that run right to the edge of the card. Bleeds can be more expensive, though that will depend on your particular printer.

Each printer is going to have their own preferred specifications for your files. Check with them prior to finalizing your design to make sure you’re working within their guidelines. Some printers might want your original artwork files while others want PDFs made to particular specifications.

Others might be able to accept an EPS or TIFF file, though in those cases you’ll want to use an even higher resolution file (600 or even 1200dpi), since your fonts won’t be embedded.

Examples

Below are fifty examples of excellent business card designs to inspire you and give you ideas for your own business card designs.

Written exclusively for WDD by Cameron Chapman

How do you design your own business cards? Which designs do you feel have a more lasting impression? Share any other comments below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

Many designers are still approaching website changes as redesigns, with little thought to whether they should be redesigning or realigning the site for their clients.

In fact, many designers are still a bit confused about which one is appropriate for which projects, or even what the difference really is.

Understanding the difference between redesigning and realigning can result in happier clients who are better reaching their website goals.

There are times when redesigns are appropriate, and there are other times when realignments are appropriate. It all depends on how the client’s current site is working for them, and what their goals are.

Read on to find out more about the differences between redesigning and realigning, and how to determine which one fits your current and future projects.

What’s the Difference?

The difference between redesigning a website and realigning a website isn’t always 100% clear cut. But the main thing that sets them apart is that redesigns are primarily focused on aesthetic changes: color schemes, graphics, typography, etc.; whereas realignments are more focused on purpose and function.

The White House’s website underwent a major realignment when President Obama took office. Screenshots from iterasiarchive and whitehouse.gov.

A realignment will look at what parts of a site are working and what parts aren’t, and will then work around those strengths and weaknesses. A redesign, on the other hand, will focus more on design trends and how the site looks.

Many designers think that every website revision should be a realignment rather than a redesign, but the truth is that both have their place. Below we’ll cover the strengths and weaknesses of both redesigns and realignments, and how to decide which one is appropriate for your projects.

Redesigning

As already mentioned, redesigning focuses on the aesthetics of the site. A redesign will likely consist of changing the graphics, color scheme, and other visual elements of the site’s design. Little or no attention is usually paid to the structure and functionality of the site. Content usually stays the same, too.

When is a Redesign Appropriate?
Sometimes the structure of your site is just the way you want it. Your users are happy, your site is achieving what you want it to achieve. The only problem is that your site has been completely the same for the past five years. While it’s perfectly functional and does what it needs to do, it looks like a throwback and you’re worried it might be costing you new business.

This is a case where a redesign is perfect. You don’t need to change the functionality, content, or structure of your site. You just need to give it a facelift to make it appear fresh and new.

Things to Remember When Redesigning
When you’re redesigning, you shouldn’t be doing much with the structure or function of the site. Look only at the visual elements and how they can be updated or otherwise improved upon.

Most redesigned sites will bear a heavy resemblance to the original design, at least in terms of the way it works and the general content. You might move things around, but with an eye toward working better visually. The new design will leave the structure of the site much the same as it was prior to the redesign.

Redesigns are generally much faster to complete than realignments. If the original site was built on a CMS, it’s just creating a new theme or template. One thing you might want to consider if the site wasn’t built on a CMS is to switch it over to one during a redesign. While this might be closer to a realignment, it’s worth the time and effort if the client will be updating their site’s design on a regular basis.

Make sure your clients are prepared for the impact a redesign can have on their site visitors. They will almost inevitably get some long-time visitors who will complain about the new design, and (hopefully) a lot of visitors who love the new design. A client who’s never been through a redesign may be surprised when a visitor complains about the new site if they’re not prepared for that eventuality.

Remember that redesigns are often instinct-driven and rely more on your intuition as a designer than on hard data. Because functionality is left intact, you can proceed more on gut instinct than you can with a realignment.

Screenshots from Archive.org and HighriseHQ.com.

Realigning

Realignment, as compared to redesign, has a much greater focus on user experience and usability. With a realignment, you’re addressing specific issues with the structure or functionality of the site, in addition to design changes.

You’ll need to spend a lot more time on the fact-finding portion of a realignment. Figuring out what’s working on the site and what isn’t is as important (or even more important) than nailing down what the final site will look like and what features need to be added.

In many cases, a realignment will include a redesign portion. The client may want to update how the site looks if they’re spending money to update the way it works. Realize that many clients may focus more on the visual aspects of the site than the functional ones, but it’s your job as the designer to get an idea from them of what non-design elements are and aren’t working in their current website.

When is a Realignment Appropriate?
If there are fundamental problems with the way a website is working, whether it’s actual issues with the code or just a poor implementation, then a redesign isn’t going to do much for your client. This is when a realignment is necessary.

A realignment may also be necessary if a client is embarking on a new business venture. If they’re adding an online store, for example, they’ll likely need to do more than just install some shopping cart software. Changes to their home page and other areas of the site to entice visitors to purchase online will probably be needed, and other areas of the site may need to be de-emphasized or removed all together.

As far as exactly when a client should realign their site, the answer is as often as necessary. It should become a regular habit to review what’s working on their site and what isn’t, and to make adjustments as necessary. If goals aren’t being met, continuous tweaks to the functions, structure, content, and design of the site can move your clients closer to them. Stress to your clients that realignments to the site should be part of regular maintenance, not just something that’s done every few years.

Because functionality is often changed in a realignment, ideally it should be done during the client’s slow season. The last thing you want to happen is for a bug to crop up during the holiday shopping season (or whatever is the busiest time of year for your client’s business). It’s almost inevitable that there will be some bugs in the new site, and while you can hope that pre-launch testing will reveal them all, sometimes they don’t present themselves until well after the site has launched. If a client wants to embark on a realignment during their peak season, attempt to convince them they should put it off until after their peak season is over. If they refuse, reconsider accepting the project.

The Realignment Process
Realignment should start with a pretty in-depth discovery phase. You need to talk to the client about what they perceive as working and what isn’t, as well as taking some time to explore the site yourself to get your own idea of what should be kept and what should be replaced.

One of the main things you should find out during the discovery phase is the purpose of the realignment. The client should have clear goals for making changes to their site, and a concrete idea of what they hope to achieve when the site is complete. Keep asking your client questions until you find out what their main objective is.

The process of realignment falls somewhere between a completely new website and a redesign. You’ll be creating some elements of the site from scratch and reusing other parts. How much of each is done will be largely dependent on the individual project.

A/B testing is something that should be more heavily used in a realignment. Test not only new options, but also the new options against the existing feature. You need to be sure that what you’re doing is actually a functional improvement over the existing site, and not just a prettier design.

Things to Remember When Realigning
Just like with a redesign, there are a number of things you need to keep in mind when embarking on a realignment project. First of all, be sure you have a clear set of objectives in mind before you get started with the actual changes. Without this, you’ll have no focus in the project, and it will run the risk of just becoming a redesign.

Not all realignments are huge projects. In some cases, you may only be making minor changes to the way the site works and looks. In other cases, though, you may be basically starting from the ground up. With a realignment, make sure you aren’t doing unnecessary work. The point is to keep what works and change what doesn’t. If 90% of the current site works well as-is, then make sure you’re only changing the 10% that doesn’t.

You’ll want to be sure that the site you’re realigning has a solid foundation to build on. This means making sure the code is well-structured and standards-compliant, as well as making sure it’s built on a suitable CMS that can handle the site’s size and traffic. If any of these things are lacking, take advantage of the realignment process to remedy the back-end issues that may be present. It will pay off in the future with reduced costs in future redesigns and realignments.

Remember, too, that realignments are done based on hard data about what works on the current site and what doesn’t. While your gut instincts on certain aspects of the realignment will be important, so will be established usability patterns and information the client has collected about what’s working on their site and what isn’t. Don’t lose sight of that.

Final Considerations

During the discovery portion of a project, you, as the designer, need to determine whether the client is looking for a redesign or a realignment.

The client will often be unfamiliar with the term “realignment”, and in all honesty, there’s no reason to educate them about it. But you need to know in your head which type of project you’re embarking on.

If major changes to functionality, structure or content are necessary, then you’re looking at a realignment. On the other hand, if all the client wants is an updated look, then it’s probably a redesign. Again, it’s your job as the designer to determine which type of project the client needs.

Remember, whether you’re doing a redesign or a realignment, make sure you back up the original site as well as make regular backups throughout the project so you can rollback if necessary.

Further Resources

• Good Designers Redesign, Great Designers Realign
  The original article by Cameron Moll discussing the difference between redesigning and realigning, from A List Apart.
• Redesign or Realign Your Website?
  From Tunnel 7.
• Redesign Vs. Tweaked Design: What’s Best for Your Website
  From Visual Swirl.
• Redesign: When To Relaunch The Site and Best Practices
  From Smashing Magazine.

Written exclusively for WDD by Cameron Chapman.

When do you use redesign vs realign on your sites? How do the two compare?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C