1.0
Introduction to Layout Design
Layout
design is the blueprint or pattern of printing elements in a particular way. According
to an article posted by Depaul University (n.d.), “A layout is a design for the overall
appearance of a printed page with particular emphasis on the effective positioning and arrangement
of page elements.” (Goodheart-Willcox Publisher, n.d.) A good layout design
allows user to search what they want to read in short time. (Arfa Technologies,
n.d.) A design of layout can be observed on most magazines, newspapers, books,
websites, and advertisements. People
usually do not mention about the importance of layout design because it always
exist in the newspaper, books, magazine and other reading materials that makes
people think that it is “naturally” there. We might never have seen newspaper without any
layout design. A page without layout design may cause inconveniences to reader
such as difficulty in reading, less attractive, confusing, and so on. For
example, without headlines reader might not get interested to read the
newspaper. Layout is very useful in attracting reader; it can deliver message,
show sequences, and also act as point of interaction. (Tidwell, n.d.)
Figure1.1 shows example of page with bad layout design.
Figure 1.1
First of all, it has very bad layout design. It looks messy
and less attractive. There is a very wide space in the middle of the page, the
menu of contents are at the edge of the page; there is obviously has no margin.
Other than these, the background color is not nicely match with the text color
(it has low contrast with the text) that makes it looks ugly. Reader can easily
determine that page layout of this page is not designed by a professional.
2.0
Grid
Grid is
very helpful in creating and designing layout of a page. It gives structured
framework to layout. (Serif, n.d.) The basic grid structures are categorized
into few types: two-column grids, three-column grids, four- or more column
grids. The basic grid structures can be combined with asymmetrical grids
structures to enhance the page layout design. Images below show some example of
the use of basic grid structures:
Figure 2.2 Basic
two-column grid structure. (Horizontal)
Designer can use as many grids they want to design a layout
if it does not make reading difficult. Other than dividing the grids into equal
parts, asymmetrical grid structures can be used to increase flexibility and
also to make the layout design more creative.
In the
figure below, a column is inserted between the ordinary grids. (See red area)
The sizes of the grids are not equal but it does not affect the ease of reading.
It still looks organized with more outstanding layout. The appearance of
asymmetrical grid structures is nicer by comparing to the basic column grid
structures that have all equal grids structures.
2.1 Margin
Margin
should be considered while designing a layout. The margin is the white space at
the side, top, and bottom of a page. Margin has useful functions. According to
Nikola (2013), “Margin provides a buffer zone keeping the text and graphics
from ‘falling off the page’ ”.
Figure below shows page with very less margin value:
Figure below shows page with very less margin value:
Figure 2.6: It has bad margin, which might makes
the reader feels “ it’s too packed ”.
On the other way, margin also reserves space for readers to
rest their thumb (applicable to hardcopy reading material) without blocking the
text with their fingers. Wider margin can create visual harmony when readers
are reading the page.
Figure below shows example of wide margin.
3.0
Layout Elements
According to Goodheart-Willcox
Publisher (n.d.), “Layout is
the arrangement of printing elements on a layout sheet”. Basically, there are few types of layout
elements: display type, white space, body type, and illustrations. These
elements should be arranged in a way that enhances ease of reading.
3.1 Body Type
“Body
type
is the printed type that makes up the text in a layout”, defined by Nc State
University (n.d.). Body type chosen must be able to incarnate the purpose or
meaning of the text. (Nc State University, n.d.) Designer can choose typeface
according to characteristic of targeted audience and it must be involved in the
theme. “The text will contain a message that expands upon the other elements. ”
(Nc State University, n.d.)
3.2 Display Type
Display type is used to deliver the
main information especially to attract readers. Size of display type is usually
bigger than the actual text. For example, headline of magazines and newspapers
are generally display type. It is very important to attract the readers so that
they will continue reading with the contents. (Nc State University, n.d.)
Figure below shows example of display type:
3.3 Illustration
Illustration
is visual matter that is used to elaborate something. (The Free Dictionary,
n.d.) Adornment, photography, and artwork are counted as illustration. The use
of illustration is to create a better understanding to express idea other than
using words.
Figure below shows example of illustration. Before
readers read the text, they can know that it is related to bowling by simply
looking at the girl.
4.0 Conclusion
Without studying the topic, the author might probably think
that it is about adjusting the arrangement of text, graphic, margin so that it
looks nice in the way that the author wants. After doing some research on it,
there is actually method and strategies on how to design a good layout. The
author found that the tidiness of newspaper is actually contributed by the grid
structures. The grid structures divide the page into few parts and the text is
filled in nicely. It makes the newspaper looks clean and easy to read. Also,
the author was inspired by the amazing margin design. The margin is designed in
a way that reader’s thumb will not block the text while the reader is reading
and holding the book in his/her hands.
Reference
List
Arfa Technologies. (n.d.) Why layout is important in Design. [Online] Retrieved on 16
February 2014 from: http://arfatechnologies.com/graphic-design-blogs/why-layout-is-important-in-design/
Arntson, A.E. (2011) Graphic Desi6n Basics: Layout Dynamics. s.l.: Cengage
Learning.
Bogdan. (n.d.) 20
Examples of Bad Web Design. Retrieved on 18 February 2014 from: http://www.topdesignmag.com/20-examples-of-bad-web-design/
Depaul University.
(n.d.) Typography, Layout, and
Graphic Design. [Online] Retrieved on 17 February 2014 from: http://condor.depaul.edu/dsimpson/pers/typography.html
Goodheart-Willcox Publisher. (n.d.) Design and Layout. [Online] Retrieved on 17 February 2014 from: http://www.g-w.com/pdf/sampchap/9781566379847_ch05.pdf
Nc State University. (n.d.) Glossary of
Desktop Publishing ( DTP )Terms. [Online] Retrieved on 16
February 2014 from: http://www.ncsu.edu/viste/dtp/glossary.html
Nikola. (2013) Setting up, Types and Description of Page
Margin: The Function of Margins.
[Online] Retrieved on 17 February 2014 from: http://www.magazinedesigning.com/setting-up-types-and-description-of-page-margins/
Novin, G. (n.d.) Chapter 58 ;
History of Layout Design and Modern Newspaper & Magazins. [Online] Retrieved on 17 February 2014 from: http://guity-novin.blogspot.com/2012/04/modern-newspaper-magazine-layouts.html\
Schneider, S. (2013) The Trick to Designing a Great Layout. [Online] Retrieved on 17 February 2014 from: http://www.webdesignerdepot.com/2013/06/the-trick-to-designing-a-great-layout/
Serif. (n.d.) Page Layout Design. [Online] Retrieved
on 17 February 2014 from: http://www.serif.com/appresources/ppx5/tutorials/en-gb/tutorials/design_grid.htm
Tidwell, J. (n.d.) Designing Interfaces: Organizing the page. [Online] Retrieved on 17 February 2014 from: http://oreilly.com/catalog/designinterfaces/chapter/ch04.pdf
The Free Dictionary. (n.d.) Illustration. [Online] Retrieved on 15 February 2014 from: http://www.thefreedictionary.com/illustration
My comments are:
ReplyDelete1. The content is well-organized with numbering, good for reading
2. Suggest to have more elaboration and explanation in the report, although good examples were used in explanation
3. Good in using the citation and referencing format
4. Lack of content in your conclusion, good that you write a little about what you have learned? How can this new knowledge be applied in your assignment 2?
5. Please note that in Assignment 2, you need to have a section to explain how the layout design is done based on your new ideas, and describe it in your presentation.
6. Good to use various resources, and well arranged
Thank you for the comments. Is the mark for this assignment finalised? Can I still improve it according to the comments above ?
ReplyDelete