![]() ![]() 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. |