Web Design

Prof. Ian Besler

Web
Design 2

GR DES 66 |

Prof. Ian Besler

Modules

: Introduction

: Introduction
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: Class Introduction, HTML, Markup, Page Sourcing, and the Web
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: Basic <html> Tags
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: Basic <html> Tags (Download HTML Files)
  4. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
    1. Textbook Reading: “Introduction” from Resilient Web Design () by Jeremy Keith
    2. Textbook Reading: “Chapter 1: Foundations” from Resilient Web Design () by Jeremy Keith
  5. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
    1. Emoticon, Emoji, Text II: Just ASCII” from Rhizome () by Tom McCormack.
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Exercise #1: “Just ASCII About Me”
    2. Video Tutorial: Making ASCII Art

: Web Basics

: Web Basics
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: Web Basics, HTML + CSS Stylesheets
    2. Lecture Slides: HTTP and FTP
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorials 🤩 🤩 🤩
    1. Video Tutorial: Linking HTML and CSS
    2. Video Tutorial: Basic Multi-Page Navigation
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Websites 🖥 🖥 🖥
    1. Demo Website: Linking HTML and CSS (Download HTML/CSS Files)
      1. Step-by-Step Instructions: Linking HTML and CSS
    1. Demo Website: Basic Multi-Page Navigation (Download HTML/CSS Files)
      1. Step-by-Step Instructions: Basic Multi-Page Navigation
  4. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
    1. Chapter 2: Materials” from Resilient Web Design () by Jeremy Keith
  5. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
    1. As We May Think” from The Atlantic () by Vannevar Bush
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #1: Market Research

: CSS Basics

: CSS Basics
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: CSS Box Model
  2. ➔ ➔ ➔ REVIEW This Week’s Technical Cheatsheets 🤔 🤔 🤔
    1. Technical Cheatsheet: HTML5 Semantic Tags (Download HTML/CSS Files)
    2. Technical Cheatsheet: Block-Level and Inline Elements (Download HTML/CSS Files)
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: DIVS, ID and Class Attributes (Download HTML/CSS Files)
  4. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
    1. Chapter 3: Visions” from Resilient Web Design () by Jeremy Keith
  5. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Exercise #2: “Getting to Know U(RL)”

: Page Composition

: Page Composition
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: CSS Page Composition
    2. Lecture Slides: Colors and Images
    3. Lecture Slides: Web Typography
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: Basic HTML and CSS Page Composition
    2. Video Tutorial: Web Fonts
  3. ➔ ➔ ➔ REVIEW This Week’s Technical Cheatsheets 🤔 🤔 🤔
    1. Technical Cheatsheet: CSS Colors (Download HTML/CSS Files)
    2. Technical Cheatsheet: CSS Fonts (Download HTML/CSS Files)
    3. Technical Cheatsheet: CSS Dimensions (Download HTML/CSS Files)
    4. Technical Cheatsheet: CSS position Property (Download HTML/CSS Files)
    5. Technical Cheatsheet: CSS float Property (Download HTML/CSS Files)
    6. Technical Cheatsheet: CSS border-radius Property (Download HTML/CSS Files)
  4. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
    1. Chapter 4: Languages” from Resilient Web Design () by Jeremy Keith
  5. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
    1. 7 Practical Tips for Cheating at Design” from Refactoring UI () by Adam Wathan & Steve Schoger
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #2: Sitemap

: “D for DIV” Art Forgery with CSS3

: “D for DIV” Art Forgery with CSS3
  1. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: “D for DIV”: Peter Halley Laws of Rock
  2. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: Peter Halley Laws of Rock (Download HTML/CSS Files)
      1. Step-by-Step Instructions: “D for DIV”: Peter Halley Laws of Rock
  3. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
    1. Bonus Demo Website: “D for DIV”: Peter Halley Primary (Download HTML/CSS Files)
      1. Bonus Video Tutorial: D for DIV: Peter Halley Primary
  4. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
    1. Chapter 5: Layers” from Resilient Web Design () by Jeremy Keith
  5. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Exercise #3: “D for DIV: Art Forgery with CSS3”

: Responsive Web Design (RWD)

: Responsive Web Design (RWD)
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Lecture Slides: Responsive Web Design (RWD)
  9. Demo: CSS3 @media Rule Media Queries (Download HTML/CSS Files)
    1. Step-by-Step Instructions: CSS3 @media Rule Media Queries
    2. Video Tutorial: CSS3 @media Rule Media Query Breakpoints
  10. Additional Resource:
    1. A Complete Guide to CSS Media Queries,” from CSS Tricks
  11. Advanced Demo: Image Sizes with CSS3 @media Rules (Download HTML/CSS Files)
  12. Readings:
    1. Responsive Web Design” by Ethan Marcotte from A List Apart
  13. Lecture Slides: Responsive Web Design (RWD)
  14. Demo: CSS3 @media Rule Media Queries (Download HTML/CSS Files)
    1. Step-by-Step Instructions: CSS3 @media Rule Media Queries
    2. Video Tutorial: CSS3 @media Rule Media Query Breakpoints
  15. Additional Resource:
    1. A Complete Guide to CSS Media Queries,” from CSS Tricks
  16. Advanced Demo: Image Sizes with CSS3 @media Rules (Download HTML/CSS Files)
  17. Readings:
    1. Responsive Web Design” by Ethan Marcotte from A List Apart

: Single-Page Scrollers

: Single-Page Scrollers
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Lecture Slides: Pagination, Single-Page Scrolling
    1. Shared Research Document: Single-Page Scroll
  9. Demo: Single Page Scroller with On-Page Bookmark Links (Download HTML/CSS Files)
    1. Step-by-Step Instructions: Single Page Scroller
    2. Video Tutorial: Single Page Scroller
  10. Advanced Demo: Drop-Down Menus with CSS (Download HTML/CSS Files)
  11. Readings:
    1. Chapter 3: Visions” from Resilient Web Design () by Jeremy Keith

: Transforms and Transitions

: Transforms and Transitions
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Lecture Slides: CSS3 transform Property and transition Property
    1. Demo: CSS3 transform Property (Download HTML/CSS Files)
    2. Demo: CSS3 transform Property with :hover (Download HTML/CSS Files)
  9. Demo: CSS3 transition Property (Download HTML/CSS Files)
    1. Step-by-Step Instructions: CSS3 transition Property
    2. Video Tutorial: CSS3 transform and transition Properties
  10. Advanced Demo: Photo Gallery with CSS3 transition Properties (Download HTML/CSS Files)
  11. Lecture Slides: Web Prototyping, Wireframing
  12. Readings:
    1. The Ultimate Guide to Proper Use of Animation in UX,” from UX Collective () by Taras Skytskyi.

: Functional Animation

: Functional Animation
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Lecture Slides: Functional Animation
  9. Demo: CSS3 @keyframes Rule Animations (Download HTML/CSS Files)
    1. Step-by-Step Instructions: CSS3 @keyframes Rule Animations
    2. Video Tutorial: CSS3 @keyframes Rule Animations
  10. Advanced Demo: Spinning Sticks CSS3 Animation Exercise (Download HTML/CSS Files)
  11. Advanced Demo: Single Page Scroller with Animated Nav (Download HTML/CSS Files)
    1. Step-by-Step Instructions: Single Page Scroller with Animated Nav
  12. Readings:
    1. Chapter 4: Languages” from Resilient Web Design () by Jeremy Keith

: jQuery Basics

: jQuery Basics
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Lecture Slides: JavaScript, jQuery, HTML <script> tag
    1. Video Tutorial: jQuery Basics
    2. Cheatsheet: jQuery Mouse Action Events (Download HTML/CSS Files)
  9. Demo: jQuery background-color buttons (Download HTML/CSS Files)
    1. Step-by-Step Instructions: jQuery background-color buttons
  10. Demo: jQuery Emoji Story 😃😃😃 (Download HTML/CSS Files)
    1. Step-by-Step Instructions: jQuery Emoji Story 😃😃😃

: jQuery Mobile Navigation

: jQuery Mobile Navigation
jQuery Mobile Navigation
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Lecture Slides: Navigation Drawers
  9. Demo: jQuery Side Drawer “Hamburger Button” Menu (Download HTML/CSS Files)
    1. Step-by-Step Instructions: jQuery Side Drawer “Hamburger Button” Menu
    2. Video Tutorial: jQuery Side Drawer “Hamburger Button” Menu
  10. Advanced Demo: Animated Hamburger Button (Download HTML/CSS Files)
  11. Readings:
    1. Chapter 5: Layers” from Resilient Web Design () by Jeremy Keith

: Forms and Maps

: Forms and Maps
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    jQuery Photo Galleries
  8. Demo: jQuery Lightbox Photo Gallery (Download HTML/CSS Files)
    1. Step-by-Step Instructions: jQuery Lightbox Photo Gallery
  9. Demo: jQuery Carousel Photo Gallery (Download HTML/CSS Files)
    1. Step-by-Step Instructions: jQuery Carousel Photo Gallery

: jQuery Scrolling

: jQuery Scrolling
jQuery Scrolling
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Advanced Demo: jQuery Animated Navigation Highlight (Download HTML/CSS Files)
    1. Step-by-Step Instructions: jQuery Animated Navigation Highlight
  9. Advanced Demo: jQuery “Scrollify” Scroll Snapping (Download HTML/CSS Files)
    1. Step-by-Step Instructions: jQuery “Scrollify” Scroll Snapping
  10. Readings:
    1. Chapter 6: Steps” from Resilient Web Design () by Jeremy Keith

: Parallax Scrolling

: Parallax Scrolling
Parallax Scrolling
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Lecture Slides: Parallax Scrolling Effect
  9. Demo: jQuery .stellar(); Parallax Scrolling Effect (Download HTML/CSS Files)
    1. Step-by-Step Instructions: jQuery .stellar(); Parallax Scrolling Effect
    2. Video Tutorial: jQuery .stellar(); Parallax Scrolling Effect
  10. Bonus Demo: Parallax Scrolling Effect with Images (Download HTML/CSS Files)
  11. Demo: Skrollr JavaScript Scroll Animation (Download HTML/CSS Files)
    1. Step-by-Step Instructions: Skrollr JavaScript Scroll Animation
    2. Video Tutorial: Skrollr JavaScript Scroll Animation

: User Input <form> Tag

: User Input <form> Tag
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Demo: User Input <form> Tags and PHP (Download HTML/CSS Files)
    1. Step-by-Step Instructions: User Input <form> Tags and PHP
  9. Readings:
    1. Chapter 7: Challenges” from Resilient Web Design () by Jeremy Keith

: Google Maps Embedding

: Google Maps Embedding
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
  8. Demo: Embedding Google Maps (Download HTML/CSS Files)
    1. Step-by-Step Instructions: Embedding Google Maps

: Final Project Due

: Final Project Due
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
  6. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
  7. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓

Projects

Exercise #1: “Just ASCII About Me” (10 points)

Exercise #1: “Just ASCII About Me” (10 points)

Assignment Instructions

Becoming acquainted with web browser developer tools is an important skill in learning how to read markup and navigate HTML and CSS documents. Start making a habit of looking at the source documents for websites that you regularly visit (for example Craigslist, Facebook, Wikipedia, etc.).

Read the following article: Tom McCormack, “Emoticon, Emoji, Text II: Just ASCII,” Rhizome (2013).

ASCII art is just one example of information that you can find “hidden” in website markup. Spend at least one hour visiting as many major websites as you can, viewing the source markup in the browser developer tools, and taking note of ASCII marks, logos, art, or other hidden messages in the source comments. ASCII logos are generally found inside of <!-- comment tags --> and often are near the top of the document.

Collect at least three (3) examples that you find. Then, using Sublime Text, design your own ASCII mark as a brand for yourself (you can use an online ASCII generator; or you can design your logo yourself). You will include your ASCII mark at the top of all of the website HTML and CSS documents that you create throughtout the semester as a way of “branding” your projects.

ASCII Art Examples

Here are a few examples of sites that display ASCII logos, marks, and messages as comments in their source files:

Assignment Submission Instructions

Create your personal website for the class (the file must be called index.html). On that page, create an <a> hyperlink tag and have it point to a sub-page called just-ascii-about-me.html. In the <!-- comments --> on that page paste:

  • At least three (3) examples of ASCII marks that you found hidden in the HTML comments of popular websites (NOT from the example websites provided above)
  • Your own ASCII logo or brand for your web design studio, which we will include in our HTML and CSS source files for all of our exercises and projects

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Project #1: Market Research (10 points)

Project #1: Market Research (10 points)

Assignment Instructions

The project for the semester requires you to select a restaurant, bar, or café in the Los Angeles area to take on as a “client” for a website redesign. Imagine that the owners of this business have hired you to redesign their website. Each assignment that you complete for this project throughout the semester should be considered as a professional presentation that you are making to these business owners as your clients: each assignment is your opportunity for you to make your case as a designer, to get the client excited about your creative approach, and build “buy-in” from the “stakeholders” (i.e. the business owners).

Choosing a Restaurant Website to Redesign

It would be best to choose a restaurant that you have personally visited, so that you have some familiarity with the cuisine, atmosphere, and clientele. Try to find a small and unique restaurant to taje as a client. Do not select large, corporate fast-food chain restaurants.

Here are some lists of popular restaurants in Los Angeles that you might choose as clients (the restaurant that you choose does not have to come from one of these lists, these are just suggestions):

Here are some local restaurants that you might consider choosing (you are free to pick any restaurant that you want, as long as it is located in the Los Angeles area). You must change the name and branding of the restaurant for the purposes of the class project:

Here are some examples of responsive restaurant websites:

Starting Your Research

You should start by analyzing the restaurant’s current online presence, then, over the course of the semester, you will design and build a fully functional and responsive website for this restaurant (to avoid trademark and copyright violations, you will need to rebrand and rename this restaurant as part of the website redesign).

To begin this research phase of the project, complete the following:

  • Analyze and study the existing restaurant website that you have chosen to redesign for the final project
  • Organize your thoughts about what works and what doesn’t work about the current website design
  • Provide a brief analysis of the current website in the following categories (feel free to include additional categories that you feel are necessary):
    • Visual design
    • Content
    • “Call to action” on home page
    • Navigation
    • Functionality
    • Community building (social media)

Goals & Target Audience

Next, determine Goals for the website and define the Target Audience. What are the client’s business goals for the site? For example, to bring more customers to the restaurant. To increase their catering business, etc. Who is the Target Audience? Remember: When you try to design for everyone, you design for no one. To determine answers to these questions, use your best judgement based on your research.

Address these specific reflection prompts:

  • What questions need to be answered in order to complete this project?
  • What tasks do we need to complete in order to successfully design this website?
  • What issues need to be solved?
  • What is our schedule?

Competitive Analysis

Finally, identify and analyze at least four (4) websites that are business competitors for your client (restaurant, bars, or cafés that are located near your client’s business, or similar establishments). Organize and present a thorough evaluation of these competitor’s websites in the same areas: visual design, content, “call to action” on home page, navigation, functionality, community building (social media) and any other areas that you think play an important part in the redesign.

Assignment Submission Instructions

Post all of your thoughts, ideas, findings, and research references to a sub-page that is accessible via a hyperlink from your main class website, you can call it project-one-research.html.

In the HTML markup for your personal website for the class (it must be called index.html), add a new <a> hyperlink and have that hyperlink navigate to a sub-page called project-one-research.html.

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Peer Reviews for Class Participation

After you have submitted your assignment and after the submission deadline has passed, Canvas will randomly assign you to respond with feedback and critique for work from at least two (2) of your fellow classmates (you will have one week to submit critique and feedback for your two fellow classmates). Your written feedback for your fellow classmates should be at least four (4) complete sentences, with specific suggestions and responses about details that you think are successful and details that you think could be improved in your fellow classmate’s work. The comments that you submit will be counted as part of your class participation grade.

Exercise #2: “Getting to Know U(RL)” (15 points)

Exercise #2: “Getting to Know U(RL)” (15 points)

Assignment Instructions

Create a simple, multi-page website as a way of introducing yourself to the class. The entire site should have a consistent navigation interface that is usable across all of the pages (so that the user can navigate from any page to any other page without ever using the Internet browser “back” button). The site should be structured so that there is one subpage for each of the following prompts:

  • Your name [my-name.html]
  • Your ASCII logo (either as an image or as characters) [my-ascii.html]
  • A list of a few brief details about your educational or professional background [my-background.html]
  • A designer or design studio that inspires your work (include an anchor link to their website and some images of their work) [design-inspiration.html]
  • A non-designed object that you admire (it is up to interpret what a “non-designed” object might be) (include at least one image) [non-designed.html]
  • An “everyday” design object that most people use or encounter on a regular basis that you think is not adequately appreciated for its design qualities (include at least one image) [design-object.html]

Take a look at Ian’s example presentation here. (Download HTML/CSS Files)

Project Submission

In the HTML markup for your personal website for the class (it must be called index.html), add a new <a> hyperlink and have that hyperlink navigate to a sub-page called exercise-two-getting-to-know-url.html.

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Project #2: Sitemap (5 points)

Project #2: Sitemap (5 points)

Assignment Instructions

Create a sitemap for the restaurant website redesign project. Be critical of the current organization of the website and re-organize the content when you create the sitemap. Don’t forget to include a title for the sitemap and to include the alpha-numerical labeling.

Sitemap

A sitemap is a high-level diagram of the Information Architecture (IA) for the site, it maps out the organization and labeling of major areas of the site. The figure below shows a sitemap for a redesign of the Santa Monica College website. Sitemaps are sometimes referred to as site diagrams.

How to Create a Sitemap

There are several tools that can be used to create sitemaps. Online tools include GlooMaps and many others. Visio and OmniGraffle are used by professional Information Architects and UX Designers. For this class, I suggest Illustrator, or Photoshop if you’re more familiar with it.

Project Submission

Save the sitemap as a PNG, JPEG, or PDF and post it to a sub-page that is accessible via a hyperlink from your main class website, you can call it project-two-sitemap.html.

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Exercise #3: “D for DIV: Art Forgery with CSS3” (15 points)

Exercise #3: “D for DIV: Art Forgery with CSS3” (15 points)

Assignment Instructions

Use only HTML5 Semantic Tag elements (such as <main>, <section>, <article>, <figure>, etc.) with background-color, width, height, margin, and padding specifications in a linked CSS stylesheet to create at least three (3) digital works of art forgery on three (3) separate HTML documents.

The dimensions of the work must be responsive to the browser window (i.e. their size should be flexible using either the vw (viewport width) or vh (viewport height) dimensions) and all of the elements on the page must be interactive with a background-color property change in response to the user’s hover.

You must choose three (3) of the following fine art paintings from the list below to recreate or “forge” in markup. Upload your HTML and CSS files to your class directory and make sure that the documents are properly linked from your main index HTML.

In-Class Example Exercise:

Project Submission

Include your HTML files in your class directory and make sure that the documents are properly linked from your main index HTML.

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Project #3: Style Tiles (10 points)

Assignment Instructions

Design two different Style Tiles for your restaurant website redesign project.

Please read this article: Style Tiles: An Alternative to Full Design Comps.

The important thing to remember about Style Tiles is that they are not a literal representation of how the site will look; instead, they help define the mood, tone and “feeling” of a site based on what you’ve learnt from the client and know about the project.

Common key features to include in your Style Tiles (for more information regarding the eight features below, be sure to take a look at the assigned reading):

  • Client Logo
  • Possible Colors
  • Textures/Pattern/Graphics/Photos
  • Adjectives
  • Typography (Refer to Google Fonts, Adobe Fonts, Font Squirrel or other website for possible web fonts)
  • Buttons
  • Background
  • Version

For images, check out this resource: Where the Best Designers Go to Find Photos.

Style Tiles

Download the Photoshop file for the Style Tiles here: styletil.es.

What are Style Tiles?

Style Tiles are a design deliverable consisting of fonts, colors, and interface elements that communicate the essence of a visual brand for the web.

Style Tiles are for when a moodboard is too vague and a comprehensive is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.

Case Study: The Washington Examiner.

Project Submission

Save the style tiles as a PNGs, JPEGs, or PDFs and post them to a sub-page that is accessible via a hyperlink from your main class website, you can call it project-three-style-tiles.html.

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Peer Reviews

After you have submitted your assignment and after the submission deadline has passed, Canvas will randomly assign you to respond with feedback and critique for work from at least two (2) of your fellow classmates (you will have one week to submit critique and feedback for your two fellow classmates). The quality, thoroughness, and thoughtfulness of the comments that you submit will be counted as part of your class participation grade.

Project #4: Wireframes (5 points)

Assignment Instructions

Design wireframes for the main page and at least two (2) additional subpages of your restaurant website redesign project.

Remember that our final website redesign project must be responsive, with at least two (2) CSS3 @media Rule breakpoints. So you will need to design wireframes for three (3) different screen sizes: a mobile screen, a tablet screen, and a laptop/desktop screen.

Please spend some time reviewing these resources:

Project Submission

Save the wireframes as a PNGs, JPEGs, or PDFs and post them to a sub-page that is accessible via a hyperlink from your main class website, you can call it project-four-wireframes.html.

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Project #5: Design Comprehensives (10 points)

Assignment Instructions

Create two (2) sets of design comprehensives for your restaurant website redesign project. You will need to complete one (1) set of design comprehensives for the main “splash” or “landing” page of the website, and one (1) set of design comprehensives for the menu food/drinks subpage.

Remember that design comprehensives are a high-level representation of our design concept (these are not rough sketches or wireframes). Therefore, it is important that the color palette, typefaces, interactive components, icons, photographic imagery, and layout all be represented in our comps.

A set of design comprehensives consists of:

  • One (1) design comp for mobile devices
  • One (1) design comp for tablet displays
  • One (1) design comp for desktop/laptop displays

Keep in mind the Basics of Web Design:

  • The Grid (Use this Grid, or you can find your own)
  • Basic Design Principles (composition, balance, white space, proportion etc.)
  • Color
  • Typography (Keep in mind: hierarchy)
  • Navigation

Refer to your Style Tiles and Wireframes. Your design should support these, although they don’t need to follow the Style Tiles or Wireframes exactly. Don’t create a design or layout that can’t be made responsive. Simplify your design if you need to. Look at examples of responsive websites here.

Project Submission

Save the design comprehensives as a PNGs, JPEGs, or PDFs and post them to a sub-page that is accessible via a hyperlink from your main class website, you can call it project-five-design-comps.html.

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Peer Reviews

After you have submitted your assignment and after the submission deadline has passed, Canvas will randomly assign you to respond with feedback and critique for work from at least two (2) of your fellow classmates (you will have one week to submit critique and feedback for your two fellow classmates). The quality, thoroughness, and thoughtfulness of the comments that you submit will be counted as part of your class participation grade.

Restaurant Website Redesign Prototype (25 points)

Restaurant Website Redesign Prototype (25 points)

Assignment Instructions

Create a functional prototype of your final project, a responsive website for a restaurant in the Los Angeles area. You must change the name and branding of the restaurant for the purposes of the class project.

Website templates or scaffolding (such as Bootstrap) are not allowed. You must create the website markup entirely yourself.

Your website redesign must also include the use of the items below:

  • Professional practice standards (functional directory folder structure, no broken links, bandwidth-appropriate file sizes, images no larger than 500 KB)
  • Your personal ASCII logo/brand hidden in <!-- comment tags --> in the <head> on all pages
  • HTML5 Semantic Tags (i.e. <header>, <h1>, <h2>, <nav>, <ul>, <main>, <section>, <h3>, <article>, <h4>, <aside>, <figure>, <h5>, <figcaption>, <footer>, <h6>, <time>, etc.)
  • Interactive components (pseudo-class :hover)
  • Flexible elements (dimensions specified in percentage % units or viewport width vw and viewport height vh units)
  • CSS3 @media Rule media query breakpoints (at least two)
  • CSS3 @font-face Rule embedded font (at least two)
  • CSS3 transform Property (at least one)
  • CSS3 transition Property (at least one)
  • CSS3 @keyframes Rule animation (at least one)

Your website should also take into account that the following additional features, which will be required for the final deliverable:

  • User input form using the HTML <form> tag
  • Interactive map using the HTML <script> tag and JavaScript, or the HTML <iframe> tag
  • Responsive navigation (“hamburger icon” and “navigation drawer”)
  • jQuery photo gallery slideshow feature (“light box” or “carousel”)

Project Submission

You will submit your entire class website directory (all of your HTML, CSS, images, and additional assets for all exercises and projects) an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Peer Reviews

After you have submitted your assignment and after the submission deadline has passed, Canvas will randomly assign you to respond with feedback and critique for work from at least two (2) of your fellow classmates (you will have one week to submit critique and feedback for your two fellow classmates). The quality, thoroughness, and thoughtfulness of the comments that you submit will be counted as part of your class participation grade.

Markup Validation

Use The W3C Markup Validation Service to make sure your markup is free of errors, such as open or missing tags. These errors will count against your grade.

Testing website on mobile devices

Be sure to test your final project as soon as possible. I suggest testing it while you’re building the home page. To test it, view the page in a browser on a mobile device (preferably a smartphone) in addition to a desktop or laptop computer. Also, use Google’s Mobile-Friendly Test to get suggestions on how to improve the responsiveness of your page.

Use of logos and images

For this project, please replace the actual name of the company/organization with a fictitious name and replace their logo and images with copyright free images. We need to do this because we don’t have permission to use another company’s assets and content.

Image attribution (this can be inserted in the footer of your website):

Images © La Citta Vita, avixyz, star5112

Resources – Restaurant Menus

Resources - Images

Other resources for images:

Project #6: Revised Design Comprehensives (15 points)

Project #6: Revised Design Comprehensives (15 points)

Assignment Instructions

Continue working on your design comprehensives, making refinements and revisions based on the critique that you received from your fellow students, for the final iteration of your redesigned restaurant website project. You will need to complete two (2) sets of revised design comprehensives, one (1) set of comps for the main “splash” or “landing” page of the website, and one (1) set of comps for the food/drinks menu sub-page.

A set of design comprehensives consists of:

  • One (1) design comp for mobile devices
  • One (1) design comp for tablet displays
  • One (1) design comp for desktop/laptop displays

Keep in mind the Basics of Web Design:

  • The Grid (Use this Grid, or you can find your own)
  • Basic Design Principles (composition, balance, white space, proportion etc.)
  • Color
  • Typography (Keep in mind: hierarchy)
  • Navigation

Project Submission

Save the design comprehensives as a PNGs, JPEGs, or PDFs and post them to a sub-page that is accessible via a hyperlink from your main class website, you can call it project-six-revised-design-comps.html.

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Peer Reviews

After you have submitted your assignment and after the submission deadline has passed, Canvas will randomly assign you to respond with feedback and critique for work from at least two (2) of your fellow classmates (you will have one week to submit critique and feedback for your two fellow classmates). The quality, thoroughness, and thoughtfulness of the comments that you submit will be counted as part of your class participation grade.

Final Project: Responsive Restaurant Website (40 points)

Final Project: Responsive Restaurant Website (40 points)

Assignment Instructions

Based on the feedback and critique that you received for your revised design comprehensives, create your final project, a responsive website for a restaurant in the Los Angeles area.

Deliverables due:

  • Final Responsive Restaurant Website
  • Submit your entire directory for the semester, including an index.html main directory page that links to your exercise pages, in-class demo pages, design process pages (research, style tiles, site map, wireframes, comps), midterm prototype, and final project

Your website redesign must also include the use of the items below:

  • Professional practice standards (functional directory folder structure, no broken links, bandwidth-appropriate file sizes)
  • Your personal ASCII logo/brand hidden in <!-- comment tags --> in the <head> on all pages
  • HTML5 Semantic Tags (i.e. <header>, <h1>, <h2>, <nav>, <ul>, <main>, <section>, <h3>, <article>, <h4>, <aside>, <figure>, <h5>, <figcaption>, <footer>, <h6>, <time>, etc.)
  • Interactive components (pseudo-class :hover)
  • Flexible elements (dimensions specified in percentage % units or viewport width vw and viewport height vh units)
  • CSS3 @media Rule media query breakpoints (at least two)
  • CSS3 @font-face Rule embedded font (at least two)
  • CSS3 transform Property (at least one)
  • CSS3 transition Property (at least one)
  • CSS3 @keyframes Rule animation (at least one)
  • User input form using the HTML <form> tag
  • Interactive map using the HTML <script> tag and JavaScript, or the HTML <iframe> tag
  • Responsive navigation (“hamburger icon” and “navigation drawer”)
  • jQuery photo gallery slideshow feature (“light box” or “carousel”)

Website templates or scaffolding (such as Bootstrap) are not allowed. You must create the website markup yourself.

Markup Validation

Use The W3C Markup Validation Service to make sure your markup is free of errors, such as open or missing tags. These errors will count against your grade.

Testing website on mobile devices

Be sure to test your final project as soon as possible. I suggest testing it while you’re building the home page. To test it, view the page in a browser on a mobile device (preferably a smartphone) in addition to a desktop or laptop computer. Also, use Google’s Mobile-Friendly Test to get suggestions on how to improve the responsiveness of your page.

Project Submission

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (no late submissions can be accepted for the final project).

Peer Reviews

After you have submitted your assignment and after the submission deadline has passed, Canvas will randomly assign you to respond with feedback and critique for work from at least two (2) of your fellow classmates (you will have one week to submit critique and feedback for your two fellow classmates). The quality, thoroughness, and thoughtfulness of the comments that you submit will be counted as part of your class participation grade.

Resources

Fonts

Fonts

Inspiration

Inspiration

Recommended Readings

Recommended Readings

Students

(Tuesday)

(Tuesday)
  1. ar-av
  2. je-ch
  3. ry-do
  4. ke-ha
  5. di-he
  6. la-hi
  7. sh-ho
  8. zh-ho
  9. em-kh
  10. yu-li
  11. na-lu
  12. sa-na
  13. sa-pa
  14. ar-pa
  15. ch-pu
  16. er-sh
  17. se-va
  18. ye-wa
  19. ma-yo

(Wednesday)

(Wednesday)
  1. di-ca
  2. ke-da
  3. ma-fr
  4. az-iz
  5. jo-jo
  6. ed-ma
  7. ke-mo
  8. pe-pa
  9. an-ra
  10. ka-ra
  11. ha-so
  12. el-su
  13. ma-ts
  14. em-ve
  15. co-ve
  16. ka-zh
  17. an-zh

(Web Design 2)

(Web Design 2)
  1. ya-ad
  2. er-aq
  3. ch-co
  4. na-da
  5. va-he
  6. ja-ju
  7. br-le
  8. ma-ma
  9. ir-ma
  10. ch-ng
  11. ya-ou

(Web Design 1)

(Web Design 1)
  1. ro-bo
  2. ja-co
  3. ay-du
  4. ja-gr
  5. fe-vo
  6. da-ma
  7. ed-na
  8. pe-pa
  9. ar-si
  10. ha-so
  11. ro-st
  12. ka-zh
  13. ro-zu

(Thursday)

(Thursday)
  1. aet
  2. ao
  3. bmc
  4. cln
  5. dma
  6. emr
  7. etw
  8. fja
  9. jkt
  10. jp
  11. lrz
  12. nady
  13. ng
  14. nin
  15. pjg
  16. poo
  17. ssk

(Wednesday)

(Wednesday)
  1. ob
  2. lic
  3. kdf
  4. mpm
  5. wm
  6. mpp
  7. bas
  8. rgs
  9. vt
  10. sw

(Wednesday)

(Wednesday)
  1. ac
  2. av
  3. dc
  4. el
  5. ep
  6. ff
  7. gl
  8. hl
  9. ja
  10. kd
  11. kj
  12. mk
  13. mm
  14. ms
  15. mx
  16. rc
  17. ss
  18. yj
  19. yl

Syllabus

The Center For Media And Design

The Center For Media And Design

The Center for Media and Design (CMD) was built to provide quality education and lifelong learning opportunities in rapidly evolving design and media fields. All of the programs housed at the CMD are dedicated to preparing students for successful transfer or professional growth through innovation, collaboration and communication.

The facility represents years of thoughtful planning and great expense to ensure the creation of a state-of-the-art learning environment which encourages exploration and discovery.

The future success of the CMD rests with all of us. As stewards of this community, all who use the CMD must be committed to three simple principles:

  • Uphold a positive, productive climate where every person is engaged and respected.
  • Work together to maintain a shared vision for the facility.
  • Contribute to the successful operation of the CMD and the care of the physical environment.

We strongly encourage everyone to use the LiveSafe mobile app that Santa Monica College is providing to all students, faculty, and staff to download for free. The app provides a quick, convenient, and discreet way to communicate directly with Santa Monica College officials, enhancing your overall safety and allowing Santa Monica College to better serve you. Please use the app to anonymously report any acts of vandalism you may observe at the CMD.

Catalog Description

Catalog Description

This design course builds on the design concepts and fundamentals covered in Graphic Design 65 and focuses on best practices for the design and production of responsive websites. Design issues such as design process, understanding the user, web typography and design prototyping will be addressed. Technical topics include HTML5, CSS3, responsive web design, embedded fonts and media. Students will design and create a website from start to finish utilizing the skills learned in this course.

Advisory Prerequisites: GR DES 61, GR DES 64, GR DES 65

Course Objectives

Course Objectives

Upon successful completion of this course, students will be able to:

  • Identify the different issues in delivering content to different screen sizes and devices
  • Develop a basic understanding of designing for the user
  • Create effective site maps, sketches, and wireframes
  • Create visual design of an effective responsive website
  • Build a responsive website and successfully launch it live to a server
  • Demonstrate an understanding of how to be a self-learner and how to learn from others
  • Demonstrate ability to effective critique and evaluate own design and other designers’ work

Arranged Hours Objectives

Arranged Hours Objectives

Upon successful completion of the arranged hours, students will be able to:

  • Identify and apply an intermediate understanding of HTML and CSS coding

Student Learning Outcomes

Student Learning Outcomes
  • Students will exhibit strong academic behaviors including regular attendance, timeliness, participation in class activities and adherence to the College Honor Code.
  • Demonstrate intermediate conceptual and technical knowledge of the web design process by producing a commercial-quality website.
  • Using a set of design and technical criteria, effectively critique own website and website projects done by peers.
  • Student will demonstrate technical knowledge and ability to execute different approaches and technologies in delivering content in web pages.
  • Student will have the ability to upload a web site “live” to a web server.

Course Content

Course Content

The content of this course may change depending on time constraints. The order of the topics listed may vary.

  • Design Process: 10%
  • Responsive Web Design: 20%
  • Visual Design: 20%
  • Web Typography: 10%
  • HTML5 and CSS3: 30%
  • Presentation and critique of projects: 10%
  • Total: 100%

Recommended Computer Skills

Recommended Computer Skills

To succeed in this course, students should have the ability to:

  • Navigate the internet using a web browser.
  • Manage files using either the Mac or Windows operating systems.
  • Send and receive email messages and attachments.
  • Use a word processing program like Microsoft Word or its equivalent.

Students that do not meet these required skills are advised to enroll in a computer skills course such as ET 11, GR DES 18 or INTARC 29.

Methods of Presentation

Methods of Presentation
  • Critique
  • Group Work
  • Lecture and Discussion
  • Projects

Methods of Evaluation

Methods of Evaluation

Grading is determined by participation and the timely completion of all assignments, projects and/or exams. Assignments and projects will be judged on technical execution and mastery of the underlying concepts. All coursework submitted must be original, completed solely by you.

To receive full credit, all assignments are due on time. Students are responsible for submitting all work on time regardless of absence. Emailing late assignments is NOT allowed. A late assignment may be submitted in class one week after the due date but will automatically drop one grade level. No late assignments will be accepted after one week.

There is no extra credit available for this course.

Students must complete 75% of the coursework, including the final, to pass the course. Final projects that are submitted late will NOT be accepted.

A grade of “Incomplete” may be granted at the very end of the term, only when 90% of the course work has been completed with a “C” or better, and an unforeseen event or illness prevents the student from completing the coursework. “Incomplete” grade situations are extremely rare, and are entirely at the discretion of the instructor, within the parameters set above.

Please let the instructor know, promptly and courteously, if a mistake has been made in class or in grading.

Your final grade will be calculated using the following percentages:

  • Technical Exercises: 20% (40 pts)
  • Process Deliverables: 20% (40 pts)
  • Creative Projects: 40% (80 pts)
  • Class Participation: 20% (40 pts)
  • Total: 100% (200 pts)

Grading Scale

Grading Scale
  • A: 90% - 100%
    Superior performance. Excellent achievement and craftsmanship in all work. Performs beyond course requirements.
  • B: 80% - 89%
    Above average performance. Consistent progress and craftsmanship. Meets all course requirements.
  • C: 70% - 79%
    Average performance. Minimum time and effort spent on coursework. Fulfills basic course requirements.
  • D: 60% - 69%
    Uneven performance. Minimal output and improvement in work. Requirements are only partially fulfilled.
  • F: 0% - 59%
    Fails to meet a minimum of performance levels. Does not exhibit achievement or progress.

Policy for Adding Class

Policy for Adding Class

A student must attend the first day of class in order to remain or to be placed on the waiting list. A student will only be placed on the waiting list if s/he has met all the prerequisites for the class. The instructor will contact students on the waiting list should any spaces become available. Students who are not formally enrolled in the class cannot sit in on the class until they are officially registered for the class.

A student who does not attend the first day of class may not add the class without approval from the instructor. The instructor has the right to drop any student who does not attend the first day of class and adds the class without the instructor’s approval.

Withdrawal Policy

Withdrawal Policy

Students are responsible for withdrawing from a class and must not expect faculty to initiate withdrawal procedures for them. If you wish to drop this class, you may do so through Corsair Connect.

General information regarding drop dates, withdrawals, and other enrollment matters may be found at the Admissions section of the SMC website.

After the eighth week of classes, students must have the instructor’s approval and documentable extenuating circumstances to withdraw. Extenuating circumstances are unavoidable circumstances that prevent students from participating in further class activities and fulfilling remaining course requirements. Poor student performance in the course will NOT be considered as an extenuating circumstance.

Class Policies

Class Policies
Academic Honesty
Academic Honesty

The SMC Honor Code and Code of Academic Integrity, printed in the General Catalog, remind students of their responsibility to behave honestly and ethically. It is your responsibility to familiarize yourself with these codes. Other guidance is also available online:

Please be extremely careful that you do not engage in any behavior that could even be construed as cheating. Outside of class, students are allowed to study together. However, copying another student’s work is not acceptable. If the instructor determines that students have violated the SMC Honor Code and/or the Code of Academic Integrity, the students may be assigned no credit. Future occurrences could result in academic disciplinary action. During an exam, talking to another student, looking at another student's work or computer screen, using cheat notes or mobile devices, etc. are not permitted.

Attendance
Attendance

Students are expected to attend ALL class sessions, especially the first scheduled session. Lectures and hands-on demonstrations will not be repeated for individual students. Please make a commitment to be in class on time, arriving within the first 10 minutes of class, even if you have not completed the current assignment. You are responsible for notifying your instructor in advance of any absence or scheduling conflict. You may be dropped from the class if you miss more than two consecutive classes without notifying your instructor. Students who are out for 3 sessions due to illness must provide a doctor’s note to be reinstated back into the class.

Classroom
Classroom

All food or drink is prohibited in the classroom with the exception of water bottles, which are permitted as long as they have lids that remain closed and they are kept away from all equipment. Use of the computers for purposes other than the assignments for this class is not permitted. No cell phone or smart phone use will be permitted in the classroom. Please turn off all electronic devices prior to entering the classroom.

Recording of Class Lectures
Recording of Class Lectures

In accordance with Section 78907 of the California Education Code, students shall not use any electronic listening or recording device in any classroom without the prior consent of the instructor, except as necessary to provide reasonable auxiliary aids and academic adjustments to disabled students.

Students with Disabilities
Students with Disabilities

Santa Monica College accommodates students with disabilities. If you qualify for any special accommodations due to a disability, you need to officially process your request through the Disabled Students Programs and Services (DSPS) office as close to the beginning of the semester as possible. If you believe you have a learning disability that has not yet been documented, please notify the instructor and make an appointment at the DSPS office for assistance. The DSPS office is located in the Admissions/Student Services Complex, Room 101, and the phone numbers are (310) 434-4265 and (310) 434-4273 (TDD). Scheduling of accommodated exams will be arranged on a case-by-case basis.

Emergency Preparedness
Emergency Preparedness

The safety of students at SMC is a priority. Please note that procedures for various emergencies are delineated on the SMC website. Please take the time to familiarize yourself with these procedures today, when knowledge of what to do can be the most effective.

Academic Advisement

Academic Advisement

Students should schedule an appointment with our Academic Counselor, Ashley Wadman and Marisela Canela, to develop an Educational Plan. This is to ensure that you are taking the necessary courses to meet your educational goals.

During the first week of the semester, counselors will be available on a walk-in basis at the main campus Transfer Center. Please contact either Ashley or Marisela directly to make an appointment to meet at the CMD for the remainder of the semester.

College Use of Student Work Policy

College Use of Student Work Policy

By participating in this course, you agree to allow your work to be used by Santa Monica College for promotional purposes. These uses include, but are not limited to, display in the physical and web galleries, promotional video tapes, and printed promotional pieces. You retain complete rights to your work, and Santa Monica College may not use your work for non-promotional purposes without your prior agreement.

Disclaimer

Disclaimer

Some elements of the syllabus may be changed at the instructor’s discretion. Students will be given at least 48 hours notice of changes whenever possible. If there is any aspect of this syllabus which you do not understand, or to which you take exception, please let the instructor know within the first week of class.

Best Practices

Best Practices
  • Ask questions! If a topic or method being demonstrated is unclear or confusing, it is your responsibility to communicate with the instructor to help clarify the issue.
  • Additional critique, feedback, and troubleshooting cannot be effectively conveyed through email. Please email the professor to arrange a meeting during office hours to address these requests
  • Close all tabs, windows, and applications and restart your computer at the beginning of each class
  • Clear your browser history completely at the beginning of each class
  • Browse in “Private” or “Incognito” mode, and use a script blocking extension (NoScript, ScriptBlock)
  • Install and test on as many browsers (Apple Safari, Google Chrome, Microsoft Edge, Mozilla Firefox, Opera) and devices as possible. If you're encountering issues, try running it on another browser.

Acknowledgements

Acknowledgements

This syllabus was developed from curricula originally created by Jamie Cavanaugh, with additional material developed from curricula by Jeff Cain and Aaron Siegel.