Layout Design by YAP Woon Dyi

Layout Design

Definition

Layout design is the combination of the words layout and design. Layout is the structure of the main content in a page and design is the overlook of your work. Layout design is the overlook of arrangement and structure of the elements which include texts and images lay in your page.

History and Development

Beginning from early in Middle Ages, illuminated pages in hand-copied books had been transformed to intricate modern catalog, magazine and webpage in this 21^st century. The layout design has long been a consideration in graphic design. Since the creation of personal computer, the layout design skills have been improved to electronic media as well as print media. Early in the beginning, page layout was designed in pencil sketch and rough paper before processing to the final form. Nowadays, it can be designed by layout software such as photoshop and illustrator which make the design more organized, orderly, precisely and attractive.

Types of Layout

There are many types of layout such as grid, template, static and dynamic.

Templates and grids are common type of layout used in websites, multiple-page publication and advertising campaigns. 

Grid is a network of lines which cross each other which form a series of square and rectangle. It is visible during the design process but invisible to the audience/end- user. Grid is used for repeating and aligning elements such as text and picture on a page. Grids are meant to be flexible because you can decide whether a page layout is within those guidelines in a page or not, it is depending on your design style. It requires high graphic design skill to design the grid as well as lay out elements on a page by using a grid.

Example of Grid

Template is more rigid compare to grid. Template is mostly visible to the end-user/audience which involves repetition of elements. Template requires less design skills to layout elements than design the template. Templates are usually used for frequent modification (swapping) of foreground content and modification of background elements.

Example of Template

Criteria of Good Layout Design

·        Typography

Ø Contrast

Typography has a fundamental principle which is contrast. Contrast can be done in variety of choices such as length, angle, boldness, style and ratio. Contrast in typography means using two or more type font.

            

Ø Legibility

Beside that, readability is critical in typography too because the point of layout design, after all is to read and see. Different fonts have different legibility in different size. These called display fonts. It’s the designers’ job to look for a legible and yet attractive caption font.

           

Ø Fonts to Avoid

Certain fonts are not suitable in design. When misuse these kinds of fonts, it has developed a stigma among designers and they encourage laziness. Typeface should not have any implications about the content---One theory of design. This is because they serve only to detract from what could have been a good design. We can only use them in specific condition. For example, we use only Comic Sans when we are writing a comic book, we use only Courier when we are writing a screen play, we use only Papyrus when we are designing an ironically inaccurate depiction of an Egyptian scroll.

                               

·        Eyelines

Eyelines are created when the elements in a layout design lined up. Eyelines will guide the audiences’ eye across a layout and creating a “eye movement” for them. In other hand, it forms a sense of combination across the spread too. Guidelines make a easier way to form eyelines in guiding viewer across content in a spread. Eyelines is the most convenient way to guide viewers’ eyes across the layout.

   

·        White Space

White space is the space that’s empty. White space can be also related to positive and negative space. White space is usually used to create a clean look. When there is a lot of white space, it makes the elements in the layout more eyes catching while very few of white space causes confusing and makes the viewers dizzy. There are many category of white space like the space between the font type, space between the texts and images and even the length and width of margins in a page.

          

·        Impact

Graphic impact is the consequences on the audience after they observe your design. Impact can be established in many ways. It is what a designer wants to deliver to their audience. Impact is one of the important factors during a design process. We need to know the “Look-&-Feel” of the audience. If we give a visitor a negative “first impression”, it means that they have lost interest and little chance for you to reverse their impression on your products. Beside that we should learn to use the “Usablity” ramifications in a page layout. How the eye move across a visual composition have determine the viewers behaviors in reaction to your page layout.

                                 

·        Evaluation of a Layout & Design

Ø Consistency

The message being conveyed should be consistent. The      layout design need to compatible with the requirement of clients include their company image and brand personality. Lastly, it should be appropriate to our target community.

Ø Contributory

The artwork should be contributive in varieties with a framework of design qualities and creativity, intense mental impact and mood and the motivation and memorability to view your layout.

Ø Performance

The layout design should assist the users’ attitude, the content is in order, assist the uses, usability and execution of the media/application, and promote the site’s purpose and intention.

Reference

Image Printing Packaging Limited,2011. Page Layout Point in Book Printing Jobs. [online] Available at

< http://www.bookprinting-china.com/SupportCenter/Newsshow_225.html >

[Accessed 22 September 2013]

Interactive Media Lab, College of Journalism and Communications, University of Florida, n.d. Print Design.[online] Available at <http://iml.jou.ufl.edu/projects/s11/rodriguez_k/goodlayouts.html>

[Accessed 21 September 2013]

SuccesfulWeb,2006-2007. Evaluation Criteria-Layout & Design.[online] Available at <http://successfulweb.com/criteria-layout.shtml>

[Accessed 21 September 2013]