layout design

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]