Grid Based Design
Designing a Responsive Grid in 2016
Takeaways:
1. 12 columns, looks good at most ratios
2. Wireframing should be lo-fi, saves time and helps designers get to the next stage faster
3. Focus on the smallest screen size the design will cater to, make sure it works on it
4. Reduce resolution to make work more effective
5. Nested grids can be leveraged to create extra spaces
6. Test 3-5 key layouts at various screen sizes to find potential pitfalls early
Grid-Based Web Design, Simplified
1. Getting Started: stick to graphics programs at the start, since it is easier to manipulate visuals and move things around, then doing things on the web (html/css)
2. Choosing a base unit: larger interval consisting of multiple pixels to make aligning easier
3. Creating file and setting up the baseline grid
4. Coding: focus on the structural makeup and find the simplest ways to implement the design from a more basic layout and build up to the details
All About Grid Systems
Grid System: structure comprising a series of horizontal and vertical lines, used to arrange content
Advantages of using Grid Systems:
1. Design in proportions, and balancing out different elements
2. Sense of uniformity and familiarity
3. Easier to implement and code
Disadvantages:
1. May restrict creativity
2. Not easy to work with, and require practice to use effectively
Using Grid Systems in Designs:
1. Set an overall of the grid onto the design
2. Create some guides
3. Work with constraints and restrictions
4. Pay attention to spacing
Designing with a Grid Based Approach and Design By Grid
Provide a great overview of this design approach, providing several references and links to helpful explanations, guides and tutorials for specific sub-topics.
Topics covered include things you don’t know about grid-based design, articles on specific aspects of this approach, tutorials, and recommended tools to pull off good grid-based design.
