First there were stone tablets, papyrus scrolls and paper. Then came computer screens and electronic tablets. As the technology to display a page evolves, it remains the designer’s job to arrange the content clearly. But what’s the best way?
It’s an increasingly important question, as responsive frameworks force designers to think about many different pages at once. Faced with dense text and short attention spans, designers developed 6 principles to guide the reader’s eyes to the most important information.
These 6 principles of visual hierarchy will help you design everything from brochures to apps, guaranteeing a positive reading experience for the end-user.
1. Page scanning patterns
All cultures read from the top down and most cultures read from left to right. But while that knowledge is important for page design, designers know the task is much more complex.
Recent studies have shown that people first scan a page to get a sense of whether they are interested, before committing to read it. Scanning patterns tend to take one of two shapes, “F” and “Z,” and you can take advantage of this in your design.
F-patterns apply to traditional, text-heavy pages like articles or blog posts. A reader scans down the left side of the page, looking for interesting key words in left-aligned headings or initial topic sentences, then stopping and reading (to the right) when he or she comes to something interesting. The result looks something like an F (or E, or something with even more horizontal bars; but the “F” term has stuck).
Heat map: Nielsen Norman Group
How can you utilize this? Align your important information left and make use of short, bolded headlines, bullet points and other such attention-grabbers to break up paragraph blocks.
Z-patterns apply to other sorts of pages, like ads or websites, where information is not necessarily presented in block paragraphs. A reader’s eye first scans across the top of the page, where important information is likely to be found, then shoots down to the opposite corner at a diagonal and does the same thing across the lower part of the page.
Source: tuts+
Web designers commonly construct their pages to conform explicitly to this behavior, placing the most important information in the corners and orienting other important information along the top and bottom bars and connecting diagonal. In the below design for the 2010 Build conference, important elements include the logo (upper left), “register now” button (upper right), and speakers list (across the bottom), all of which are strategically placed at the sweet spots of the Z-pattern.
Website: Build
2. Size
This one is simple enough: people read bigger things first. If your eye goes to “performance” before “cracking” in the below ad for the Young Vic theater, then you should get in touch with a perceptual psychologist immediately: you can probably make some good money undergoing testing as a rare anomaly.
Poster: Rebecca Foster
What’s interesting, is that this tendency is actually strong enough to override the top-down rule. In the above image, “cracking” overrides “time to act” because it is both bigger and to the left (so left-to-right rule lends a hand). But in the below page from Annual Report: Human Rights Campaign 2012 (designed by Column Five Media), we read the large-print “Fighting for Equality on the Campaign Trail” before the text directly above it, “Election 2012.”
Annual report: Column Five
“Election 2012″ is the highest-level order of information: it tells us the general topic that the information below falls under. But the designer decided that the article heading was more interesting for readers and so sized it to be read first.
3. Space and texture
Another way of drawing attention is to give content ample room to breathe. If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers.
As you see in the image below (part of DrawtoClick‘s website), spacing can be an elegant alternative or addition to the use of size. Here, the selling point, “Notre agence vous accompagne …”, is in a very small font, but it is surrounded by an excess of white space that signals its importance. Below, the phrases “Le Compendre,” “Le Réaliser” and “Le Partager” receive extra emphasis by being boxed off from surrounding space.
Website: Draw to Click
When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page. This example by Bright Pink illustrates the concept nicely:
Posters: Bright Pink (via Smashing Magazine)
In the first image, the word “Sports” is higher in the hierarchy than “badminton” due to being higher, bigger and bolder. In the second image, the two words are about equivalent, thanks to a black rectangle that highlights “badminton” and sets it into its own space. In the third image, a background scribble interrupts the space of “Sports” but not “badminton,” and consequently results in a reversal where “badminton” is highest in the hierarchy. Such a progression is difficult to predict, so designers often chalk it up to a holistic sense of “texture.”
4. Typeface weight and pairing
Typeface selection is critical to establishing visual hierarchy. Among a typeface’s most important attributes are weight – the width of the strokes that compose its letters – and style, like serif and sans serif. Other modifications like italicization can play a role too.
Note how typeface affects the hierarchy order of the words in the below web design for The Tea Factory: “the perfect teas to keep you warm” is the focal point, but differences in type weight and italicization, in addition to word placement, produce a more dynamic, less linear, reading experience. “See our selection,” the call to action, is more strongly emphasized than the text above it due to sizing and spacing.
Branding: The Tea Factory
In some cases, the goal is to present a variety of information as equally urgent. Setting it all to the same size and weight would accomplish the equivalency, but would also make it monotonous. Differentiating the typefaces is one way to avoid this, as on the below Trendi magazine cover. Here, the five teasers around the periphery of the page are all equal on the hierarchy, but achieve variety by altering between two well-paired typefaces – one a mid-weight serif, the other a lightweight but tall sans serif.
Magazine cover: Trendi (via The Kasper Stromman Design Blog)
5. Color and tint
Here’s another no-brainer: bright colors stand out from muted colors or grayscale, while lighter tints appear more “distant” and thus fall lower on the hierarchy than richer, darker ones. The website for Where They At contrasts highlighter yellow and color illumination against a black-and-white grid to striking effect:
Website: Where They At
The Guggenheim website uses color to accentuate important information like location choice, the list of exhibitions currently on view, and the links to special exhibitions.
Website: Guggenheim Museum
The website for the Whitney Museum, on the other hand, establishes hierarchy within a single typeface, weight and tone (black) by using tint (which refers to the addition of white to a base tone, making it lighter). “Cory Arcangel on Pop Culture” is clearly beneath “New on Whitney Stories” on the visual hierarchy, not only because it is placed lower but because its tint is lighter, making it less striking to the eye against the white background.
Website: Whitney Museum of American Art
Color is of particular importance in mobile app design, where a small screen size limits your ability to use other strategies like size differentiation and broad spacing. On Grainger Industrial Supply‘s app, the “proceed to checkout” button is colored red, making it stand out from any page where it appears. The “Narrow Your Search Results” bar, by contrast, is grey, making it roughly equivalent on the hierarchy with other elements like the search bar and product links.
App design: Grainger (via codrops)
6. Direction
Page layouts are typically designed according to a grid of vertical and horizontal lines, both by convention and because this is the most legible format. In such a system, a new way to establish hierarchy emerges: break the grid. Text that is arranged on a curve or diagonal will automatically stand out against surrounding grid-locked text, taking center stage. This has long been an effective strategy in advertisements like the below bus stop poster by Frost Design.
Poster: General Pants Co. (via Frost*collective)
http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
相关推荐
Principles of transaction processing Copyright © 2009 by Elsevier Inc. All rights reserved
Principles of Fluorescence Spectroscopy 3rd
Principles of Distributed Database Systems
Principles of Instrumental Analysis, 7th Edition 很不错应用资料,值得学习,分享给大家,希望你们有收获;
Principles of Lasers-5ed,Orazio Svelto.
雷达,是英文Radar的音译,源于radio detection and ranging的缩写,意思为"无线电探测和测距",即用无线电的方法发现目标并测定它们的空间位置。因此,雷达也被称为“无线电定位”。雷达是利用电磁波探测目标的电子...
Principles of Transaction Processing for the Systems Professional explains that these and many other computerized tasks require the use of transaction processing (TP).
Principles of Modern Radar Advanced Techniques IEEE
principles of neural science 第4版原版,有书目可搜索
Principles of Economics 7th Edition N.Gregory.Mankiw 经济学原理新书7 版本,高清
Principles of Economics
电源完整性Principles of Power Integrity for PDN Design - Simplified
Principles of Protocol Design
The Principles of Mathematics
Principles of Data Science Principles of Data Science
Principles of Neural Design.pdf Principles of Neural Design.pdf
Principles of Model Checking
英文原版文档!高清扫描版!带详细章节名称书签。对前端网站开发有兴趣的朋友可以下载看看!
It also gives some models for the organization of IoT systems. Safety and security have long been important to embedded computing—the first edition of this book discussed medical device safety—but ...
Principles of Electronic Communication Systems 4th edition provides the most up-to-date survey available for students taking a first course in electronic communications. Requiring only basic algebra ...