GRDSN 111: Design Process II
Project: Restaurant Web Site
Resources:Design Interact: http://www.designinteract.com/
Web Page Design for Designers: http://www.wpdfd.com/
Performance Objectives: (Things you will be able to learn...) and Criteria: (This is how well it has to be done...)
Instructions: Select a score for each outcome below based on the following scale...
0= Clearly does not demonstrate competency.
1= Demonstrates basic understanding of competency.
2= Demonstrates clear understanding of competency.
3= Demonstrates competency with clarity, uniqueness and depth.
4= Demonstrates competency at a professional work level.
1. Research and collect examples of...
- well designed websites
- choosing examples that clearly show the graphic design principles in action
- researching color, line, shape, texture, and typography as it is used on the web
- submitting a styleboard for each of your rough designs to show thinking as it relates to the design principles
0 1 2 3 4
2. Create a restaurant website that expresses the mood, personality, spirit and / or theme of the restaurant through creative concept, imagery, typography and invites interactivity.
0 1 2 3 4
3. Develop a hierarchy / flow chart by sketching out the site structure (navigation links)
0 1 2 3 4
4. Communicate concept / composition using thumbnail sketches that ...
- Are fast and not detailed
- Uses ideation techniques such as the "Creative Techniques Listing" or the "Thinking Creatively" text
- Allows yourself to brainstorm and record every whim, even the bad, dumb, overused,
inappropriate or impractical ideas in order to get to a unique idea - Drawn in proportion to the dimensions of the finished piece
- Conveys an entirely separate or different creative concept
- Shows emphasis, balance, rhythm, unity
- Shows use of Gestalt principles: similarity, proximity, continuation, closure, figure/ground
- Conveys composition, sizing and position
- Exhibits flexible visual thinking
- Shows the relationship between graphic elements
- Shows general shapes of graphic elements
- indicates various design approaches. Ex: Graphic, Illustrative, Photographic or Typographic
0 1 2 3 4
5. Communicate refined concept, detailed composition and typographic formatting using tight roughs that...
- Work off of one of the previous thumbnail sketches
- Are drawn in proportion or actual size
- Convey type choice
- Convey type size, spacing and leading
- Indicate usage of color
- Convey photographic or illustrative imagery
- Create each rough as an entirely different creative concept
- Are computer generated
0 1 2 3 4
6. Indicate the hierarchy of elements by...
- Determining the relative importance of every section of the client's text
- You will have chosen a method of emphasis using size, boldness, italics, font choice, spacing, alignment, kerning, etc.
- You will have indicated the visual weight of elements by careful rendering or varying the stroke weight of lines.
0 1 2 3 4
7. Develop creative design solutions that demonstrate effective use of the formal elements of design
by incorporating the following into your rough designs...
- line
- shape
- color
- value
- texture
0 1 2 3 4
8. Identify and utilize the principles of design...
- balance
- emphasis
- rhythm
- unity
0 1 2 3 4
9. Create the illusion of depth by...
- overlapping imagery
- varying the size of shape, type or imagery
- using color to have elements recede or come to the foreground
0 1 2 3 4
10. Create interesting typographic compositions by...
- kerning type (wide, tight or varied)
- using an overused font in a new and fresh way (using line, texture, shape or various sizes)
- choosing appropriate typefaces to portray a style or personality
- varying the use of caps and lower case letter forms
- manipulating a typeface with an awareness of the horizontal and vertical line weights
0 1 2 3 4
11. Devise and apply grid systems by...
- using graph paper and laying out your design with html tables in mind
- setting up grid a grid structure within the html editor
0 1 2 3 4
12. Incorporate original or copyright free illustrative / photographic imagery by..
- using image manipulation or illustrative software to create original artwork
- researching copyright free photographic imagery
- researching copyright free illustrative imagery
0 1 2 3 4
13. Assess your work and make appropriate revisions by...
- gaining peer feedback at the rough stage
- gaining peer feedback at the digital comp stage
0 1 2 3 4
Suggestions for improvement: