ADMEC Multimedia Institute is growing institute that is providing industry oriented training to the world at large. Being a multimedia institute we offers training for creating or designing content for information technology mainly.

1. Types of Layouts in Designing
ADMEC MULTIMEDIA INSTITUTE
Leader in Animation & Digital Media Education
ISO 9001 : 2008 CERTIFIED
www.admecindia.co.in | www.graphic-design-institute.com
R
A Presentation by: Ravi Bhadauria

2. Preface & Acknowledgment
Dear reader,
ADMEC Multimedia Institute is growing institute that is providing industry oriented
training to the world at large. Being a multimedia institute we offers training for
creating or designing content for information technology mainly.
This presentation is one of the best presentations from our study material for our
weekly workshops which ADMEC conducts every week at the center.
This presentation contains a good information for types of layout related to any
medium and source.
We express thanks to many books and websites, specially google.com for making
it one of the best presentation of all the time.
Thanks
Ravi Bhadauria, Instructor (Web and Visual Designing)
Director ADMEC Multimedia Institute
http://www.admecindia.co.in

3. We see so many designs everyday!!!

4. We see so many designs everyday!!!

5. We see so many designs everyday!!!

6. We see so many designs everyday!!!

7. We see so many designs everyday!!!

8. We see so many designs everyday!!!

9. Some points come in our mind...
● Are all the designs built with same thought process?
● The final look that we saw completely differs from one
design to another, is it due to the different layout?
● Does different type of design mean a different layout?

10. No, no, noooooooooooo
No, not at all

11. Want to learn Graphic Designing?
ADMEC MULTIMEDIA INSTITUTE
Leader in Animation & Digital Media Education
ISO 9001 : 2008 CERTIFIED
- Visit Our Websites -
www.admecindia.co.in
www.graphic-design-institute.com
Phones: +91-9811-8181-22, +91-9911-7823-50
- Contact Us -

12. What is a Layout ?
LAYOUT is an aesthetic
arrangements of all elements in a
given space.

13. What is a Layout ?
The way in which the parts of
something are arranged or laid
out.

14. What is a Layout ?
The way in which text or
pictures are set out on a page.

15. What is a Layout ?
The process of setting out
material on a page.

16. What is a Layout ?
Page layout is the part of graphic
design that deals in the arrangement of
visual elements on a page. It generally
involves organizational principles of
composition to achieve specific
communication objectives.

17. What is a Layout ?
A master plan or a blue print of a
printed/ published work that lays out the
arrangement of its different graphic
elements.

18. Why Layouts are important?
● When talking about a page layout, designers often
distinguish layouts according to their preferences.
● In case you’re a graphic or web artist, developer or a
project stakeholder or a client, then you ought to have
sound understanding of the types of layout i.e. what
they mean and when each type of layout should be
used.

19. Why Layouts are important?
Layouts help in
● establishing the overall appearance.
● managing the relative importance of the elements.
● mantaining the relationships between the graphic
elements to achieve smooth flow of information.
● controlling eye movement of maximum effectiveness
or impact.

20. Types of Layout
Graphic Layout
● Mondrian Layout
● Circus or Montage Layout
● Multipanel layout
● Silhoutte Layout
● Big-Type Layout
● Alphabet-Inspired Layout
● Copy Heavy Layout
● Frame Layout
● Rebus Layout
● Picture Window Layout
Web Layout
● Static (Fixed)
● Liquid
● Adaptive
● Responsive
● Hybrid

21. 1. Mondrian Layout
This is a layout style named after a Dutch Painter and
characterized by emphasis dividing the space into obvious
sections.
Mondrian layout refers to the forms: square, landscape or
portrait, where every field is parallel to the presentation field
and loads the image in order to form a composition that is
conceptual.
Some examples are: nasa.gov and admecindia.co.in

22. Mondrian Layout Example

23. Mondrian Layout Example

24. Mondrian Layout Example

25. Mondrian Layout Example

26. 2. Multi Panel Layout
Multipanel layout is divided into various sections or theme in
same shape such as rectangle, square, cube, etc.

27. Multi Panel Layout Example

28. Multi Panel Layout Example

29. Multi Panel Layout Example

30. Multi Panel Layout Example

31. 3. Big Type Layout
Big-Type layout emphasizes on the font styles and big font
sizes so as to grab the attention of the audience. Big-type
layouts are usually used for creating headline.

32. Big Type Layout Example

33. Big Type Layout Example

34. Big Type Layout Example

35. 4. Alphbet Inspired Layout
Alphabet- Inspired Layout focuses on the arrangement of
letters or numbers in an appropriate sequence or forms a
word or enhanced to give an impression of story or an idea
for the advertisement.

36. Alphbet Inspired Layout Example

37. Alphbet Inspired Layout Example

38. 5. Silhoutte Layout
Silhoutte layout refers to the layouts in the form of illustration
or photographic technique, highlighted only through shadow.
Presentations can be shaped text-rap or spot color
illustration or refracted smooth image pickup along- with
photographic techniques.

39. Silhoutte Layout Example

40. Silhoutte Layout Example

41. Silhoutte Layout Example

42. 6. Circus Layout
Circus Layout doesn’t imply standard layout. It refers to the
irregular composition of elements.

43. Circus Layout Example

44. Circus Layout Example

45. Circus Layout Example

46. 7. Copy Heavy Layout
The layout concentrated to the copy writing (dominated by
text).
Some examples are:
● Newspapers
● Magazines
● Brochures
● Online Journals
● Brochures etc...

47. Copy Heavy Layout Example

48. Copy Heavy Layout Example

49. 8. Frame Layout
Layout with story or images with story in the frame.

50. Frame Layout Example

51. Frame Layout Example

52. Frame Layout Example

53. 9. Rebus Layout
Layout shown text and image. The layout forming a story.

54. Rebus Layout Example

55. Rebus Layout Example

56. 10. Picture Window Layout
A vertical layout style characterized by a large picture at the
top with a headline and body copy below.

57. Picture Window Layout Example

58. Picture Window Layout Example

59. Want to Learn Web Designing?
ADMEC MULTIMEDIA INSTITUTE
Leader in Animation & Digital Media Education
ISO 9001 : 2008 CERTIFIED
- Visit Our Websites -
www.admecindia.co.in
www.graphic-design-institute.com
Phones: +91-9811-8181-22, +91-9911-7823-50
- Contact Us -

60. Elements of Layout Example
● Headline
● Sub-headline
● Images/ Visuals
● Body Copy/ Text
● Logo
● Slogan/ Punch Line

61. Stages in Layout Production
● These are forms of visual presentation used by a
designer or client at different stages of an idea’s
development.
● A developing design is a work in progress that
evolves in accordance with the designer’s creativity
and the client’s approval.
● Executing a design in a form appropriate to its
developmental stage keeps its progress moving
quickly.

62. Stages in Layout Production
● Thumbnail Sketches
or Idea Layout
● Rough Layout
● A Comprehensive –
is a layout that is
perfect in detail

63. Stages in Layout Production
Thumbnail Sketches
AA thumbnail is a visual record of the designer’s thought processes. They are fast,
freewheeling, and quick, passing thoughts.
BContains all the visual elements - headline, text, illustration or graphic, company
identification.
CPurpose
DThe purpose is to enable the designer to work out the overall design structure of the
visual quickly without getting bogged down in the details.
 Imperfect, preliminary draft.
 Quick visual idea
 Pencil sketch
 Typically 1/4 the size of the end product
 In proportion to the end product
 At least four, but do as many as necessary to ensure the exhaustion of all ideas

64. Stages in Layout Production
Rough Layout
AAn actual size sketch, presents a more accurate appearance of the proposed design.
BPurpose
CUsed for obtaining client input or redirection before the design is finalized. Enables the
designer to refine or alter the design details from the thumbnail stage, where size, speed,
and stage of development do not warrant such careful scrutiny.
 Refines and develops the best thumbnails (or combines the best thumbnails)
 Made in actual shape (in proportion)
 General is one color and in pencil, but may also be drawn in markers - “roughed out”
 Display type is drawn neatly
 Illustrations are represented at size, shape, and mood
 Process is repeated until a satisfactory rough is obtained

65. Stages in Layout Production
AComprehensive Layout
BRepresents the closest visual form to the actual printed piece. It is an
opportunity for the client to check final color choices, design, and copy
corrections from the previous stage before authorizing the design’s
production.
 Final layout before heading to the computer
 Drawn actual size, shape, and color but manual
 Everything is as close as possible to the desired appearance of the
final project
 Ink color, Typefaces, Type sizes, Paper (stock) type (color, weight,
size, finish), Folding, Die cutting and trimming, Embossing can be
specify

66. Want to Learn Graphic Designing?
ADMEC MULTIMEDIA INSTITUTE
Leader in Animation & Digital Media Education
ISO 9001 : 2008 CERTIFIED
- Visit Our Websites -
www.admecindia.co.in
www.graphic-design-institute.com
Phones: +91-9811-8181-22, +91-9911-7823-50
- Contact Us -

67. Example
Designing of the Renault
Magazine Cover

68. Designing of the Renault Magazine Cover
AIt is an assignment from Renault
Motors to design the 1981 Renault
catalogs for American Motors.
BIt will show you an exact colse-
up of the entire process that a
designer follow before the
computer design in planning the
layout idea.

69. Designing of the Renault Magazine Cover
● Thumbnail Sketches or Idea Layout

70. Designing of the Renault Magazine Cover
● Took best 3 from all thumbs and finalized

71. Designing of the Renault Magazine Cover
● Further developments
of the idea.
● The finished cover
for the Renault 18i.
You can hire a
lettering artist too, to
develop the cover
lettering based on my
designs.

72. Designing of the Renault Magazine Cover
● The cover for the
Renault Le Car
catalog.

73. Stages in Layout Production
● One of first rough
layouts for the
opening spread
for the 18i
catalog.

74. Stages in Layout Production
● Rough Layout in Color of a cover

75. Stages in Layout Production
● Comprehensive Layout

76. Stages in Layout Production
● Final Layout (with original pics)

77. Stages in Layout Production
● Comparision of Rough & Comprehensive Layout

78. Stages in Layout Production
2
3
4
1

79. Want to read more about it!!!
Please visit the following URLs
http://www.graphic-design-institute.com/blogs/types-of-g
raphic-web-page-layout
http://www.admecindia.co.in/blog-tags/graphic-design

80. Few Popular Questions on Layouts
● What is a Layout?
● Why Layout is so important?
● How many types of Layouts are there?
● What are the elements of a Layout?
● What are the stages to create a Layout?
● What are the differences between Mondrian and Multi-
panel Layout?
● What are the differences between Big Type, Alphabet
Inspired, and copy heavy Layouts?

81. Contact Us:
ADMEC MULTIMEDIA INSTITUTE
C-7/114, IInd Floor, Sector- 7, Rohini, Delhi- 85
Landmark: Near Rohini East Metro Station
Helpline 1: +91 9811-8181-22
Helpline 2: +91 9911-7823-50
Contact
ADMEC MULTIMEDIA INSTITUTE
For More information you can visit :
http://www.admecindia.co.in
Want to Learn Graphic Designing?