Learning how to use grids?
- Started
- Last post
- 17 Responses
- omahadesigns
What's the best way to really learn how to use grids?
I use them, but sometimes my designs aren't as tight as I want them to be and my design process isn't that strong.
I haven't mastered grids yet. Any tips?
- wagshaft0
Lot's of good articles and resources here:
http://www.thegridsystem.org/
- d_rek0
Make a grid. Put shit on it.
- doesnotexist0
- yeah thatalbums
- < rasterfarikingsteven
- Thisezkl
- txbklyndroobeki
- doesnotexist0
there is no grid
- ohhhhhsnap0
- < But it's by a girl. Girls can't do design! Mwhahaha! Lolzapalooza!microkorg
- uan0
- kingsteven0
Every designer should read muller brockmann, as well as eloquently and concisely explaining everything technical you'll ever need to know about grid systems his design philosophy holds the grid as the cornerstone of a designers ethos... Biblical... and printed in two languages, so could potentially have rossetta stoneesque significance in a post-apocalyptic hipster society. Do it.
- Jesus christ has anyone actually read that book? Reading it is like watching paint dry. Fucking mind-numbing stuff.d_rek
- omg0
- bklyndroobeki0
bump
- bump thread for what?iCanHazQBN
- seeking out new trends. http://www.w3schools…bklyndroobeki
- Riley0
Prepare to be on grid island, population 1.
Müller had the advantage of leaving his grid on his cover and inventing design porn. Try taking that grid off and telling your client why you can't move things over an inch.
This helps; http://gridcalculator.dk
for web-
I like 16 columns - 94x per col. - 58px for gutters. gives you 2400-ish wide page (numbers are 2x). and my inner ocd appreciates 94:58. again- population 1
- omg0
- hype4life0
Great way to learn grids: Redesign your website without them and watch the shit fly. THANKS A LOT QBN
- bklyndroobeki0
Good stuff from Spec
http://spec.fm/specifics/8-pt-gr…8-pt Grid
THE BASIC PRINCIPLE
Use multiples of 8 to define dimensions, padding, and margin of both block and inline elements.
When the only contents of a block element are text (e.g. buttons), set the text to a size consistent with the rest of your UI and/or the specific platform, then use padding to determine the size of the block element. In cases of a full-width element, use padding to determine height and a consistent horizontal margin to determine width.TWO METHODS
There are actually two prominent versions of this system. One that places elements into a system-displayed grid defined in 8-point increments (we’ll call this the “Hard Grid” method) and another that simply measures 8-point increments between individual elements (we’ll call this the “Soft Grid” method).
The primary argument for the Hard Grid method is that by using additional transparent background elements and then grouping them to small groups of foreground elements, you can keep track of margin and padding on a per-element basis and just snap these containers to the grid like bricks. Material Design - where everything is already designed to a 4pt grid - naturally conforms to this method.The argument for the Soft Grid method is that when it comes time to code up an interface, using an actual grid is irrelevant because programming languages don’t use that kind of grid structure - it’ll just get thrown away. When the speed at which you arrive at a high-quality, programmable set of mockups is a priority, bypassing Hard Grid’s extra overhead of managing additional layers in favor of Soft Grid’s more fluid, minimal structure can be an advantage. This also can be more favorable to iOS where many system UI elements are not defined by an even grid.