Week 5
Grids. Oh grids. Grids are one thing that DIDN'T stick in my education. I seemed to have just skimmed through the reading and moved on, not realizing how essential they are in UI Design. After I graduated I realized that this was a hole in my education that I need to remedy, so I've been doing some reading on grids. This week we're going to cover the HOW of grids.
First, let's talk terms:
Field elements: Your design that you put in. Be it text, images or a combination.
Columns: The thick, pink blocks that make up the content width of the screen.
Gutters: the spaces between your columns.
Side Margins: A form of gutters but on the sides!
Now, the set up. Traditionally there's 4 columns for mobile, 8 for tablet and 12 for desktop. The most common width for the grids is usually between 60-80px. Typically 20 px is used for gutter size, with 20-30 being commons for side margin gutters. So, now that we know HOW to use grids, stay tuned for round two, on WHY we actually use gutters!
First, let's talk terms:
Field elements: Your design that you put in. Be it text, images or a combination.
Columns: The thick, pink blocks that make up the content width of the screen.
Gutters: the spaces between your columns.
Side Margins: A form of gutters but on the sides!
Now, the set up. Traditionally there's 4 columns for mobile, 8 for tablet and 12 for desktop. The most common width for the grids is usually between 60-80px. Typically 20 px is used for gutter size, with 20-30 being commons for side margin gutters. So, now that we know HOW to use grids, stay tuned for round two, on WHY we actually use gutters!
Comments
Post a Comment