Organizing the Page: Layout of Page Elements
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Organizing the Page:
Layout of Page Elements
Preface
Page layout is the art of manipulating the user's attention on a page to convey (menyampaikan) meaning, sequence, and points of interaction
Pendahuluan
– We'll talk about visual hierarchy, visual flow and focal points, and grouping and alignment all are predictable and rational approaches to page design.
– This chapter's patterns describe concrete ways to apply those high-level concepts to interface design.
THE BASICS OF PAGE LAYOUT
Five major elements of page layout:
– visual hierarchy,
– visual flow,
– grouping and alignment,
– how to put these three elements together,
– how to use dynamic displays.
VISUAL HIERARCHY:
WHAT'S IMPORTANT?
The concept of visual hierarchy plays a part in all forms of graphic design
the most important content should stand out the most, and the least important should stand out the least.
Example : No visual hierarchy
the whole block of text is visually monotonous
the first sentence is the most important (guessing)
Know the context after reading it first.
With whitespace
distinct groups of information the headline at the top and the not-quite-as-
important RSVP message at the bottom stands out a bit more because it has whitespace around it.
With typography and alignment
Big, bold fonts do the trick for importance
Spatial positioning does something a little more complex here.
The shapes of some page elements give clues
Center Stage
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.
Titled Sections
Using the Titled Sections pattern helps define the visual hierarchy, too.
Visual Framework
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.
Visual Framework
Mechanisms
These mechanisms can help you lay out a visual hierarchy: – Upper-left-corner preference – Whitespace – Contrasting fonts: the bigger and bolder, the more important the
information – Contrasting foreground and background colors: putting white text
on a black background, for instance, makes a very strong statement on a white page
– Positioning, alignment, and indenting: indented text is subordinate to whatever's above it
– Graphics such as lines, boxes, and colored bars: things in a box or group go together
VISUAL FLOW:
WHAT SHOULD I LOOK AT NEXT?
Visual flow deals with the tracks that readers' eyes tend to follow as they scan the page.
visual flow leads the eyes from those points into the less-important information.
As a designer, you should be able to control visual flow on a page so people follow it in approximately the right sequence.
VISUAL FLOW
"Focal points" are the spots your eyes can't resist going to.
You can set them up in many different ways, such as by – using whitespace,
– high contrast,
– big chunky fonts,
– spots of "interesting" color,
– converging lines,
– hard edges,
– faces, and
– motion.
(resembles the one for visual hierarchy. use these properties to become focal points.)
VISUAL FLOW
a good visual flow is easier on your users' eyes
VISUAL FLOW : Summary
Top-to-bottom and left-to-right is the default visual flow.
Strong focal points will draw the eyes first, followed by weaker ones.
The perceived meaning of the page content will change where the user chooses to look.
GROUPING AND ALIGNMENT:
WHAT GOES WITH WHAT? by grouping things together visually,
– you state that they are related.
– necessary to form a clear visual hierarchy.
– also help with visual flow, by guiding the viewer's eyes from group to group.
If visual flow doesn't step in and lead the user's eyes to the button by some other means, the user may not see it.
Alignment is another, more subtle way to associate things with one another.
Four of the Gestalt principles several layout properties that seem to be
hardwired into our visual systems (Gestalt psychologists) – Proximity
• Put things close together, and viewers will associate them with one another. This is the basis for strong grouping of content and controls on a UI.
– Similarity • If two things are the same shape, size, color, or orientation, then
viewers will also associate them with each other.
– Continuity • Our eyes want to see continuous lines and curves formed by the
alignment of smaller elements.
– Closure • We also want to see simple closed forms, like rectangles and blobs of
whitespace, that aren't explicitly drawn for us. Groups of things often appear to be closed forms.
Four of the Gestalt principles
PUTTING IT ALL TOGETHER
PUTTING IT ALL TOGETHER
Possible visual flows
Karakteristik umum dari ragam dialog
interaktif – Konsistensi
Grouping on web page
USING DYNAMIC DISPLAYS
dynamic computer display
time becomes another dimension of design!
computers permit user interaction with the layout to an extent that most printed things can't.
USING DYNAMIC DISPLAYS
advantage of the dynamic nature of computer displays
Using scrollbars is one common way of presenting a small "viewport" onto a large thing, like text, an image, or a table.
Or, if you can carve up the content into coherent sections, – Card Stacks, Closable Panels, and Movable Panels – the more static Titled Sections.
• (also can split up content over multiple virtual pages and let the user navigate between them)
USING DYNAMIC DISPLAYS
If you want to direct the user through a sequence of steps,
– Responsive Enabling and Responsive Disclosure are two well-known, dynamic ways of doing so
Related Documents
