Designing With Grid-Based Approach
This presentation is the property of its rightful owner.
Sponsored Links
1 / 5

Designing With Grid-Based Approach PowerPoint PPT Presentation


The grid layout structures offer more flexibility and enhance the visual experience of visitors. Developers can easily update the layout in a well consistent way. However it’s not an easy to find the theory behind grid systems.

Download Presentation

Designing With Grid-Based Approach

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Designing with grid based approach

Designing With Grid-Based Approach

Designers often face the problem of finding the solution to

visual and structural problems. The best approach to solve this

problem is the grid, which can create the solid visual and

structural balance of websites.

The grid layout structures offer more flexibility and enhance

the visual experience of visitors. Developers can easily update

the layout in a well consistent way. However it’s not an easy to

find the theory behind grid systems.

You need to understand the key facts, techniques and learn

basics to reach at desired goal. Some of benefits of grid based

website design systems are:

Clarity/Order— it brings the order to a layout making it easier

for visitors to find and navigate through information.

Efficiency— It helps designers to quickly add elements to a

layout.

Economy—it makes the task easier for other designers to

collaborate on the design and decide where to place elements.

Consistency/Harmony— Grids creates the consistency in the

layout of pages across a single site or even several sites.

Examples of Grid-based design


Designing with grid based approach

Look at few examples of grid-based designs to make clear what

the article is about.


Designing with grid based approach

Grids are originally found in print design but are very useful to

web design. Make sure you site doesn’t look like a newspaper’s

layout, but it can surely provide the uniform structure to start

the design with.


Designing with grid based approach

Useful Tools for Grid-based Designs

Adaptive Grid System based on the Golden Section

The Columns are defined using em to keep line length

consistent and varying text size using javascript to make the

web page fill the browser window.

Layout Grid Bookmarklet

post about using a background image of a grid for layout

Grid Overlay Bookmarklet

Just a quick note to share my version of Andy Budd’s Layout

Grid Bookmarklet.

WPDFD Browser Grid

This grid represents the maximum safe sizes for the three main

monitor sizes in use today and assumes that the browser

window has been maximised. 640 x 480, 800 x 600, 1024 x 768

Free Online Graph Paper / Grid Paper PDFs

Downloadable and very printable


Designing with grid based approach

Gridding the 960

Background image grid + pixel ruler + column divisions for

960px-width layout, all in one mean little package.

Web Page Layout Grid

Add this image as a background to the body of your page to

help you lay it out.

Position is Everything – Vertical Grids

A method enabling the vertical positioning of elements across

grids/columns

Hope you found the article helpful, to create beautiful and

unique web design you need the structure and balance in the

layout.


  • Login