Types of Page Layout in Detail

When talking about a page layout, designers often employee distinguished layouts according to
their preferences. Types of layout can be classified as magazine layout, advertising layout, static,
dynamic, adaptive or responsive. In case youre a graphic or web artist, developer or a project
stakeholder or a client, then you ought to have sound understanding of these terms i.e. what
they mean and when each type of layout should be used.

Types of Page Layout

Broadly page layout can be classified as:

Graphic Layout
1. Mondrian Layout
2. Circus Layout
3. Multipanel layout
4. Silhouette Layout
5. Big-Type Layout
6. Alphabet-Inspired Layout

Web Layout
1. Static (Fixed)
2. Liquid
3. Adaptive
4. Responsive
5. Hybrid

Now let us discuss these different types of graphic and web page layouts in details.

1. Commonly used Page Layouts in

Graphic Design
a. Mondrian Layout

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.
b. Circus Layout
Circus Layout doesnt imply standard layout. It refers to the irregular composition of elements.

c. Multipanel Layout
Multipanel layout is divided into various sections or theme in same shape such as rectangle,
square, cube, etc.
d. Silhouette Layout
Silhouette 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.
e. Big-Type Layout
Big-Type layout lay emphasize 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.
f. Alphabet-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.
2. Commonly used Page Layout for Web

a. Static Layout
A static page layout often referred to as fixed layout or fixed width layout uses a predefined
page size and doesnt changes with the browser width. That is to say the page layout might have
a permanent width. Traditionally web pages were built in static mode until the introduction of
media queries and responsive web designs back in the year 2010.

b. Liquid Layout
Liquid layouts are often referred to as fluid or fluid width utilizes relative units rather than static
or fixed units. Generally a liquid layout works on percentages rather than pixels, however relative
unit of measurement can also work, for example, ems.
c. Adaptive Layouts
Adaptive layouts works on CSS media queries to recognize the width of the browser and modify
the layout accordingly. Adaptive Just like a static layout, adaptive layouts uses fixed unit like
pixels. However the distinction is that there are basically multiple fixed widths characterized by
specific media queries.

d. Responsive Layout
Responsive page layouts employees both relative units and media queries, apparently combining
the concepts of liquid and adaptive layout. A responsive layout is generally referred to mobile
friendly layouts, which get expands or contracts in width. A responsive layout will get mold in the
same manner as liquid layout. Also, if the browser goes beyond stipulated width as defined by
media query breakpoint, then page layout will change drastically to suit a wide or narrow width.
e. Hybrid Layout
Hybrid layout is popular web page lay-outing design among all. As the name suggest the
resultant layout is the blend of various types of layout. That is to say the layout combines various
units and concepts to make sure that the design flexibly adapts to browsers viewport only while
retaining a definite level of control over parts of a website that calls for more fixed structures.

Hybrid layouts are regarded as the smartest way to design and develop layout, when the design
requires you to be more precise and definite.

I hope this effort of our institute is helpful for you and you learned a lot or less about types of
layouts related to web and graphic designing. I expect your feedback and doubts if you want to
share with me in comments.