![]() Place key elements within the natural pattern of reading a page-the F-Pattern. By creating focal points within the natural scanning pattern of a reader’s eyes, you’re more likely to capture their attention or interrupt their focus at a very logical focal point. The food is the focal point in the middle of the negative space.”Īlthough it can be tempting to fill negative space with other visual elements, it’s important to preserve the space around a key element so it remains prominent. “Think of nicely plated course at a fine dining restaurant,” says Jon, “The white space draws all of your attention to the food and the beauty of the presentation. Adding lots of negative space to a visual design reduces the clutter that distracts the eye of the audience. Negative space -the visual space that surrounds a subject -is another way to create a focal point. Like with color contrast, sometimes the surrounding visual space is just as important as the element you want to draw attention to. In the example above, the direction of the car creates a sense of motion from left to right across the page, drawing the eye to the call to action (which is further supplemented by a right-pointing arrow and use of the same color yellow). When using illustrations to construct a focal point, pay attention to the direction of the elements, how they are aligned if using a series, and the balance of elements from left to right on a page. In this design, the car is pointing towards the focal point, drawing your eye to the text and call to action. Sometimes this is appropriate you might see this in a hub or index page, which surfaces many focal points based on the page’s intended purpose. However, when trying to optimize for conversions, you should use limited focal points to streamline the user’s attention and actions. The alternative to a page that creates singular focal points is a page that divides the user’s attention giving equal weight to many different potential actions or visual elements. ![]() But focal points can also be created based on relative position, surrounding context, or supporting visual imagery in your design. Sometimes, focal points can be created by giving the visual element more relative weight: color contrast is one way to draw attention and create a focal point. Ideally, your visual design will subtly guide a viewer to focal points created around key areas where you’d like a visitor to engage or take an action: a CTA button, a form field, or some other UI element. “Focal points are a place for the eye to rest in your visual design,” says Jon, “In the page’s visual narrative, they are the comma.” What are focal points?įocal points are areas of interest, emphasis, or difference within a composition that capture and hold the viewer’s attention. This week, I sat down with Optimizely Communication Designer Jon Saquing to learn about focal points in visual design, and how you can use them to create delightful experiences. Last week, we chatted with Optimizely Design Manager Jeff Zych to learn more about how you can leverage color contrast to increase conversions. Welcome back to our blog series, Design Principles you Should A/B Test. Are visual design and A/B testing a match made in heaven, or the best of frenemies? We’re on a mission to bring designers and optimizers closer together, so they can produce visually delightful experiences that also convert.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |