Scribd Logo
Upload

Welcome to Scribd!

  • Designing with Grids Guide for Web Designers

    Uploaded by

    Benvindo Xavier
    20 views13 pages
    The document discusses the history and use of grids in design. It notes that grids were first used in architectural house designs in the 1800s and have since been adapted for organizing content like text in books and information on websites. The document outlines different types of grid approaches (single column, multi-column, modular, hierarchical) and explains that grids help keep content organized, create order, enhance usability, and save design time by providing limitations to work within. It provides instructions for creating a grid, including evaluating content, grouping related information, choosing a main piece of content to organize around, selecting a grid type, and using the grid to replicateably organize content in an easy to understand flow.

    Original Description:

    011 11-Grids

    Original Title

    011 11-Grids

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses the history and use of grids in design. It notes that grids were first used in architectural house designs in the 1800s and have since been adapted for organizing content like text in books and information on websites. The document outlines different types of grid approaches (single column, multi-column, modular, hierarchical) and explains that grids help keep content organized, create order, enhance usability, and save design time by providing limitations to work within. It provides instructions for creating a grid, including evaluating content, grouping related information, choosing a main piece of content to organize around, selecting a grid type, and using the grid to replicateably organize content in an easy to understand flow.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views13 pages

    Designing with Grids Guide for Web Designers

    Uploaded by

    Benvindo Xavier
    The document discusses the history and use of grids in design. It notes that grids were first used in architectural house designs in the 1800s and have since been adapted for organizing content like text in books and information on websites. The document outlines different types of grid approaches (single column, multi-column, modular, hierarchical) and explains that grids help keep content organized, create order, enhance usability, and save design time by providing limitations to work within. It provides instructions for creating a grid, including evaluating content, grouping related information, choosing a main piece of content to organize around, selecting a grid type, and using the grid to replicateably organize content in an easy to understand flow.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 13

    DESIGNING WITH GRIDS

    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY


    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    GRID HISTORY 101


    Way back in the mid 1800s, a
    dude named William Morris
    and his buddy, Philip Webb,
    designed a house where the
    rooms were organized
    according to purpose — in a
    grid-like fashion.

    This led people to rethink


    how books were laid out,
    and incorporated a grid.
    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    FAST FORWARD
    Today, grids are very
    commonly used in web
    design.

    Grids on the Internet help


    organize large amounts of
    information in easy-to-
    navigate, digestible
    information.
    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    APPROACHES
    Single Column

    Multi Column

    Modular

    Hierarchical
    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    APPROACHES
    Single Column

    Multi Column

    Modular

    Hierarchical
    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    APPROACHES
    Single Column

    Multi Column

    Modular

    Hierarchical
    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    APPROACHES
    Single Column

    Multi Column

    Modular

    Hierarchical
    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    WHY GRIDS ARE SO GREAT


    Keeps content organized

    Creates an order by distinguishing different


    types of information

    Enhances navigation & usability

    Saves design time, because you have


    limitations to work within
    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    HOW TO CREATE A GRID


    Evaluate the content to be organized

    Group related information together

    Decide the most important piece of content,


    and organize the rest around it

    Choose a type of grid that works best with


    your content organization

    The purpose of a grid is to organize your


    content in a manner that is easy to
    understand, has a good flow, and is replicable
    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    BASIC 12-COLUMN GRID


    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    DIVIDED INTO 3 MAIN SECTIONS


    DESIGNING WITH GRIDS
    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    WIREFRAME USING THE GRID


    THAT’S THE BASICS! LET’S KEEP MOVING.

    DESIGNING WITH GRIDS


    THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

    You might also like