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)