3/31/2023 0 Comments Stand out from the rest synonymIt’s intimately related to visual hierarchy, of course-a well-designed visual hierarchy sets up focal points on the page wherever you need to draw attention to the most important elements, and visual flow leads the eyes from those points into the less-important information. Visual flow deals with the tracks that readers’ eyes tend to follow as they scan the page. Meanwhile, let’s look more deeply at visual organization. (I’ll return to this fascinating topic in Chapter 9.) Having all these “variables” to choose from gives you a lot of design freedom, especially since they each have a dual role: to show how the UI is organized, and to communicate branding, emotion, and other non-rational attributes. Web pages frequently use both color and fonts to differentiate headlines from body text many UIs use both group boxes and whitespace to form visual groups. You’ll find that many UIs and printed graphics use several of these mechanisms at once. Graphics such as lines, boxes, and colored bars: things in a box or group go together Positioning, alignment, and indenting: indented text is subordinate to whatever’s above it These mechanisms can help you lay out a visual hierarchy:Ĭontrasting fonts: the bigger and bolder, the more important the informationĬontrasting foreground and background colors: putting white text on a black background, for instance, makes a very strong statement on a white page And if you develop a Visual Framework (another pattern, which encodes how to do visual hierarchy within the whole UI), make sure it accommodates the different levels of hierarchy you need, such as titles, headlines, sub-heads, lists, navigation bars, and action buttons. Using the Titled Sections pattern helps define the visual hierarchy, too. In this chapter, the Center Stage pattern deals directly with visual hierarchy by encouraging you to establish a single large area of the UI to do the main task. With these and other familiar structures, like tables, their visual shapes “telegraph” meaning immediately, before the user even starts to read what’s in them. The same logic applies to tree views, auxiliary text under links, input hints under text fields, and so forth. You can guess that the directions comment relates to, but is not as important as, the text above it. The comment about directions is indented underneath the “Where” text in the example. The shapes of some page elements give you clues, too. It’s also enhancing the apparent importance of the “When” and “Where” text-which are important-by making them stand on the almost-empty left margin, aligned with the headline. It’s being redundant with the whitespace by separating some blocks of text from others. Spatial positioning does something a little more complex here. Similarly, the tiny lightweight font used for the directions comment indicates “you may want to read this, but it’s not that big a deal if you miss it.” Our eyes are drawn to dense, contrasted shapes with heavy " visual weight.” The invitation’s most important line is in a giant font the second most important line is in a large font, but not as large the body text is normal sized. Some of these patterns work as well in print as they do onscreen, but most of them would be useless in print because they presume that the user will interact with the page.įigure 4-3. With typography and alignmentīig, bold fonts do the trick for importance, of course. This chapter’s patterns describe concrete ways to apply those high-level concepts to interface design.īut the changeable, interactive nature of computer displays makes layout easier in some ways, harder in others. We’ll talk about visual hierarchy, visual flow and focal points, and grouping and alignment-all are predictable and rational approaches to page design. Some important ideas from graphic design are explained in this chapter introduction each can guide you in the layout of pages, screens, and dialog boxes. If all this content were presented in a drab monotone, with no graphic emphasis to grab and move your attention, you would actually find it harder to extract meaning-what’s supposed to be important, and what’s not?Įven though it is ultimately an art, there might be more rationality to good page layout than you think. Likewise for editors who arrange articles, headlines, and ads on a newspaper. Film and television directors make their living by manipulating your attention on the movie or TV screen, and you are presumably a willing participant. If the word “manipulating” sounds unseemly to you, think about it this way. Page layout is the art of manipulating the user’s attention on a page to convey meaning, sequence, and points of interaction. Chapter 4. Organizing the Page:Layout of Page Elements
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |