Week 6 Page 2: A closer Look at Grids in Screen Design

Overview:

Grids are the invisible structures that hold a design together. They help designers organize content, and they help readers interpret it. In print design, grids have traditionally been used to manage balance, proportion and space in text-heavy publications like magazines and newspapers.

Recently, grids have become a popular tool for screen designers because of their flexibility in adapting to different screen sizes. Responsive design relies on grid-based structures to determine how many columns of content display and when the number of columns shifts to accommodate a smaller screen size. The designer uses a grid to organize content and then sets pixel "break points" that shuffle content to respond to smaller screen sizes.

One of the most popular responsive design tools is Bootstrap: http://getbootstrap.com/ Links to an external site.
(The image below demonstrates how a design can shift based on screen size: adapted from an article on: http://www.studiopress.com/blog/ Links to an external site.)

A variety of grid systems are available to help assist designers including the 960 pixel grid Links to an external site.. Designers can also download Photoshop grid templates Links to an external site. to help them lay out web designs at different column widths.

For more detailed information about grid-based design, read the following interesting articles! Feel free to comment on them in our weekly forum if you want :-)

• http://www.creativebloq.com/web-design/grid-theory-41411345 Links to an external site.
• https://designschool.canva.com/blog/grid-design/ Links to an external site.

Examples of Responsive Design in Action:

Take a look at this collection of grid designs that demonstrate creative responsive design solutions to different device sizes!

• http://www.awwwards.com/50-examples-of-responsive-web-design.html Links to an external site.

 

Using Grids Creatively:

Many designers resist using grids because they view them as "creatively restrictive." However, grid designs don't have to be limited to boxes and containers. Designers have the flexibility to fill some containers while leaving others empty, and to fill several cells with a single element. This can create a visually-interesting layout that is both organized and responsive. Here are a few examples!

• http://www.thetouchagency.co.uk/ Links to an external site.
  Notice how the container sizes are varied and how horizontal lines are used to create separation between the boxes. Try changing the window size to see how the design reacts. (Note: This is an archived site)
• http://www.rodgerstownsend.com/ Links to an external site.
  Interesting checkerboard of content. It helps to have some blank boxes!
• http://www.thomasrobin.net/ Links to an external site.
  This one is interesting! Notice that you can use the same background color for the cells and page to make it appear like there are just stacked, colored boxes (not a grid structure)
• http://www.silktricky.com/#/home Links to an external site.
  Interesting use of different sized boxes combining text, photos and video! Be sure to shrink the screen width and see how they respond to a smaller viewport! (And be sure to listen out for the wolf cry!)
• Grids in Mobile App/UI design: http://uigarage.net/?fwp_categories=grid Links to an external site.

That's it for this week's lectures! Now apply what you learned to this week's assignments!