PDA

View Full Version : Grids in web design



CameronThomas12
01-06-2014, 01:25 AM
Hey everyone, is anyone interested in grids for web development? I am primarily a marketer now in my mid 20s, but from when I was very very young till my early teens I wanted to be an artist, and when I do things-I'm usually a bit strict about it. Just wondering what you artsy types think about grids in web development. Its a little excessive, but I like refining things. I've still got that bit of joy that comes from mastering a craft and doing artsy stuff. I'm sure some of the more professional might know about grids for design, like in this book that I own:

Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung (German and English Edition): Josef Muller-Brockmann: 9783721201451: Amazon.com: Books (http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestaltung/dp/3721201450/)

From what I've seen some web developers do measurements with their websites-like in a bootstrap template.

Wozcreative
01-06-2014, 10:36 AM
Grid systems are the first main things you learn in design school. You learn the ins and outs of the grid so you know when to break them when necessary.
I use and think in grids all the time. My brain is trained to see wether or not something is mis-aligned. Knowing grids makes you understand spacial relationships and negative space. This is key in good design, form, function, hierarchy of information and communication. Pretty basic stuff. You can tell a designer doesn't have any training when you don't see grid, colour or typographic rules set in place.

Harold Mansfield
01-06-2014, 11:14 AM
Hey everyone, is anyone interested in grids for web development? I am primarily a marketer now in my mid 20s, but from when I was very very young till my early teens I wanted to be an artist, and when I do things-I'm usually a bit strict about it. Just wondering what you artsy types think about grids in web development. Its a little excessive, but I like refining things. I've still got that bit of joy that comes from mastering a craft and doing artsy stuff. I'm sure some of the more professional might know about grids for design, like in this book that I own:

Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung (German and English Edition): Josef Muller-Brockmann: 9783721201451: Amazon.com: Books (http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestaltung/dp/3721201450/ref=sr_1_1?ie=UTF8&qid=1388989281&sr=8-1&keywords=raster+systeme)

From what I've seen some web developers do measurements with their websites-like in a bootstrap template.

Be careful taking everything in this book verbatim. It was published in 1996. A few things have changed since then. Although it does have some great recent reviews, I was drawn to a detailed review from 2009 saying that it was outdated.

CameronThomas12
01-06-2014, 12:24 PM
OK Cool.

Do you two have Photoshop/Dreamweaver etc.? I'm thinking you probably both do. How do you set up your design grids?

Wozcreative
01-06-2014, 02:17 PM
OK Cool.

Do you two have Photoshop/Dreamweaver etc.? I'm thinking you probably both do. How do you set up your design grids?

I do with EVERYTHING I use. You'd be going in blind if you had not setup your margins, gutters, columns etc.

vangogh
01-07-2014, 12:13 AM
I think grids are great and work with them all the time. Not every project needs one, but if you plan on being a designer of any kind you really should learn how to work with grids.


Be careful taking everything in this book verbatim.

The book is much older than 1996. I think that's just the latest reprint. It's a classic design book. It's not a book about the web. It was written long before there was such a thing as the web. Brockmann is one of the people who's work led to many others using grids. I actually read the book earlier this year. It's probably not the first book you'd want to read if you want to understand how to work with grids in web design. I'd recommend Ordering Disorder: Grid Principles for Web Design (http://www.amazon.com/Ordering-Disorder-Principles-Design-Voices/dp/0321703537/) by Khoi Vihn. Easy to understand and directly applicable to web design.

billbenson
01-07-2014, 02:31 AM
Never heard of grids before, but then I'm not a web designer. Can someone give me a quick overview or point me to a tutorial? I just want to understand what they are as someone who lives by an online business.

vangogh
01-07-2014, 11:55 PM
A grid is pretty much what you would guess it is. It's the same as any other grid anywhere in the world. In design it's meant to provide a structure for where design elements go. Imagine a bunch of rows and columns on a page and you have a grid.

I'm going to be lazy and point you to some articles I've written about grids instead of searching.

Anatomy of a Typographic Grid (http://www.vanseodesign.com/web-design/grid-anatomy/)
4 Types of Grids (http://www.vanseodesign.com/web-design/grid-types/)
22 Examples Of Grids (http://www.vanseodesign.com/web-design/grid-type-examples/)

Plenty of links in the articles to other resources.

The reason for using a grid is they provide order and clarity. They're a way to structure space so you can decide where to put things. The create harmony in their order. They make it efficient for designers to place elements in a design. There's more to grids, but hopefully that gives you some general ideas about what they are and why they're used.

Wozcreative
01-08-2014, 12:18 AM
Grids also help with laying out typography. There are certain rules in typography that make articles easier to read than others.. a good grid system makes it flexible, consistent and also allows the eye to freely find it's place when reading.

Grids are everywhere though.. think of the "rule of thirds" when doing photography.. similar concept. A good focal point and negative/wasted space that lead the eye.

vangogh
01-09-2014, 12:28 AM
Absolutely. They really started as a way to lay out type. People don't think about it, but a novel that looks like it's just a 2 blocks of text on each side of the page has been carefully laid out on a grid. The space on all sides has been chosen according to a set of guidelines. People don't usually realize how important that little bit of space is to make reading easier or harder.

Have you read any good books on grids? I've read a few and found some information online, but I'm always looking for recommendations to learn more.

billbenson
01-09-2014, 07:27 AM
Interesting and thanks. I've always known that page layout is important as the eye tends to follow a particular pattern,but never knew more than that. I'll take a look at your links Steve.

vangogh
01-10-2014, 04:54 PM
Let me know what you think after reading. I can point you to many more resources too if you want.

billbenson
01-11-2014, 12:42 AM
Let me know what you think after reading. I can point you to many more resources too if you want.

I took a fairly quick look at the three links. It's interesting but not surprising. I want to go back and look at the prioritization of particular blocks. I'm sure its related to how the eye follows the page as well. I don't remember more that the eye tends to follow a page in a particular pattern, but I don't remember what that is.

Wozcreative
01-11-2014, 03:04 PM
I took a fairly quick look at the three links. It's interesting but not surprising. I want to go back and look at the prioritization of particular blocks. I'm sure its related to how the eye follows the page as well. I don't remember more that the eye tends to follow a page in a particular pattern, but I don't remember what that is.

Our eyes don't actually read the "letters" in every word, but instead we read the "shape" this is why when we scramble a word but keep the first and last letter in the same position we can easily read it because it essentially still creates a familiar shape in that word. The grid, leading (space between the lines), kerning (space between the letters) and column word length (usually 5 - 7 words per line max so eye doesn't lose position when switching lines) are what makes it easy for the eye to recognize these patterns and flow.

There is also hierarchy of information. We usually play with this using font size, colour, position in the grid. This type of treatment creates typographic texturing. It makes a document look easy to read and not overwhelming. It's very important when there is a lot of information that needs to be processed by the reader. One major place that you would see this and relate to it is website home pages. When hierarchy of information using grid, design elements, negative space and content texturing is setup properly, a user can follow exactly what the company can do for them. It's important if you have only 6 seconds to convince user to read on with a website.

Grids and typography go hand in hand.. I spent 3 years learning about them ;) I can go on and on!

billbenson
01-11-2014, 05:35 PM
Thanks Woz. That's fascinating. I think I'll stick with being a salesman though :)

vangogh
01-14-2014, 02:20 AM
But this design stuff is so much more interesting Bill. :)

Yep to everything Woz said. I didn't study this stuff in school, but I've been teaching it to myself for years. Just to give you an idea when I designed my own site I first thought about all the information that would on any page. I then prioritized that information. What was most important for someone to see. What was least important. What was in the middle. I did this before thinking visually how the page would look. Once I decided what I thought most important I designed it so it had the most visual weight in the design. The next most important information got the next greets visual weight and so on.

You can design certain elements to attract the eye and you can also design elements that lead the eye from one place to another. In doing both you can control to a degree how the eye will flow around the page so you can make sure they see the most important information on the page and also see things in order if there's an order.

The patterns you're thinking of are where they eye naturally goes in the absence of design. Those patterns are meant to describe where the eye looks when the page is filled with large blocks of text and there are variations on one or two similar patterns. You probably heard of the F-Pattern which is how most people look at search results. Picture the letter F. The eye starts in the upper left and moves to the right. It then comes back moves down and looks right again though not quite as far. Then it moves more down the page than across. Another pattern is the Z-Pattern. Again start in the upper left and follow the pattern a Z makes.

Again those are for text heavy pages without design. As soon as you start designing parts of the page to attract attention your design overrides the natural patterns.

Wozcreative
01-14-2014, 03:04 PM
Again those are for text heavy pages without design.

When I see this.. It's the same feeling I get when I see the inside of a portapotty.

vangogh
01-14-2014, 03:45 PM
Funny and I hear you. I do my best though to stay out of portapottys if it can be helped. :)