Layout Design (Rebecca Siaw - Group 5)

Introduction

There are many key factors to consider when putting together a layout. Photos, captions, body text, headlines and graphic add-ons, amongst others, are just a few things that need to be properly aligned and styled (Signature A Yearbook Production Modus Operandi, http://signature.definitelypotent.com/ld_intro.html) ^[1]. The correct use of terminology, composition, column design, proper use of white space and other elements are all part of layout design (Signature A Yearbook Production Modus Operandi, http://signature.definitelypotent.com/ld_intro.html) ^[2].

 

Layout and Design

Layout design is the development of organizing the contents and information in an orderly manner.  A layout designer will usually use it in many fields to show the information such as for designing web page, journal, newspaper or any advertisement. Some of the layout could be designed to be used for blueprint or structure designing.

 

Page Layout

Page layout is a technique of placing, organizing and rescheduling the contents on the page. For example nowadays designers use the page layout in the most suitable way possible when designing any newspaper or magazines and it could be the best example for that type of layout. A designer should design the page layout depending on the few rules to make the contents looks effective to the user. Each factor on the page will affect the other factors on the page. It is necessary to have a focal point on the balance and shape for the empty space and use grids where and when necessary.

Balancing the content

Balancing could be defined in different words. Placing the factors on the page must include the information about the article features and texture. In balancing, a designer should focus on the proportion and the size in between factors which have to be measured in establishing balance such as arranging objects.

 

Using Grid

Most of the designers use the grids when designing a layout because it is too useful to arrange the factors on a page. Grids are an unseen structure used as a guide. It also could help to set up planned unity to more pages in a Web site. 

 

Figure 1

The use of layout

The term layout is about arranging the flow of how the design will be created in the next stage. The layout principles and theories vary but it falls under two categories: grid-based and non-grid based designs. Each design is unique in its own way and they both have their advantages and disadvantages respectively. White space and proximity are something which needs to be considered when creating a layout, all of which will be discussed below.

Figure 2

Mark Boulton said “the thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines” (Designing with Grid-Based Approach http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/) ^[3]. Using a grid is one of the necessary design values in the modern century. Most of the designers are now working with grids. A grid is a method that exists in produce designs but can be easily functional to web designs/applications as well. You may ask why use a grid when designing; well the answer to that question is because a “grid design is a fundamental skill of any designer” (Designing with Grid-Based Approach http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/) ^[4]. It is vital for the designer to understand the proportional relationship, white space and composition to build a grid for any platform, regardless of whether is web, print or real 3D environments. A grid plays an important role in the layout and design process. a lot of of the pages we perceive daily have grid lines, as guidelines. We may not be able to see it but the grids are there on the blueprints, holding up the created design, establishing structures and guiding the factors on the page.

White Space

White space is also known as empty space or negative space. The smaller white space, also known as “micro whitespace”, is an empty space between smaller elements in a composition; for example in between list items, a caption and image or words and letters. The larger empty space is known as “macro whitespace”. White space is used for many reasons. Designers are known to use white space in brand positioning to create a sophisticated feeling and elegance for upscale brands. It has been said that “coupled with a sensitive use of typography and photography, generous white space is seen all over the luxury markets” (White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace) ^[5]. Cosmetics, for example, use a wide range of white space for marketing. This is done to tell the reader that they are of high quality, sophisticated and that the brand is generally expensive.  

           ^{Figure 3: Examples of direct mail vs. luxury brand design}

The content and design are the same in both pictures, yet the “two designs stand at the opposite ends of the brand spectrum” (White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace) ^[6]. The product can be seen as cheap if the white space is less whereas it is seen as luxurious if more white space is used. There are a lot of factors which goes into brand positioning apart from the use of white space. A white space is often used “to create a balanced, harmonious layout” (White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace) ^[7]. A white space is considered to be an “active white space” when the white space is used to attract the reader and direct them from one element to another. 

Figure 4: Text before white space is added

When a white space is added to create harmony and visual comfort in the design, it is called a “passive white space”. Margins will be added, the font type and size will be changed so that the users can easily read what the message that is directed for them.

   Figure 5: Text with passive white space is added                                          

Conclusion

Layout and design is the process of arranging contents and information in a correct manner.  Layout is used in many fields to present information such as web designing and publication, to name a few. This is done to make it look more attractive to the reader or the user and in return this will be very easy for them to read it. There are many various examples of layouts which attract readers and users respectively based on the purpose of the advertisement. The arrangement and setting of the layout and design therefore is very important. Also balancing could be another example that should be consider when designing layout such as in newspaper or magazines so the reader will not face any difficulties to read the articles.

References

• ^[1] Signature A Yearbook Production Modus Operandi http://signature.definitelypotent.com/ld_intro.html [date accessed: 21st September 2013]
• ^[2] Signature A Yearbook Production Modus Operandi http://signature.definitelypotent.com/ld_intro.html [date accessed: 21st September 2013]
• Figure 1: http://inspectelement.com/wp-content/uploads/2009/09/layout.gif [date accessed 23rd September 2013]
• Figure 2: http://www.noupe.com/design/graphic-design-theory-50-resources-and-articles.html [date accessed 23rd September 2013]
• ^[3] Designing with Grid-Based Approach http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ [date accessed 23^rd September 2013]
• ^[4] Designing with Grid-Based Approach http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ [date accessed 23^rd September 2013]
• ^[5] White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace [date accessed 22nd September 2013]
• Figure 3: http://alistapart.com/article/whitespace [date accessed 23rd September 2013]
• ^[6] White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace [date accessed 22nd September 2013]
• ^[7] White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace [date accessed 22nd September 2013]
• Figure 4 & 5: Active and Passive white space, White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace [date accessed 22nd September 2013]
• 40 Creative Design Layouts: Getting Out Of The Box http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/ [date accessed: 21^st September 2013]