Layout Design
Introduction
Layout design is the arrangement that
create or plan out by using combination of multimedia element and color to
perform the page to show the purpose of design with specific or unique.
Example of layout design: Facebook
Path Layout
Path layout is the direction that lead
the eye flow of audiences to look on the page and design. By using path layout,
audiences can understand what is the main topic of a design easily.
Path layout has three type, that is
·
Gutenberg
Diagram
·
Z-pattern
layout or Reverse-S-pattern
·
F-pattern
layout
Each path layout has own flow or
direction that place the information in
the page design.
Gutenberg Diagram
Gutenberg diagram is the direction of
support in layout and component when elements are distributed and homogeneous or
contain heavy use of text in the page design
(William Lidwell, Kritina Holden, Jill Butler, 2003). Gutenberg diagram also
help the design that contain a lot of words to make audience easy to read and
understand. It can lead direction of eye with using weight and component of
element in the page. Gutenberg Diagram is not suitable to all design. Example
of Gutenberg diagram are novel a newspaper.
Direction of Gutenberg Diagram
Gutenberg diagram has categories into
four quadrants, that are
·
Primary
optical area is located in the top left corner of page.
·
Strong
fallow area is located in the top right
corner of page
·
Weak
fallow area is located in the bottom left corner of page
·
Terminal
area is located in the bottom right corner of page
This pattern purpose that eye sweep
across and down the page with horizontal movement call axes if orientation.
Sweep starts from top left corner to bottom right corner, eye movement travel
from primary optical area to terminal area and the movement is call reading
gravity.
This pattern focus on strong and weak
fallow area that is out of reading gravity and receive minimum attention to
both fallow area. Reading gravity path is use to place important element to
make sure audience focus on the element. This design is harmony with natural
reading gravity that can improve reading rhythm(Steven Bradley, February 2007).
Z-Pattern Layout
Z-pattern layout is the reader that
follow shape of letter Z and direction start from top left corner horizontal to
top right corner and diagonally to bottom left corner and finish with
horizontal at bottom right corner.
Z-pattern also known as reverse-S-pattern.
Similar of Gutenberg diagram and Z-pattern is both start from top left corner and
end at bottom right corner and pass through the middle of the page. Gutenberg
diagram is place important information an middle path while Z-pattern is good
for simple design with few key element that need show to audience. Story
telling aspect of design is follow the path of Letter Z(Steven Bradley,
February 2007).
Zig-Zag Pattern
Z-pattern also can known as Zig-Zag pattern
because Zig-Zag pattern is combination of few Z-pattern at the same page. Direction
of Zig-Zag pattern is almost same with Z-pattern that start from top left
corner horizontal to top right corner and diagonally to middle left corner and move
to middle right corner and diagonally to bottom left corner and finish with
horizontal at bottom right corner(Steven Bradley, February 2007).
Golden Triangle Pattern
Golden triangle pattern also one of the
separate pattern from Z-pattern. Direction of golden triangle pattern also
start from top left corner and move horizontally to top right corner and move
to bottom left corner diagonally and close shape that end up to top left corner with a right angle on top left
corner. Space inside triangle area is use to place important information(Steven
Bradley, February 2007).
F-Pattern Layout
F-pattern is the reader that follow
letter F and direction is not same with Z-pattern or Gutenberg Diagram. The first
sweep start from top left corner to top right corner, then second sweep start
from middle left corner and move horizontally to middle right corner. And the
second sweep is not extend as long as first sweep.
F-pattern is focus on:
·
Important
information is place on top of design that general read by reader.
·
Lesser
information is place on left edge of design in point form where horizontal eye
movement can look to all.
·
People
do not read online and they will scan.
F-pattern is look to get applied to
online replace of text heavy content. F-pattern will place all the important
information on top(Steven Bradley, February 2007).
Reference
William Lidwell, Kritina Holden, Jill
Butler, October 2003, Universal Principles of Design. [Online] Available at http://www.studiodino.com/info/news47.htm
[Accessed at 25 September 2013]
Steven Bradley, February 2007,Vanseo
Design. [Online] Available at http://www.vanseodesign.com/web-design/3-design-layouts/
[Accessed at 25 September 2013]
