Strong designs go far beyond looking cool. When you load a website, watch an ad on television or peruse magazine ads, are you looking at them with random purpose, or did someone sprinkle a breadcrumb trail for you to follow? A well-designed document leads viewers from point A to B, highlighting and emphasizing key components without shouting in all caps “HEY! LOOK OVER HERE!”
While there are many creative and intricate ways to draw viewers to the important content like moth to flame, there are basic (and highly effective) methods that are commonly used in just about all of today’s media.
Eyeflow is one’s natural visual progression through a document. Creating visual flow is like drawing a map through your document using various design elements. To help draw this map and mark your important goodies with a big, fat, subconscious “X,” designers will use anything from color or shade gradients to roadways or even an arrow. Subtler techniques incorporate less obvious materials, and piecing together a design that not only looks compelling, but compels the eye to follow a specific path is a true art form.
There are no rules written in stone for eyeflow. As in, you can get creative with where people should begin viewing your document and where eyeflow should lead. Really, eyeflow should be different for almost every project you have, as your materials and goals will differ. Just remember that whether it’s an arrow, an innocuous background object, text or the central component of your design, give everything in your design direction towards your project’s goal.
This is perhaps one of the most basic and fundamental rules of eyeflow. Ever since we were children, we’ve been trained to read from left to right, top to bottom. This principle of eyeflow holds true for graphic and text-laden content. This isn’t the only way to create designs, but it’s used so often that it’s important to highlight this technique.
This comic book cover of Spider-Man is a great example of how top-left to bottom-right rules apply for both images and text. You can see how the illustration uses a strong headline to initially grab the eye at the top. Then, Spider-Man’s pose not only draws the eye to the center of the design, it also leads the eye from the top-left to the bottom-right of the page. All literal messages (dialogue bubbles and text blocks) follow the same path as his pose, giving the content a natural flow. Also, as Spidey’s first appearance ever, there is literally an arrow pointing at his name, saying Hello world!” without stealing the focus from the central image.
While you don’t want to bludgeon people with calls-to-action and information, you shouldn’t hide them either. When creating images for websites, it’s important to remember that monitors, smartphones and tablets typically aren’t large enough to display a website’s full content. The fold is the point where a page goes from visible to off-screen.
It’s typically important to place all important information above the fold, as many people will move on without scrolling through the entirety of web pages. These principles can potentially help when designing for other media than the web as well, as it will help create a hierarchy of content. Speaking of which…
Hierarchy vs. Anarchy
Newspapers may be an endangered species, but they sure know how to prioritize content. Typically, newspapers follow the inverted pyramid rule, where articles lead with the most important information and get to the finer details and extras toward the end. When creating your designs, it’s important to think about content from a consumer’s standpoint and arrange content accordingly.
Your content is always on the clock, no matter how brilliant the design. Using smart design that creates eyeflow will presumably lead people through all the information, but you should still prioritize content. Don’t assume people will automatically take the time to look at the complete document; make sure they get the important stuff fast. People expect certain things, like headlines and logos towards the top of a page, but after that it’s up to the designer to deliver the message before losing the attention of the audience.
This is especially relevant for text-laden content: Break your content into bite-sized portions. Unless it’s an article or advertorial, text blocks shouldn’t go past ten words. Nothing scares people away more than big blocks of text. If people want to read, they’ll go to Barnes & Noble – where they’ll probably do more scanning and cover-gazing than actual reading, truth be told.
Organizing content into small chunks is a powerful way to create eyeflow; it also opens up space, giving you more creative freedom to arrange an aesthetically pleasing design. Putting this idea together with content hierarchy, eyeflow and the fold, you can get to the central focus of your project and open yourself up to the challenge of arranging content in meaningful, enthralling designs.