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

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

Design Layout – Week 7

Topics: Wallpaper Graphics
Lab / Activity: Creating repeating images for web backgrounds.
Homework Due this week: HW#5: Music Client Research & Home Page Design
Homework due next week: HW#6: Music Client – Store, Photos & Discography Pages

Design Layout for Interactive Media
Assignment #6: Music Client – Store, Photos & Discography Pages

Design 3 more pages for your Music Client’s website.
Match the style of the page you made last week: use the same basic layout, colors and fonts.

Design the following pages:
- Photos Page: include at least 8 photo “thumbnails”.
- Store Page: include images of albums, t-shirts, etc & description of each.
- Discography: A listing of albums or tracks, with album artwork.

All Pages Should include:
- Site ID with the name of the musician or band.
- Navigation menu with at least 5 options: (eg. Home, Discography, Biography, Photos, Contact)

Grading: 10 points total.

Music Page Designs
__ (2) Required details are present.
__ (2) Color Scheme relates to your Client’s Theme.
__ (2) Imagery and Emphasis are relevant to the theme of the site.
__ (2) Elements are aligned to a consistent grid.
__ (2) Text is legible and in a font relating to your Client’s Theme.

__ Total out of 10 points

Additional Office Hours

I’ve made additional time available for tutoring, critiques, and questions.

Fridays, 5:30-7pm
Room #165

Please email me in advance if you intend to stop by:
lcesari@aii.edu
If you need tutoring but cannot schedule during this time or my other available time (Thursday 3-5pm), please email me to schedule an alternate time.

Design Layout: Week 6

Topics: Web Color Systems, Slicing Images for Web
Lab / Activity: Template lab: Web color codes, slicing & optimization
Homework due this week: HW#4: Corporate Client Stationery Package
Homework due next week: HW#5: Music Client Research & Home Page Design

Assignment #5: Music Client Research and Home Page Design

Part 1: Client
For the rest of the quarter, your client is a band or musician of any type of music.
Your client can be someone you know, an existing band or musician you like,
or an imaginary band of your creation.

You will be working with this client for 5 weeks, eventually creating a series of page designs and a CD or DVD package that goes with the client’s theme.

Your client should have a distinct Style or Theme: (for example “Acoustic Rock”, “1920’s-Style Big Band Music”, “Classic Punk”, “Ambient Electronica” etc.)

A) Define your Client:
1) Name:
2) Describe the style of music:
3) Collect 5 images that fit with your client’s Theme or Style.

B) Write: Describe the Audience / Target Market: (1 short paragraph)
What type of person would like this music?
1) Gender: men, women or both.
2) Age group: children, teens, adults, parents, or any combination.
3) Style / Culture: what is common of fans of this music?

Part 2: Style Research & Analysis
Find 3 band or musician sites that appeal to the same type of audience as your client.
(for example, if your client is a Bluegrass band, look up 3 other Bluegrass bands.)

A) Take Screenshots
Take at least 2 screenshots of each example you analyze.

B) Analysis: Describe the following for each site: (1 short paragraph)
1) Color palette (monochromatic, analogous, bright, subdued, etc.)
2) Fonts (simple, elegant, artistic, rough, clean, light, bold, etc.)
3) Layout (How have they organized their site elements?)

Part 3: Home Page Design – (.jpg, .pdf, or .png with “browser chrome” border)
- Message: include a welcome message, announcement, blog, or artistic statement.
- Site ID with the name of the musician or band.
- Navigation menu with at least 5 options: (eg. Home, Discography, Biography, Photos, Contact)

Grading: 10 points total.

Part 1: The Client
__ Define Your Client
__ 5 images that fit with the client’s theme
__ Describe Your Client’s Audience

Part 2: Style Research & Analysis
__ Research: Collect screenshots of similar artists’ sites
__ Analysis: Description of screenshots.

Part 3: Home Page Design
__ Required details are present.
__ Color Scheme relates to your Client’s Theme.
__ Imagery and Emphasis are relevant to the theme of the site.
__ Elements are aligned to a consistent grid.
__ Text is legible and in a font relating to your Client’s Theme.

__ Total out of 10 points

Design Layout – Week 5

Topics / Reading: Layout Systems for Web and Print, Print Templates, Optimizing .JPG and .GIF files for web
Lab / In-class activity: Presentations of HW#2, Layout Systems, Templates, Optimizing .JPG and .GIF files for web
Work due this week: HW#3: Corporate Client: 2 Alternate Comps
Homework for next week: HW#4: Corporate Client: Bus.Card & Stationery Design

Design Layout for Interactive Media
Homework #4: Corporate Client: Stationery Design

Use the templates provided in class to create a business card, letterhead, and envelope design for your Corporate Client. Match one of the comps you created in the last 2 weeks.

Include the following information:
Business Card: Company Name, Logo, Phone & Email information for one employee.
Letterhead: Company Name, Logo, Address, General company phone, fax, & email info.
Envelope: Company Name, Logo, Address in top left corner.

Considerations:

1) Bleed Margin: the red lines around the edges of the template signify the areas of the design that might be cut off: make sure all important information is within the red lines. However, the edges are not always cut exactly, so if your design has a background texture or image, it should extend outside the lines.

2) Space to Write: The business card can be completely filled with graphics and information. However, when designing the letterhead and envelope, make sure to leave blank space for the letter and address.

3) Unity: Use the same logo and imagery on all 3 print pieces. These should look like they all belong together.

Grading: 10 points total.

__ (2) Style: match the best of your corporation’s web design comps.
__ (2) Unity: All 3 pieces feature the same style, logo and imagery.
__ (2) Alignment & Spacing are consistent and professional.
__ (2) Typography is legible, Fonts are consistent.
__ (2) Templates are used correctly: consider bleed margins & writing space.

__ Total out of 10 points

School Closure Update

The school was closed during Week 4 (Oct.22-27), due to the county-wide fire emergency.

We will be continuing on with the Week 4 class content during Week 5 (Oct.29-Nov.3).

Assignments due Week 4 are now due Week 5.

I will note any changes to the course content and deadlines in class Week 5.

Design Layout: Week 3

Topics: Fundamentals of Navigation, Photoshop Review
Lab / In-class activity: Navigation Types and Styles, Creating a Series of Compositions,
Work due this week: Corporate Client Analysis & 1 Complete Design Composition
Homework for next week: Corporate Client: 2 Alternate Designs

Assignment #3: Corporate Client – 2 More Design Compositions

Imagine that your Corporate Client likes your first Design and they would like to see what other options you can present to them. They have asked you to create 2 other versions of the design, so that they can present them to the Board of Directors, who will choose one of the three for the final design.

This process is called creating “Comps” (short for “Complete” designs, or design “Compositions”).

Clients will often ask for a Series of Comps: a number of different designs showing various options for layout, color, imagery, etc.

The Designer presents the Series of Comps to the Client, and the client will choose a favorite, or sometimes they will want to combine elements from 2 of the comps to create a new design.

The process opens a dialogue about the design, and lets the Designer and the Client communicate about the project and ensure that the client is getting what they want.

Your Assignment: Create 2 Additional Comps for your Corporate Client’s site.
- Use 2 different Layouts
- Use 2 different Color Schemes
- Use different Imagery on each design (photos and artwork)
- You may use the same Company Logo in both designs
- Turn in your work as .JPG, .PNG, or .PDF files.

Content: Include the following:
- Company Name and Logo
- Imagery relating to the company’s theme (Graphics, Photos, or both).
- Navigation Menu with at least 5 navigation categories.
- Text: Company Mission Statement, Slogan, News, or Welcome Message.

Style Guidelines: “Corporate Minimal”
1) Color: Subdued, minimal color palette:
- White and Gray with Dark or Pastel accent color
- Minimal use of Saturated Bright colors
- Main Information Area should have a white or light-colored background

2) Fonts: Simple, legible fonts:
- Classic or Minimalist fonts for Large Text in Header & Titles.
- Simple, Legible font for small print content.
- Dark text on light background for small print content.

3) Shapes: Linear, Clean and Simple
- Rectangular shapes, right angles.
- Thin, simple, elegant lines.
- No curves, or minimal use of curve: smooth, regular curves or round edges.

4) Accessibility: All users
- Site should be a maximum of 800 pixels wide
- Display your site in a “browser chrome” border

Grading: 10 points total

Design Composition #2
__ Emphasis: Site has a relevant “first read” that draws your attention
__ Imagery is relevant to company theme
__ Linear Grid, Simple Shapes
__ Subdued, Minimal Color Palette
__ Fonts: Classic, Minimal, Legible

Design Composition #3
__ Emphasis: Site has a relevant “first read” that draws your attention
__ Imagery is relevant to company theme
__ Linear Grid, Simple Shapes
__ Subdued, Minimal Color Palette
__ Fonts: Classic, Minimal, Legible

__ Total out of 10 points

Design Layout: Week 2

Topics: Layout Grids, Web Layout Schemes & Considerations
Lab / In-class activity: Using the Guides & Grid in Adobe Software
Work due this week: Site Design Analysis
Homework for next week: Corporate Client Analysis & 1 Complete Design Composition

Assignment #2: Corporate Client Design Analysis & 1 Composition (10pts)

For the next 2 weeks, you will be working with a corporate client, striving to look Serious, Businesslike, Up-to-date, and Successful. This week, define your client, find inspirational examples, and create a design composition.

Choose one of the following clients:
- Law Firm
- Medical or Dental Office
- Architecture Firm
- Real Estate Agency

Part 1: Define Your Client

1) Name:
2) Type of business:
3) Collect 5 images that fit with your client’s Theme.

Part 2: Style Research & Analysis
A) Collect 3 Screenshots: (Good Examples)

Research sites of the same business category as your client.
For example, if your client is a Law Firm, look up other Law Firms.

Find 3 sites that impress you, and take a screenshot of each site.

B) Analysis: Describe the following for each site:
1) Color palette (monochromatic, analogous, bright, subdued, etc.)
2) Fonts (simple, elegant, artistic, rough, clean, light, bold, etc.)
3) Emphasis & Hierarchy (What do you notice first? second? third?)
4) Strengths: What makes this site great? What is working well?

5) Inspiration: What in this design inspires you? What aspects do you hope to bring to your client?

Part 3: Create 1 Digital Design Composition for your Client’s Homepage
Create a design composition using Photoshop or Illustrator.
Turn in your design as a .jpg, .png, or .pdf file.

Content: Include the following:
- Company Name and Logo
- Imagery relating to the company’s theme.

- Navigation Menu with at least 5 navigation categories.
- Text: Company Mission Statement, Slogan, News, or Welcome Message.

Style Guidelines: “Corporate Minimal”

1) Color: Subdued, minimal color palette:
- White and Gray with Dark or Pastel accent color
- Minimal use of Saturated Bright colors
- Main Information Area should have a white or light-colored background

2) Fonts: Simple, legible fonts:
- Classic or Minimalist fonts for Large Text in Header & Titles.
- Simple, Legible font for small print content.
- Dark text on light background for small print content.

3) Shapes: Linear, Clean and Simple
- Rectangular shapes, right angles.

- Thin, simple, elegant lines.
- No curves, or minimal use of curve: smooth, regular curves or round edges.

4) Accessibility: All users
- Site should be maximum of 800 pixels wide
- Display your site in a “browser chrome” border

Grading: 10 points total

Part 1: The Client
__ Define Your Client
__ Collect 5 stock images that fit with the client’s theme

Part 2: Style Research & Analysis
__ Collect 3 good examples (screenshots)

__ Analysis of 3 good examples

Part 3: Design Composition
__ All required content is present, design is turned in as a .jpg, .png, or .pdf file.
__ Emphasis: Site has a relevant “first read” that draws your attention
__ Imagery is relevant to company theme
__ Linear Grid, Simple Shapes
__ Subdued, Minimal Color Palette
__ Fonts: Classic, Minimal, Legible

__ Total out of 10 points

Design Layout – Week 1

Topics / Reading: Introduction, Using School Resources
Lab / In-class activity: Fundamentals of Design on the Web
Homework for next week: HW#1: Site Design Analysis

Resources:
Corbis Educational Image Bank, iStockPhoto, Lorem Ipsum Dummy Text

Web Design Inspriation:
Design Interact Site of the Week, Digital Thread, Webby Awards,
Smashing Magazine Design Showcase:Beautiful, Simple, Fresh & Clean, Dark.

Assignment #1: Site Analysis: (10pts total)
Due at the beginning of class week 2.

1) Conduct a web search for the site category given to you in class: (2pts)
- Find 3 “good” examples: well-designed sites following fundamental design concepts.
- Find 3 “bad” examples: poorly-designed sites NOT following fundamental design concepts.

2) For each example, write a short paragraph (3-5 sentences): (6pts)
- Explain why each good design is successful – mention at least 3 design concepts.
- Explain why each poor design failed – mention at least 3 design concepts.
- Use clear, specific language to construct complete, coherent sentences.

Consider the following fundamental design concepts:
Principles: Unity, Emphasis, Hierarchy, Balance, Alignment, Contrast, Rhythm
Elements: Line, Shape, Color, Value, Texture, Size, Space.

3) Required Formats: (2pts)
- 1 Screenshot of each site.
- Digital text document (word file) with links to each site.

*Taking a screenshot:
- MAC: Apple + Shift + 4
(drag crosshairs around desired area, screenshot will appear on the desktop)

- PC: Alt + PrtScn
(copies the current screen to the clipboard, paste into photoshop and save as a .JPG or .PNG file)

Grading: 10 points total

1) Collecting Examples: (2pts)
__ 3 Good Sites (screenshots)
__ 3 Bad Sites (screenshots)

2) Written Analysis: 3-5 sentences analyzing each design (6pts)
__ Good Design #1 is analyzed clearly, using appropriate design terms.
__ Good Design #2 is analyzed clearly, using appropriate design terms.
__ Good Design #3 is analyzed clearly, using appropriate design terms.
__ Bad Design #1 is analyzed clearly, using appropriate design terms.
__ Bad Design #2 is analyzed clearly, using appropriate design terms.
__ Bad Design #3 is analyzed clearly, using appropriate design terms.

3) Format: (2pts)
__ 1 Screenshot and 1 Printout of Each Site
__ Digital text document (word file) with links to each site

__ Total out of 10 points