jump to content

Course Description

This course introduces students to design production for websites. Students will design mock-ups using digital design software then implement the design as a website. Emphasis is placed on designing cross-browser compatible interfaces that optimize usability, accessibility, and enhance browser interoperability.

Recommended Textbook(s)

Recommended Reading

Technologies Required

  • Students should have a web server to post assignments and an internet connection
  • Mac or PC computers with internet connection
  • FTP program
  • Web page code editor that fosters the development of valid (X)HTML and CSS code
  • Image editing tool such as any of the following:
  • Internet Browsers

Competencies

Topic Competency Evaluation Methods
Introduction to Digital Design Production Define centimeters, ems, inches, pixels, and points and perform conversion to each.
  • Quiz 1
  • Final Exam
Identify the major components of a graphic design program: workspace, canvas, panels, tools, and file menu.
  • Quiz 1
  • Final Exam
Define color modes: Greyscale, RGB, and CMYK.
  • Quiz 1
  • Final Exam
Describe layers and how they aide organization.
  • Quiz 1
  • Final Exam
Use layer groups to organize layers
  • Quiz 1
  • Final Exam
Optimize PSD file organization for cohesive work with both small and large group teams
  • Quiz 1
  • Final Exam
Set up the workspace by specifying canvas dimensions, resolution, color mode and setting up guides, grids, snap and utilizing the layers, history, navigator, and info pallete.
  • Introduction to Digital Design Software
  • Final Exam
Create recorded optimization actions to be stored for quick optimization.
  • Final Exam
Optimizing Images for the Web Define dithering.
  • Dithering
  • Optimizing Images for the Web
  • Quiz 2
  • Final Exam
Define the following file types by explaining it's native program and default characteristics:
  • AI
  • BMP
  • EPS
  • GIF
  • JPG
  • PNG
  • PSD
  • SVG
  • TIF
  • Optimizing Images for the Web
  • Quiz 2
  • Final Exam
Define resolution and identify standards for print and for screen.
  • Quiz 2
  • Final Exam
Crop and resize images in order to optimize their appearance and filesize.
  • Optimizing Images for the Web
  • Final Exam
Define pixel and vector based images and compare to be able to choose an optimum program for the design needed.
  • Quiz 2
  • Final Exam
Principles of composition Define and describe the 7 elements of art: line, color, texture, shape, form, space, and value.
  • Quiz 3
  • Final Exam
Use the 7 elements of art to create visually sound aesthetics.
  • Quiz 3
  • Final Exam
Use the digital design program tools to demonstrate the 7 elements of art.
  • Quiz 3
  • Final Exam
Branding Define Color Scheme.
  • Quiz 4
  • Final Exam
Define logo, identity, and branding.
  • Quiz 4
  • Final Exam
Explain the meaning of colors, what feelings they evoke and how they can be used effectively in marketing.
  • Color Meaning
  • Forming an Identity
  • Final Exam
Use predefined color schemes when designing.
  • Color Scheming
  • Forming an Identity
  • Final Exam
Use typography to convey thoughts, feelings, and/or concepts through design.
  • A Personal Logo
  • Forming an Identity
  • Final Exam
Evaluate logos based on the the authors use of the 7 elements of design, color meaning, and conveyance of themes.
  • Logo Redesign
  • Final Exam
Creating website designs Use resources to study layout patterns and element patterns.
  • Design Patterns
  • Final Exam
Calculate websafe widths for layouts.
  • Final Exam
Choose an effective font and/or consider font image replacement methods.
  • Typography Case Study
  • Final Exam
Define and use whitespace effectively.
  • Wireframing
  • Final Exam
Define and create a wireframe which outlines the four essential elements of every web site(header, navigation, content, and footer).
  • Wireframing
  • Final Exam
Demonstrate the placement of the 4 core elements via usage of the grid system as a layout device.
  • Wireframing
  • Final Exam
Use a wireframe as the basis of a design, considering design patterns, color schemes, type (fonts) denoted, and Web widths.
  • Mock Up
  • Final Exam
Design for various states of interaction and behavior.
  • Mock Up
  • Final Exam
Transferring a design to the Web Save pieces of a web site design individually for use in styling.
  • Design Patterns 2
  • Final Exam
Set up a file structure which organizes the images.
  • Design Patterns 2
  • Final Exam

Assignments

Digital Design Production Assignment Rubrics

Course Blog

Setup a blog using WordPress, Blogger, or another comparable system. Each week of the course, write one blog post that expands upon the topics discussed in class or readings. Each post should be at least 200 words in length, and should contain images and links where appropriate.

Recommended: Subscribe to your classmates' blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.

Course Blog Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Blog Posts (evaluated weekly) Blog post was not published on time, is poorly written, does not contain content relevant to the course, or does not meet the post length requirement. Blog post was published on time, contains some spelling and/or grammatical errors, meets the post length requirement, but content is not very relevant to the course, or does not expand upon course topics. Blog post was published on time, contains no spelling and/or grammatical errors, meets the post length requirement, and the content expands upon course topics. Blog post is published on time, is very well written with no typos, grammar, or spelling errors, expands upon course topics, and exceeds the minimum post length. Post contains images where relevant to the content, and links to plenty of sources and resources.  

Introduction to Digital Design Software

  • Using the digital design program specified students will create a basic image with their name. All the while specifying specific details for the image and toggling panels, using guides and grids, and recording their progress with screen shots.
  • Final product is a MS Word document with various screen shots showing their progress from start to finish.
Introduction to Digital Design Software
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Word Processing Document Not turned in The final product does not show each panel, command, and direction as a screen shot; with no explanations The final product shows some panels, commands, and directions listed as a screen shot outlined with a weak explanation of each. The final product shows most panels, commands, and directions listed as a screen shot outlined with a brief explanation of each. The final product shows each panel, command, and direction listed as a screen shot outlined with an excellent explanation of each.

Dithering

  • Part 1
    • Find an image that demonstrates dithering.
    • Show the image at both regular size and show a zoomed sample of a dithered portion.
  • Part 2
    • Using the concepts of dithering create the illusion of a color.
    • Create a 20px × 20px size image at 72 px/in.
    • Fill the background with red.
    • Using the pencil tool and only blue to fill no more than one pixel at a time create the illusion of purple by overlaying a checkerboard effect.
    • Save the image.
    • Repeat process to create green and orange.
Dithering
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Part 1 - find an image No image submitted. The image does not demonstrate dithering but clips are shown at multiple sizes with no description. The image demonstrates dithering but no clips are shown and does include a brief description. The image demonstrates dithering and multiple clips are shown but there is no brief description. The image demonstrates dithering and multiple clips are shown showing both actual size and a zoomed area demonstrating dithering and has a brief description of the image.
Part 2 - create your own image No images submitted. Some of the image were completed but do not demonstrate dithering Some of the images were completed and demonstrate dithering through the combination of two primary colors. Three images are completed and demonstrate dithering but do not match the colors requested or are improper size. Three 20px × 20px images are completed demonstrating the effects of dithering by showing a purple , green, and orange canvas created by combining 2 colors.

Optimizing Images for the Web

  • Using the same base image create copies in other major formats.
  • Compare file size, dithering, and clarity.
  • Suggest an optimal format for the web and explain your choice.
Optimizing Images for the Web
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Image Formats No image is submitted The image is saved in 1 format The image is saved in some of the formats listed The image is saved in most of the formats listed The image is saved in all of the formats listed
Comparison The formats are not compared and no suggestion for optimal format is made Some of the formats are compared. A brief suggestion is made. Some of the formats are compared. A suggestion is made and defended. The formats are compared adequately. A suggestion is made and defended. The formats are compared citing differences in file size, dithering, and overall quality. A detailed suggestion is made and defended.

Color Meaning

  • Research essay/outline showing research on what colors mean.
  • Research should show research results on what feelings colors evoke and how colors can be used for effective marketing.
Color Meaning
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Essay The essay is not complete. No research is presented. The student shows that emotions are connected to colors and how color is used effectively in marketing. Minimal research is presented showing proven theory on color meaning and association. In addition, some material is presented showing what emotions are connected to colors and how color is used effectively in marketing. Research is presented showing proven theory on color meaning and association. In addition, material is presented showing what emotions are connected to colors and how color is used effectively in marketing. Thorough and complete research is presented showing proven theory on color meaning and association. In addition, material is presented showing what emotions are connected to colors and how color is used effectively in marketing.

Color Scheming

  • Students will pick a letter of the alphabet and create a grid of 9 sections on the canvas.
  • Each section will contain the letter but house a different color scheme. The students are given 4 color schemes to use and must choose 5 color schemes on their own. All portions including positive and negative space should be used when implementing the color scheme.
Color Scheming
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
9 section grid No work is submitted. The image shows a symbol with some different color schemes. The image is broken into sections and shows a symbol with 9 different color schemes. The image is broken into 9 sections with the same alpha-numeric symbol presented 9 times using the four color schemes mandated and five color schemes chosen. The image is broken into 9 obvious sections with the same alpha-numeric symbol presented 9 times using the four color schemes mandated and five color schemes chosen. Positive and negative space were used outstandingly and font choice was considered.

A Personal Logo

  • Students will create a personal logo.
  • The logo may only contain typographical elements and should use all the elements of art to create a visually sound piece.
  • The image should be optimized for the web.
  • A brief summary will be completed explaining the artists thought process and goals with the piece.
A Personal Logo
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Elements of Art No evidence of knowledge of the Elements of Art exists or the work was not submitted A logo was completed Some of the Elements of Art are used effectively to create a visually sound/cogent logo design The Elements of Art are used to create a visually sound/cogent logo design The Elements of Art are used effectively to create a visually sound/cogent logo design
Typographical Elements Type was not used. Type was used to create the Logo. The symbols chosen somewhat represent a single concept or theme Mostly Type was used to create the Logo. The symbols chosen somewhat represent the idea or concept the artist was trying to convey. Only Type was used to create the Logo. The symbols chosen satisfactorily represent the idea or concept the artist was trying to convey. Only Type was used to create the Logo. The symbols chosen outstandingly represent the idea or concept the artist was trying to convey.
Optimization A logo was not submitted. The image is submitted in its original format. The image is not optimized, but the logo was submitted in a format aside from its native. The image is optimized in a format. The image is optimized in the best format available considering the logo's size, amount of colors, and complexity.
Native File Organization & Naming Conventions Layers and Folder Groups were not used. Layers do not have human readable names and little thought was given to organization. Layers have names. Folders are used. Layers have human readable names. Folders are used to group objects and overall the document is satisfactorily organized. Layers are named according to what they contain with human readable names. Folders are used to group like objects and overall the document is organized.
Executive Summary The summary is not submitted. The summary is incomplete or incoherent. The summary is written with many spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with some spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with no spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement.

Logo Redesign

  • Students will find 2 effective logos and 1 ineffective logo on the logo resource website http://logopond.com.
  • Students will justify their answers by identifying concepts that make the logo good or in need of work.
  • Students will suggest methods to increase effectiveness of the one ineffective logo.
Logo Redesign
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Redesign Suggestions No work was submitted. At least one logo is submitted and reviewed. The review is limited or incoherent. A document is submitted with the 3 logos and an executive summary for each. The logos are not labeled. The summaries explain concepts that make them effective or ineffective while not citing elements of art, type, and color theory. A document is submitted with the 3 logos and an executive summary for each. The 3 logos are classified as effective/ineffective and are clearly labeled as such. The summaries explain concepts that make them effective or ineffective citing some elements of art, type, and/or color theory. A document is submitted with the 3 logos and an executive summary for each. The 3 logos are classified as effective/ineffective and are clearly labeled as such. The summaries explain concepts that make them effective or ineffective citing elements of art, type, and/or color theory. Two logos are classified as effective and one is ineffective.  

Forming an Identity

  • Students will create an identity for LP Paper
  • Company Bio:
    • LP Paper is an established cardboard distributor located in Boston, Massachusets. LP Paper creates and distributes cardboard boxes. They provide boxes for large corporations who then customize the material and use for packaging.; LP Paper wishes to expand their services internationally and understands the importance of branding. They have been in the business for over 50 years and want to convey trustworthiness, quality, and honesty.
  • LP Paper has commisioned you with the task of creating their new identity.  Other than items listed in the bio they are allowing you to make executive decisions in regard to color scheme, composition, layout, etc.
  • Aside from the logo itself you will need to create a presentation explaining your final product.  It should defend your work as meeting the standards set forth.
Forming an Identity
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Logo No logo waqs submitted. The logo is incomplete and/or conveys an unclear theme. Elements of art were not considered when developing the logo. The logo sparingly uses the elements of art, color, and type satisfactorily to convey the themes provided. The logo uses the elements of art, color, and type satisfactorily to convey the themes provided. The logo uses the elements of art, color, and type effectively to convey the themes provided.  
Native File Organization & Naming Conventions Layers and Folder Groups were not used. Layers do not have human readable names and little thought was given to organization. Layers have names. Folders are used. Layers have human readable names. Folders are used to group objects and overall the document is satisfactorily organized. Layers are named according to what they contain with human readable names. Folders are used to group like objects and overall the document is organized.
Presentation - Executive Summary The summary is not submitted. The summary is incomplete or incoherent. The summary is written with many spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with some spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with no spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement.

Design Patterns

  • Students will create an account at http://patterntap.com.
  • Students will then create a user set for a design pattern of choice (ie: bold fonts, paper backgrounds, small font). The design pattern should be unique.
  • Students will share their user set with others 2 other students in class.
Design Patterns
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Design Pattern User Set No design set was created. A design set was created but the items included are disjointed and do not convey a unified theme. A design set was created that attempts to capture a theme or concept. Some of the items included in the set represent a unified idea. A design set was created that satisfactorily captures a theme or concept. Most of the items included in the set represent a unified idea. A design set was created that successfully captures a theme or concept. All of the items included in the set represent a unified idea.  

Typography Case Study

  • Students will study 4 fonts by conducting a typography study of each in order to pick a base font for the upcoming wireframe in Assignment 11.
  • Each font should be on a separate sheet (paper dimensions determined by professor)
  • Each study will
    • clearly show the font name
    • show the alphabet in two sizes
    • each size with a capitalized version and a lowercase version
    • modifications of the base font (ie: italic, bold) in a single word or letter
  • Other considerations
    • type direction (vertical, diagonal, etc)
    • type orientation (upside down, upright, etc)
    • color
  • The result should be an aesthetically pleasing poster.
Typography Case Study
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Font Study A study of four fonts was not completed. The study is incomplete for each font or the study does not cover four fonts A study of four fonts is presented. Each study presents the font with some of the following the font name, the alphabet in two sizes, each with an uppercase and lowercase version, and italic and bold letters, words, or phrases are shown. No studies show variation of type direction, orientation, and color. A study of four fonts is presented. Each study presents the font name, the alphabet in two sizes, each with an uppercase and lowercase version, and italic and bold letters, words, or phrases are shown. Some studies show variation of type direction, orientation, and color. A study of four fonts is presented. Each study presents the font name clearly labeled, the alphabet in two sizes, each with an uppercase and lowercase version, and italic and bold letters, words, or phrases are shown. All studies show variation of type direction, orientation, and color.  
Elements of Art No evidence of knowledge of the Elements of Art exists or the work was not submitted A work was completed, but shows little evidence of the Elements of Art. Some of the Elements of Art are used effectively to create a visually sound/cogent design The Elements of Art are used to create a visually sound/cogent logo design The Elements of Art are used effectively to create a visually sound/cogent logo design
Native File Organization & Naming Conventions Layers and Folder Groups were not used. Layers do not have human readable names and little thought was given to organization. Layers have names. Folders are used. Layers have human readable names. Folders are used to group objects and overall the document is satisfactorily organized. Layers are named according to what they contain with human readable names. Folders are used to group like objects and overall the document is organized.
Executive Summary The summary is not submitted. The summary is incomplete or incoherent. The summary is written with many spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with some spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with no spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement.

Wireframing

  • Students will read Redesigning the Expression Engine Site by Jesse Bennett-Chamberlain.
  • Students will create 2 wireframe comps for LP Paper homepage.
  • Each comp will place the four key elements (header, navigation, content, and footer).
  • The comps should loosely show the design pattern of each element.
  • Color scheme should match the logo created earlier.
  • Color scheme, layout width, type, and design patterns should be noted.
  • Students should cite inspiration references.
Wireframing
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Wireframes No wireframes are submitted. One wireframe is presented. PLacement of key elments is unclear, sub sections are not included. Color, font, width, and design patterns are not included or are included sparingly. No references are cited. Two wireframes are presented satisfactorily placing the header, navigation, content, and footer; sub sections or pseudo sections are not included. A color scheme is suggested but does not necessarily match the logo; colors are used in the wireframe. Some of the following criteria are given: layout width is specified, a font family is suggested, and design patterns of key elements are shown. Inspiration references are not cited or unclear. Two wireframes are presented satisfactorily placing the header, navigation, content, and footer; sub sections or pseudo sections are added where needed. A color scheme is suggested plays on the scheme used for the logo; some color is used in the wireframe. Layout width is specified (or a grid was used), a font family is suggested, and design patterns of key elements are shown. Inspiration references are cited. Two wireframes are presented effectively placing the header, navigation, content, and footer; sub sections or pseudo sections are added where needed. A color scheme is suggested that matches or plays on the scheme used for the logo but not used in the wireframe, shades of grey are used in lou of color. Layout width is specified (or a grid was used), a font family is suggested, and design patterns of key elements are shown. Inspiration references are cited.  
Native File Organization & Naming Conventions Layers and Folder Groups were not used. Layers do not have human readable names and little thought was given to organization. Layers have names. Folders are used. Layers have human readable names. Folders are used to group objects and overall the document is satisfactorily organized. Layers are named according to what they contain with human readable names. Folders are used to group like objects and overall the document is organized.
Executive Summary The summary is not submitted. The summary is incomplete or incoherent. The summary is written with many spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with some spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with no spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement.

Mock Up

  • Students will create a design for the LP Paper homepage based upon one of the wireframes created in Assignment 10.
  • Students should consider all of the following items created thus far
    • Logo/Identity
    • Wireframe
    • Color Scheme
    • Design Patterns
    • Widths
    • Type
    • Whitespace
  • All work thus far should be considered the basis for this design and should be followed closely with little straying.
Mock Up
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Mock Up No mock up is submitted. The mock up is incomplete or does not follow the pattern presented from Forming an Identity and Wireframing Assignments. A mock up is presented in its native format that satisfactorily culminates the previous assignments. The mock up shows what each section of the wireframe will look like as a completed webpage. Color, whitespace, and Digital Design techniques were attempted to produce a final composition. A mock up is presented in its native format that satisfactorily culminates the previous assignments. The mock up shows in detail what each section of the wireframe will look like as a completed webpage. Color, whitespace, and Digital Design techniques have been used effectively to produce a final composition. A mock up is presented in its native format that successfully culminates the previous assignments. The mock up shows in high detail what each section of the wireframe will look like as a completed webpage. Color, whitespace, and Digital Design techniques have been used effectively to produce a complete, cogent work.  
Native File Organization & Naming Conventions Layers and Folder Groups were not used. Layers do not have human readable names and little thought was given to organization. Layers have names. Folders are used. Layers have human readable names. Folders are used to group objects and overall the document is satisfactorily organized. Layers are named according to what they contain with human readable names. Folders are used to group like objects and overall the document is organized.
Executive Summary The summary is not submitted. The summary is incomplete or incoherent. The summary is written with many spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with some spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with no spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement.

Design Patterns 2

  • Students will create a design pattern library for the LP Paper Homepage Design.
  • Students will 'break apart' the design for a Front-End Engineer.
  • The design patterns should be saved in four sections (heading, navigation, content, and footer)
  • Each section should have each image separated and labeled. For example, if the navigation items have a background image or color it should be presented and labeled "Main navigation bg'.
  • See Yahoo! Design Pattern Stencil Library as another example of final product and feel free to use.
  • File(s) should be saved in native format for ease of use by Front-End Engineer.
Design Patterns 2
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Design Patterns No design patterns are submitted. A design pattern is submitted that loosely organizes the patterns needed to complete the transfer process from a mock up to HTML/XHTML. None or few elements that require attention from the Front-End Developer have been itemized. A design pattern is submitted in its native format that organizes the patterns needed to complete the transfer process from a mock up to HTML/XHTML. Some elements that requires attention from the Front-End Developer has been itemized. A design pattern is submitted in its native format that separates, outlines, and labels the patterns needed to complete the transfer process from a mock up to HTML/XHTML. Most elements that requires attention from the Front-End Developer has been itemized. A design pattern is submitted in its native format that clearly separates, outlines, and labels the patterns needed to complete the transfer process from a mock up to HTML/XHTML. Each element that requires attention from the Front-End Developer has been itemized.  
Native File Organization & Naming Conventions Layers and Folder Groups were not used. Layers do not have human readable names and little thought was given to organization. Layers have names. Folders are used. Layers have human readable names. Folders are used to group objects and overall the document is satisfactorily organized. Layers are named according to what they contain with human readable names. Folders are used to group like objects and overall the document is organized.
Executive Summary The summary is not submitted. The summary is incomplete or incoherent. The summary is written with many spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with some spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement. The summary is written with no spelling or grammar mistakes. The sentences explain the artists goals and agenda while developing this work while citing difficulties and how they were addressed. A final evaluation of the work is included citing goals met and areas for improvement.

Examination Questions

Introduction to Digital Design Production

  • Order the following units by size of 1 unit: centimeters, ems, inches, pixels, and points.
  • What is the color mode for on screen art work? Why?
  • What is the color mode for printed art work? Why?
  • Of the following terms choose 3 and define, describe, and explain its importance: canvas dimensions, resolution, color mode and setting up guides, grids, snap, and utilizing the layers, history, navigator, and info pallete.
  • Explain the steps to creating a recorded set of instructions (referred to as an "action" in Photoshop)
  • Describe best practices when working with a group on a Digital Design Production project, specifically items that can be completed in Photoshop to enhance cohesiveness.
  • Why is it important to use appropriate and meaningful naming conventions with layers. How do layer groups enhance this?

Optimizing Images for the Web

  • Explain dithering. When and why does it happen? Is it a problem? Defend your answer.
  • Choose 5 picture formats from the ones listed. For each, define the acronym, define the term, briefly discuss advantages and disadvantages to the file type and when the file type should be used.
    • AI
    • BMP
    • EPS
    • GIF
    • JPG
    • PNG
    • PSD
    • SVG
    • TIF
  • What are the standard resolutions for on screen and print work? Why are they different?
  • What is a vector based digital design program? Give an example.
  • What is a pixel based (raster) digital design program? Give an example.
  • What does image optimization mean? Why is this important in designing for the web?
  • Explain your preferred image format, citing optimization benefits.

Principles of Composition

  • List and explain the 7 elements of art. Draw an example of each.

Branding

  • Describe what a color scheme is and its impact.
  • List 3 common color schemes and give an exmaple of each.
  • Why is color so important?
  • Compare and contrast each: logo, identity, and branding.
  • Critique the following logos. Be sure to comment on the 7 elements of art, color, use of type, and conveyance of themes. Give 3 logos.
  • Draw "hep" in a serif style. Label the baseline, x-height, counter, ascender, descender, shoulder, stem, and serifs.
  • What is a kerning pair? Explain.
  • Explain type considerations. Is it an element or simply text?

Creating Web site designs

  • Draw 2 common website layouts merely by outlining the required sections of every website. Be sure to label each.
  • In regard to building website layouts, what is a grid and how is it used?
  • A friend tells you she is going to begin designing sites with a 960 grid, help her defend her argument.
  • A friend tells you he is going to continue designing sites with a 760 grid, help him defend his argument.
  • If you choose to use a non-widely supported typeface on your site what are your options to ensure cross browser/system compatibility.
  • Describe the elements of a wireframe.
  • What are states of interaction and how would you show them on a wireframe?
  • Explain why emphasis is placed on a wireframe to mockup methodology.

Transferring a design to the Web

  • Draw a folder heirarchy you would suggest for a new website project. In a few sentences explain your choices.
  • Explain Digital Design Tools that enhance your ability to break apart a mock up.
  • Explain image transparency issues and methods for combatance.
  • List one browser compatibility issue. Cite the browser name, version (if applicable), and explain the issue.

Introduction to SVG

  • Define SVG and briefly describe the technologies used.

Using CSS to achieve style

  • Write a style rule to make the blue.png file tile vertically on the body background starting at the top left.
  • Write a style rule to convert a vertical unordered list to a horizontal list.
  • Write a style rule to add a bullet style image (blue.png, 15px × 15px) to a link in an unordered list.

Resources

Learning Modules

Help us develop our living curriculum. Contribute a learning module.

Contributors

Primary Course Developer: Jeffrey Brown