Week Eight: November 16-20


DUE November 18: Assignment 6

Weekly Checklist



Monday, November 16



  • Assignment 7 info
  • Measurements, grids
  • Page layout
  • Site maps
  • Wireframes




Illustrator rulers and guides

  • Edit/Preferences/Units
  • View Ruler
  • View Artboard ruler
  • Pull guides & lock when needed


Illustrator grids

  • View Grid
  • Snap to grid


Page layout

  • Banner
  • Logo
  • Headers
  • Text
  • Footer
  • Navigation
  • Image placement


Page readability

  • Above the fold
  • Z-reading
  • Page top or side navigation
  • Identifiers


Site maps

  • Organization of pages
  • Top level
  • Secondary pages
  • Third-level/supporting pages


Illustrator for site maps

  • Use grids for organizing
  • Use boxes, ellipses, and other shapes
  • Try using shadows or other effects to make sitemap pop out
  • Use text to indicate pages
  • Use lines, strokes and arrows for directionals



  • B&W diagrams illustrating blocks of content, navigation and functionality of a web site design.
  • Used by web designers and developers as a means to design the content website page before importing images and text.
  • Clients, agencies, and web professionals recognize as a critical step.



Wireframes help a web designer:

  • Storyboard a visitor’s path through a site.
  • Work quickly through a series of layout iterations before the visual design is implemented.
  • Communicate content and structure of a page’s design to the client without the distractions of color, fonts, and images.


Grey box design

  • Design process can be spread over shorter stages
  • Focus on structural elements of page design
  • Easy to work creatively without limiting options
  • Example (Sinkula)


Grid design

  • Grids serve as a guide to designers to follow when placing objects on a page
  • Grids provide structure and add rhythm to a design
  • Can help a designer to create a composition that is easier for a user/reader to scan
  • Neatly organized and easy to follow information
  • 960 Grid Design system


Combo design

  • Use Illustrator to use a combo of text and grey boxes
  • Layout with a grid in mind
  • Use rulers, guides, grid
  • Example (Sinkula)


An EXCELLENT Tutorial (Sinkula)


How About Some Patterns



  • Review Chapter 4







Wednesday, November 18



  • Tuesday catch-up
  • Lab time