Screen Layout Design By Sangeeta a/p Ellankovan

 SCREEN LAYOUT DESIGN

 1.    INTRODUCTION

 1.1 GRID LAYOUT

 1.2 RULES OF THIRDS

 1.3 GOLDEN RATIO

 1.4 COLUMNS

 1.5 BASELINE GRID

 2.0 PATH LAYOUT

 3.0 GUTENBERG DIAGRAM, Z-PATTERN, AND F-PATTERN DESIGN LAYOUTS.

 3.1 GUTENBERG DIAGRAM

 3.2 Z-PATTERN LAYOUT

 3.3 F-PATTERN LAYOUT

 4.0 CONCLUSION & REFLECTION
 5.0  REFERENCE

   

1. INTRODUCTION

The first element that catches a viewer’s eyes is the screen layout. As an Internet user, there must be a lot of websites that one must have visited and it’s easy to differentiate the layout design between each websites. An effective screen layout design is capable of not only catching the attention of the audience but also delivering the core message or idea to the audience.

  

                    Figure 1.1                                                Figure 1.2

Both figures above portray the different layouts in the world of graphic and web design. Observe the figures above and the different layouts and readability.

Now you may ask wonder what screen layout design is exactly.

Based on my research, screen layout design and page layout design are the same. One of the few differences is that screen layout applies the layout design concept to electronic devices such as computers, mobile devices, tablets and other handheld devices. It emphasizes the design, look, feel or the layout of a webpage, game or even software.  Page layout, on the other hand, may be more applicable towards hard copy versions like newspaper, magazine and books. While most layout principles may be applicable to both screen and page layout designs, there are some theories such as the F-pattern and Z-pattern which are more applicable in screen layout design. Hence;

“Page layout is the part of graphic design that deals in the arrangement and style treatment of elements (content) on a page.” (Image 2011, p.1)

“Page layout, whether in print or Web format, calls for a skillful balancing of diverse visual elements throughout the design. Multiple pages, and sometimes multiple documents, must be integrated with one another through the repetition and variation of visual (and related conceptual) themes.” (Amy.E.Arntson 2007, p.117)

There are many types of screen layout design. Firstly, there is the grid layout which is one of the oldest and most common layout designs.

1.1 GRID LAYOUT

 

Figure 1.3                                                                                Figure 1.4

  

                                                                        Figure 1.5

Figures above are all examples of grid layout design.

“A grid is a set of guidelines, able to be seen in the design process and invisible to the end-user/audience, for aligning and repeating elements on a page.” (Image 2011, p.1)

Grid layouts function as a framework in which the different contents of a page are placed astutely. A grid is an invisible set of lines and structure that are used as guides to allow the effective placement of content on a page so as to capture the attention of the audience while also delivering the intended message.

The page layout of this style is not necessarily compulsory to stay within the guidelines. It depends a lot on the content, elements, design style and idea of the layout.

Grid layouts are meant to allow flexibility.

There are quite a few types of grid layouts such as Rule of Thirds, Golden Ratio, Columns and Baseline Grid. The figure 1.4  below shows the difference in each layout.

                                   Figure 1.6

1.2 Rules of Thirds.

This type of grid involves dividing the whole page into six equally sized portions by drawing two vertical lines over two horizontal lines.  The elements and contents of the page are later placed accordingly to these lines and intersections.

1.3 Golden Ratio

This type of grid has been in use for centuries by architects, artists and book designers for its unique design. It used approximately 1.618 for proportioning.  A designer should take the pixel width of the layout and divide it by 1.618 and the value calculated would be the width of the main content column.  A subtraction of the calculated value from the initial width layout would give the width of the smaller column.  For example,  take the 960 pixel width layout and divide 960 by 1.618. The calculated value of 594 will be the width of the main content column. The width of the smaller column can be gotten by subtracting 594 from 960 and in which the value would be 366. Combine both the columns and the designer will have a Golden Ratio layout.

Figure 1.7 above shows examples of Golden Ratio layout. Observe carefully to make out the different Golden Ratio layouts.

1.4 Columns

This type layout involves the designer dividing the pages into a certain number of columns based on the composition of the content.  The columns are in equal sizes.   

1.5 Baseline Grid

Baseline grid is a set of horizontal lines on a page that the baseline of all type sits on. . A baseline is like the imaginary line on which all the letters sit on.

2. PATH LAYOUT

Grid layout and path layout are said to bring balance and harmony to the layout of a page. Path layout is when the designer uses no underlying grid structure or guidelines. In this layout, the designers take a more spontaneous approach and attempt to visualize the elements or contents in different arrangements across the page. Path layout takes a less structured approach towards designing. The designer attempts to create a path for the eye of the observer. The goal of this path is said to be that it is to guide the eye of the observer skillfully through the different element on a page. Hence, there has to be a clear focal point as to attract the observer’s attention to that element first. If the observer’s eye is drawn to different areas equally at first glance, visual chaos may occur and the observer may lose interest.

Figure 2.1 shows an example of Path layout with a focal point that attracts the observer’s eye to the key point or message.

3.0 GUTENBERG DIAGRAM, Z-PATTERN, AND F-PATTERN DESIGN LAYOUTS.

These pattern layouts depict how the eye of an observer reads and scans through a page. The patterns provide suggestions as to where to place important information and non-important information.

3.1 Guttenberg Diagram

The Gutenberg diagram depicts a basic pattern that the eyes of an observer move through when looking at evenly distributed content on a page.  This pattern layout usually applies to layouts with heavy text content.

There are four quadrants in the Gutenberg diagram.

·         * Primary optical area

·         * Strong fallow area

·        * Weak fallow area

·        *  Terminal area

                                                                       Figure 3.1

Figure 3.1 shows the Guttenberg Diagram.

The primary optical area is located at the top left and is the first quadrant that the eyes of the observer wanders to.  The quadrant next to it is called strong fallow area. Following that is the terminal area which is on the bottom right and the weak fallow area which is on the bottom left of the layout.

Axes of orientation is when the eye of the observer moves across and down the page in a series of horizontal movements.  The eye will sweep from a little further than the left edge to a little closer to the right edge of the layout. The movement in which the eye of the observer usually travels from the primary optical area to the terminal area is called as the reading gravity as shown in the diagram.  Strong fallow area and weak fallow area fall outside the reading gravity.  Hence, these two parts receive lesser attention from observer compared to the other areas. It’s highly advised that to increase the attention of observer to these parts, these parts should have some kind of visual element.

A designer when following this layout should arrange the more important content according to the reading gravity.

3.2 Z-Pattern Layout

                                                                     Figure 3.2

Figure 3.2 shows the Z- Pattern layout.

This pattern layout follows the letter Z shape and it is said to be rather simple. Based on this pattern, it indicates that the readers start reading from the top left and then move to the top right before reading the bottom left and the bottom right.

The obvious difference between the Gutenberg diagram  and the Z-pattern  is that in this pattern readers will read through both the strong fallow area and weak fallow area. Any designers intending to follow this pattern layout need to arrange the content and elements according the path of the pattern, starting from the most important to the least important.

3.3 F-Pattern Layout

                                                                         Figure 3.3

Figure 3.3 shows the F-Pattern layout.

Scientific eyetracking studies show that most web surfers practice reading the screen in an “F” pattern.  The readers’ eye moves from the left to the right side, top to the bottom of the screen in the same manner in which a book is read. The readers take more or less only glances towards the right side of the screen. F-pattern layout is used in fast reading or scanning of a page.

In this layout pattern, designers are advised to place more important contents and elements on the left side as shown in the above figure where the important visual elements are located on the left side.

F-pattern layout generally indicates that the most important information should be placed at the top left where it will be read faster. When using this layout, there should be less content placed along the left edge of the pattern, if possible in bullet forms. This is to ensure that little eye movement is needed to read the content. “People don’t read online. They scan.” (Steven Bradley,2011)

4.0 CONCLUSION & REFLECTION

From conducting the research above, the author has learned a lot about screen layout designs. The author learned the different types of layout designs and the situation that call for it. For example, a F-pattern layout is more suitable for text-heavy content. The author also realized that though screen layout design topic seemed relatively easy at first, it’s far from easy. There’s a lot to consider when choosing the most suitable layout design for a website.  The author also realized the difficulty in finding concrete materials on this topic and learned more on finding the right information and sources.

The author plans on using the grid layout, more specifically the Golden Ratio layout on the group project. Golden Ratio has a one portion larger than the other in its layout. The author intends to put the heavy text details and images on the larger side and any interactive applications or animations on the right side. This is because the author realized that the MILO interactive multimedia application will contain a lot of visual elements and text, mostly details about the MILO brand. Hence, the author feels that this screen layout will better suit the needs. Grid layout allows flexibility while also promoting creativity. The grids can be placed in different patterns to better adapt to the visual elements, which means the author’s group can try out different designs of the layout. The author also intends to use the F-pattern as a guideline in deciding where to place the more important content and where to place the smaller details. The author decided to choose the F-pattern because not only does it promote readability but it’s also for faster reading or scanning of a screen layout. Most website visitors don’t exactly read line by line every detail in a brand website. They mostly skim through the descriptions.  Lastly, the author hopes to make full use of the new found knowledge on screen layout design to produce an impressive result in the group project.

5.0 REFERENCE 

1.Olan, 2013. The Grid System. [online] Available at: http://www.webdesignstuff.co.uk/so910/2013/02/20/93/ [Accessed: 23 Feb 2014]

      2. Brandon Jones, 2012. Understanding the F layout in Web Design. [online] Available at:  http://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design--webdesign-687 [Accessed: 23 Feb 2014]

     3.Lara Schenck, 2013. The F& Z Layouts in Web Design.[online] Available at: http://notlaura.com/the-f-z-layouts-in-web-design/ [Accessed: 23 Feb 2014]

    4. Steven Bradley, 2011. Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern. [online] Available at: http://www.vanseodesign.com/web-design/3-design-layouts/[Accessed: 23 Feb 2014] 
  5. Amy E. Arntson, 2007, Graphic Design Basics, 5th edn, Thomson Wadsworth, Belmont, California, USA.