Types of layouts by admec multimedia institute

Types of Layouts in Designing A Presentation by: Ravi Bhadauria

R

ADMEC MULTIMEDIA INSTITUTE Leader in Animation & Digital Media Education ISO 9001 : 2008 CERTIFIED www.admecindia.co.in | www.graphic-design-institute.com

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

We see so many designs everyday!!!

We see so many designs everyday!!!

We see so many designs everyday!!!

We see so many designs everyday!!!

We see so many designs everyday!!!

We see so many designs everyday!!!

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?

No, no, noooooooooooo

No, not at all

Want to learn Graphic Designing?

- Contact Us -

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

What is a Layout ?

LAYOUT is an aesthetic arrangements of all elements in a given space.

What is a Layout ?

The way in which the parts of something are arranged or laid out.

What is a Layout ?

The way in which text or pictures are set out on a page.

What is a Layout ?

The process of setting out material on a page.

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.

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.

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.

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.

Types of Layout Graphic Layout

Web Layout

●

Mondrian Layout

●

Static (Fixed)

●

Circus or Montage Layout

●

Liquid

●

Multipanel layout

●

Adaptive

●

Silhoutte Layout

●

Responsive

●

Big-Type Layout

●

Hybrid

●

Alphabet-Inspired Layout

●

Copy Heavy Layout

●

Frame Layout

●

Rebus Layout

●

Picture Window Layout

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

Mondrian Layout Example

Mondrian Layout Example

Mondrian Layout Example

Mondrian Layout Example

2. Multi Panel Layout

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

Multi Panel Layout Example

Multi Panel Layout Example

Multi Panel Layout Example

Multi Panel Layout Example

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.

Big Type Layout Example

Big Type Layout Example

Big Type Layout Example

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.

Alphbet Inspired Layout Example

Alphbet Inspired Layout Example

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.

Silhoutte Layout Example

Silhoutte Layout Example

Silhoutte Layout Example

6. Circus Layout

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

Circus Layout Example

Circus Layout Example

Circus Layout Example

7. Copy Heavy Layout

The layout concentrated to the copy writing (dominated by text).

Some examples are: ●

Newspapers

●

Magazines

●

Brochures

●

Online Journals

●

Brochures etc...

Copy Heavy Layout Example

Copy Heavy Layout Example

8. Frame Layout

Layout with story or images with story in the frame.

Frame Layout Example

Frame Layout Example

Frame Layout Example

9. Rebus Layout

Layout shown text and image. The layout forming a story.

Rebus Layout Example

Rebus Layout Example

10. Picture Window Layout

A vertical layout style characterized by a large picture at the top with a headline and body copy below.

Picture Window Layout Example

Picture Window Layout Example

Want to Learn Web Designing?

- Contact Us -

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

Elements of Layout Example ●

Headline

●

Sub-headline

●

Images/ Visuals

●

Body Copy/ Text

●

Logo

●

Slogan/ Punch Line

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. ●

Stages in Layout Production

●

●

●

Thumbnail Sketches or Idea Layout Rough Layout A Comprehensive – is a layout that is perfect in detail

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

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

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 

Want to Learn Graphic Designing?

- Contact Us -

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

Example

Designing of the Renault Magazine Cover

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 colseup of the entire process that a designer follow before the computer design in planning the layout idea.

Designing of the Renault Magazine Cover â—?

Thumbnail Sketches or Idea Layout

Designing of the Renault Magazine Cover â—?

Took best 3 from all thumbs and finalized

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.

Designing of the Renault Magazine Cover â—?

The cover for the Renault Le Car catalog.

Stages in Layout Production â—?

One of first rough layouts for the opening spread for the 18i catalog.

Stages in Layout Production â—?

Rough Layout in Color of a cover

Stages in Layout Production â—?

Comprehensive Layout

Stages in Layout Production â—?

Final Layout (with original pics)

Stages in Layout Production â—?

Comparision of Rough & Comprehensive Layout

Stages in Layout Production 1

2

3

4

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

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 Multipanel Layout?

What are the differences between Big Type, Alphabet Inspired, and copy heavy Layouts?

Want to Learn Graphic Designing?

Contact

ADMEC MULTIMEDIA INSTITUTE For More information you can visit : http://www.admecindia.co.in

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