Research into Grid Layouts

Today, we went over the basics of Adobe InDesign. So how to set up a document, the basic tools of having to insert images and text and how to save the document out once finished. As apart of the task we where asked to look at the 4 main grid types. I want to find out what they are and when you might use each.

  1. Manuscript grids

Manuscript grids are also known as a single column grids. The manuscript grid is the simplest structure. This style is used for large amounts of copy. For instance,

manuscript_grid___revised___by_ldykalypso-d118c4o.jpg

 

This style is usually seen in books, long essays and blog posts. The space is available for large amounts of text and even images can be used to fill the block. By having just one Colum the margins can help to make the page interesting. Narrower margins for the viewer to focus on that piece of text but this could be an issue if two are near each other. The wider the margins are help the viewer to feel a sense of ease and stability because the text boxes are narrower. As manuscript grids are so simple, typography plays an important role in creating visual interest.

  1. Column grids

Column grids are where the page is split up into sections (columns). This can be set up to the desired amounts by the individual designer of the page. Column grids are useful when displaying disjointed information that needs to be presented around the page. Most online grids are this style. Within this design you may see things such as pull quotes, text and images. These may take up different columns in the grid. One column might be reserved for just body copy, another for images. Everything on the page can be supported by the different columns on the page. The design process is fairly flexible as things may cross over and not sit exactly within the column boundaries. The columns and margins are there for guides.

This is an example of a column grid magazine DPS

column grid.jpg

 

3. Modular grids

Modular grids are a mixture of columns and rows, with the addition of horizontal breaks create a negative space between each box area formed. The small boxes are call modules. Modular grids are useful when creating more complex designs they given designers much more control to where things should be placed. Each modular can hold key piece of information that is different from the other content on the page.  This style can be see more for online purposes such as; Image galleries and shopping carts.

modular grid.jpg

 

4. Hierarchical grids

Hierarchical grids are mainly seen on the internet. Column widths tend to vary as do the location of flow lines. Development often begins by spontaneously placing design elements. This is an example of a basic set up of this style.

hierarchy

 

Bibliography

Citations, Quotes & Annotations

Adams, S. (2015) An overview of different types of Grids. Available at: https://www.lynda.com/Design-Foundations-tutorials/Types-grids/373790/408713-4.html (Accessed: 20 April 2016).

(Adams, 2015)

Ganesan, S. (2010) Hierarchical GridView control using AJAX. Available at: http://www.codeproject.com/Articles/60286/Hierarchical-GridView-Control-Using-AJAX (Accessed: 20 April 2016).

(Ganesan, 2010)

Hierarchical data – grid – WPF (no date) Available at: http://www.infragistics.com/samples/wpf/grid/hierarchical-data (Accessed: 20 April 2016).

(Hierarchical data – grid – WPF, no date)

Hut, I. (no date) Design Available at: https://www.pinterest.com/pin/127930445637412096/ (Accessed: 20 April 2016).

(Hut, no date)

Incorporated, A.S. (2015) Use grids in adobe InDesign. Available at: https://helpx.adobe.com/indesign/using/grids.html (Accessed: 20 April 2016).

(Incorporated, 2015)

Mcgee, J. (2016) ‘Creating a grid in InDesign CS5’, Small Business Chron, .

(Mcgee, 2016)

Rigo, L. (2011) ‘4 types of Grids – web design showcase – MonsterPost’, Inspiration, 10 June. Available at: http://blog.templatemonster.com/2011/06/10/grid-types-web-design-showcase/ (Accessed: 20 April 2016).

(Rigo, 2011)

(No Date) Available at: https://gra2176.files.wordpress.com/2011/03/1271361775_mm_126_152.jpg (Accessed: 20 April 2016).

([CSL STYLE ERROR: reference with no printed form.])

(No Date) Available at: https://gra2176.files.wordpress.com/2011/03/1271361775_mm_126_152.jpg (Accessed: 20 April 2016).

([CSL STYLE ERROR: reference with no printed form.])

(No Date) Available at: http://www.webdesignstuff.co.uk/kp111/files/2012/01/hierarchy.jpg (Accessed: 20 April 2016).

([CSL STYLE ERROR: reference with no printed form.])

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s