Advanced Digital Illustration – Week 10

Topics: Critique, Feedback
Lab: Work on final project & revisions
Homework due this week: Rough Draft of Advertisement
Homework due next week: Finished Advertisement in Context

Advanced Digital Illustration:
Assignment #8: Finished Advertisement, in context

Finish your advertisement, and display it in two formats:

1) Digital file of the finished illustration (.pdf, .jpg, .png).

2) Show your illustration in the context of an advertisement. You can choose any context that advertisements are found. Will it be on a billboard? A bus? A sign? A flyer? A magazine page? A t-shirt? Find a photo of another advertisement in that context, and paste your image into it. Manipulate the illustration so that it fits with the angle and shape of the advertisement: it should look realistic, as though your ad is really in that context.

GRADING:

__ (3) Product is recognizable
__ (2) Concept: advertisement is interesting and provocative
__ (2) Image sends a positive message about the product.
__ (3) Show the illustration in the context of an advertisement.

__ TOTAL out of 10 points

Design Layout – Week 10

Topics: Template Exam, Assembling a Jewel Case Mock-up
Lab: Work on Template Exam & Revisions
Homework due this week: 2 surfaces for jewel case
Homework due next week: Jewel Case Mock-up and Display Board

Final Project: Jewel Case Design & Music Client Display Board
Due week 11, beginning of class.

1) Finish and Print the Jewel Case Package Design for your client’s CD.

2) Cut and Assemble the Jewel Case Design into a functional Mock-up: display it in a clear, unscratched Jewel Case.

3) Print the 3 Web Page Designs you developed for the Music Client.

4) Assemble a Display Board, containing your Jewel Case Mock-up and Music Client Web Page Designs.

For the FINAL JEWEL CASE, Include ALL SURFACES:
(Print and assemble into a functional mock-up.)

1) Front Cover
http://www.newenglandcd.com/downloads/cd-jewel-4pp-insert.htm
Include the name of the musician or band, album title, and imagery relating to the theme.

2) Insert
http://www.newenglandcd.com/downloads/cd-jewel-4pp-insert.htm
Back-side of the front cover – faces the disc when you open the case

3) Disc Label
http://www.newenglandcd.com/downloads/cd-disc-art.htm
The round label that sticks to the disc itself.
Include the name of your client and the name of the album.

4) Drop Tray
http://www.newenglandcd.com/downloads/cd-jewel-tray.htm
The Drop Tray is the artwork that sits behind the disc. You will see only part of it when the disc is in the Jewel Case. The Drop Tray also includes the graphics visible in the “Clear Area” near the left-spine of the Jewel Case.

5) Back Cover
http://www.newenglandcd.com/downloads/cd-jewel-tray.htm
The Back Cover and Spines of the Jewel Case. Include a listing of the album tracks.

Formats:
- Digital Files of All Jewel Case Surfaces (.pdf or .jpg format)
- Digital Files of Revisions to 3 Web Page Designs for Music Client
- Display Board with 2 Web Page Designs and Jewel Case Mock-up

Grading: 20 points total

Jewel Case Mock-Up (10pts):
__ (2) Required details are present, all text is legible.
__ (2) Layout: Design follows a consistent grid, spacing, and alignment scheme.
__ (2) Emphasis & Imagery are relevant to the theme of the client.
__ (2) Color Scheme & Typography are relevant to the theme of the client.
__ (2) Unity: Style is consistent with the other surfaces of the package.

Display Board (10pts):
__ (2) At least 2 Music Client Web Pages are present on the board
__ (2) Jewel Case Mock-up is present on the board
__ (2) Edges are cut cleanly, abiding by Bleed Margins
__ (2) Jewel Case Mock-up is displayed in a clean, clear plastic Jewel Case
__ (2) Display board is clean and unscratched, printed work is flat and clean

Observational Drawing – Week 10

Topics: Details of figure drawing
Lab: Drawing the head, hands, and feet
Homework due this week: Reflective Objects
Homework due next week: Final Portfolio

Observational Drawing: Final Portfolio
Due Week 11 – 25 points.

Compiling your Portfolio:
- Collect your 5 best projects and compile them into portfolio format.
- Each page should be displayed in a plastic protective sheet.
- Pages should be 8.5X11” or larger.

Ways of Representing Your Work:
(You may use a variety of the following methods.)

1) Photocopies
2) Photos of the work (film prints or printed digital photos)
3) Actual Drawings
4) All drawings should be cut cleanly with neat edges: each drawing should be cut into a square or rectangular shape.

PHOTOCOPYING TIPS (Copy Machine):
- Photocopying allows you to shrink drawings, adjust the light/dark values, etc.
- If you want to compile a group of drawings onto one page, photocopy the drawings to the size you want, cut them out and paste them onto a blank piece of paper, and then photocopy them again so that the cut edges don’t show!

Grading: Final Portfolio: 25 points total

__ (5) Work is displayed in a series of plastic protective sheets.
__ (5) Edges are cut cleanly into a square or rectangle shape.
__ (5) Portfolio is clean and unscratched.
__ (10) 5 Drawings are complete, following the assignment criteria.
(Assignments should have a 9 or 10 score.)

__ TOTAL out of 25 points

Information Design – Week 10

Topics: Page Designs: Unity and Continuity
Lab / Activity: Project Lab / Revise Past Projects
Homework due this week: 3 Comps for Company Homepage
Homework due next week: 4 Page Designs

Information Design: Final Project
4 Page Designs for your Company’s site: (20pts)
All pages should share the same look and basic layout.

- Home page
- Category Page (listing items in a category, showing range)
- Product Detail Page (focus on one product, description, choose color/size etc.)
- Shopping Cart Page (or checkout form)

Grading: 20 points total
__ (4) Theme: Color scheme and fonts support the theme of the company.
__ (4) Message: Imagery & Emphasis make it clear what the site is about.
__ (4) Unity: all pages share a similar layout, look and feel.
__ (4) Layout: all elements are aligned and spaced consistently.
__ (4) Usability: Type is legible and consistent.

** Extra credit: 7pts awarded for making an interactive site mock-up! Create all of the above pages as a functioning prototype.

Interface Design – Week 10

Topics: Designing Firefox Widgets & Various Accessories
Lab / Activity: Firefox Lab
Homework due this week: Firefox Phase 3: Tabs and Throbber
Homework due next week: Firefox Phase 4: Choice Elements

Interface Design – Firefox Phase 4: Due week 11
Choose a combination of the following parts that add up to 20 points.
Any points beyond that will count as extra credit!
(parentheses refer to the example theme “LaurasThemeWeek8.jar”)

CHOICE ELEMENTS:
Choose a combination of the following elements that add up to 20 points.
When you turn in your work, turn in a list of which elements you modified.

TOOLBAR BACKGROUNDS: (4pts)
(in “browser” folder)

status bar = the bar across the bottom of the browser.
(example: statusbar-hg.png)

toolbar = main icons (back, forward)
(example: toolbar-hg.png)

menu bar = the top bar, above main icons.
On a PC it holds the menu options “file, edit, view,” etc.
(example: menubar-hg.png)

personalized toolbar = the “bookmarks” toolbar below the standard toolbar,
Contains rss, getting started, “digg” or “del.icio.us” buttons, any links you add, etc.
(example: perstoolbar-hg.png)

VARIOUS UTILITY WINDOW BORDERS: (2pts)
(global/backgrounds)

Background for utility windows and loading page:
(window_bg.png)

Utility window headers:
(header36.png, header57.png)

Splitters for separated windows:
(splitter_hori.png, splitter-verti.png)

ADDRESS BAR: (2pts)
(in “browser/icons” folder)

The address bar has 3 sections, right, left, and middle.
This is so the address bar can stretch to fit any size.
Make sure the edges of the graphics match.

(example: URLbar-right.png, URLbar-left.png, URLbar-hg.png)

BUTTONS: (4pts)
(in “global/button” folder)

Notice that there are 2 parts to the buttons: start and end (left and right).
This is so the buttons can be rendered at any length.
Make sure the edges of the sections match!

4 Button states: Regular, Hover, Active (onClick), Disabled (inactive)
(example: buttonend.png, buttonend_hov.png, buttonend_act.png, buttonend_dis.png)

TEXT BOXES and FILE FIELDS: (3pts)
(in “global/textbox”)

2 sections: right and left
2 States: regular and disabled.
(example: filefield_left.png, filefield_left_dis.png)

TEXT BOX DROP-DOWN: (1pt)
(global/menulist)
These need to match regular text box graphics. (global/textbox)
Drop-marker States: Regular, Active, Disabled, Hover

DROP-DOWN MENUS: (1pt)
(in “global/menu” and “global/menulist”)

backgrounds and hover states for drop-down menu items.
(example: menuitem_bg.png, menuitem_bg_hov.png)

CHECK BOXES: (3pts)
(global/checkbox)
States: Active, Active-hovered, Off, Off-hovered, Disabled

RADIO BUTTONS: (3pts)
(global/radio)
States: Active, Disabled, Off, Off-hovered

POPUP WINDOW: (2pts)
(global/popup)
popup_bg.png = the top and side bar
submenu_bg.png = the bottom bar

ADD-ONS WINDOW: (2pts each icon)
(mozapps/extensions)
Icons for themes and plug-ins.
(viewButtons.png)

SCROLLBARS: (3pts)
(global/scrollbar)
Backgrounds, arrow buttons, and grippers.

BOOKMARKS TOOLBAR: (2pts each icon)
(browser/bookmarks)
Bookmarks-toolbar.png

HELP TOOLBAR: (2pts each icon)
(in “help” folder)

TREE MENU: (2pts)
(global/tree)
Backgrounds and icons

VARIOUS BROWSER ICONS: (2pts each icon)
Safe Browsing: (browser/safebrowsing)
Feed icons: (some are in “browser/feeds”, some just in “browser”)
Report site (browser/reporterMenuButton.png)
Security (browser/Secure.png, security-broken.png)

VARIOUS GLOBAL ICONS: (2pts each icon)
Error, warning, question, finder icons.
(global/icons)
Off states and bullet icons for Error, warning, question, messages.
(global/console)

VARIOUS MOZAPPS ICONS: (2pts each icon)
Downloading window: (mozapps/download)
Generic Profile Icons: (mozapps/profile)
Updates Window Icons: (mozapps/update)
Installer Icon: (mozapps/xpinstall)

OPTIONS WINDOW: (2pts each icon)
(to see this, select Tools > Options)
Icons: (browser/preferences/options.png)
Main, Tabs, Content, Feeds, Privacy, Security, Advanced
States: Regular, Hover

Headers of options window:
(browser/preferences/groupbox_caption.png, groupbox_caption.png)

Tabs in options window:
(global/tabbox)

Advanced Digital Illustration – Week 9

Topics: Continuing techniques: SVG format
Lab: Critique, Coding SVG graphics
Homework due this week: HW6: Advertising Analysis & Concept
Homework due next week: HW7: Advertising Illustration, Rough Draft

Assignment #7: Advertising Illustration, Rough Draft

This week, develop a digital rough of your advertisement.
You can bring in a work-in-progress, or a series of variations.

GRADING: 10 points total

__ (4) Product is recognizable

__ (3) Concept: advertisement is interesting and provocative

__ (3) Image sends a positive message about the product.

__ TOTAL out of 10 points

Design Layout – Week 9

Topics: Transparent Graphics, Animated Graphics
Lab: Transparent GIF and PNG formats, Animated GIF images
Homework due this week: HW6: Music Client Page Designs
Homework due next week: HW7: Jewel Case Rough Draft (2 surfaces)

Project 7: Jewel Case Design, Rough Draft (2 surfaces)
Due week 10, beginning of class.

Develop a Jewel Case Package Design for your client’s CD.

Unity and Variance:
There are 5 different surfaces that need to be designed – they should all have a consistent style that matches your client’s aesthetic, and they should be unique enough that the design is not boring: it’s recommended to use the same image only twice, not more.

Unity: All surfaces of the Package should look like they belong together. Use a similar style and mood across all surfaces: similar color palette, fonts, alignment, and spacing.

Variance: Use different imagery on the different surfaces: use an image only twice, not more. If all surfaces have the same imagery, the package ends up being very boring.

For the Rough Draft, Choose TWO of the following surfaces:
(All are due week 11 – for week 10, choose 2 of these)

1) Front Cover
http://www.newenglandcd.com/downloads/cd-jewel-4pp-insert.htm
Include the name of the musician or band, album title, and imagery relating to the theme.

2) Insert
http://www.newenglandcd.com/downloads/cd-jewel-4pp-insert.htm
Back-side of the front cover – faces the disc when you open the case

3) Disc Label
http://www.newenglandcd.com/downloads/cd-disc-art.htm
The round label that sticks to the disc itself.
Include the name of your client and the name of the album.

4) Drop Tray
http://www.newenglandcd.com/downloads/cd-jewel-tray.htm
The Drop Tray is the artwork that sits behind the disc. You will see only part of it when the disc is in the Jewel Case. The Drop Tray also includes the graphics visible in the “Clear Area” near the left-spine of the Jewel Case.

5) Back Cover
http://www.newenglandcd.com/downloads/cd-jewel-tray.htm
The Back Cover and Spines of the Jewel Case. Include a listing of the album tracks.

Format:
- Digital Files of All Jewel Case Surfaces (.pdf or .jpg format)

Grading: 10 points total

Surface 1 (5pts):
__ Required details are present, all text is legible.
__ Layout: Design follows a consistent grid, spacing, and alignment scheme.
__ Emphasis & Imagery are relevant to the theme of the client.
__ Color Scheme & Typography are relevant to the theme of the client.
__ Unity: Style is consistent with the other surfaces of the package.

Surface 2 (5pts):
__ Required details are present, all text is legible.
__ Layout: Design follows a consistent grid, spacing, and alignment scheme.
__ Emphasis & Imagery are relevant to the theme of the client.
__ Color Scheme & Typography are relevant to the theme of the client.
__ Unity: Style is consistent with the other surfaces of the package.

__ Total out of 10 points

ObservationalDrawing – Week 9

Topics: Drawing Reflective Objects
Lab: Draw from a still life of metal and glass objects
Homework due this week: HW6: Drapery
Homework due next week: HW7: Reflective Objects

Observational Drawing
Homework 8: Due Week 10

ASSIGNMENT #8: REFLECTIVE OBJECTS:
This week, create a composition that involves reflective objects.

• Use your knowledge of gradients, highlight and shadow to shade variations in metal and glass.
• Use your skills with texture: choose any type of texture you like for this assignment.
• Use gradients to create transitions between light, dark, and medium tones.
• There should not be any “outlines” in your drawing – let the contrast between objects show where the edges are.
• Your drawing should be 8 x 10” or larger.

Grading Criteria: 10 points total

__ (2pts) Realism: the objects in your drawing are the correct shape and proportion.

__ (3pts) Reflections: Show reflections and highlights in metal and glass objects.

__ (3pts) Range of value: your drawing has dark, light, and in-between shades.

__ (2pts) Use gradients, Each object has a highlight and shadow.

__ TOTAL SCORE

Information Design – Week 9

Topics: Prototype Testing
Lab / In-class activity: Paper Prototype Testing, Keywords, Personas
Work due this week: Site Wireframes, Reading: Chapter 9
Homework for next week: 3 Comps for Site Homepage, Reading: Chapter 8

DUE WEEK 10:
3 Design Comps for Site Homepage: (10pts)
Create 3 different rough designs for your company’s site.
Each design should have a different style, imagery, and color scheme.

- Include a Logo for your company that reflects the company’s mission (the Logo can be the same on all 3 comps).

- Your design should communicate the “range of offerings” that your company provides – make it obvious what type of products are being sold.

- Navigation items should be visually distinct from other elements of the site

- Category labels should be simple and obvious, and suggestive of what items are in the category.

Grading: 10 points total:
__ (2) Required details are present, all text is legible.
__ (2) Layout: Design follows a consistent grid, spacing, and alignment.
__ (2) Emphasis & Imagery are relevant to the theme of the client.
__ (2) Color Scheme & Typography are relevant to the theme of the client.
__ (2) Variety: Each comp has a different look.

Reading Questions for Chapter 8: (4pts – Due Week 10)

1 ) Explain the different scenarios in which you would want to use a Wizard, Control Panel, or Toolbar.

2 ) Why is interface design considered to be “disputed territory”? How does the author suggest dealing with such territory issues?

3 ) What is the user’s “locus of attention”?

4 ) What techniques can designers use to create a “visual code” for grouping related items together?

5 ) What design techniques can you use to keep a user focused on their task? (For example, keeping them from abandoning a shopping cart transaction)

6 ) What methods can be used to make links visible and apparent?

7 ) What suggestions does the author give for defining Global Navigation?

8 ) What type of links belong in a secondary “bottom navigation”?

9 ) What is the difference between “Pogo-sticking” and “Crab-walking”? What behaviors do they require of the user, and what design techniques are commonly used to support them?

10 ) Explain the situations in which it is appropriate to use the following: Radio buttons, Check Boxes, Drop-down menus, Selection List.

GRADING: READING QUESTIONS (4 points total)
__ (1) Use complete sentences.
__ (1) Answers demonstrate knowledge of the assigned reading.
__ (1) Answers are in your own words, not copied from the book.
__ (1) All questions are answered.

Observational Drawing – Week 8

Topics: Drapery
Lab: Techniques for drawing draped fabric
Homework due this week: HW6 – Figure Drawing 2
Homework due next week: HW7 – Drapery

Observational Drawing
Homework 7: Due Week 9

ASSIGNMENT #7: DRAPERY:
This week, create a composition that involves drapery.

- Use your knowledge of gradients, highlight and shadow to shade folds
in fabric.
- Use your skills with texture: choose any type of texture you like
for this assignment.
- Use gradients to create transitions between light, dark, and medium tones.
- There should not be any “outlines” in your drawing – let the
contrast between objects show where the edges are.
- Your drawing should be 8 x 10″ or larger.

Choose ONE of these two options:

Option #1: Create a still life with draped fabric, such as a fruit
bowl on a table with a tablecloth, a piece of clothing hanging on the
wall, an object draped with a sheet, etc.

Option #2: Draw a figure wearing loose-fitting clothing with lots of
folds and creases. You may work from a photo (taken by you or someone
else).

Grading Criteria: 10 points total

__ (4pts) Realism: the objects and drapery in your drawing are the
correct shape and proportion.

__ (3pts) Range of value: your drawing has dark, light, and in-between shades.

__ (3pts) Use gradients, Each object has a highlight and shadow.

__ TOTAL SCORE

* RECOMMENDED READING:
Next week we will focus on drawing reflective objects.
It’s a tricky, detail-oriented activity, so start reading ahead this week.
Read chapters 10 and 11, and answer Questions 1-7 on p. 169 (metal),
and Questions 1-7 on p.184 (glass).