Wednesday, March 27, 2013

The Chalkboard #2



The grid =  The structure of design

When most people think about grids, they think about engineering and architecture. However, the grid is an essential tool for graphic design as well. The point of a grid is not as a way to fill up space, but to help you organize the space you have. A grid is a component of the user experience, that is why we do need to talk a bit about this, even thought is not the most glamorous side of design, it is one of the most important ones!

The simpler the grid, the more effective it is. Using a grid is not just about making things be square and line up: it’s about proportion as well. That’s where the “theory” comes into grid theory. It is the concept of dividing the elements of a design. A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media. The structure is there to shape the content into proportions that are pleasing to the eye.  Us humans like when things are in their right place, aligned and straight up. Same does our subconscious, it likes clean straight things, easy to find, read and understand. 

The concept of the grid {alignment} is that everything on a page should be visually connected to something else on the page. Nothing should be placed arbitrarily. When elements are aligned they are connected to each other, even if they are separated on the page. The lack of alignment between the subhead and the related pages or side bar elements will make your eye have to travel across the page, and it was probably enough for you to notice. 


There are many considerations you must take into account before you start arranging a design into a grid ->


Who is your audience? What is the voice of your design?  How can you make your content most readable? Once you’ve answered these questions, you can build a foundation and structure your content. What is the most important job of the grid? To be an invisible element that gives structure and consistency to your content.


Even thought all the blog platforms, or website sites already provides us with a visual grid structure, we are responsible for the elements we place in it. Think about all the elements that make your site come to life (Headder, navigation bar, widgets, sponsor images, followers, social media buttons) And ask yourself if your site has a structure? Is it easy on your eye, and are things aligned? Is everything centered, right or left aligned?


If you have a blog, website, or a small shop, let's take a look at your grid:

1. Is the overall structure of your site aligned, either with one column to the side, two or three. Is your header the same width as the sum of your side bars and your content area? Do you have your content grouped together (aka: no adds here and there sprinkle throughout your blog;)

2. Are all your posts/content aligned? If you have multiple titles for your posts are they all the same width? Images, copy and widgets should all have the same width you have chosen for your site. 

3.Are your side bars well organized? Re-sized to fit, and all images width consistent ?

4. Your content: Are the images the same width as your copy. It is very important to have this width decided , that way you can re size and scale all your images to proportion. Are the footers, widgets, linked within are all aligned with the width of your posts?


Some things to consider

• You can have more than one grid. Your front page could be based on a five column grid while inside pages with ads on a six column. There is no one right way.

• Think about the grid not only vertically but horizontally, too.

• Build in white space. We talked about this last week {read here} Adding just a little more space in alleys/gutters and between stories will add add emphasis to the story, and improve readability.composition into single units.

 As you experiment with different arrangements, use the lines that create your columns as alignment guides for the rest of your communication items. 

No need to be an expert on web coding/design world, you can still work with the blog tools to align things up! When it comes to making posts, or collages of your own, think in straight lines, in the best way your eye can jump from one item to another. They can be simple, as long as they create a sense of arrangement and organization. Respect and love the grid;)

No matter what you think about it, you need to understand how to use it. It will make your communication more effective, and more pleasant for your readers.


No comments:

Post a Comment