Home > Visual Design > Breaking the grid

Breaking the grid

After the groups combined effort to create a layout alongside grids, I’ve converted one my journalism articles into a very simply grid structure that has been manipulated to break the grid. Because of the nature of the article I wanted to keep the layout quite simplistic and professional, however to make it stand out from other news articles I decided to use blocks of red colour which visually encapsulates the story (the story is about a fire, explosion and a near death incident, and the red signifies danger, fire, panic and the like).

The article itself

To keep the article looking modern yet professional I decided to stick with a 6 column grids. Also I made the choice that I wanted the main body of text to stay in a column structure because that is what is typically expected from a news article such as this. However, to manipulate this I decided to make the text not perfectly aligned with the columns and I also put the main text that I think will grab attention in the article in a red block corresponding to the style of the title. This quotation also didn’t follow the traditional grid structure of aligning with the columns, this fits in with the design approach I was trying to achieve and also adds an eye catching detail to the article. I did this effect continually with each text box to add a sense of cohessivness to the article but to also slightly break the grid.

The title also breaks to grid structure. Originally it did fit in with the grid structure but due to the text being the main headline of the whole article I really wanted to extrend the text box and make the font inside it larger to catch attention to the part of the article that is really designed to catch your attention. The reason while this breaking the grid works in my eyes is because it is central to the whole page and almost acts as a bridge between the two bodies of text. Not only does it allow the two boxes to be seperate and not crammed together, it also allows for that gab to be filled with a block of colour that isn’t too overpowering and distracting.

Finally, I think it was important to include a photograph or an image within this text. Too follow the red theme I decided to go down the path of the cylinder talked about in the article. This image make give the reader some kind of pre-emptive insight into the content of the article but also ties in the red colour palette. With this image I decided to have it also breaking the grid. I did this because then the start of the image aligns with the centre of the body of text on the right leading the eye to follow the page down.

Overall crticial evaluation

I am quite happy with the overall result. Although very simplistic I think it would work well in a news based blog or magazine as a cohesive and professional layout. In terms of the breaking the grid, I think what I did works successfully with the article, However, I don’t necessarily think I really challenged the concept of grids in a radical way. I think it would be best to further my understanding of grids to be able to develop the thought process to do so.  However, I don’t find this piece to be a disaster, but actually quite effective in fulfilling my own personal brief of a simplistic yet professional layout.

Categories: Visual Design
  1. No comments yet.
  1. No trackbacks yet.

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: