Creating Focal Points in Your Web Design

Jun 8 2011 by Mohammad Moradi | 12 Comments

Creating Focal Points in Your Web Design

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

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!)

12 Comments

Andreas

June 8th, 2011

Thanks so much for this post. I (also) think that creating focal points on a website is extremly important paired with UX und SEO. As attention spans become shorter and shorter it’s important to lead the visitor to important areas as letting them discover is often no option (for the visitor).

Erik Briones

June 8th, 2011

excellent post.

sometimes i hit a roadblock with my designs. it does not seem to have any impact or the design elements do not fall in harmony. :) thanks for the tip!

Shahnawaz

June 8th, 2011

Great Article, loved it.

Christopher

June 8th, 2011

I learned this years (decades) ago when I started off as a Junior Art Director in the Advertising Agency world. A very similar approach applies there as well (Eye tracking studies, Starch Reports, etc). I’m glad you posted this as it is a VERY important topic — especially for clients who expect every page to be packed up to the rafters with text, images, and visual ‘junk’, then wonder why visitors are confused. Easy — there is no focus and everything is screaming for attention and nothing is getting any.

Thanks very much!!

Ricardo Machado

June 8th, 2011

It’s quite interesting to see that, either with whitespace, or a “glow in the dark”, more vivid colors and/or animations, designers seem to catch the users’ attention to an action rather to the content!
Yet, as a developer I don’t know much about design… I’ve seen, though, a someone’s statement saying: “The best design is where the user focus on content rather than it’s beauty”.

Scott

June 8th, 2011

Good post, but I take issue with this declarative statement, “Most users see the home page first.” This isn’t necessarily true, depending on the website. A large number of sites will see people coming in based on keyword searches or links from social media referrals and landing deeper within a site architecture.

That being said, review your site’s analytics to determine the most popular pages, and make sure that the focal points align to user goals.

marianney

June 8th, 2011

Great post. It’s just what I needed right now…about to go design a new site and reminders like this are always welcome.

sprise

June 8th, 2011

Loved the examples you pulled to illustrate the point! They are all lovely/punchy examples of the power of hierarchy.

jaw crusher

June 8th, 2011

As you said, A focal point is very important

PayamRWD

June 11th, 2011

Great post. Very useful.
Thanks

Joris

June 14th, 2011

Love the article. Thanks for mentioning us amongst those amazing web designs in this post.

Rob Brawn

June 16th, 2011

Interesting stuff!! a good read!

Leave a Comment

Subscribe to the comments on this article.