Understanding Grids

I read the book “Making and Breaking the Grid” by Timothy Samara so that I had a better understanding of grids in general. There are many many uses for grids and layouts and I will be able to implement what I have learn’t in this book into almost every aspect of my work.

There is a massive history of grids that date right back to the Romans and Greeks, and whilst this isn’t completely relevant it allows us to understand where the grids came from and how they became what we know and use today.

Early uses of grids were used in architecture to get the correct proportions, which then moved on to design furnishing and everyday household objects, and then into print. In print, grids were used to give structure to a document both visually and spatially. Every grid is split into different sections, these are margins, flow lines, spatial zones, markers, modules and columns. You can see a diagram of what each section represents here;

1

Using different combinations of these sections is what makes every grid slightly different to the other, for example if you have maybe 3 columns with a smaller line length surrounded by large margins and spatial zones, you would have a easily readable page rather than having just one column with a longer line length with smaller margins and spacial zones which would make it much harder to dread and take in. Something to take into consideration due to it’s importance is not only the typeface you use but some of the attributes like size, line height and letter spacing.

Manuscript, Column, Modular and Hierarchical are the four main types of grid, of course there are variations within these categories but they are different enough to understand they have their own use and purpose.

3 8

The manuscript grid is the simplest of the four as it’s structure is designed to accommodate large amounts of text so can be seen in textbooks most commonly, it is also the same structure that is used for writing essays. It doesn’t even have to just consist of text though, images can be used to implement space into the text to give the eye a rest of reading.

5 9

The column grid is probably the most common because of it’s functionality in wide range of aspects, both images and text can be placed within a column grid, and you find that there is a large history of this style of grid in newspapers and magazines and this has seemingly been transferred to the web with such templates as the 960 grid:

2

This grid allows for up to 12 columns on a page, which allows the designer to have much more control over the layout of the page.

4 10

A modular grid is very much similar to a column grid but different in the sense that it also has horizontal flow lines which divide the page into columns into modules. A group of modules can be put together to create spacial zones, which can be allocated different content in a way of having an overall order.

6 7

The hierarchical grid is the last of of the four, it is probably less commonly used grids too. It works much less systematically based on the fact that the elements have their own constrains so they are arranged in such a way they look right on the page but the layout probably wouldn’t work for any other purpose. By using spacing and equal margins you can make elements that are somewhat unorganised become arranged in a presentable manner, you usually this type of layout within posters.

Advertisement

Marketing Items & Content Ideas

Scan 6 3
First item I will include takes design cues from my letterhead research, in general I want to keep in line with my luxurious branding feel so I will create this to hold everything I put inside it. Inside this envelope, I will have a total of three different item. Number one will be similar to the Natwest item for promoting their mobile banking app, It will be shaped like an iPhone, the screen will feature an internet browser with search of a web designer and then the link to akbdesign at the top. On the second page it will be captioned “What I do” and then list with icons the specific things I actually do. These will be:

SEO

Logo Design

Web Design

Marketing

Video Production

Social Media

3rd page – Quote

“AS A WEB DESIGNER, I KNOW THE FUTURE OF BUSINESS IS IN THE INTERNET. I DREAM BIG, AND MOTIVATED DREAMERS MAKE THINGS HAPPEN. I CAN MAKE THINGS HAPPEN FOR YOUR BUSINESS.”

4th page – Contact me

Twitter handle

blog address

The second item I will create is aiming to close the sale, in effect convince the viewer to give their hard earned cash to me in exchange for my services, for this I will use a double sided A6 sized piece of paper. One one side it will be captioned “Am I right for you?” and then have sales lingo such as, “You need a quality service provided by multi-skilled designer who can capture your business visually and use current trends to present it to your clients in the best possible light. You want him to do all this whilst being affordable, friendly and professional with an edge to his the rest of his competitors”. On the second side I will have client comments and ratings of the service I have  provided them in the past.

The final piece with be credit card style item which has a discount for them off the services provided they use it within as certain amount of time, this will make them think they have got a quality service, with a discount and then potentially be pressured into taking the service before they  would have done otherwise.

Francesca Woodman – Boxes

Francesca Woodman

The write up of Francesca is nothing to do with her work, but rather the layout of her work at the gallery. The style was used to present five images with a diamond-grid formation in square frames.

I was somewhat fascinated by the layout, and got me thinking about how to arrange content online. I did a bit of browsing by simply typing “boxes” and “grid” into Google and trying to make something of my results. While not finding any content about boxes or grids particularly I soon realised that a lot of the web is contained within invisible grids or boxes and I will here document my findings.

An example of a grid with small margins was this one (http://grid.vsco.co/grid/1)

Screen Shot 2014-09-17 at 21.52.45 (2)

Like a gallery it has a set formation and sticks to it, I have drawn on the image blue lines to draw attention to the fact that the alignment isn’t edge to edge like many, or even simply bordered, but instead is staggered which seems to improve the flow of content.

I found websites that don’t have visible grids, seem to be arranged in a grid formation and found examples of this on many websites, I have again drawn on the images to further illustrate the point I am trying to prove.

Screen Shot 2014-09-17 at 22.18.00 (2)

On the Apple (www.apple.com) website you find content on a grey gradient, while there are no visible borders to the girds. As this was such a common theme across many websites I was looking at I decided to dig a bit deeper into the world of grid layouts online. I came across the 12 column grid (http://960.gs) which just so happens to be 960 pixels wide, the idea being that you can have many sized boxes within the grid, as long as it follows the specified sized, like this image represents (http://www.qualitypressthemes.com/wp-content/uploads/12-column.jpg);

12-column

There are many examples of work that use this grid formation as suggested on the website. These consist of big websites such as Sony Music, right down to more unknown companies like Black Estate Vineyard. Having experimented on multiple devices, I have also realised that these websites are almost instantly mobile optimised by simply using such a grid layout, with a fluid formation, allowing the content to arrange itself by understanding the size of the display.

Trip to Ferens Art Gallery

As a group we took a trip around Ferens Art Gallery to study the artwork, and gather information that we could use to help us understand the creativity that took place when firstly creating the art, and secondly arranging the artwork around the gallery.

The questions I asked myself about the images as I walked round the gallery were;

– What is the image content about, and what emotions does it provoke in the user?

– How does the visual layout of the artwork attract attention, and further interest in the artwork?

– How does the general layout of the art gallery and the presentation of work effect the viewer?

– How can the certain images manipulated for the web to its best ability?

– What do I personally like/dislike about the work, layout and general presentation?

I studied multiple images, and here are the notes that I have for each image.

Featured Image;

(http://www.heritage-learning.com/wp-content/uploads/2012/09/st_ferens_slide.jpg)