

The part of the page that is biggest and has the highest contrast in color usually stands out the most.

On 3rdM, the only thing that immediately attracts attention is the color blue.Īfter that, the eye goes to the largest item in between the blue icons. 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. Ask hits the spot by leaving enough whitespace around the search box.Ī way to distinguish something from its surroundings is to use simple decoration. Apple uses whitespace perfectly to make the featured product obvious. Using whitespace is one of the simplest ways to draw the eye to specific areas of the page without resorting to visible elements. SolidShops uses clear and obvious buttons to create focal points both above and below the fold. On Fatburgr, two simple buttons catch the user’s attention. They are effective because of their high visibility (due to their size), familiarity and descriptive labeling.īuttons are attractive elements, but overuse or misuse will detract from their effectiveness. One of the most popular elements in web design in recent years is the call-to-action button. Aka-Acid has a beautiful design, but the lack of a particular focal point is a drawback.
#FOCALPOINT WEBSITE HOW TO#
Notice its arms and the space just below them - a good example of how to handle several focal points.

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. WPCoder has an appropriate and descriptive focal point. Most of the time, graphic elements are silver bullets: save them for the right moment and don’t overuse them. It can also be used to show steps in a process, being so vividly descriptive and memorable. They also work as visual hooks to grab the user’s attention. Graphical components convey messages quickly and without needing much description. The header on the website for Flash Gaming Summit 2011 is a good example. Sandstone shows why good labeling provides a captivating focal point.ĭiversity in font sizes can do a lot, but colors are what really draw the eye. Music band The Autumn Film announces a special offer with bold type, creating a true focal point. The huge typography on Fajne Chlopaki‘s website catches the eye. Eduardo de la Rocque uses different typefaces and sizes to make three level of visibility. Size, color, spacing (between characters and lines) and typeface are the factors that can be manipulated for increased emphasis of textual elements. 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. I’ve included some real-world examples and counter-examples of each element. Here are design elements you can tweak for establishing your focal points. Make something simple elaborate make something ordinary impressive. Use elements that already exist, but use them well. a page that is visible all at once), you have more freedom. On a scrollable page, for example, put the focal point above the fold (the header is a good candidate location). All web pages should have a focal point that gives the user quick access to the most important piece of information on the page. But creating a focal point only on the home page is a common mistake. Most users see the home page first, so that’s probably the best page for your focal point. Differentiate them from one another with variety in size, color, position, visual weight and other distinction techniques. If you must have more than one focal point, they should be distinguishable.Ĭreate a visual hierarchy to denote which focal point is more important. 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. It’s possible to have more than one focal point, but I recommend focusing on one main call-to-action. The focal point should relate directly to the goals and priorities of the website and to the website owner’s expectations. Find the most important thing on the page, and then accentuate it. 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 focal point is the eye-catching centerpiece of the page it stands out and is distinct than other components. One of the most important ways to do this is with focal points.Ī focal point is a prominent section on a web page that we want to guide the user’s attention to. They want to find things quickly, and we should design sites to aid them do just that. Web designers don’t have much time to impress website visitors and persuade them to stay on the websites we craft.
