Advertise here with BSA

In web design, the position of design elements and the layout of web pages is everything. So many cool, exciting techniques are available to help us lay out our designs (especially with CSS3 at our disposal) that we often forget that structure is as important as aesthetics.

How do you determine where content should appear, and how can a well-oiled interface increase website readability? This is what we’ll aim to uncover in this article.

We’re going to examine a basic technique that could help you improve your general content flow, and, for lack of a better term, I’m going to call that technique the proxority principle (a portmanteau word that combines "proximity" and "priority").

Communication through Design

Designers already understand that the relationships between objects on a page matter. That’s why when we create a design, we think about visual hierarchy, visual weight, Gestalt psychology, the distinctiveness of important elements and other principles that affect relationships between the various components of a web page. It’s one of the reasons why we tend to get neurotic when it comes to navigation menus, headers or footers.

With so much going on inside the average web page, getting the right content to users in the right place and at the right time is quite an achievement!

If your content isn’t structured suitably, there can be a number of downsides, such as:

• Critical information getting lost or skipped
• User interaction issues like error-proneness or confusion
• Reduced web accessibility for screen readers

The proxority principle, in a nutshell, puts forth the idea that if we can prioritize our content to ensure that the most relevant material is visible and appealing, users will immediately be drawn to it.

This principle asserts that all related, important content should be grouped or joined together whenever possible to allow flow and feedback.

The art of this technique isn’t in the theory, because we often lay out content logically as we write it (headings, subheadings, bullet points, etc.); instead, it’s in the planning stage.

Proxority Principle in Site Navigation

Consider something like a navigation menu. One of the first things we do when producing the information architecture of a site is to organize pages and links into one cohesive structure, after which we add categories or subsections if appropriate.

This technique leads to the development of drop-down menus and other unique browsing aids which help us to further bind content that lacks proxority.

When planning navigation menus, one must pay particularly close attention to the value of pages and their connections, in order to make them a perfect example of proxority in action.

This particular technique works for any style of website, so whether you’re scaling a huge service-heavy but content-light layout (like Amazon) or a content-heavy but feature-light design (like a blog), the technique should be of use.

Better yet, the principle can help you organize your website’s information architecture; the proxority between pages is as important as what exists upon individual pages.

If you find yourself struggling to determine where stuff should be placed, this strategic guide will help you.

Priority: Boost the Best, Weed out the Worst

Many of us know only too well the benefits of prioritizing. The priority we give our content plays a huge part in the perceived value it has upon a page.

A site’s logo/name, for example, is recognizable because of its critically high placement, usually in the top left-hand corner, and it maintains visibility in that position on every page of a website.

A logo should be dominant over all other objects on a page. That’s its proxority.

Rate Each Element’s Value

To identify which pieces of a web page are most critical and important, we need to begin by examining every object in a layout, no matter how small.

Rate them based on their perceived value (according to what your visitors need to know or are likely to want to know) and their functional value (according to what contributions they make to the website, such as functionality or advertisements).

You can do this either by taking a screen capture (or printout) of the entire page and annotating it, or by producing a list of everything that appears on a page. This exercise will help you reassess the value of your website’s content.

Rate images, media, content (at a paragraph level), and everything else according to this numbering system:

Eliminate Unneeded Elements

When you’ve gone through everything, review the results.

Before we go any further, it’s probably worth mentioning that if you find content, links or objects that are no longer useful or don’t contribute anything, remove them.

Eliminating clutter from an interface is tough, but reductionism improves the general user experience of a website.

For elements rated at a 3, removal might be a bit harsh, so consider rewording or attaching things together to add value.

This website arranges its critical information into clearly defined segments for readability.

After you’ve identified the stuff that can be deleted, merged or moved, look at everything you’ve given a rating of 2. These elements can be the toughest to deal with because you want visitors to benefit from them, but you don’t want to overburden them.

One solution to giving these these needed, but non-essential elements an appropriate proxority is to use progressive disclosure: make content appear on demand with drop-down menus or tooltips, or display it further down the page so that it’s still available but less prominent.

Many websites use progressive disclosure to avoid swamping their users with details.

Proximity: Flow, Feedback and Functionality

We’ve considered the importance of prioritizing every asset on your page, identifying which bits have more sway than others, eliminating the fluff that has accumulated, combining weak material into a strong structure and pushing the less critical data out of the field of vision.

We now need to take all the remaining content and follow through on the second part of the process: to connect everything logically and put it all back together, as if it were a jigsaw puzzle — or a storybook, wherein the plot develops at consecutive points.

You should be left with everything that needs to be on your website, in its most diluted form, with supplementary content either hidden down the page or waiting in tooltips and extensible data boxes.

Rate Important Elements in Relation to Each Other

Go back over everything to which you have assigned ranks of 1 and 2, and rank them again; number everything according to what order you believe readers need to know about it.

If everything ends up where it should end up, it will all make perfect sense when you read it aloud.

The developers and designers behind this website clearly understand the need for organization and feedback.

Redesign

Once you’ve got everything labeled, re-shuffle your source code to match the new reading order. Pay special attention to bits of content that connect to or depend on other pieces of content (such as image captions), and put them as close together as possible.

Then, make the necessary changes to your CSS and JavaScript.

Proxority: Examples and Patterns in Action

Many websites already exhibit what I’d define as high proxority in that they take great care to use techniques that account for both priority (bringing attention to certain elements) and proximity (making reactions happen directly next to or above the objects being interacted with).

Below is a showcase of a few examples of best practices in use. Some we’ve briefly mentioned before, and others are being introduced here. By following similar practices, you can avoid user confusion and increase reading efficiency.

Using progressive disclosure to track the progress of a form:

Informing visitors of errors as they enter data:

Drop-down menus expanding close to the cursor icon:

Input objects disabling once they’ve been submitted:

Progress bars showing loading progress:

Content or light boxes expanding upon user interaction:

Proxority: Origami for the Web

The proxority principle posits that everything you find on a web page can be assigned a value and a place in sequence, in relation to the objects that surround it. This idea has existed since the early days of the Web, but too few designers pay enough attention to it. Think through what is actually needed, where it is needed and when it should appear (as opposed to simply putting all of the content on the screen, in its entirety, in an order that "looks pretty"). The need for such techniques is increasing, especially given the proliferation of handheld devices and the idea of designing with a "mobile-first" philosophy.

If content isn’t worthy of a restrictive mobile layout, why is it needed in the desktop layout?

If you have ten spare minutes, give this simple activity a try. Go through your website and weed out anything that isn’t offering what it should. Make existing objects provide greater value to users (or use less space), and don’t be afraid to reorganize your code and its content to ensure that what’s needed is what appears. Oh, and if you do feel tempted to make actions elicit responses, ensure that users know that your website is responding; after all, you don’t want them clicking "submit" ten times in a row, only to fail.

Related Content

• Quick Overview of User Experience for Web Designers
• Is It Time to Rethink Website Navigation?
• 10 Important UI Design Considerations for Web Apps
• Related categories: Web Design and User Interface

About the Author

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

Advertise here with BSA

This will be the third year that I’ve sat down in front on my keyboard to write my predictions of things that will shape the Web industry in the coming year.

Before I share my predictions with you for 2012 (which I’ll do in another article), I thought I’d look at my 2011 predictions first and see how they panned out.

Previous Predictions for 2011

At the start of 2011, I wrote about what I thought would be the five things that will shape the Web this year. If you missed that article, you could check it out first to give you a bit of context for the things I’ll be talking about below.

In the article, I predicted these five things would be influential in our industry:

1. Flash
2. Print media
3. Hardware-accelerated browsers
4. Television
5. Location-based services

Let’s talk about those five things, and see if they did, in fact, make an impact this year.

1. Flash

At the start of this year, I said:

"Expect to see something out of Flash this year, whether it’s innovation, a repurposing of the technology, or a significant drop in usage."

I think we’ve mainly seen more of the latter — a drop in usage — than anything else. For instance, as of August this year, jQuery was used on more top websites than Flash.

Even Adobe, the company that owns and develops Flash, announced that they would no longer develop Flash for mobile, opting instead to focus on HTML5.

As 2011 marched on, HTML5 and JavaScript chipped away at Flash’s place on the Web as a facilitator of rich interaction. Designer/developer Aral Balkan, who covered the possible demise of Flash for .net magazine earlier this month, suggests that "if you’re starting a new web project, do not use Flash for it."

2. Print Media

Just how much of an impact have traditional print publication companies — magazines, newspapers, books and so forth — had on the Web?

It does seem that all the experiments and ventures rolled out by print media on the Web are still going strong. The Times, for example, still sits behind a pay wall and appears to be doing fine. The iPad-only Project Magazine I mentioned in my predictions is now rolling out issue 11. Pay walls and premium content are popping up on many sites around the Web, and appear to be a sensible way to monetize content.

The future of traditional print-based media companies moving onto the Web is still very much focused on the tablet market, and iOS5 brought a new angle to this model with the Newsstand feature aimed at digital versions of popular print newspapers and magazines.

More and more people are putting down their newspapers and magazines, opting instead to use their tablets and smartphones. Research by eMarketer showed that Americans spent more time on their mobile devices versus reading newspapers and magazines; over 1 hour per day on mobile devices compared to only 44 minutes on newspapers and magazines.

3. Hardware-Accelerated Browsers

Hardware acceleration has probably had an impact on the Web that most people don’t even realize. Most modern browsers now ship with some kind of acceleration running in the background, but as far as users are concerned, it isn’t really noticed except when used in cutting-edge experiments and demos such as OK Go’s video website for All is not Lost.

However, the run-of-the-mill hardware acceleration was trumped with a new technology called cloud acceleration, which we saw on Amazon Silk, a new web browser for Kindle Fire.

How does a cloud-accelerated web browser work? To reduce the processing power needed on the tablet, Amazon decided to leverage their Amazon Web Services (AWS). The Amazon Silk web browser, for those not familiar with it, offloads the processing required to render web pages and JavaScript to AWS, which compresses the output and shoots it down the interwebs to your Kindle Fire, therefore removing the need to process a lot of stuff on the tablet.

There was a bit of a problem though, as it turned out that it wasn’t quite as fast as everyone hoped; tests showed that web pages loaded more slowly when the cloud-accelerated feature was turned on. This may well change as AWS caches more and more web content. Amazon also promises a speed boost with their next release of the browser.

4. Television

The Internet TV wave isn’t quite upon us yet, and the bottleneck may be Apple. There is talk and rumor of an Apple TV hitting stores in 2012, and consumers and manufacturers may be holding their breath and waiting to see what the technology giant will release before moving into this space.

In the same way that Apple made the tablet market, speculators are saying that Apple TV could revolutionize the way we use our TVs.

We’re also seeing traditional television moving onto the Internet more and more, as shown by the continual growth of web-based services such as iPlayer, Hulu and Netflix (well, at least until Netflix shot themselves in the foot).

Live coverage is also popping up on the Web, where we used to expect them to be on our television sets. YouTube, for example, showed live coverage of the British Royal Wedding. Facebook now streams numerous live events, including UFC fights.

TV shows are increasingly leveraging social media for live discussions with fans; many shows even include hashtags for Twitter.

In my opinion, it seems that the Television and the Internet are on a steady crash course to blend into an integrated, on-demand medium.

5. Location-Based Services

A quick look on your smartphone, and you’ll know that pretty much all apps ask for access to your location data.

One of the most interesting implementations of geolocation I saw this year was from Apple with the Reminders feature on the iPhone. This is how the Reminders feature works: You set your iPhone to remind you to do something (e.g. "get milk from Supermarket X") and when you’re close to the location, it will remind you of a to-do you created for that area.

In fact, you can tell a technology is getting serious when big companies put money behind it: Facebook acquired location-based social network Gowalla for a cool $3 million so that they can improve their own location-based services.

Conclusion

There’s my look back at the five things I thought would shape the Web industry this year. I’ll be back in a later article to have a look at what I think will affect our industry in 2012.

What things will shape the Web in 2012? Share your own predictions in the comments!

Related Content

• The Mythical Paperless World: Why Print Will Stick Around
• Building the 3D Web
• Five Technologies That Will Keep Shaping the Web in 2010
• Related categories: Web Technologies and Web Development

About the Author

Dave Sparks is a web designer and developer working for Armitage Online in the Lake District. He can be found writing about various web topics on his blog at Kamikazemusic.com, twittering as twitter.com/dsparks83 and working on his website analytics project – Stat Share.

Advertise here with BSA

Minimalism, interestingly enough, is usually born out of excess. In all arts, in all ways of life, we start out by taking and adding whatever we can.

When we start to realize that more is not necessarily better, and that we can get by with less stuff, we try to simplify by removing unnecessary elements so we can focus on what’s truly important.

What is Minimalism?

Minimalism, in its purest form, is the reduction of something to its bare essentials.

Think of a car. It only needs a few critical components — engine, wheels, gas, and so on — for it to run. As long as it has these parts, you can take out many non-essential elements such as its audio system, heated leather seats and cup holders, and the car will still get you to where you’re going.

In web design, minimalism translates to producing a site from the basics. Instead of including everything but the kitchen sink and then paring it down to only the necessary features, a better approach would be to start with a blank slate and only include the essentials.

Minimalism is an exercise in restraint, with the eventual goal being a design that helps the user focus and accomplish their tasks as quickly as possible.

When designing minimalist websites, you should keep three things in mind:

• Subject: What’s the most important thing on the web page? Is it effectively keeping the user engaged and focused?
• Usability: What things burden the user experience? What missing elements can enhance user-friendliness?
• Balance: Does the web page have the appropriate visual hierarchy and do components have appropriate visual weights?

These three elements are actually the most important elements in all styles of web design, but whereas other visual styles may beg for additional aesthetic layers, minimalism does not.

Why Use Minimalism?

This minimalist thinking is the basis of modern web design — we begin with content, perhaps a brand, but nothing else. By adding in only what’s necessary, we create a website that caters specifically and solely to its mission.

There are many benefits to designing a minimalist website.

First is the obvious: Minimalist web designs usually end up with fewer code and site assets. A minimalist site will often have fewer CSS rules, HTML elements, images, JavaScript, and so on. This ultimately means increased front-end web performance and, in turn, enhanced usability and a better user experience.

This doesn’t mean the design stage is any easier — minimalism takes just as much thought, planning and production as any other type of website. And perhaps even more, if my theory about our innate desire for "more stuff" is correct.

Zen Habits’s archive page shows how easy it can be to build a minimalist website once the concept is there.

It’s also harder to mess up minimalism, in my opinion. By proactively leaving out superfluous elements, your design becomes more open and free. When there’s less to see, there will be fewer distractions. As long as you give ample consideration to balance, typography and white space, your design will look pretty good. This is much easier than wrangling with a PSD template with dozens of layers.

And for those who have little artistic skill or proficiency in Photoshop, minimalism is a perfect way to create a site using only a strong understanding of typography, white space, and balance.

While not the most minimalist of examples in this article, Julien Lavallée’s site (featured below) demonstrates how interesting and visually appealing simple websites can be.

However, the most important reason to design minimally is that, without extraneous design elements, the site’s content is emphasized. By adding more white space, the various sections of a website are given breathing room.

On Daniel Gray’s site, notice how enough white space is given around each content section so that readers can quickly focus on the content without being distracted by much else.

The one problem with the site is that the reader’s eye focuses on the content in an odd order. My eyes go from the navigation bar, to the image of the unicorn, then to "Daniel Gray", and then finally to the "Hello, I’m a designer and writer based in York." tagline. But because there aren’t a whole lot of visual elements to distract the reader, this order doesn’t matter so much. In a visually busier site, some of this content would get lost, but here, although I see things in a different order than what’s probably optimal, I still consider each content element in turn.

Don’t Sacrifice Usability for Minimalism

As we’ve all heard by now, "content is king", and although there are some that might disagree with that, there are very few who would say content is not important at all. Every line of code you write is to serve the page’s content in some way.

Just as important as content is how accessible that content is — without adequate consideration of usability, content can be difficult to find and read.

Now that we have new web standards and technologies like CSS3 and HTML5 at our disposal, we must deeply consider what is necessary so that we avoid the overuse of these things. (I wrote something about this before.)

My suspicion is that as web technology grows tantalizingly better and more complex, minimalists are going to have a harder time paring down their designs to the essentials, especially as certain superfluous design patterns have become almost expected, like using CSS transitions to make links hover a little softer.

But always in the back of your mind should be considerations of usability. Chances are — unless you’re a big, established and well-recognized company like Apple, Starbucks or Nike — you should probably include the name of your company with your logo. And don’t think you can reduce your navigation menu to a set of enigmatic icons; even if it doesn’t confuse most readers, it will confuse some.

Don’t Worry, You Can Still Be Pretty

Designing minimally doesn’t always have to mean a reduction to the barest essentials. To the contrary, many minimalist sites include subtle design elements that manifest themselves beautifully and more remarkably because of fewer competing, distractive elements.

Chance Graham’s site, for example, has great use of color, iconography and subtle visual effects (like the box shadow on the navigation items at the top-left of the web page layout) that add enough nuances to intrigue the user without them being a disturbance.

Are You Designing Minimally for a Good Reason?

Minimalism on the Web could be thought of not as an aesthetic, but as the lack of one. If you "go minimal" just for its looks without understanding the purpose of minimalism, you will be lost, and your designs will turn out less than stellar.

Just as any other art genre or design style, minimalism must be well understood in order to be well executed — don’t let simple-looking web designs fool you; there is more going on with them than what can be seen on the surface.

In addition, minimalism shouldn’t be arbitrarily confusing or enigmatic. Many people see minimalist websites as a way to make their brand seem more mysterious, but this isn’t the goal, and there are much more effective ways to build a mythos around your brand than designing it inappropriately.

When any design is confusing, or enigmatic in its structure, or uncomfortable in its balance, it throws the viewer off. The last thing you want is a confused user, unable to find what they’re looking for.

In general, you should avoid ambiguity and confusion when designing in any style. Minimalism is no exception. In fact, minimalism is the design style where ambiguity must be avoided like the plague, and usability embraced, analyzed and perfected to the point where no user could possibly be confused in any instance when visiting your site.

Most importantly, make sure you clearly understand the goal of minimalist design before you plunge right in. Without proper direction, your creations could end up something like the piece below, which is great for many things except for conveying information in a clear and effective way.

James Turrell’s Space That Sees demonstrates the difference between minimalist art and minimalist design.

The goal that you should strive for, when employing minimalism in your designs, is to enhance readability, improve navigation and usability, and, as always, create the most pleasant user experience possible.

Is Your Design Too Minimal?

Your design might be too minimal if:

• You’re using minimalism for the wrong reason
• If you’re sacrificing usability in any way

These problems are easy to fix as long as you understand the goal of visual design in general: To clearly and effectively convey information. Constantly consider how your design decisions affect your users.

At the core of every design is minimalist thinking: the idea that few things are actually necessary and critical.

Related Content

• Reductionism in Web Design
• Gestalt Principles Applied in Design
• Symmetry in Design: Concepts, Tips and Examples
• Related categories: Web Design and Design Inspiration/Showcase

About the Author

Delwin Campbell is a web developer (among other things) at No Enemies, based in Austin, Texas. He is a crazy person with too many hobbies; right now he’s learning Swedish! Check out his personal site.

Advertise here with BSA

How many times have you been in the following situation? You just spent two weeks working on a design that you’re showing to a client. He likes it, but he wants to make a couple of changes that would take a couple more hours of work. Why? You don’t know.

He doesn’t know. Nobody knows. He just thinks that adding an embedded map on the right side of the web page is cool. He really likes his own idea and wants you to make the change, and you’re left with one of two options: make the client happy, or make users happy.

We all know who signs the check.

Luckily, there is a third option: Using User experience (UX) to back your arguments.

In my design career, there hasn’t been a project where the client didn’t request to make design changes that felt subjective and unjustifiable, and there hasn’t been a case where UX hadn’t come to the rescue.

UX takes clients off the center of their own arguments, and puts users back in the center of the design, therefore turning subjective (and sometimes egotistic) design change requests into rational arguments that benefit the user.

User experience not only guarantees that designers and clients are moving forward on a common ground, but also aligns future changes and product updates with the original product vision, hence ensuring long term design integrity.

What is UX?

It is a framework where beautiful designs happen as a result of identifying the right problems and finding the best solutions for them.

Contrary to popular belief, UX is not a pure creative process, but rather a rational sequential repeatable process that can be applied to solving design challenges. It is concerned with how users feel when they use the end-product.

Integrating UX into Your Design Process

So before launching Photoshop, or even creating sketches and wireframes, take the following steps to guarantee that you’re solving the right design problems.

User Research

Start by doing some user research to identify the target audience. Whether you’re designing a website or a mobile app, create simple descriptions of the ideal users, their demographics, their technical proficiency, and their goals.

User Stories and Personas

Then write a couple of short stories about how they will use the product to accomplish these goals. At this stage, don’t be concerned with too much detail, but rather try to identify high-level use case scenarios. This activity is called creating personas.

System Flow

Based on these stories, draw a diagram of the system:  a snapshot of the main entities and how they relate to, and interact with, each other.

For instance, I am working on a web app that enables companies to find the right users for early testing, so I created entities for users, companies, and studies.

Then I draw arrows between these entities to indicate relationships such as "a company can create/edit/delete a study" and "users can browse/view/apply to a study".

If you’re familiar with database design, this is similar to creating an Entity Relationship Diagram (ERD).

So far, we’ve been working in problem space: We’re staying at a high level, and we’re not concerned with too much detail. At this stage, momentum is more important than trying to get everything right in each step before moving to the next. Because the process is iterative, you can always go back to a previous step to add or modify something.

Now that the problem and its attributes are defined, it’s time to move into solution space.

Wireframes

Start by outlining all the screens needed, and how users will transition between them. For each screen, identify one or two task to be accomplished, and the next steps to be reached.

Then sketch high-level block designs for each screen, stepping back every once in a while to do a quick walkthrough of the design using the stories you wrote in the second step.

Once the high-level design is congruent with the previous steps, add more detail to each screen, still doing design walkthroughs whenever possible to ensure that the users flow intuitively through the screens.

I often go through all these steps using pen and paper, or a whiteboard. This helps me stay focused on what I want to do rather than being constrained by what an app can or cannot do.

Prototypes

The final step is to prototype some screens, and click through them to get some feedback for how the design feels when it’s live. I usually use Apple Keynote and Keynotopia, and it doesn’t take more than a couple of hours to put something together that I can show to clients and prospective users and get quick feedback about.

Conclusion

Now that you’ve had the client’s consensus throughout the process (or even better, involved the client in the UX process), you have a good foundation to launch your favorite design program and create high fidelity screens.

You’ve also got a great reference to go back to whenever you’re faced with another but-I-like-it-this-way client.

I’d like to end by leaving you with the following quote by systems theorist Buckminster Fuller:

"When I am working on a problem, I never think about beauty. I think only how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong."

Related Content

• Creating a Timeless User Experience
• Privacy and the User Experience
• How Cognitive Biases Shape User Experience
• Related categories: Web Design and Usability

About the Author

Amir Khella is a user experience designer, startup advisor, and founder of Keynotopia. Over the past 3 years, he’s designed more than 12 startup products, and several of which have already been acquired. You can get in touch Amir on Twitter @amirkhella and through his blog

Advertise here with BSA

The Web is an odd industry to work for when you take the time to think about it. I can’t think of many professions where a person’s job becomes such a large part of their lifestyle.

The 9-to-5 job is commonplace for the majority of the working population, with few taking their work home with them. Can you imagine a tax accountant doing her work at home simply for fun?

Yet, for us — web designers, web developers, UI/UX designers and the like — it’s not uncommon to get home and immediately jump into the computer or undertake something else Web-related, even when we’re off the clock.

These activities could be as time-consuming as freelance project work, volunteer work, contributing to our favorite open source project, participating and contributing in community forums such as Stack Overflow or as simple as reading the latest news on Twitter and catching up with our RSS feeds to keep up with the industry.

Working within the Web is most certainly a lifestyle choice, and all this time spent immersed in our working environment can affect our passion and motivation for it. But, at the same time, it’s also our passion and motivation that drives us to spend so much time in our medium, and something that I think is vital to our success within the industry. It’s like a feedback cycle.

However, so much time surrounded by our work can be difficult and straining. Too much of anything isn’t good.

As well, to keep motivated and passionate all the time is impossible. At times, external influences (family, friends, relationships) and our own personality traits can lead to a point where we simply wish we could do anything but work on (or even look at) a website.

This isn’t something we have any control of, nor should we shy away from the fact that we can simply lose interest in what we’re doing. That’s life.

What we can do instead is try and recognize the reasons why we’ve lost that interest and learn how best to reignite our passion, not only to ensure that our work and income does not suffer, but also to help our own state of mind.

I’ll share with you a few things that might help maintain and reignite your passion for your craft.

Try New Tools and Techniques

At times, it can feel like your next project is no different from the last. It’s just the same code with a new lick of paint. Rather than let this be the case, why not inject something new into your next website build?

On the Web, there is always something new to try and we’ve never had it so good. Between HTML5, CSS3, designing for mobile devices, responsive design, iPhone app development, numerous JavaScript libraries created by our peers and so on, there are lots of new tools and techniques you can try out in your projects. Just don’t feel you have to do them all at once.

By adding something new to your repertoire that you’ve never tried before, you place something challenging within the project that differentiates it from the previous sites you’ve created.

The challenge will not only continue to pique your interest in the website project but also give you practical experience that you can use in other endeavors.

Switch It Up and Do Something Different

It’s an annoyance of mine, but I’m easily bored and distracted. So when it comes to working on a large website project, it can be difficult to get through the whole thing without wishing it was finished already.

But as a generalist myself, I have the handy ability to swap job roles to find something new and interesting when the mood takes me.

Changing focus onto something else — hopefully something more interesting — will not only improve your state of mind but also ensure a project does not suffer from being rushed as you try to get it finished as quickly as possible.

Simply look for something that can engross your interest, and return to the "uninteresting" stuff when you’re in a better frame of mind to tackle it.

As well, when starting a project, try to avoid doing all the fun stuff at the start; try and mix this in with some of the more mundane activities so there’s always something fun left to move on to. You can use these "fun" activities as a sort of reward system and tell yourself, "If I finish writing up this RFP, then I get to write a jQuery image slider script/[insert fun task here] later on."

Attend Conferences

Conferences are an excellent environment in which to "top-up" your passion for the craft. I can almost guarantee you that at least one speaker will present something new to you or give you a new perspective on something that will have you wanting to adopt the same in your own work process.

In fact, you’ll feel like you can’t get back to work fast enough to try out the new things you’ve learned. Honest!

But conferences aren’t all about learning. There’s the networking, the socialization element and the enjoyment of being able to speak to (and perhaps grab drinks with) other Web geeks. This can further motivate you in your work, and make you remember why what you’re doing is awesome.

Just because attending a conference/workshop/event feels like it’s work (especially if your employer is footing the bill to get you to there) don’t forget to take the time to have fun, recharge and relax. Doing so will make it feel like you’re returning to work after a holiday.

Here are some conference, events and related resources you might want to check out:

• Future of Web Design
• An Event Apart
• Build
• AIGA Gain
• SXSW
• TED
• TechCrunch Disrupt
• Upcoming Web Design and Development Conferences in 2011-12

Go to Meet-ups

Conferences are expensive, especially when you have to go out of pocket. Sure, there are some that are cheaper than others, but then you have to consider the travel and hotel costs. Not all of us work for companies willing to pay for conference-related expenses, so we might not be able to afford to go to them any time we wish.

Instead of paying an arm and a leg to attend a conference, you could consider spending an evening with like-minded people at one of the numerous meet-ups that are held around the world.

Much like a conference, there may be speakers to inspire you, other geeks to chat with and most likely something alcoholic to make things go all that more smoothly.

Take a gander at these meet-up resources for ideas:

• Use Meetup to find meet-ups near you.
• Usability meet-up groups
• jQuery Meetups
• Browse Lanyrd, a social conference directory.

Start a Personal Project

If you work full time for a web design agency, you will probably have little influence on the type of projects you undertake whilst you’re at the office. This can get a little frustrating if these projects don’t give you the opportunity to expand your expertise, cultivate your passion for the work or if they make you feel unmotivated because of the repetitiveness of the tasks.

If this gets you down, try to look for a personal project to work on in your own time that you can really feel passionate about.

Here are some ideas:

• Learn how to create an iPad app.
• Learn Rails and then create a subscription-based web app (read this story for inspiration).
• Build an app for mobile devices.
• Design your own font.
• Create and share freebies.
• Do volunteer work for non-profits and struggling public education institutions.
• Develop a jQuery plugin, learn how to use a version control system and put it up on GitHub.
• Create or expand your blog. (Six Revisions started as a personal project.)
• Contribute tutorials and articles on design-related sites.
• Read "Reminding Yourself That You Love What You Do" for ideas and inspiration.

Work on an Internal Project

I’m sure every web professional has their own horror stories about clients; it’s simply something that’s unavoidable, even for the largest of agencies.

So sometimes, it’s a pleasant relief to be able to take the client out of the picture and create something without the constraints associated with client work, such as their needs, cost and schedules.

An internal project, for some, can be a success and evolve to become their sole company job responsibility. For others, it’s for a little bit of fun and a chance to do something out of the box.

No matter what happens at the end of the process, it’s the journey that matters. So long as an internal project doesn’t become a source of stress, it will most certainly be a process you will enjoy and be passionate about.

Learn

Becoming better and widening our knowledge is, I feel, a critical requirement of the job. You cannot simply enter a job as a web designer and expect to sail through your career with the same knowledge that you had at the start. Web design evolves at a lighting-fast pace, and it would be detrimental to your success not to keep up.

The process of learning about web design not only gives you something to do if your daily tasks are a little dull, but it also gives you something to potentially use in your projects.

Become a Specialist

You may currently be working in somewhat of a generalist role, but within this, you’re probably also undertaking tasks that you might not be all that passionate about. You may be a web designer that also codes — which, of course, is a great thing — but you might be coding more than designing and would rather move into a more specialist role as just a designer working within a graphics application like Photoshop.

By specializing (even just on a temporary basis) you can remove some of the tasks you are less interested in and thus spend more time doing the work that you are really passionate about.

Become a Generalist

Specialists are great. Specialists can know the most detailed things about their role — what they may lack in breadth, they more than make up for in depth.

But sometimes this can feel limiting. A specialist may not know much about the whole website production process because they may be too honed in on their own job role and segment of the site build.

If being a specialist feels constricting and you want to learn about some of the areas that you have less experience in, then move to become a web generalist and find that passion in all the areas you’ve yet to explore.

Both specialists and generalist are important to the industry. Choosing which you are is a personal choice and will ensure you enjoy your job more.

Take a Break

Web designers have to be the most wired-in people in the world because we’re exposed to the Internet more than most professions. Thus, our work is constantly within an arm’s reach.

And, for many of us, disconnecting is difficult and seemingly impossible, even when on a holiday.

But taking a holiday and disconnecting for even a short time can re-energize you so that you are better able to tackle the stresses of your daily life when you return. It is also an effective preventative measure against design burnout.

If you start to feel low while at work, try to find a late deal on a holiday. Taking a break and coming back refreshed and motivated can increase productivity.

Start Freelancing Part Time

Sometimes being the master of your own domain can help. Cutting out the possibly endless hierarchy within a company and having greater control over a project can be enough to satisfy a person’s personal desires.

When freelancing part time, it gives you greater control without so much of the administrative burdens linked with freelancing full time. It also allows you the benefit of being able to be choosier with the projects you undertake.

As a supplement to a stable salary, you can take the projects that interest you most.

Here are resources and ideas for part-time/intermittent freelancers:

• Tinyproj is a site that connects designers, developers and other creatives with paid, small projects.
• WeekendHacker is a design/development network for getting help on (very) small projects.
• Coffee & Power is a marketplace for buying and selling small jobs.
• TaskRabbit is a marketplace for community projects.
• Check out the freelance jobs at the FreelanceSwitch blog.
• See Smashing Magazine’s Freelance Job listings.
• Use social networks for finding work.
• Check out these great resources on freelancing.
• Do you know of unconventional places to find web work?
• Subscribe to RSS feeds for design and development job seekers.

Work for Another Company

There are times where a few hours of freelancing aren’t enough to get you out of feeling as if your time at your current workplace is coming to an end. There can be a multitude of reasons for wishing to leave a company — from poor management through to a lack of influence in being able to work on jobs that excite you.

If staying with a company is no longer challenging or negatively affecting your passion for your craft, then finding another company to provide you what you seek is the best next step.

In this current economic climate, this is a very risky proposition. It’s certainly a big step and a decision not to be taken lightly. However, in some situations, it may be the only choice.

Another option is to start your own company. Read the stories of entrepreneurs who’ve chosen to go their own way despite the tumultuous economy.

Start Freelancing Full Time

Changing the company you work for may indeed provide that new challenge that refocuses the mind and brings about a renewed passion for the job you do. But if it’s the trappings of company life that are affecting you, then going freelance may be the next logical step.

This one’s even bigger than simply changing workplaces and should never be undertaken from a standing start.

Going full-on freelance works best as a progression from having done freelancing part-time. You need that knowledge, experience and clients to help ease you in. Some savings will help, as it can be very hard to come across scratch when first starting out.

But once you’re there, you will have full control of your fate. Your passion is your own to influence. Anything that affects that is certainly yours to change.

Is Web Design For You?

If getting out of bed and going to work is becoming an ever-increasing challenge, then hopefully, one of the above suggestions will help reignite your passion in your craft.

But if none of them seem like they’re for you, then you should look within yourself and ask if being a web designer is what you really want to do.

Like all jobs, there are those of us who are a perfect fit for this profession and lifestyle, and others who aren’t.

It’s always been my opinion that if we have to spend so much of our life at work, then we have to do something we love, something we’re passionate about and in an environment we feel comfortable in.

Life is simply too short to be stuck somewhere that makes you miserable.

Throughout the Web, you can see people’s passion by way of the things they do and write.

Do you do anything different when your passion waivers? Please let us know in the comments.

Related Content

• From Nothing to Something: Story of a Self-Taught Designer
• Craftsmanship in Designing Websites
• How to Stay Ahead of the Curve as a Designer
• Related categories: Web Design and Project Management

About the Author

Kean Richmond is a full-time web designer and developer based in Yorkshire, UK. Working as a generalist in most areas of web design and development he currently works at Bronco, tweets as @keanrichmond and rants on his personal blog.

Advertise here with BSA

Many websites choose to display a short explanatory text in a prominent position of their web page layouts to inform visitors what the purpose of the site is. This introductory text, when crafted well, can help users quickly decide whether they’re in the right place or not.

A website has mere seconds to let visitors know that they’ve found what they’re looking for, and your site introduction is your brief elevator pitch towards that.

We’ll explore the use of website introductory text in various types of websites to gain a better understanding of trends and techniques for effectively designing them.

At the end of this article, there’s also a showcase of some excellent web designs that have great website introductory text for our further exploration of the topic.

Design Goals

There needs to be a purpose for every component of a website. They each have to support the goals and purpose of the site.

In this way, a thoughtful approach to the design and the copy of your website introductory text is important.

The goals of your site introduction are:

1. To let the visitor know, as quickly as possible, what the website is about.
2. To give hints as to what action (or actions) they can take immediately (call to action).
3. To provide contextual information regarding what to expect should the visitor decide to spend more time on the site.

What follows are some design considerations congruent to the three goals above.

The Text Should Be Concise and Useful

Your copy should be clear and succinct — 1 to 3 sentences should suffice — akin to the abstract of a scientific paper or an excerpt of a blog post.

Short intro text improves usability by giving the web page some context, but if it’s too long, users tend to skip it according to an article by leading usability expert, Jakob Nielsen.

A thoughtfully designed and informative introduction helps first-time site visitors swiftly determine what the site is about. A well-crafted site introduction text is actionable.

The example below from Polecat is an example that highlights the importance and effectiveness of being concise. In only five words, the site intro text successfully encapsulates what the site is. Despite the brevity of the copy, it clearly informs visitors that it’s the site of iOS developers.

Show Off Your Company’s Personality

Since a site’s introductory text is commonly the first thing a new site visitor will see when they land on your web pages, it’s a great chance to display your company’s personality, just like how your website’s design theme (e.g. dark, clean, grunge, minimalist, etc.) embodies your company’s personality.

Below is friendly duck‘s site introduction: It’s short, simple, catchy and written with personality.

Be Direct

Internet users don’t have a lot of time; they want to know as quickly as possible why they’re on your site. You can do this by being clear and to-the-point with your message. For example, the introductory text of FreeAssociation tells visitors who they work with and what they do.

Offer Your Value Proposition

Informing visitors what you have to offer is a good idea. This is referred to as your value proposition. What value do you provide your customers? What makes you unique?

The Project365 site, for example, promises their customers that they’re not an ordinary new media agency and that they can deliver clever designs that attract visitors to their clients’ web properties — a promise not all design agencies can confidently make.

Place It in a Distinctive Layout Position

The site introductory text is something you’d want your visitors to see immediately. Typically, the goal is to have it be seen first.

Distinctive Design Techniques

There are many distinctive design techniques you can employ to draw the user’s attention.

You can apply methods related to visual weight, visual hierarchy, negative space and even the Figure-Ground Gestalt principle.

Additionally, you can use a tool like Google’s Browser Size to determine what percentage of the Internet population will see your site intro text on the initial page load.

Top Left

One technique that will almost always work is placing the site intro text at the top of the layout. Whether by ingrained Internet convention or actual human tendency, web users look towards the top of web page layouts when they’re in search for important site components such as primary navigation menus and search features.

The top-left of a web page’s layout, according to an eye-tracking study done by Jakob Nielsen, is a prime location because user attention leans to the left.

Notice how the Campaign Monitor site has their site’s introductory text at the top-left of the layout. They use other distinctive design techniques such as spacing (its distance away from other design elements enhances its distinctiveness), a unique type treatment and visual hierarchy.

Top Center

Another prominent location is top-and-center. The Fork website shows how placing your site’s intro text at the top-center of the web page layout helps to garner it attention.

Leverage Surrounding Visuals

Another way you can grab the eyes of site visitors is through the use of surrounding visual elements that reinforce and direct the eye gaze towards your message. Notice the three illustrations that all help to reflow your eyes towards the site introductory text on Carbonmade‘s home page.

Draw User Attention Using Typography Techniques

There are several typography composition techniques you can employ to further enhance the attractiveness of your site’s introductory text. Let’s discuss a couple.

Typography Size

One typography styling technique is size. Bigger objects are easier to get to (according to Fitt’s Law) and the Gestalt principle of Similarity indicates that if an object is significantly bigger than other objects around it, it will stand out as a distinct object.

Notice how big the site intro text is on Teehan+Lax. Regardless of its low contrast versus its background and the vividness of surrounding areas, it still manages to attract your attention due to its relative scale.

Text Styling

A unique text effect that has a high contrast against its background can also go a long way towards a site intro text being able to garner attention. Notice the simple gradient text effect on the Great Bible Tales site and how it’s able to help draw your eyes toward their site’s value proposition.

Consider Using a Short Heading

Some messages need further explanation. A popular strategy in this situation is to use a brief, keyword-rich heading followed by a short paragraph. Twitter demonstrates this technique with a big, bold heading followed by a short sentence.

Close Proximity to Calls-to-Action

The worst thing that can happen after reading a site’s intro text is to fail to realize what the next potential action can be. Decrease the chances of the site visitor hitting their browser’s back button by having relevant calls-to-action close to your message.

As shown below, Clearleft gives you the link to their About page through a call-to-action ("See what Clearleft can do for you.") immediately after their site’s intro text.

MailChimp does the same by providing an eye-catching call-to-action button that you can click on to register an account with their web service.

Showcase of Introductory Text in Websites

Let’s look at how the design goals, trends and techniques we’ve discussed above are applied to other websites by dissecting other real-world examples of well-designed site introductory text.

Bellstrike

A succinct, direct-to-the-point site intro text can be found on the Bellstrike website. The text styling is unique and the font size is huge — two popular visual design strategies to achieve distinctiveness, like we talked about earlier. Two beautiful call-to-action buttons sit ready and waiting at the foot of the introductory text once the site visitor has finished reading. The content is useful, offering the site’s unique value proposition of quickly providing websites to non-profit organizations. Positioned at the top-left of the layout, the site intro text is guaranteed not to be missed by incoming site visitors. Also, notice the surrounding visual — the hanging bell on the left of the site logo — that helps direct eye flow downwards toward the text.

Square

Square’s site introduction is a concise value proposition: you can start accepting credit cards using your mobile device if you use their service. The text is situated at a visible top-left position in the layout using a big, striking font style. A convenient call-to-action web form for signing up for a free account below the site’s intro text makes it easy to take action. Take note of how the surrounding visual — the index finger and thumb points to the left — redirects your eye flow to their sign up web form and site intro text in case it strays too far to the right.

Fish

This site has the introductory text on the left of the layout (a prominent location since, as stated earlier, our attention leans to the left of web pages). The introductory text is short, concise and useful, with the value proposition of combining and reimagining French and Asian cuisines. Below the introductory text, you can find a call to action enticing you to view the restaurant’s menu.

Fatburgr

Fatburgr uses a captivating headline that utilizes a simple but effective gradient text style as well as a large font size. The headline is followed by a short and personable sentence describing what Fatburgr does as well as proposing their value to the customer ("Do you know the nutritional content of what you’re ordering? …Fatburgr gives you nutritional information…"). Two huge call-to-action buttons can be found in an eye-gaze-drawing location at the foot of the site intro text.

31Three

31Three’s value proposition is that it offers creative services to developers. We can see the site intro text positioned at the prominent top-left of the layout, using a large font size as well as more-than-ample empty space surrounding the message.

CulinaryCulture

The site intro text of this site is concise and useful. Within 10 words, they’ve managed to describe what the site is and for whom the site is for. The short intro text is followed by a three-column thumbnail gallery that outlines some of the things you can do on the site (such as sharing and reviewing your favorite eateries) followed by a call-to-action link to sign up for an account on the site. Aside from that, we can see the use of a beautiful, eye-grabbing text effect, the use of a large font size and a placement for the text in a distinctive layout position, top-and-centered.

Blue Pixel

A three-word heading using a big, bold font style is followed by a one-sentence value proposition in this site’s intro text. Notice how the surrounding visual, an electric guitar, is angled in such a way as to aid eye flow towards the site introductory text.

Web Typography for the Lonely

A simple statement of what the site is serves as this website’s concise site introductory text.

Sunday Best Websites

A big and high-contrast headline contains the value proposition of Sunday Best Websites. Two paragraphs follow the headline describing in greater detail what service they provide and what their design style is like. The site’s intro text, as can be seen in many of the examples we’ve already talked about, is followed by a call-to-action link that describes their project methodology. The use of a surrounding visual helps direct eye flow to the left, with the arms of the illustrated gentleman outstretched, serving to place the attention back towards the text.

Vegas Uncork’d

The site introductory text of Vegas Uncork’d, a website aimed at promoting a Las-Vegas-based wine and food festival, has a captivatingly big headline, followed by a two-paragraph description. The headline features a distinctive text style, making it very attractive to the eyes relative to its surrounding elements.

Igor Zagnienski

A concise introductory text written in the first-person voice is situated on the top-left of Igor Zagnienski’s site layout. The introductory text’s high contrast against its background as well as plenty of space surrounding it makes it eye grabbing.

Electric Pulp

It’s hard to miss the site intro text in this website: it’s humongous and has a high contrast against surrounding elements. The site’s intro text is personable and, most importantly, concise; in three words, new site visitors already know what the company does.

Assistly

Assistly summarizes their value proposition in 9 words with the emphasis on what they do, which is to provide users with the facility to manage their customer support department. A large font size, the use of a drop-shadow text style and a prominent top-center location serves to attract the user’s attention.

Bitfoundry

A big, eye-grabbing heading styled uniquely and attractively, followed by a two-sentence intro paragraph describing who, what and where Bitfoundry is, serves as this site’s introductory text. The text is placed at the top-center of the layout. Space, a high-contrasting color and size is used as visual design devices to provide the text some distinction against surrounding elements.

N.Design Studio

Nick La’s design blog uses big, bold fonts in its site intro text. In a handful of words, the intro text manages to answer who the site owner is, what the purpose of the site is and where the site owner operates from. He uses a surrounding visual of a koi fish to anchor the message to an attractive image.

iSaidWhat?!

There are a ton of mobile apps out there, and thus, an iOS app’s website needs to get to the point quickly or risk the user looking elsewhere. At the top-center of iSaidWhat’s mobile app website is a short intro text detailing the value proposition of the app.

Kickoff

Here you can see this web-based collaboration tool’s simple site introduction located at the top-center of the web layout. The surrounding image below it helps focus your eyes towards the center of the page layout.

Blue Sky Resumes

At the center of this site’s layout, you can see the Blue Sky Resume’s site intro text. It consists of a captivating heading that plays on the wants of potential clients to be one-of-a-kind (the site’s value proposition), followed by a short paragraph describing what they can bring to the table if you choose to hire them. The text has big fonts and a drop-shadow text style to give it prominence. The surrounding visual of a cookie helps ensure that the intro text is anchored with a distinctive image that will help bring the text attention.

Analog

Positioned at the top-center of Analog’s web layout is a concise site intro text outlining what they do for their clients. Space surrounding the text is an effective tool for gaining a viewer’s attention.

co: collective

The site intro text here is short and to-the-point. A more-than-ample amount of whitespace surrounding the text, the top-center text placement as well as the web page layout’s visual hierarchy arrangement serves to give the text block its distinctiveness.

Conclusion

Designing your site introductory text, if you choose to have one, is important because it’s one of the first things visitors will see when they visit your site.

Using succinct copy, placing the intro text in a highly visible position, using common typographic styling and leveraging surrounding visuals to your advantage are among the popular trends used in today’s site introductory text.

Related Content

• Smarter Web Designs: Responsive and Customizable
• Situational Design for the Web
• Symmetry in Design: Concepts, Tips and Examples
• Related categories: Web Design and User Interface

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

Good web design is far more than a beautiful site, it’s where art meets an interactive user interface and where, in my opinion, superfluous aesthetics takes a backseat to usability and the user experience.

Ensuring that user interactions are as smooth as possible is good design — don’t ever be satisfied with art alone.

Although the design vs. art debate is nothing new, it’s ripe for a revisiting as new CSS3 features and JavaScript (and particularly front-end web development libraries like jQuery) begin to edge their way deeper into our everyday lives.

These new capabilities, however revolutionary they may seem, have changed nothing about how we should approach web design in general.

Where Design and Art Clash

Art is a problematically inclusive term; anything in the world can be called "art." The main difference between art and design, then, is that design is simply more restrained.

Any artist can look at their work and see it as an extension of themselves, but designers don’t have that liberty.

As designers, our work has to be interactive, accessible and consistent. In this way, art goes beyond design because no one would expect someone to say that all art has to be consistent and follow a pattern. That would be absurd! What if cubists set the rules? Our art museums would be terribly dull and without variation.

Examples of Cubism, a 20th century art movement. Above: (01) Les Demoiselles d’Avignon and (02) Le guitariste by Pablo Picasso.

This is what design is: It’s art with expectations, patterns and consistency. It’s art meeting science.

Yes, it’s limiting, and yes, UI designers have to be trained to think inside the box a little. But get over it. You are a designer, not an artist. If you want complete freedom and no friction between your creativity and your work, you are working in the wrong field.

Artists can work to their whim, eschewing standards and refuting expectations, whereas designers gobble them up and abide by their every word.

Market forces and trends influence designers far more than artists (with some notable exceptions like pop singers and freelance illustrators).

With web design, there are so many more things to take account of: your site goals, your brand, your users. These expectations shape every bit of web design, while art remains untouched.

Design and Aesthetics

Another important distinction to make is the difference between design and pure aesthetics. While all design incorporates aesthetic — and truly, everything in the world has some form of aesthetic — some designs do it better than others.

Take a look at Google’s home page:

Google has looked like this (with the exception of few small changes throughout the years) since we can all remember. And it’s designed perfectly because it fulfills the expectations of the site’s users. It looks nice without being obtrusive and obnoxious towards the user experience. Google, throughout all their websites, has mastered the difference between design and aesthetics.

Although the term "aesthetics" has broad and varying definitions, I’m using it here to refer to "eye-candy." Superficial designs that exist for the sake of beauty. If we were to put it on a scale, I would say most art is near 100% aesthetics (which is not a bad thing, eye-candy can be meaningful too) and Google is somewhere around 5%. Your browser’s default style sheet is 0%.

So this is something designers need to keep in mind: balancing form with function. Function is at the heart of the Web. Almost everything we do online has a purpose and a meaning. We engage with web designs every day, and the good ones are usually more functional than they are beautiful.

Below are some more designs with minimal eye-candy that are actually designed really well.

Delicious does a great job of balancing their layout. Without getting too deep into eye-candy, they make a giant torrent of information manageable.

Zen Habits has a super minimal site design, but it coincides perfectly with the content’s theme and goals.

CloudApp is a little more visually exciting than the ones above, but the design is still subtle. This combination of minimalism and great use of visuals reflects the design of their product perfectly.

These sites probably wouldn’t do so well in your favorite web design galleries. They’re not incredible to look at, and they won’t blow your mind.

However, they do exactly what they are supposed to do: they provide their site visitors with tools and specific information in a logical order (using concepts like visual weight and gestaltism) and then they get out of your way. And that is why they are so well-designed.

Expectations of a Design

The most important user expectation is that design should look like design. Website design should be immediately recognizable as at least one thing: not art.

Look at the screenshot below, taken from a Toyota minisite.

When I first visited the site, I didn’t know what its purpose was. After poking around a bit, it seems like some sort of way to promote new technology from Toyota, but there are a million better ways to do this. It’s far from user-friendly and my expectations were shattered immediately.

These expectations define user interactions on every site. We put site navigation and logos near the top of the design. We provide common site components like search features, social media integration and web forms in a predictable way.

Why? Not because this is an innate human expectation, but because design has evolved in such a way to foster and reinforce these standards.

Art and design aren’t mutually exclusive, even if there’s a clear line between the two. Beautiful sites can still be usable, and they can still surprise us without being disorienting.

But there will always be noticeable constraints in web design that are bound by things such as technology limitations, accessibility, usability, site speed, and so on.

From N.Design Studio.

Objectives of Design

One of the great divides between art and design is the objective. John O’Nolan wrote on Webdesigner Depot:

Typically, the process of creating a work of art starts with nothing, a blank canvas. A work of art stems from a view or opinion or feeling that the artist holds within him or herself. They create the art to share that feeling with others, to allow the viewers to relate to it, learn from it or be inspired by it.

By contrast, when a designer sets out to create a new piece, they almost always have a fixed starting point, whether a message, an image, an idea or an action.

I will have to disagree with O’Nolan here: Artists, just like designers, sometimes start out with a message, idea or an action they want to motivate. Every work of art and design has a message, but each has its own agenda.

Art doesn’t need to be understood — it’s digested and interpreted differently by each viewer (another point O’Nolan brought up in his article, which I agree with).

The accuracy of the statement that a piece of art makes is not always so important; artists often leave their work open-ended.

On the other hand, design is meant to be understood and interpreted uniformly by everyone. As I said before, it has to be consistent.

Is this too limiting? It really isn’t. The consistency that design requires is not aesthetic. It’s functional. That’s why it’s not important to have your design display exactly the same in every browser. Although art is information in itself, web design is a gateway to information. That’s all the user cares about.

So the consistency required on a website is only user-specific. A user is rarely going to use Firefox and Internet Explorer to access the same website and be surprised by the inconsistency. Where the issue of consistency gets interesting is mobile design. But that’s a whole other story for another day.

Evolving from Art to Design

The face of the Web would be interesting if the unrestrained creativity allowed in the art world was also permitted in web design. But this isn’t the case, and as designers, we’re responsible for creating great design that meet user expectations and site objectives.

Forget your newfangled CSS3, forget your jQuery for a while and get back to zero.

Here are some tips to separate your design from art:

• Balance usability and content. Although content precedes design, inaccessible content is useless.
• Always write code to a standard and follow best practices. The Web can only advance if we stick together and move forward as a whole.
• Even though the Web is full of limiting technology considerations, we can’t stop being creative. In fact, to push pass these barriers and expectations, we have to be even more imaginative than before.
• Start from scratch and keep it simple. Keep reductionism and minimalism in mind for clutter-free designs.
• And once you’ve mastered good design, keep pushing through and make it great.

Related Content

• Evolution of Websites: A Darwinian Tale
• Creating a Timeless User Experience
• Are Current Web Design Trends Pushing Us Back to 1999?
• Related categories: Web Design and User Interface

About the Author

Delwin Campbell is a web developer (among other things) at No Enemies, based in Austin, Texas. He is a crazy person with too many hobbies; right now he’s learning Swedish! Check out his personal site.

Advertise here with BSA

Website redesigns — whether for your own website or clients — seem like exciting and interesting projects. It’s challenging to create a new design while retaining the site’s existing brand and content. And for most web designers, these types of challenges are motivating.

However, website redesigns are tricky to plan and execute. There are several constraints involved in redesigning a website that might not normally exist if you were to start with a blank canvas. I would even argue that a redesign is often more difficult than starting from scratch because of these boundaries.

We will delve into the subject of website redesigns by reviewing and discussing redesign efforts of sites such as Yellow Pages, Mozilla and Blinksale.

Why Redesign a Website?

It’s important to note that Design, in one of its most fundamental forms, is the act of solving a problem. Whether it’s to address durability and signal strength issues while still maintaining the beauty of a mobile phone (like with the iPhone 4′s stainless steel band) or coming up with a solid navigation design that improves findability of site content, the act of designing should be purposeful.

When the motivation to redesign an existing site is driven merely by aesthetics, I believe that the incentive of the redesign initiative is insufficient.

There are many costs involved in a website redesign, both to its users and to its owner.

For example, creating a new site navigation scheme or the reconfiguration of the web page layout requires existing users to get used to the new web design.

It requires a lot of time, planning and decision-making to ensure that the present content integrates well with the new design. It might also require updating existing content to fit the new design.

The outcome of the redesign project should justify these costs.

Here are a few reasons why you would want to redesign a website:

• The site is not user-friendly
• The redesign can increase site profits
• When objective information, such as those gathered by data analysis, clearly indicates something is wrong with the design
• The redesign can improve the site’s speed and performance
• The site is built using outdated web design practices that burden the user experience (table-based layouts, animated GIF backgrounds, outmoded interactions that can be improved using Ajax techniques)
• It lacks features that, when adopted, can profoundly enhance the user experience
• It has information architecture flaws (poor findability, navigation, categorization, etc.)
• It doesn’t fit with the existing company brand

Component Redesign

Does the site need a complete design overhaul or can existing issues be solved through the redesign or realignment of certain components? With the opportunity for us to iterate rapidly and seamlessly on a production site, a partial redesign might be enough.

For example, when a checkout web form of an e-commerce site makes the user’s experience cumbersome, we can use our resources more efficiently by focusing on that troublesome component instead of spreading our efforts thin by trying to tackle everything.

Redesign Mindset: Focus on Solving Issues

It’s a fact that the most important element of a website’s success is its content and purpose. Whether it’s to provide a venue for people to connect with each other (like Craigslist) or to disseminate information (like Wikipedia), success is measured — and attained — based on utility, not aesthetics.

The redesign must be in line with the intended purpose of the site. The design must support the site’s objectives.

Deficiencies in the site’s content and utility will never be resolved by making the site look more beautiful.

Real-World Examples of Website Redesigns

To explore the topic further, let us examine some website redesign efforts.

Yellow Pages

According to the site’s About page, one of Yellow Pages’ goals is "to be a utility for the people: the one-stop site that, in fewer clicks, helps everyone live more."

Therefore, it makes sense that the outcome of their redesign effort should be to enhance findability; to lower the clicks required to reach the desired information. Does the redesign achieve this goal? Let’s take a look.

Old Design

New Design

The redesign of the website has a similar appearance to the original design. It retains much of the original colors (most notably the company colors of yellow and black).

In the new design, localization is used to populate the front page with more relevant content based on where you live. This helps reduce the amount of work users need to perform in order to select the locality they’re most likely interested in.

Other than that, the redesign is predominantly aesthetic, and old features that were potentially useful were taken out.

For example, the "More Tools" tab was moved to a less convenient-to-access spot. The "search tips" link, which could help new and existing users improve their search queries, was removed.

Rich images used in the front page — although they make the page more attractive — can slow down front-end performance and if they don’t enhance the user experience and support the site’s goal, then their inclusion is superficial.

Blinksale

Blinksale, being a web app, would want a site layout that optimizes conversion rates so that new visitors can quickly see how the tool works and quickly discover the path to signing up. In this respect, Blinksale’s new design has several advantages over old one.

Old Design

New Design

The new design makes it easy to spot the primary call to action on the page, using the art of distinction to highlight its location and direct the eye gaze of the user. It’s also easier to learn about the app’s selling points — how much it costs and unique features that sets it apart from its competitors — because of the succinct bulleted list and price information on the left.

In the old design, the eye flow is slightly flawed, if we were to assume that most of their visitors are left-to-right readers.

The logical sequence of a visitor wanting to sign up is to first understand what the web app can do and how much it costs before making the decision to sign up.

The layout of the old design reverses this ideal eye flow.

Six Apart

Six Apart has changed the page layout structure and the colors used in the design.

Old Design

New Design

The look and feel of the new design is more subtle and elegant than before. The search box in the header of new design is a well-positioned new feature.

Plaxo

In this example, we can see both positive and (potentially) negative results of a website redesign effort.

Old Design

New Design

In the old design, Plaxo had a prominent horizontal navigation bar and a home page that was shorter.

The navigation menu in the old design was omitted, which means existing users who relied on this feature now have to relearn how to navigate the site. The new design exceeds the previous page length, which requires many users to scroll down more to access the desired information.

However, the new design has a clear call to action optimized towards new site visitors. It has a clean layout that highlights important site features. It has better content that answers many of the questions a potential new user might have about the app.

ThinkGeek

The latest version of ThinkGeek is a good redesign example.

Old Design

New Design

The components that were effective in the old design were retained and then slightly improved. For example, the left-positioned vertical navigation menu was kept in its place, and just received a typographic redesign to make it easier to read and visually more appealing.

The search box was relocated to reduce the needed eye and mouse movements of people searching for a particular product on the site. It’s now appropriately grouped with the vertical navigation menu because these components complement each other.

Moreover, new features like the horizontal navigation bar and a shopping cart status information have been added.

The design not only makes the site more beautiful, but it also fixes the page layout and incorporates useful features.

Joyent

When I first saw the old design of Joyent, I didn’t realize what the company provided until I read their site’s content. The old site’s design theme — though unique and visually appealing — didn’t seem to clearly support and indicate what the company did.

Old Design

New Design

The refreshed design is brilliant. It keeps the useful site navigation of old design. The new design is cleaner in aesthetics and probably more appealing to their typical audience of IT managers, CTOs, server administrators and the like. The new design adds useful components such as the company’s contact information (prominently located in the site header), a call-to-action button at the side bar and navigation to internal pages in the footer that’s useful to existing and potential users.

Mozilla

Mozilla sites always seem to have notable designs. A Mozilla redesign often incorporates innovative design techniques and additions of helpful features.

Old Design

New Design

Practical features remain unchanged, and some new ones are added; namely, an email newsletter sign-up form and a slideshow highlighting featured content. The new web page layout looks less cluttered, mainly due to the reduction of hyperlinks and the use of whitespace between design elements.

REI

REI is an excellent example of redesigning a site to include useful new technologies and techniques.

Old Design

New Design

The main navigation scheme and information architecture is kept relatively unchanged. As an e-commerce site, upsetting loyal customers by changing things they might have grown accustomed to means that things such as navigation should be approached with caution in a site redesign.

Using an image slider and a multi-level horizontal navigation bar are the two main changes of the new web design.

Dave Wilkinson

Here we have an example of a redesign of a web developer’s portfolio site. Web developers and web designers are known for rapidly redesigning their own websites, often to reflect the most current design trends.

Old Design

New Design

The difference between the old design and new design is remarkably vast. Almost everything has changed. The logo and tagline, the colors, the design style, the layout, the personality of the site’s copy, the information density — they have all been improved.

Etrade

The Etrade redesign effort is more like a realignment rather than a full-blown redesign.

Old Design

New Design

Most of the layout’s components didn’t change, and if they did, the modifications were minor.

However, what has happened is that some design elements have been relocated. Whilst the left-hand vertical navigation menu was eliminated, the links were relocated to its proper place, the primary horizontal navigation bar, reducing possible confusion as to which menu a link might be located and freeing up some space.

Conclusion

The idea of redesigning a website is an alluring one. Before we commit ourselves to this endeavor, we must first take care to plan and think about some important considerations.

Mainly, we should determine if a redesign is something we really need to do.  A website redesign doesn’t just mean changing the site’s appearance, it’s to add missing features, address design flaws, reorganize the information architecture, remove unnecessary components to de-clutter the user interface and to enhance functionality.    

Resources and Further Reading

• Long Live the Redesign
• Good Designers Redesign, Great Designers Realign
• 7 Website Redesign Tips

Related Content

• Creating a Timeless User Experience
• Are Current Web Design Trends Pushing Us Back to 1999?
• Reductionism in Web Design
• Related categories: Web Design and User Interface

About the Author

Mohammad Moradi is an undergraduate in computer engineering. He spends his free time studying and researching web-related topics such semantic web and search engines. Moreover, he is a web/graphic designer. Contact him via moradi.c85@gmail.com. (He likes email among others!)

Advertise here with BSA

Creating the perfect color palette for each design project can be a time-consuming task. We might settle on a color scheme, only to change our minds five minutes later.

Sometimes we’ll feel like we’ve found a solid set of colors, but don’t know how to make them work together in the project we’re working on. Sometimes it seems like we don’t have enough colors or too many colors or the wrong combination of colors.

How is it that some web designers seem to be able to come up with the perfect color combinations in the work they produce? How much of a role does choosing the right color palette play in web design?

We’re going to explore some of the most popular colors being used in modern web design in the hopes of understanding why certain colors are used for particular websites. At the end, we will conclude with a list of tools to help you select colors.

Why Color Matters

Color is a strong influencing factor in design and in the world around us. Each color has its own meaning to us based on culture, education, personality and a myriad of other factors. Thus, colors can strongly influence us in subconscious, natural ways.

Some people may trust a company more simply by their brand colors. Certain emotions and feelings can be evoked simply by seeing colors, such as "danger" for red, "cleanliness" for white, or "tranquility" for green.

An experienced designer knows that choosing the right colors isn’t just essential for aesthetics; colors can be used as a tool to convey a certain message.

When Color Doesn’t Matter

Most of us intuitively know why color matters, so before each design, we painstakingly develop a color palette, and then we adjust it, and then we adjust it some more.

We obsess over our color selections ad nauseam. Sometimes, the "perfect" color or set of colors never feels right. It needs to be a bit darker or a tad bit lighter or more saturated and a bit more blue.

Before we know it, it’s midnight (and we’ve been up since 6:00 AM) and we still haven’t come up with a color scheme.

It’s at this point when color doesn’t matter so much; the point in which we lose productive time over picking colors instead of just deciding and tweaking later if need be. It’s when we strive for perfection that picking colors becomes an act of futility because we find that there’s no such thing as a perfect anything; we’ll always find a flaw in our decisions.

Usually, your first instinct on color selection will be to get as close to "perfect" as you can get. Your instinct is smarter than you think, so trust it and see where it takes you.

The goal, then, is to put together a color palette based on intelligent decision from what you know about the design project, and then work with it.

Color Is Powerful

The hue, saturation, darkness, lightness of a color can affect its intended meaning and message. And if color can mean something, then it has the power to influence those viewing it.

If you would like to learn more about the meaning of popular colors, read A Look into Color Theory in Web Design.

Next, let’s go over some popular colors in web design, as well as briefly discuss their commonly held meanings in western culture.

Red Web Designs

Bright red gets attention pretty fast, and it can be used in elements at top levels of the visual hierarchy in a design.

In terms of visual weight, some studies conclude that it’s one of the heaviest colors.

However, because red is such a powerful and heavy color, it shouldn’t be overused, because it can invoke a sense of urgency, and in most situations, you don’t want to make the viewer constantly feel this way.

Some believe red can enhance metabolism, increase blood circulation and stimulation.

Whether by culture, standardization or psychology, red is oftentimes used in situations warranting your attention, such as in stop signs, ambulance and police sirens, stop lights, fire trucks, and so on.

Red is used in many fast food restaurants because it’s believed to stimulate appetite.

Café Rouge

The red website of Café Rouge below works well as the site is food-related, and as stated earlier, red has been credited with being able to increase appetite. The darker red also creates a sense of luxuriousness, passion and quality.

Carrot Media

Sharp lines and creative angles make the Carrot Media web design more intense. The strong intensity of these features complements the bright red used throughout the majority of the design.

LBi

Using red may make users more actionable as highlighted in the LBi web design. The bright color creates strong emotions and the type of heightened feeling that can make users move. This design is for a marketing and technology company that focuses much of their content around "powerful" marketing methods and highlighting case studies indicating strong change in their client’s lives.

codebutton.com

The darker red of the design below isn’t quite as intense as some of the ones above, although it’s still powerful. A set of productivity tools for developers are featured in the design; since red can indicate action, this site’s usage of red symbolically is effective.

RedWeb

RedWeb is a design agency that provides practical design solutions. The company focuses on what a design needs for efficiency and usability. Red for their design works well for the company’s straightforward, productive approach to design.

Orange Web Designs

Orange is like a muted form of red, giving energy but not at such an intense level. Orange is great for creative designs, or designs that need to give off a very positive and active energy.

Orange is often seen in web designs that attract a younger audience. It’s also great for portraying any emotion in design that require energy, as well as alertness and happiness. You may notice that many productivity apps use orange as an accent color.

Copimaj Interactive

The Copimaj Interactive design is very energetic, and uses orange to help convey that theme. Another thing to note is that the brand surrounds technology, and would thus do well if they appealed to a youthful audience.

HALO Creative Agency

This website uses hints of orange to help create a sense of motion and energy. The orange compliments the young, energetic, and creative feel the company is going for.

Eighty 8 Four

Eighty 8 Four is another creative agency using the same principles to attract the right kind of clients. Their work is targeted at clients who want fresh, innovative, energetic and useful designs. The darker orange gives a more professional feel while still maintaining the playfulness.

Rufus

Being such a bright color, orange works great as a contrasting color with a dark color like black, as can be seen on this website. This company site also tries to focus mostly on creative and innovative methods — something orange is great at representing.

Citrus SEO

"Citrus SEO" was branded around the theme of bright and energetic feelings, and the Citrus SEO website uses orange to enhance that point. We often think of orange when thinking of the word citrus, so the website color matches the brand well.

Yellow Web Designs

As we move to yellow, we can see that because the color is still close to orange, at a psychological level, it retains many of the same properties. Yellow can mean energetic and youthfulness. Yellow is a happy color, and creates feelings of energy without stress or alertness.

Like orange, yellow can be used in designs that require a positive energetic feeling.

ESPIRA

Below, on the ESPIRA website, yellow is used for a creative portfolio, and gives off the impression that working with this designer would be a pleasant experience. There’s a lot of happy and positive energy in this web design.

Strange Native

Yellow can be a very bright and bold color, but the Strange Native website design uses a pastel yellow for a very happy and carefree feel without being too intense. The feel of the color works well with the minimalist approach to the layout as well.

Gareth Dickey

Like orange, yellow makes black or dark colors stand out well as shown on this site. It can even make colors of other hues and intensities more vibrant. The content is really focused in this design and gains more attention by simply being placed against a yellow background. Also, the design gives off a great impression for this designer — youthful (innovative), creative, and happy (easy/pleasant to work with).

Showcase of Undergraduate Research

On this subsection of the University of Central Florida site, the yellow in the middle of this page brings attention right to that point, and helps the text and imagery in the middle of it stand out more. Hints of yellow throughout the site provide the overall design with a unique feel, while still maintaining professionalism and a light and innovative feeling.

BeerCamp

Youthful and bold — exactly the impression BeerCamp needs to make. The play on different shades of yellow creates a lot of good contrast in the design as well, and while it may all be yellow, the various shapes and shades make it interesting.

Green Web Design

Green in design is a safety net of colors. Because it’s so closely tied to nature, it’s very calming and relaxing. Nature-inspired websites have been a trend in recent years, and while there are many colors that can come from nature — earth tones — green is the most popular.

Green in almost any shade can be calming — even in the brightest shades. Brighter shades act like yellow — happy and playfully energetic. Green can also convey energy, yet in a more calming way than yellow.

Some great types of websites that would benefit from a green color palette are websites that relate to health, the environment, self-improvement or growth.

Acupuncture Wellness Solutions

Note that this website is related to health, and nature is very closely related to health. Also, acupuncture is an alternative healing method, that is also more natural than modern healing methods. The website above gives off a calming sense of wellbeing and encourages self-growth.

Clear Left

Clear Left uses a bright green to create an energetic and forward-thinking appeal. The energetic green color helps create that tone, while using such a bright shade implies positivity and creativity.

Lesy ČR

A nature-inspired site works well with green, like in this example. Specifically, this design hones in on a forest theme. Using green can bring out this nature-inspired theme and can create a soothing effect.

Milestone Solutions

The dark green used in this website makes the design appear professional and reliable, while the hue creates a soothing effect the reassures potential clients.

MORE

The brightest green in our showcase makes this website appeal to a creative and energetic audience. This company combines design and marketing services for businesses. The bright green works well with the minimalist design.

Blue Web Designs

Blue is one of the most stable, structural, and dependent colors available at our disposal. Brighter shades can give off a more creative feeling, while darker shades give off a feeling of a stronger, yet calm presence.

Many websites that need to portray quality and stability will use blue for their website and branding material. Large corporate sites, like IBM for example, win over customers because a dark blue is a trustworthy and quality-related color.

However, many other websites use light blue for a lighter feel, with many of the same calming and confidence-boosting benefits of blue.

Jar Design

Using blue in a portfolio website may make clients feel more comfortable hiring this freelancer, because blue is a stable color. There is less risk involved, and blue creates a calm decision-making process. The lighter shade in this design also takes on a less serious approach.

Adventure Drop

Blue can also be a very nature-inspired color, as we can see from it representing the water in this web design. Bright hues of blue create an energetic feeling.

indiqo.media

A theme of a night sky is perfect with blue hues. As this designer is also offering creative services, blue also creates a sense of stability.

Agência P4

Look at how they have combined blue, which can be nature-inspired, with similar nature-inspired hues (green and brown). While the web design itself is not nature-themed, it creates a similar effect.

Ballpark

Clean lines and a beautiful interface are not the only things that make this design look so professional. The deep and rich blue also helps create the effect. A brighter blue also helps establish a visual hierarchy.

Purple Web Designs

Purple is often associated with royalty. As such, it’s often used to convey luxuriousness.

This color can also mean independence.

KLAR

This design is purposeful, valuable and rich. Purple gives off the feeling of wealth and value over other colors.

Woman to Woman Gynecology

Culturally, purple is a very womanly color, so it works well with the nature of this site.

Celtica

Celtica combines purple with blue hues to create a very professional design.

KentCov.org

This design mixes purple with blue masterfully. Using deeper colors and blending the color in gradients create a mysterious theme.

72 thinking

For this design, blue almost takes over, yet the purple is at a prime visual location and therefore makes a large impact. This design implies a company that is creative, yet also reliable, valuable and strong.

White Web Designs

White is often used in design for functional purposes (it’s a safe color to use as a background).

Being the lightest color, it gives off the most refreshing and cleanest feeling. Designs that want to portray concepts of cleanliness, order and purity may best be served with white.

Cynosura

This web design puts a lot of emphasis on beautiful type and other delicate design elements. A sense of cleanliness and a positive tone emanates from this design.

The Old Fashioned

Using mostly white on this blog makes the visuals stand out. A more creative composition of typography and layout can be used on a white background because the color is unobtrusive and doesn’t clash with a lot of colors.

Made by Sofa

Made by Sofa has always been one of the best examples of minimalism in web design, and the use of plenty of white space makes for a very open and airy design.

Airportbags Plus

Using white gives opportunities for using colors with great contrasts between them while still maintaining a design that looks clean and sleek as can be seen in this example.

the MARTINI SHAKER

A simple design and color scheme make this design clear and to-the-point. A plain white background works well in this instance.

Black Web Designs

Black can have a very heavy feel emotionally, and may be used in design when strong emotions are needed to be portrayed. Black is a powerful and mysterious color.

While black can have negative connotations in some cultures, it’s also great for website designs that need a sleek, professional, and powerful tone.

Anderbose

This design uses black and darker shades of color to make a sleek and profound impact. Because it’s a portfolio site, the dark color also helps reinforce the colorful portfolio pieces.

The Old State

A darker background mixed with strong typography and graphic details make this design look old and modern at the same time. Elegance is the feeling the designer was going for here.

MadeToKill

A dark and comical theme is created for this site, with a dark background enforcing the dark theme. A more literal theme is also used here, using a dark background to act as a blackboard along with the typography and illustration.

Bryan Katzel

The use of black in this example creates a very sleek and professional feel. Using bright colors to contrast the dark colors is good for readability. The bright colors invoke feelings of creativity and variety, while the darker colors create a feeling of stability.

Vyniknite.sk

The illustration is unique and creative, and the design overall is very well organized. The dark background helps foreground design elements stand out.

Mixing Colors

Many websites have a primary color that is used, based on the color’s meaning and what the website needs to accomplish. However, many designers prefer to use multiple colors.

Below we’ll look into three ways multiple colors can be used in a web design.

Color Accents

If you use a strong color as a primary color in a design, using hints of another contrasting color will help highlight important areas.

Links, active navigation, and calls-to-action are often the elements you may wish to make distinguished.

Hush Studios, Inc.

PSD2HTML

FINCH

Simple Combinations

Two or more colors can be used in such a way that no single color dominates over the other. Instead, they play together to create a visually interesting and harmonious design.

InCub

Justin Burns

Get my boss to North Cape

Many Colors

Other designs may use a wide range of colors. This can create a very vivid look; using a mix of colors can create a very energetic, active, and busy design.

imaginamos

Haäfe & Haph

F91W

Resources and Tools

Here are some color tools to help you generate color palettes for your next web design.

Toucan

Color Wizard

Color Wheel

Color Scheme Designer

Color Explorer

Color Jack

Contrast-A

Color Rotate

Color Palette Generator

Web 2.0 Color Palette

Conclusion

Color can have a profound impact on design. Always consider color carefully. Choosing which colors to use are just as important as choosing not to use a certain color. Color is one of the most powerful design concepts and it can greatly influence how a web design is perceived.

Related Content

• A Guide on Layout Types in Web Design
• Top Five Web Design Tools
• 20 Useful Tools to Make Web Development More Efficient
• Related categories: Web Design and Tools

About the Author

Kayla Knight is a web designer and web developer who loves coding way too much for her own good. She does freelance design/development work and helps run the XHTML Shop. Connect with her by visiting her website and following her on Twitter @ KaylaMaeKnight.

Advertise here with BSA

Web designers don’t have much time to impress website visitors and persuade them to stay on the websites we craft. They want to find things quickly, and we should design sites to aid them do just that. One of the most important ways to do this is with focal points.

A focal point is a prominent section on a web page that we want to guide the user’s attention to. The focal point is the eye-catching centerpiece of the page; it stands out and is distinct than other components.

Here’s the rationale: By designing such an area of interest, we’re able to emphasize the most significant aspect(s) of the web page and convey the main purpose of the website.

The Basics

It’s best to have a single focal point. Find the most important thing on the page, and then accentuate it. The focal point should relate directly to the goals and priorities of the website and to the website owner’s expectations.

It’s possible to have more than one focal point, but I recommend focusing on one main call-to-action. Having many focal points on a page is the same as having none at all because, then, users won’t be able to discern which one’s the most important.

If you must have more than one focal point, they should be distinguishable. Create a visual hierarchy to denote which focal point is more important. Differentiate them from one another with variety in size, color, position, visual weight and other distinction techniques.

Where to Put Focal Points

Most users see the home page first, so that’s probably the best page for your focal point. But creating a focal point only on the home page is a common mistake. All web pages should have a focal point that gives the user quick access to the most important piece of information on the page.

On a scrollable page, for example, put the focal point above the fold (the header is a good candidate location).

On a non-scrollable page (i.e. a page that is visible all at once), you have more freedom. Use elements that already exist, but use them well. Make something simple elaborate; make something ordinary impressive.

If you can, imply a narrative. Inform your design work with a story.

How to Create Focal Points

Here are design elements you can tweak for establishing your focal points. I’ve included some real-world examples and counter-examples of each element.

Typography

Textual elements have strong potential to become attention grabbers, but typical websites are crammed with large amounts of text, so particular parts must be emphasized.

Size, color, spacing (between characters and lines) and typeface are the factors that can be manipulated for increased emphasis of textual elements.

Eduardo de la Rocque uses different typefaces and sizes to make three level of visibility.

The huge typography on Fajne Chlopaki‘s website catches the eye.

Music band The Autumn Film announces a special offer with bold type, creating a true focal point.

Sandstone shows why good labeling provides a captivating focal point.

Diversity in font sizes can do a lot, but colors are what really draw the eye. The header on the website for Flash Gaming Summit 2011 is a good example.

Illustration

Graphical components convey messages quickly and without needing much description. They also work as visual hooks to grab the user’s attention. It can also be used to show steps in a process, being so vividly descriptive and memorable. Most of the time, graphic elements are silver bullets: save them for the right moment and don’t overuse them.

WPCoder has an appropriate and descriptive focal point. It’s a beauty.

The home page for Bet Your Followers has several focal points, but the main illustration (of the gorilla) is predominant and guides the eye to other points. Notice its arms and the space just below them — a good example of how to handle several focal points.

Aka-Acid has a beautiful design, but the lack of a particular focal point is a drawback.

Buttons

One of the most popular elements in web design in recent years is the call-to-action button. Big buttons are on almost every website. They are effective because of their high visibility (due to their size), familiarity and descriptive labeling. Buttons are attractive elements, but overuse or misuse will detract from their effectiveness.

On Fatburgr, two simple buttons catch the user’s attention. Their size and color are effective.

SolidShops uses clear and obvious buttons to create focal points both above and below the fold.

Whitespace

Using whitespace is one of the simplest ways to draw the eye to specific areas of the page without resorting to visible elements.

Apple uses whitespace perfectly to make the featured product obvious.

Ask hits the spot by leaving enough whitespace around the search box.

Decoration

A way to distinguish something from its surroundings is to use simple decoration. Color and positioning go a long way towards creating great effects, and the effectiveness of other elements greatly depends on how well these basic elements are used.

On 3rdM, the only thing that immediately attracts attention is the color blue. After that, the eye goes to the largest item in between the blue icons. Simple but effective.

The part of the page that is biggest and has the highest contrast in color usually stands out the most. UX Magazine‘s home page has several focal points on different levels.

As demonstrated by Train-ee, tag clouds are a good way to arrange focal points by size.

Basic decoration can bring out certain elements in the text. Dan Viveiros‘ website is minimalist and elementary, but it works.

Pages like this one on Post Typography distract users; the eye has nowhere to rest, and, frankly, it’s confusing.

Conclusion

Every web page has to present something useful and attractive to its users. A variety of methods can be used to emphasize certain sections of a web page, and I’ve gone over some of them with you.

Related Content

• Working with Visual Weight in Your Designs
• Designing Websites with Personality
• Craftsmanship in Designing Websites
• Related categories: Web Design and User Interface

About the Author

Mohammad Moradi is an undergraduate in computer engineering. He spends his free time studying and researching web-related topics such semantic web and search engines. Moreover, he is a web/graphic designer. Contact him via moradi.c85@gmail.com. (He likes email among others!)