Content strategy allows you to achieve business goals by laying out an actionable plan of how to develop, market and maintain content which goes on your site. There are a number of things worth thinking about when you are sitting down to start a new project, and hopefully this article summarises some content tips which can help your website really grow.

Ensure Content Keeps Evolving

Many businesses wrongly approach designers or developers with the age old cry of ‘I need a website‘, a war cry many of you will be all too familiar with. The more naive of customers will undoubtedly be treating their website as a box ticking exercise that requires little or no work once its done. As many of you will know, a good website is an evolving relationship between business and consumer, and it’s important that your content management system allows for that. A good content strategist will ensure that old content gets removed or updated, and new content takes pride of place.

Lead with Content not Design

A great designer not only makes things look good with asthetics, but understands that they can’t design until they know what information they need to portray. A great design will never make up for substandard content.

If your content isn’t attracting links, by definition, it isn’t great. That’s simply the way the web works today. It therefore makes sense to place equal if not more importance on content, including the planning of it prior to starting any web project. Social media explorer have some great questions to coax the information out of your clients, or indeed to ask yourself.

Branding Strategy – Identify your Tone & Voice

Even before you start to develop your content, and think about what your audience really wants, you should think about the tone that your business takes with it’s customers. Are you a friendly brand that needs to keep things light and fluffy? Or do you need to maintain the professional corporate image that your existing marketing material has taken? I absolutely love the advice the guys from Innocent Smoothies give on this, a brand that I personally admire a great deal.

Define Key Themes and Subtopics

At the outset you should ascertain what the primary topics and key themes are to concentrate on. Mind mapping different areas of your business (see some of the mind mapping and prototyping tools that are available for that) is a great way to get to grips with the areas that your content should address. When you have brainstormed all the different services, products, problems, and facets of your business, you can move on to logically categorising them. This can then form a good starting point for navigational categories for a blog or website.

With not everyone thinking in the same way, it makes sense to use keyword research to make sure that you are calling a spade a spade. There are a variety of seo keyword tools available online free of charge to really drill down and examine what areas are going to get you the best results.

Make it evergreen

Evergreen content stays relevant long after it has been written. You should be thinking about what sort of articles will stand the test of time, attract links and build your site as an authority. Evergreen content takes time to create, but will form a good starting point for the rest of the content. There are a number of ways to do this.

If there are a handful of key concepts in your industry, you may for example, want to provide definitions for them, and serve as a reference piece for other bloggers and websites. I’ve done this before successfully with my seo glossary in the past.

Other things you may want to look at include. How to articles – these are often bookmarked for reference, which can have a exponential effect on your traffic. List articles which are easily digested by visitors. Technical articles which teach your visitors something new. Or just plain old resources and freebies.

Align content with business goals

1) Will it generate links and contribute to ongoing SEO efforts? Has it been architected with the properties of great linkbait? Will my audience read, share or link to it? Will they care?

2) Does this content relate closely to my business? Will this increase my authority as a trustworthy business in the sector? Will it drive direct or indirect sales?

3) Is this only relevant to internal staff? Should it perhaps be an intranet article instead? Does this article exist elsewhere online? Is there a duplicate content issue with it that needs addressed?

Think Sideways

Thinking sideways essential involves knowing what is hot out there, and using that information as a springboard for your content. One of the things I’ve learned in my short time as a blogger, is that chasing news isn’t a fun task. Whilst breaking news is beneficial, it isn’t easy – especially with other more established blogs sitting in Silicon Valley day in day out hunting out stories. What you can do however, and a part of my own strategy, is to think sideways.

Microsoft announce migration from Live Spaces to WordPress – write a guide, not a news article.

Google announce real time results – tell your visitors how to track it in Google Analytics – while others cover the news.

Both these articles filled holes in topics with practical articles that were receiving attention at the time, and both received a good flow of traffic.

Article by : Webdistortion, 2010

But in order to combine all these elements of Web design together and achieve successful results you must have a clear direction, a direction that will guide each and every aspect of your design towards common goals. You must think strategically.

What is strategic design?

Strategic design is the fusion of your organizational goals with every aspect of your design process. You aren’t simply designing a user interface that looks good and is usable and accessible. You’re designing an interface that will help you accomplish your organization’s objectives.

There are many websites out there that look fantastic and sport the latest trends in design yet often fail miserably in their intended function. Design trends are, of course, important because they give you fresh inspiration and new techniques, but the implementation of those techniques and styles needs to be intelligent and focused. For example, a blog isn’t a marketing brochure; you should focus on usability and readability rather than style. Similarly, a promotional website for a computer game should feature graphics and styles that portray a specific feel and style; the aesthetic is very important here.

When the designer simply implements a look and feel that is fashionable at the moment (think Web 2.0 trends) without any thought of how they fit the function of the website or the business behind it, the end result is unlikely to be very effective.

Web design is all about crafting an interface that communicates function, is usable and accessible and exudes the right emotion and feeling. Effective Web design needs all of these elements to be in tune with the goals of your website and in sync with the organizational objectives behind the website. Strategic design is all about identifying those goals and using them to guide your design.

Implementing Strategic Design

Let’s take a look at how we can use six steps to think strategically about a Web design project:

1. Establish your goals

One of the first things you need to do before starting work on a Web design project is to be clear about your client or organization’s goals. What are you trying to achieve with the new website or redesign? What is the website’s main purpose? Ask your client, your manager or yourself what those are. If they or you don’t know yet, then they should be discussed and agreed upon. A clear direction is essential if you want your design to have a purpose.

Remember that a website isn’t a piece of art; it’s an interface that serves a function. That function may be to sell products, to deliver informational content, to entertain, to inform or to provide access to a service. Whatever that function is, your design must focus on fulfilling it. Goals are also important, especially if you’re doing a redesign. Ask why you are doing the redesign: are you looking to grow the number of sign-ups, decrease the bounce rate or maybe increase user participation?

Take a look at the design of the New York Times website above. Its function is to deliver informational content. The minimalist interface serves this function beautifully by fading into the background.

In contrast to the New York Times, AdaptD is a Web design studio, so the goal is not to deliver a lot of content but to impress visitors with its design, showcase a gallery and advertise the company’s services. The visuals are very important here, and AdaptD delivers a browsing experience with beautiful imagery and strong colors.

2. Identify your audience

Who your audience is will play a big role in how your website should look and function. There are many demographics here that can influence your design, ones like age, gender, profession and technical competency. A computer game website for a younger audience needs a different style than that of a serious business journal. Usability should play a bigger role for older and less technically savvy audiences.

Who your audience is will not only influence the general aesthetic of the website but will also determine a lot of smaller details, like font sizes, so make sure you’re clear about who will be using your website.

This is the unsuccessful jQuery rock-star redesign. The designer went too far in trying to create excitement and so failed to cater to the more serious, techy audience. Since then, the rock-star graphic has been replaced with a more conservative look.

Disney’s target audience is kids. The intent is to entertain and involve this young audience, and the design does it by wrapping the content in a fun, colorful interface with a lot of visual and interactive elements.

3. Determine your brand image

A lot of designers tend to get a little too inspired by the latest trends and then implement them without thinking first about what sort of image they really should be conveying. Glossy buttons, gradients and reflective floors may work for some websites, but they may not be right for your brand.

Think about color. Think about the feel you want to achieve and emotions you wish to elicit. Your design should embody the personality and character of your brand. Everything has a brand; even if you don’t sell a product or service — for example, if you run a blog — your website still has a certain feel that makes an impression on your visitors. Decide what that impression should be.

Carbonica is a website aimed at helping people reduce their carbon emissions. The environmentally friendly image of the website is crafted using a lot of recycled paper images and textures, as well as earthy green and brown tones.

Restaurantica is a restaurant reviews website. Its design illustrates this by taking on the look and feel of an actual menu you would see in a restaurant.

4. Goal-driven design direction

You’ve established the purpose of your website, set some goals you want to achieve, identified your audience and determined your brand image. You can now proceed to implement it. So how do you make design decisions sync with your strategy? Let me illustrate this with a likely example.

Suppose your main objective is to increase the number of subscribers to your Web service. How can your design help accomplish this goal? I can see at least three things here that will make a difference:

• Make the “About” snippet on your landing page as clear and concise as possible. Your visitors must not have any confusion about the function of your website.
• Use color and contrast to make the registration button or link stand out. If people can’t find it, then you won’t get many sign-ups.
• Streamline the registration process by removing unnecessary and optional elements; people can fill those out later. If the form looks long, people may be put off of filling it in.

These are just three ways you can lead your design towards accomplishing the goal of increasing the number of sign-ups to your service. Your goals may vary, but the strategy is the same: shape and focus all the design elements towards meeting those goals.

The same strategy applies to your brand and audience: design the aesthetic that best suits it. If your website’s focus is entertainment, then create an “experience.” You are free to use a lot of color and imagery to shape that experience. On the other hand, if you’re designing a website that is focused on information consumption, for example, a blog or a magazine, then focus on usability and readability. Create an interface that fades away and doesn’t distract the user from accessing the content.

Stubmatic is an online box-office application. Their external website has two purposes: explain what the service does and get people to sign up. New visitors may only remain on your website for a few seconds, so if you don’t want to lose them you must be concise. You can do this by:

• Using large imagery and diagrams to illustrate the function of your product or service.
• Showing screenshots of your application. People will want to see what it looks like before they commit to a download or sign up.
• Providing a tour, using descriptive examples of how your service can help them solve a problem. Show a video if you can; the less effort people need to make to understand how your app works the better.
• Having the sign-up link accessible from all pages.

To succeed, the website must make the best use of the very limited amount of attention visitors will be giving it by not only informing but educating them about what your product does, and selling the benefits it provides. Stubmatic uses design elements effectively to pursue those goals.

TechCrunch is one of the more popular tech blogs. Its new design removes every single unnecessary graphical element from the page. What’s left is just the content, advertising and navigation. Subtle lines and grey shades give the page structure, yet the interface is almost invisible and places content straight into the front row. For a blog that posts several new articles a day, this format is ideal because it facilitates fast and easy access to the content.

5. Measure results

Once you’ve designed and deployed your website, it’s time to measure your success. This is just as important as the first two steps because until you test how well your design performs, you won’t know whether or not it is effective in fulfilling your goals.

If your goal is to increase the number of sign-ups to your service, measure it and see if your changes are making a positive impact. If you want to increase the number of subscribers to your blog, check your RSS stats. If you want to increase user involvement, see if you get more comments or more forum posts or whatever else is relevant in your context.

You can, of course, also ask people for their feedback, and this is a very good way to check if you’re on the right track. Be careful though not to implement every suggestion people make. Everyone has different tastes and wants, so everyone is going to have a different opinion about what your website should look like. If you do collect feedback, look for patterns; see if there are common issues that crop up and deal with those.

Measuring various website metrics is a whole science unto itself and is beyond the scope of this article. But however in-depth your analytics are at this stage doesn’t really matter; the important thing is that at the very least you have some way of measuring your key objectives. You can use this information to see if you’re moving in the right direction with your design and with any future changes you or your client make.

Even if you’re on a tight budget, you can use free tools like Google Analytics to get a lot of data on how your website is being used, including overlays of your pages to see what links people click on most as well as the ability to track conversion funnels.

6. Kaizen

There is a Japanese philosophy called “Kaizen,” which focuses on continuous improvement using small steps. When you work on your website, you should be thinking of Kaizen because the version you’ve just published is not the final version. There doesn’t even have to be a final version.

You can always make improvements, and the very nature of a website will allow you to introduce these at any time. This is because a website isn’t a magazine that you print and sell: once a magazine copy is out of your hands, you cannot make any changes or fix any spelling mistakes or errors. A website, however, sits on your server: if you find a mistake, you can fix it right away. In the same vein, you can introduce gradual improvements and updates to make your website more effective in serving its function.

Using the results of your measurements, you can identify problem areas. Perhaps your visitors cannot find the RSS feed link, or your bounce rate is too high or an important page on your website isn’t getting enough visits. Whatever the problem is, there will always be a way to improve things.

Conclusion

The main gist of strategic design is simply common sense: you’re making something for a specific purpose, so of course it should fulfill that purpose through its design. But it is actually very easy to lose track of your goals and end up with something that is beautiful but ultimately doesn’t work in its context. It’s very easy to fall into the trap of implementing the latest design trends just because they look attractive or shaping a section of your website to resemble another website that you really like without first thinking about why you are doing it or how it fits in with the purpose of your project.

Avoid falling into these traps by thinking through every design decision you make. Why is this button this color? Why are we using tabs? Why should we use icons here? Once you get into the habit of questioning your every design decision, the whole process will become much more focused. Think about the product or organization you’re representing. Think about the target audience and your brand. What will work in this context? What is expected? How can you use design to best fulfill the website’s purpose? Don’t just build a beautiful website: make a website that really works.

Article by : Dmitry Fadeyev (Smashing Magazine, 2008)

In fact, without that flow, there is no music.

Visual design has a flow as well. You have something to communicate and you want your audience to take in different parts of your page. Some elements of the design are more important and you want to make sure they’re seen right away, and some elements of the design are best seen after having first seen a different part of the design.

You also want to do what you can to keep people inside your design and not let their eyes fall of the page or screen. Just like a river carries what’s in it along it’s path, you want your design to carry your audience through it and guide them where you want them to go.

What is Design Flow?

Design flow (also referred to as movement or direction) is the way the eye moves or is led through a composition. It’s a way for you to control where someone viewing your design looks first and a way to guide their eye where to look second and third. It gives you a mechanism for making sure key information is seen.

Typically in a design you’ll create what’s known as an entry point. Something that stands out from everything else so that most people looks at it first. From there you’ll create lesser focal points that stand out, though not as much as the entry point. These points will be the most important information in your design and through different techniques you lead people from entry point to focal point to the next focal point.

Done well your audience will flow from point to point with a momentary rest to absorb your key information.

How to Control Flow in Design

Our design elements offer visual cues about the direction the eye should follow. Some of these cues are obvious. It’s hard to see an arrow and not look in the direction it’s pointing. Some of these cues are not so obvious. Repetition in color, shape, and size create a path that can pull you to move in a certain direction.

Some obvious directional cues include:

• Arrows – again it’s difficult not to visually follow the direction an arrow points
• People/Faces looking in one direction – similar to arrows when we see a person facing or looking in a given direction, we tend to also look to see what they’re looking at.
• Perspective – creates strong visual cues to follow. By it’s nature perspective creates a direction that begs to be followed. If all roads lead to Rome, you’re going to end up in Rome at some point.

Obvious directional cues don’t need much explaining. You want someone to look to the right you draw an arrowhead pointing to the right. You want someone to look at a certain spot you create a vanishing point in that spot.

Less obvious cues are more interesting and you’ll need to use them. You can only use so many arrows or have so many images of faces on a page.

Let’s start with the idea of creating a hierarchy of focal points with an entry point sitting at the top of the hierarchy. Consider Kandinsky’s Composition VIII seen below. The large black circle in the upper left is the entry point into the painting. It’s the first thing you notice. It’s larger and darker than anything else on the page. It holds more visual weight than any other element in the painting.

Your eye possibly moved on to the circle in the lower left and from there started following some of the other circles along the bottom. These smaller circles carry less weight than the dark one we started at, but they still carry more weight than many of the individual elements in the painting. They pull you toward them and once there your eye rests momentarily before moving on to the next.

Lines and curves are another way to lead the eye. Look at the green circle in the lower right of the painting. There are a number of lines near it that pull your eye up through the painting. The long line to the right of the circle meets with other linear shapes that are parallel in direction. There’s a good chance they pull your eye to the top. Maybe to the point of the triangle.

To the left of the triangle near the top are two curved lines with some perspective. They lead your eye to the light blue mass between the triangle and our entry point circle. In fact the more you move around the painting you can find lines and curves that guide your eye from one element to the next.

I mentioned that repetition can create flow. We see repetition in the circular shapes and in blue, yellow, and green color. The repetition creates implied lines and curves between elements for your eye to follow.

One last point before we leave the painting. Another thing I mentioned above is the idea of keeping people inside your composition. Look anywhere along the edges of the painting and you’ll find something that leads your eye back into the painting. Kandinsky does a wonderful job of keeping us inside and moving from one area of the painting to the next. It’s a great example of compositional flow.

Using Space to Control Flow

Space can imply flow in a variety of ways. The space between elements creates paths of emptiness much like footpaths through a forest of garden. An element with visual weight calls for you to rest your eyes on it. Space gives you room to move around elements.

Active (asymmetrical) space is dynamic and creates motion and flow. The space emphasizes a direction. Your eye initially takes in the whole design and then is drawn toward the positive elements and away from the empty space. A single element in a sea of empty space sits in the foreground implying that the space recedes into the background creating a direction toward the back of the design.

Varying the space between a series of elements can be used to create a rhythm and a motion in those objects. Consider the image below. The space between the lines implies a movement to the right where the lines begin to get closer to each other and come to rest.

Creating Harmony in Design Flow

It’s important that the flow of your design elements work together. You want the flow of individual elements to be in harmony to create a compositional flow throughout your design. If you want someone to see a block of text on the right you don’t want the elements around it flowing to the left.

Let’s look at a series of images, each with an obvious flow in direction and see how well the flow is in harmony across elements.

In the image above the flow of the elements is in disagreement. The arrows are pointing to the left, while the text is pulling us toward the right and the strongly aligned right edge.

We’ve improved things in this second image. The text is read from left to right and the arrows also point to the right. The elements clearly all flow to the right, however the strong flow in the arrows leads viewers off the page. They may or may not see the text at the bottom.

In this third image we’ve reversed the sides of the arrows and text blocks. The stronger flow from the arrows leads people into the text blocks and everything flows to the right. However, there’s still nothing to prevent viewers from leaving the page.

In this last image a simple vertical line has been added along the right. This line should keep people inside the page and more than likely the eye will flow down the page to the text at the bottom.

Examples of Flow in Web Design

We’ve looked mainly at a work of art in our discussion of flow, but since this is a post on design flow perhaps it would be a good idea to look at the design flow of some websites. Each of the sites below uses flow in some way to direct you toward the important information that needs to be communicated.

Zoran Perin

The first thing you notice in Zoran Perin’s design is the large red shape. It’s perfect for an entry point as it serves as the background for the designer’s name and what he does. The triangle on the right side of the shape works as an arrowhead directing your eye to the right where it will come to rest on the photo of Zoran.

I might have reversed the photo to have Zoran looking to the left since after momentarily resting on the image your eye would follow Zoran’s eye back into the content. The design attempts to pull you back to the left with the red background behind the word trivia passing through the content.

34 Twenty

Drew Templemeyer’s home page does an excellent job of controlling flow through typographic hierarchy, so the viewer can’t help, but absorb the key information on the page. The entry point is Drew’s name, no doubt the most important piece of information the page wants to communicate. The type around his name flows nicely to the right where it ends on the word portfolio in red.

After a brief rest your eye moves down to the line about being web designer and developer. Even if you never read another word on the page you’ve gotten all the essential information about who Drew is and what the site is about, though odds are you’ll be drawn to the links to either view the portfolio or contact Drew.

Old Guard

If you can look at Tom Johnson’s site and not land on the large green circle I don’t know what to say or what else you’d possibly land on. Your next stop should be the welcome text to the right. It’s the largest text on the page and the company name is the same green as the circle. From there you move down through all the ways to contact Tom on your way to the circles in the lower right.

Notice the words "Say Hi," which make sense after having moved through the contact info. From the lower right your eye should be pulled back up and to the left toward green circle allowing your eye to find and read the content.

Skinny Wrists

Josh Smith’s site has an interesting entry point. You might say the large red image in the center is the entry point, but I find my eye quickly rests on the dark rectangle with Josh’s logo. In part it’s due to the contrast with several red elements, in part it’s because it’s the darkest mass on the page, and in part it’s because we naturally start in the top left.

The vertical shape draws the eye down to the navigation where we encounter a horizontal white rectangle, which then leads the eye to the right and the central image on the page. Your eye could move up to the Skinny Wrists name or down to the download link. The nearness of the Skinny Wrists text probably pulls you up first and then back down.

At this point you’ve passed through all the content on the page.

The Gentleman’s Deck

The entry point for the Gentleman’s Deck is the company name. You quickly move down to the deck itself and the green circle containing the price. Notice how the cards fan out and the tops of the cards seem to point to the circle. The color repetition pulls you to the upper right and the call to action.

Taylor & Ives

The large ampersand is the obvious entry point. Notice how the stem curves up into the tagline, the company name and to the "new" link in the navigation that’s also colored red. The horizontal line of the navigation leads you to the red ampersand in the company name in the upper right before you’re again pulled to the large partial ampersand and to the block of text on the left with links to the company’s work

Analog

There are a few interesting things in the Analog design. Again the entry point is the logo and your eye then moves to the illustration of the workers and then down to the photos of the people behind the site.

Focus on the illustration for a moment. The workers are pulling to the right moving your eye to the right. The ropes or cables also lead to the left and you want to know what these guys are pulling. If you do you’ll come to a stop at the vertical line pulling your eye down. Had you instead continued on to the right the black mass of clothing punctuated by the white highlights also pull your eye down toward the photos and the content.

It’s possible your eye will bounce around a bit on the illustration being pulled to the right and curious as to what’s to the left. At some point either side will lead you down the page.

Summary

Our goal as web designers is to communicate. While we want our viewers to read and notice everything on the page, it’s most important to make sure they see and absorb our main message. Flow can help ensure your visitor passes through the elements that impart this key information.

Ideally we’ll create an entry point leading people to the most important information on the page and then create a flow and motion through our design that leads them to rest on the next most important information and then the next most important information after that.

Even if no one ever reads the prose on the page you can still communicate the message that needs to be communicated. Those that are interested will read your main content. Those that aren’t will leave, but not before they know what your page and site is about.

Think about what your page needs to communicate before designing and use focal points and flow to communicate your message to your audience.

Article by : Steven Bradley (Speckyboy Design Magazine, 2010)

Jacob Nielsen reports that web users are becoming much more impatient while shopping and browsing online. Instead of spending their time going to a site‘s homepage and finding the content by categories or other product recommendations, most shopping is done by quick Google searches. If the user can‘t find what she‘s looking for right away, she’s gone.

It‘s crucial to have simple web designs to allow the user to quickly find the information they need, especially if you are selling a product. If the page is cluttered with useless text, widgets or unrelated products, the site becomes meaningless.

However, it‘s become a common practice to do just the opposite. e-commerce sites have taken this “scatter shot” approach of trying to slap the potential buyer with as many options as possible. Instead of making the landing page solely about one product, sites usually clutter the page with unnecessary information, ads and related products.

Less Products Mean More Focus

Many web companies forget the cardinal rule of e-commerce: Web shoppers want as little hassle as possible. Instead of hopping in the car and driving to the store to buy a DVD, it’s much easier to go online and snag it from Amazon in a few clicks. The customer is even willing to wait longer and spend more money if the shopping experience is simple and fast.

Apple has mastered the art of minimal homepage design. If you go to their homepage, they’ll only show you three things:

• A simple header navigation
• One product in the body of the page
• A few informational links about the featured product with images below the fold

Aside from the standard footer navigation, the homepage consists only of three parts. Here’s what you see if you click on a product link (like the iPhone).

Even on the product page, you immediately see what the page is about: the iPhone. The product itself dominates the bulk of the page, and the surrounding information are apps and features of the new iPhone. But more importantly, notice what’s not on the iPhone page:

• Unrelated products
• Unrelated sidebar ads
• Lots of copy
• Clutter

Apple has effectively shown just enough information in a very pleasing manner. There‘s nothing wrong with showing lots of information, as long as it doesn’t feel like a lot of information. You’ll also notice that all of the information, links and pictures are all centered around the iPhone and what it offers. There are no distracting ads or unneeded information about other products.

There are a couple of tried-and-true methods that any designer or web developer can take to ensure that the site layout doesn‘t drive customers away with clutter.

1. Only what you need.The biggest aspect of simple web design is only showing what’s needed to make the sale, and nothing more. This doesn’t mean that you can‘t give the user lots of information. Just make sure they want to see more information. Apple uses ”Learn more“ links throughout the page to accomplish this.
2. Reduce clicks. The less clicks it takes for a customer to buy a product, the higher returns. Don’t make them jump through hoops to buy your product.
3. The ”Grandma“ rule. If your grandma (or any elderly person) can figure out how to buy a product for your site, odds are it’s put together pretty well. Unneeded information will turn Grandma away quickly.
4. Reduce the number of columns. Each time you add a column to a page, the content is pushed into a smaller and smaller space. This puts less emphasis on the main product, and more on extra stuff the buyer isn‘t really looking for.
5. Give less options. There is an added stress put on web shoppers to make decisions. Ultimately, the buyer wants to think as little as possible when making the purchase. Displaying products in a way that eliminates extra thinking and decisions will streamline the buying process and give the customer more peace of mind.
6. Keep it clean. A clean design keeps visitors happy. By taking the time to ensure that the layout of the site is aesthetically pleasing keeps the customer returning to the site.

Intuitive web design means thinking like a potential customer. Would you shop at your site?

Other Great Examples of Simple e-commerce Design

Bell.ca uses only a few colors to indicate the branding and offers visitors only the main navigation options. Notice how well the design manages to present a number of different options — shop navigation, support as well as personal and business areas. The design isn’t cluttered but clean and simple and provides the visitors with a broad overview of available options without forcing users to actually go through all of them. Also notice how clever the product navigation is designed at the top of the site. There is just nothing users can do incorrectly.

Shoeguru.ca present a very user-centric and product-centric design. The product seems to be on the stage just in front of the visitors. The design presents only the product, and nothing else; even only few navigation options are available.

Etsy is a great example of how to place a lot of information on a page without it being cluttered. Etsy has a wide catalog of products to sell from, yet Etsy‘s design has an earthy, relaxing quality. Creating a useful homepage that doesn’t distract is no small feat.

Crupress is an elegant book site without many distractions. The homepage manages to present a lot of text without agitating the user. The header navigation is prominent, but doesn’t demand attention. All the design elements flow together smoothly.

Tokyocube is a fun, trendy little site that sells Japanese products. Instead taking precious space explaining what the site sells, the products are put right in front of you. Also, the heavy use of white space allows the products to almost jump right off the page at you. You can’t help but click on one of the toys to learn more about them.

While Furious Tees is a tad busier in graphics than the previous sites, it helps do two things:

1. Show the playfulness of the site
2. Make it very clear that all shirts are only $19.99

You aren’t lost trying to figure out what Furious Tees is selling, the products are all in front of you. Having all the products on the homepage is especially beneficial for novelty sites that have merchandise people normally wouldn‘t be looking for.

But sites with lots of products on the homepage run the risk of becoming cluttered very quickly. Furious Tees doesn’t have this problem. They don’t use any extra sidebars or ads taking attention away from the T-Shirts. The focus is solely on the shirts and the hilarious design.

Basecamp (37 Signals)

Look no further than 37 Signal‘s project management tool Basecamp for an incredible example of mixing different types of information to sell a product. Yet there’s just enough information to make an effective sales copy. Every word, every image has to be weighed in a design. If there’s not enough information, the user won‘t spend time trying to figure out what the product does. Too much information and the user becomes overwhelmed.

The tasteful use of heading backgrounds and company logos makes every bit of information stand out on it’s own. And they somehow made all of the different types of media blend together, with plenty of space so that the user isn’t bombarded by lots of text or images at one time.

You Only Have a Few Seconds

Every website is going to require a different type of layout, design and copy to sell products. But designers can strive to do more with less by:

• weighing every word
• removing unneeded elements
• using tasteful colors and whitespace
• and limiting the amount of overall information the shopper sees at one time

Remember, online shoppers are a fickle bunch. They don‘t ”window shop“. They use search engines to limit their searches to a very narrow field. If they don’t like what they see, they leave. Site owners only have a very small window of time to capture the attention of the prospective shopper. A tasteful, clutter-free design that places the focus on the product (and nowhere else) will allow the shopper to find what she wants faster.