Week Eight: November 16-20

 

DUE November 18: Assignment 6

Weekly Checklist

 

 

Monday, November 16

 

GAMEPLAN

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

 

DISCUSSION

 

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

 

Wireframes

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

 

Purpose

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

 

TO DO

  • Review Chapter 4

 

 

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

 

 

Wednesday, November 18

 

GAMEPLAN

  • Tuesday catch-up
  • Lab time

 

 

ASSIGNMENT 7

 

 

BACK TO TOP