• Presentations
• Team Evaluations

Homework

• Submit all individual work on Drive by 11:59pm tonight!

• Review Questions
• Q & A
• HTML Audio Tag example
• Podcast RSS Feed example
• Reminders about what to turn in at the end of the semester
• Accessibility: WebAim Section 508 Checklist and WebAim WCAG Checklist

Homework

• Each group should submit the URL to live version of your proposed site on 317_f17 channel in our Slack group prior to class on 12/8.
• Exercise: Project Statement (Due 12/8)
• Exercise: Icons and Share Graphic (Due 12/8)
• Exercise: RSS Feed (Due 12/13)

• Navicon – jump to bottom of screen
• Navicon Simple JS Menu
• JQuery UI: Accordion Example
• Advanced CSS Techniques: Positioning, Display, Transforms, Transitions

Homework

• Mobile CSS for homepage and individual podcast page.

• Review Questions
• Q & A
• Navigation
  • Navigation Markup
  • Positioning: CSS Positioning 101, Absolute, Relative, Fixed Positioning: How Do They Differ?

Homework

• Review Positioning (see above)

• Review Questions – Required Assets
• Q & A
• Reminders and Work Time

Homework

• Complete HTML for home page and one interior page.
• User test attribution (on mockup).
• CSS for typography

• Review Questions
• Q & A
• Copyright Documentation: Spreadsheet Template, Copyright and Release Form Templates
• Work Time

Homework

• Prepare for pitches on Monday. Presentations should be between 10-15min.

• Review Questions: Assets. Additional markup can be added. Style transcript itself differently from the header. Style the speaker indicator differently from what the speaker says. Bonus points if you differentiate speakers.
• Q & A
• Prepare for Exercise: Pitch/Presentation and Exercise: Pitch Deck

Homework

• Work on materials for Pitch on Monday, November 20.

• Review Questions
• Q & A
• Project Planning
  • Project Goals: Define the project goals in your own words. Consider how you want the audience to feel as a result of visiting and iteracting with the site. Words we generated in class were: patriotic, safe, transitioning, complex identities, informative but not formal, friendly, bright, welcoming, community, open, inclusive, family and storytelling. What is the site’s value proposition?
  • Audience Needs: Who is our audience? What biases or assumptions might they come to the project with? Review the notes from our perception exercise to help. What are holes in their knowledge that the project can overcome? Why would an audience member go to the website rather than a podcast application? Do you need additional information or elements to address the needs?
  • How do you encourage an audience member to explore more than one episode once they are on the site?

Homework

• Continue working on the Voices of Oswego Veterans project

• Review Questions – Required Assets
• Q & A
• IDEO Design Kit: Methods
• UI Patterns: Article List
• Exercise: Brainstorming
• Group time

Homework

• Work on group assigned tasks related to design and organization of the website. Good exercises include mood boards, wireframes, sketches, module mockups, etc.

• Voices of Oswego Veterans
• Empathy Map Worksheet
• Implicit and Explicit Bias: Flower-Insect Test, Project Implicit
• Designing for “Stress Cases” vs. “At the Margins” (if you were not in class copies are in my mailbox outside of 32 Lanigan)

Homework

• Exercise: Empathy & Bias. Perceptions collected from project launch.

• Review Questions
• Q & A
• Form teams for Voices of Oswego Veterans project

Homework

• Competitor/Peer Audit
• Listen to Invisibilia: The Culture Inside (June 9, 2017)
• Remember to keep track of your time using the timesheet template. Toggl is an app for your phone that might help you stay on top of tracking your time better.

• Review Questions
• Promotional Website Show and Tell with feedback on printed promotion
• Feedback on Project Documentation
• Voices of Oswego Veterans Kickoff: Perceptions, Hopes and Fears

Homework

• Revisions to Project Documentations
• Read Voices of Oswego content (note must be logged into Google Drive with Laker ID to access

• Feedback on Print Promotions and Process books
• Screenshots of Webpages Tutorial

Homework

• Process Books: Final drafts submitted as PDFS on Google Drive by 11:59pm tonight (11/1)
• Print Promotion: Bring final physical prototypes to class on Friday (11/3); photographs and design files submitted on Google drive prior to the start of class.
• Website Documentation: Bring a printed version to class on Friday 11/3. You will have the opportunity for feedback. Final PDF versions are due on Google Drive prior to the start of class on 11/6.

• Review Questions – Required Assets
• Documentation Examples: Aten Design, Adjacent, Cinder Design, Big Medium, Lily Choi
• Templates: Creative Market, Graphics Fuel, Shutterstock<

• Review Questions – Get Assets
• Q & A
• Print Promo

• Finish Promotional Website for Monday at 11:59pm. Entire project folder and shortcut to the live website need to be submitted on Google Drive before the deadline.
• Complete process book and Print Promo for Wednesday

• Q & A
• Ethics and Satire, Parody, Hoax, Sponsored Content: Borowitz Report, The Onion, American News, Buzzfeed
• Generations
• Critique

• Review Questions
• Q & A
• Work time

Homework

• Prepare for in-progress critique in class on Wednesday.

Reminder: Finished site is due on Monday, October 30. Process book is due on Wednesday, November 1.

• Review Questions
• Q &
• CSS Float (and Clear)
• CSS Grids: Quickstart Guide, MDN Grid Layout Resource, Grid by Example

Homework

• Turn in UI Prototype (and any revisions) exercise on Google Drive and Lisa French and you User Test Script no later than the end of class on Monday.
• Complete HTML and mobile typography and layout in the CSS for your Promotional Website project.

Rebecca will be late to class. The first part of the class period should be used to revise UI Prototypes, edit User Testing scripts, work on your process books and/or to start the HTML of your promotional website.

• Images: Content or Decoration?
• Alt Text
• Saving Images
• Patterns and Textures
• Resource: Images

Homework

• Read WebAIM: Alternative Text
• HTML for Promotion Website
• Start typography related CSS

• Review Questions
• Q & A
• Usertesting: See Steve Krug’s Demo User Test; Steve Krug’s Test Script
• Work Time/Critique
• Resource: Color Contrast Checker

Homework

• Revisions to UI Prototype Exercise
• User Testing Exercise

• Surprise! No review questions today, just time to put your head down to focus and work. Happy Friday.

• Complete UI Prototype Exercise.
• Read chapter 9 in Don’t Make Me Think

• Review Questions
• Q & A
• Get feedback on revised mood boards
• Start UI Prototype Exercise

Homework

• Complete Part 3 and start Part 4 of UI Prototype Exercise. Final exercise due on Monday.

• Review Questions
• Q & A
• User Interfaces
• Moodboards

Homework

• Revise Moodboard
• Read Stealing Your Way to Original Designs
• Read Chapter 8 in Better Web Type
• Exercise: UI Prep. Explore UI-Patterns and identify 1 that you will need for your promotional website. In a text document place a screenshot of the UI pattern and explain why using such a pattern is a good choice for your website. In the same document identify the typefaces you will use for body and display copy. Include a small type specimen of each typeface you plan to use (the alphabet and some punctuation is fine). Explain why you have chosen the typefaces you have. Bring a printed copy of this document to class and save a digital copy as a PDF to drive.

• Monica Haller Visit
• Review Questions
• Q & A
• Work Time

Homework

• Read chapters 5-7 in Don’t Make Me Think
• Complete Moodboard and Audience Exercises
• Revise content and branding as needed

• Review Questions
• Q & A
• Audience: Perception, Bias, Empathy, Research
• Empathy Map

Homework

• Exercise: Audience
• Part 1 of Exercise: Moodboards
• Read Chapter 5 in Don’t Make Me Think

• Review Questions
• Q & A
• Brand Pitches
• Strategic Design

Homework

• Exercise: Goals
• Revise Branding
• Read Chapters 1-3 in Don’t Make Me Think by Steve Krug

• Typography Concept Maps
• Brainstorming for Promotional Website

Homework

• Exercise: Branding—Be prepared to pitch your brand next class.
• Setup process book

• Review Questions
• Q & A
• Experience Design: Visit Tyler Art Gallery

homework

• Typography Exercise: Site Evaluation
• Read Design Business + Ethics: Guide to Copyright

• Review Questions
• Q & A
• FTP
• Device Testing

Homework

• Typography Exercise: Make Site Live – This is an opportunity to make onelast round of revisions. Submit your final project files and web shortcut for live website.

• Review Questions
• Q & A
• Troubleshooting: Brackets, CSS-Tricks, Developer Tools

Homework

• Typography Exercise: Readability (Responsive)

• Review Questions
• Q&A
• Critique
• Responsive Design
• CSS Media Queries

Homework

• Start responsive version of type blog. Focus on large screen design.

• Review Questions
• Q&A
• Typographic Cheatsheet: HTML Character Codes, Appropriate Punctuation
• CSS Pseudo Selectors: :link, :hover, :focus, :active, :visited
• CSS Properties: text-decoration, list-style, font-feature-settings
• Hierarchy through contrast

Homework

• Revisions of Part 2 of Typography Exercise: Readability (Written Critique)
• Complete Typography Exercise: Typographic Details

• Review Questions
• Q&A
• Feedback on work submitted so far
• Submitting Assignments – File Organization
• Intro to CSS: Selector, Declaration, Property, Property Value
• CSS Box Model: box-sizing, border, padding, margin, width, max-width
• CSS Properties: color, font-family, , font-size, font-style, font-weight, letter-spacing, line-height, text-align, text-indent, text-transform

Homework

• Read chapters 10-12 in Better Web Type
• Typography Exercise: Readability (Mobile)
• Revisions of Part 2 of Typography Exercise: Readability (Written Critique) due Monday

• Review Questions
• Q&A
• Intro to HTML: <html>, <body>, <head>, <title>, <meta>, <header>, <footer>, <main>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <li>, <article>, <div>, <meta>
• Turn in files on Lisa French and Google Drive

Homework

• HTML Markup for Typography Exercise: Mobile
• Read chapters 10–12 in Better Web Type for Friday

• Work time
• Critique on Readability Exercise

Homework

• Revise & Complete Typography Exercise: Readability
• Complete Typography Exercise: Readability Critique

• Review Questions
• Q&A
• InDesign Mockups: Small Screen & Large Screen
• Work on Typography Exercise: Readability

Homework

• Read Chapter 7 in Better Web Type
• Complete Typography Exercise: Readability for critique on Friday

• Review Questions
• Copyright Documentation
• Better Web Type: The Game (must play game until earn an 80% or higher for credit for this exercise).
• Work on Typography Exercises

Homework

• Complete Typography Exercise: Choose Font (will be collected on Wednesday, September 6).
• Complete Typography Exercise: Copyright Documentation
• Read Chapter 6 in Better Web Typography
• Join the 317_f17 channel in our Slack group. Post a question you still have about the material we have covered so far. Respond to others if you know the answer to their questions. The Slack starter guides and the Slack Video Guides are great resources if you need help.

• Review Questions
• Finish Part 2 of Typography Exercise: Mood/Tone
• Font Licensing
• Start Typography Exercise: Anatomy of Type
• Legibility: Distinctness of characters, x-height, counters, apertures, stroke weight, etc.
• Introduce Typography Exercise: Choose Font

Homework

• Read: Chapters 3 & 4 in Better Web Typography
• Complete Part 3 of Typography Exercise: Mood/Tone. This will be collected on Friday.
• Complete Part 2 of Typography Exercise: Anatomy of Type. This will be collected Friday.
• Complete Parts 1 & 2 Typography Exercise: Choose Font. The entire exercise will be collected on Wednesday, September 6.

• Exercise: Hopes & Fears
• What do we know about web design?
• Part 1: Typography Exercise: Mood/Tone

Homework

• Create and Share Google Drive folder for course (see naming conventions in syllabus)
• Finish Part 1: Typography Exercise: Mood/Tone
• Read: Chapters 1&2 in Better Web Typography
• Read: Use of Fonts in Design Business + Ethics