Types of Layouts by ADMEC Multimedia Institute
39 likes99,223 views
The document is a presentation by ADMEC Multimedia Institute focused on various types of layouts in graphic and web design. It explains the significance of layouts in effectively arranging visual elements to enhance communication and provides examples of different layout styles, such as Mondrian, multi-panel, and big-type layouts. Additionally, it outlines stages in layout production, including thumbnail sketches, rough layouts, and comprehensive layouts.
Types of Layouts by ADMEC Multimedia Institute
- 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
- 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.
- 42. 6. Circus Layout Circus Layout doesn’t imply standard layout. It refers to the irregular composition of elements.
- 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.
- 53. 9. Rebus Layout Layout shown text and image. The layout forming a story.
- 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?