Let’s take a look at your museum mood board from last week.
Using a Grid for Web Layout
Web layout that is based on an underlying grid looks more organized and professional.
When the grid is then hidden, the design still holds together because the text, color, and graphic elements have been aligned.
The design element of repetition is easier to achieve as well, such as the even spacing between page content pieces.
You can create visual interest by breaking the grid, once most everything else is following its guides.
Study this collection of museum websites. How did they use grids for layout?
Download for Class Demo
Download the following real mockup file I created prior to coding this website for a client. It is based on a grid.
If you’re having trouble downloading, right-click on the link and select “Save link as”.
If you are not able to attend class today to see this demo, the following video does a good job of explaining the concepts of grid-based web layout.
Web Design – How do I use the grid in web design? by This Week in Web Design [33:42]
Steps from the Video
- Define your “standard unit”.
- Choose your goal.
- Explore different options.
Guidelines from the Video
- Only make decisions inside your grid.
- Look at your user goals and focus on them.
- White space is as important as content.
Grids Are Good (Right?) by Khoi Vinh, 2007
Grid-Based Web Design, Simplified from Smashing Magazine, 2010
With the surge of mobile device usage on the web, we can’t rely on everyone viewing our site the same way. Responsive web design allows the site to adapt to the viewport of the device. This require coding that it more advanced than what we will cover in this course. However, it pays to start thinking about how your site will shift content. You can still align content to a grid! In fact, having content portioned into standard-ratio boxes makes it easier to do responsive design.
The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.
Using the BusyKidz download file, I will demonstrate the importance of the following habits in a Photoshop workflow, for any type of project.
Naming and Organizing Layers
- smart objects
- layer masks
- adjustment layers
Class slideshow and demonstrations.
Mockup Prepping for Coders: Making Your Specifications More Visible
Class demo: using Specctr to make design measurements and other details visible.