Student Showcase

Let’s take a look at your museum mood board from last week.

Using a Grid for Web Layout

Grid Concepts

Web layout that is based on an underlying grid looks more organized and professional.

Photoshop for Web Layout - Using a grid for web design

Using a grid for web design

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.

Photoshop for Web Layout - coolhunting.com Photoshop for Web Layout - risdmuseum.org

You can create visual interest by breaking the grid, once most everything else is following its guides.

Using a Grid for Web Layout - nationalacademy.org
Activity

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

BusyKidz Tablet Mockup on a Grid

Photoshop for Web Layout - tablet web layout for BusyKidz based on a grid

Video

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
  1. Define your “standard unit”.
  2. Choose your goal.
  3. 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.

Slideshow

Grids Are Good (Right?) by Khoi Vinh, 2007

Grids are good slideshow

Article

Grid-Based Web Design, Simplified from Smashing Magazine, 2010

Gridding Resources

960px Grid Templates for Photoshop and Fireworks

960px grid Photoshop template

960px grid Photoshop template with 12 units

1200px Grid Templates for Photoshop and Illustrator

1200px grid Photoshop template

1200px grid Photoshop template with 15 units

Responsive Grid System

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.

Photoshop Workflow

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

Photoshop for web layout - naming and organizing layers

Nondestructive Edits

  • smart objects
  • layer masks
  • adjustment layers
Photoshop nondestructive edits for web design Photoshop layer masks for web design

Photoshop Typography

View Slideshow: PPT | View Slideshow: PDF

Class slideshow and demonstrations.

Photoshop CC2014 Character and Paragraph Panels

Mockup Prepping for Coders: Making Your Specifications More Visible

Class demo: using Specctr to make design measurements and other details visible.

Download Specctr Lite