#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.