MM1111 Design Layout :: Art Institute

Week 2: Using Grids for Web Layout

Slideshow: Grids Are Good

Grids Are Good Slideshow: PDF

Photoshop Grid Templates

Designer Robbie Manson has created a fantastic resource for web designers: Photoshop templates for making your web page mockups using a grid.

I’ve created a selection of 960 pixel-wide uniform grid templates ranging from 3-columns to 16-columns...

Although the margin widths of these uniform grid templates do vary, each one adheres to an overall width of 960px.

960 grid columns screenshot of files

960px-grid-templates-photoshop.zip

Preproduction: Wireframes

When planning your site, you must do a lot of research and then begin drawing some rough layouts. The research involves discovering as much as you can about the company, topic, or other entity the site is about, its intended audience, and the scope of the site (how big and complex it will be.) Then you can figure out how to break the web pages out into page content areas.

wireframe sample for a news site, gridlessPage content areas may include the following or much more:

  • Header/Site ID
  • Search
  • Login
  • Main Navigation
  • Secondary Navigation
  • Main Content
  • Advertising
  • Sidebar
  • Media
  • Footer

Once you've decided upon all the content areas that are appropriate for your site, it's time to draw up a few wireframes. A wireframe is an illustration of the layout of fundamental elements in the web page's interface. Typically, wireframes are completed before any additional artwork is developed. Carefully planning your overall layout, before you create any graphics, can eliminate a lot of headaches later on.

Wireframes can be created by hand or by using a variety of software programs. Visio is software that is ideally suited for wireframing, but it is expensive. Sometimes designers simply use Word, Excel, or Illustrator.

Wireframes need to achieve a balance between being too detailed and too general. A wireframe that is too precise may leave little creative room for the designer. A wireframe that is too loosely defined can be misinterpreted by designers and developers. The wireframe format used should be dependent upon the audience.

How to create a wireframe:

  1. Decide on which page elements will be included.
  2. Draw a rectangle on your paper which approximates the proportions of a browser window.
  3. Use a ruler or draw carefully to indicate the placement of the various page elements. Take your time to show clean boundaries. Imagine that you will be submitting this work to a paying client. Some of the content may go below the bottom of the browser window; go ahead and show the entire page above and below "the fold."
  4. Label each of the page elements.
  5. Instead of drawing, you may use software instead—-but take care to include the page outline and all of the page elements, and label each element. Don't get too detailed! There should only be rectangles and labels.

wireframe sample for a news site, gridded using Paper BrowserWireframing Resources

Paper Browser

Web Design Sketchbook

10 Completely Free Wireframe/Mockup Applications

35 Excellent Wireframing Resources

Using Wireframes to Streamline Your Development

News Site: Project 1, Version 1

News websites are very text-heavy and provide a special challenge to designers. This is a great opportunity to work with a grid, as news site often required multiple columns and boxes. How will you balance breaking news against feature news and older news stories? Will you put sports and weather on the home page? Will you include ad space so that the client can make money from their effort? You'll need to consider typography and readability, image thumbnails, easy-to-use navigation, and other hallmarks of news sites.

Please read the following article from .NET magazine:

website build-off: news sites

NET magazine article web buildoff news website

View the Sample Layouts

Click an image below to see it full-size.

example 1 news site example 2 news site

example news site 3

Required Home Page Elements

Now create a mockup of a news site in Photoshop. No actual HTML or CSS coding is required, but do keep in mind the special requirements of encoding a site layout. This week you will create Version 1. Next week, you will revise and improve your first version after hearing feedback from peers and your instructor; this will be Version 2.

Decide what type of news you are covering and who your audience would be. Sketch up your three wireframes as described above. Then design the home page. Be sure to include the following elements:

  • No wider than 1000px.
  • Clearly defined page content areas (e.g. site id, navigation, breaking news)
  • Site ID, including logo and tagline
  • Search
  • Navigation to the main sections of the site, including a link back to Home
  • Main content area which includes at least ten news story teasers, at least one of which is "breaking news"
  • Typography which organizes the content and creates a visual heirarchy
  • One or more feature photos that are relevant to news stories
  • Photo captions
  • Footer

Optional Home Page Elements

These elements are optional for your home page layout but could add some pizzazz:

  • Large "feature article" panel
  • Video playback area
  • Social media icons/links/sharing
  • Twitter feed
  • Charts/maps
  • Customizable layout
  • Save/print buttons for articles
  • Banner ads

Student Work

Gallery: News Site

Relevant Articles

The Brads - This is Why Your Newspaper is Dying

Newspaper Website Design: Trends And Examples

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
2 News Site Wireframes news-site-
wireframes.zip
News Site Mockup: Project 1, Version 1 news-site-v1.pdf
News Site Design Defense news-site-
defense.doc

Assignment Details

News Site Wireframes

Create three wireframes for the home page of your News Site. You may create them by hand or in the software of your choice. If you hand-draw them, please scan them in so you have digital files to upload. Print out a few copies of one of the templates provided at the sites linked to the left under Wireframing Resources.

Use a grid to organize your layout. Explore a variety of layouts for your page content areas. Drawing several wireframes will allow you to rule out less ideal layouts before you begin more complex drawings.

Create these BEFORE you create your mockup.

See Preproduction: Wireframes to the left.

Student Work

News Site Mockup:
Project 1, Version 1

Create Version 1 of your home page layout for a News Site in Photoshop. Save your mockup as a [Smallest File Size] PDF.

See News Site: Project 1, Version 1 to the left.

Student Work

News Site Design Defense

Create a short defense of your design in MS Word. Include a screenshot with numbered labels (like in the article) so that you can reference parts of your layout within your text:

  • What type of news is your site about?
  • Who is your audience?
  • What sort of grid did you use to develop your layout?
  • What are your main page content areas?
  • Why did you use the imagery, colors and fonts you did?
  • How did you establish a focal point and visual heirarchy?
  • What technology do you envision needing on this home page if it actually went live?