Class Topics

• Final Presentations
• Course Evaluations
• Celebrate AIR-U win and semester accomplishments

Homework

• Team Evaluations due by 8am on Thursday, December 13

Class Topics

• Critique
• Accessibility Survey
• 317/517 What Should Be on Google Drive?

Due at 11:59pm on Dec 7

• Website
• Shortcut to live website
• Copyright documentation

Class Topics

• Portfolio Documentation
• Portfolio examples: Kate Percival, Miranda Guarno, Marissa Specioso

Class Topics

• Testing: User Tests, Baseline grid using Baseliner, line length using Measure, accessibility features with the Wave Evaluation Tool, zoom in to 200% in your browser (no content should be cut off), read order and alt text using the Web Developer add-on

Class Topics

• Q & A about forms. Show Rebecca your complete form exercises by the end of class for credit.
• Collapsible content example (requires jquery)
• Drawer Navigation example (requires js and css positioning)
• Navicon with Bottom Navigation (requires basic css positioning)

Homework

• Make template page live for class on Friday. We will be doing some critique and accessibility testing. It is ok if the navigation is not implemented.

Class Topics

• Layout Review: Products Page Challenge
• Forms: MDN HTML Forms, WebAIM: Creating Accessible Forms, Exercise Screenshot

Homework

• Finish template markup and CSS typography.

Class Topics

• Refine user flows and design ideas.
• Work on visual elements.
• Consider appropriate UI: ui-patterns.com is an excellent resource. UIpatterns.io also has good mobile examples. UIgarage is another platform with a number of examples.

Homework

• Refine and revise design ideas so that you are ready to start the HTML on Monday.

Class Topics

• Black and White prototyping (paper prototypes for the win)
• Revisiting personas to determine content and user flows

Homework

• Prototypes. Be prepared to narrow scope of web project on Friday with Rebecca.
• Keep up on your process books!

Class Topics

• Pitches to client

Homework

• Revise idea. Start prototyping.

Class Topics

• Work on pitches. Remember to consider each of the personas you have (how do your ideas support the needs of each of these community members?). Remember to consider the research you did about peer organizations/campaigns —what can we learn from those to me our proposals stronger?
• Prep possible questions the mayor may have.

Homework

• Prepare for pitch. Come to class on Monday dressed professionally. Remember to practice!

Class Topics

• Work on research/planning.
• Get Rebecca’s approval/feedback on three ideas.
• Work on competitive/peer analysis.

Homework

• Complete competitive/peer analysis.
• Work on pitch.

Class Topics

• Share, critique and revise personas.
• Competitive/Peer Analysis
• Pitch Deck
• Mood Boards (there are short tutorials on mood boards on Lynda that you can reference)

Homework

• Complete Competitive/Peer Analysis
• Sketches or Mood boards or similar visual research for Pitches

Class Topics

• Launch Project 2: Simulated Client Project
  • Ethnographic Research
  • Brainstorm issues and concerns
  • Form teams
  • Writing personas

Homework

• Personas (at least 1 per team member)
• Identify competing or peer organizations/initiatives

Class Topics

• Work on Exercise 6

Homework

• Continue to work on Exercise 6 for Friday.
• Read the following children’s books (and take detailed notes) for Friday. Pay attention to the similarities and differences between the stories. Learn as much as you can about each character and the world they live in. They are on reserve at Penfield Library.
  • The Three Pigs by David Wiesner
  • The True Story of the 3 Little Pigs by Jon Scieszka
  • There’s a Wolf at the Door by Zoe B. Alley

Reminder: Wednesday 10/31 is advisement day for art and design students. If you need to participate in advisement go straight to Lanigan 34 to partake. Other students can use the studio to work on Exercise 6. Please be aware that Rebecca will not be available during that class period.

Class Topics

• Explicitly set items on a grid (with overlaps!)
• Grid Experimentation: Jen Simmons Layout Lab, Layout Land Videos (Jen Simmons), Grid by Example (Rachel Andrews)
• Wrap up Exercise 5
• Start Exercise 6

Homework

• Work on Exercise 6. Having small screen design coded by Monday would be a good goal.

Class Topics

• Grids: Thinking with Type
• CSS Grid: Quickstart Guide, A Complete Guide to Grid
• Exercise 5

Homework

• Exercise 5

Class Topics

• Copyright
  • Client work vs. personal work or research
  • Licenses, Fair Use, Public Domain
  • Fair Use: CAA Fair Use Resources
  • Copyright Documentation Guide

Homework

• Our next exercises will give you the opportunity to experiment with fair use. The first exercise will be to create a regular grid where all elements on the grid are the same size and same format (like a card layout). The second exercise will still use a grid, but will allow you to experiment with different sizes and allow items to overlap or go across multiple rows or columns on the grid. For this assignment pick one issue/topic that you care about amd want to make a commentary on. Gather images and materials that you can use to put your idea forward. Remember that we want to stay in the territory of fair use. Use graph paper to sketch out a few different plans for each exercise.

Topics

• Visiting Artist: Kelly Walters

Homework

• Finish Project 1 and submit by 12pm on Sunday. Site needs to be live. Double-check your assignment sheet to be sure you submitted everything.

Class Topics

• Project 1 URLs
• Critique (take notes on the following): Unity (Consistent Theme/Brand and styles), Modular (header and navigation on each page are identical), Typography/Readability (equilateral triangle, baseline grid, modular scale), Responsive (design on smallest screens to design on largest screens). Test live sites on Mobile devices, iPads, and large screens.

Homework

• Explore the work of Kelly Walters prior to class on October 17.
• Project 1 Revisions, process and copyright spreadsheet due by noon on Sunday, October 21.

Class Topics

• Q & A
• Review Questions
• Work time: get all small screen design issues resolved.
• Get design to work correctly on mobile with this line of code in the head of your document: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Homework

• Media Queries. Prepare for critique (site needs to be live before class starts).

Class Topics

• Project 1 Checklist (what to do before you implement any media queries).

Homework

• Complete Project 1 checklist. Come to class on Friday with any questions you have.

Class Topics

• FTP
• HTML: Tables and Definition Lists
• References: MDN Table Reference, WebAim Accessible Tables, MDN Description List Reference,
• Review and Validate HTML
• Start mobile CSS (do about page first)

Homework

• Complete mobile CSS for project 1.

Class Topics

• Upload all Space Spuds assets and appropriate copyright documentation.
• Finalize all Space Spuds assets
• Mockups: what is feasible? What is most optimized for a small screen? Look at it on a small screen.
• Start Project 1 HTML Markup
• Discuss differences between marking up the menu as a list versus marking it up as a table.

Homework

• Continue working on Project 1.

Class Topics

• Resource: Should I Prefix
• Project 1: Space Spuds
• Finalize Space Spuds brief: menu, slogan, logo, about text, audience, etc.
• Identify other necessary assets.
• Design five mobile screen options (BW scale mockups)

Homework

• Complete assigned assets needed.
• Complete Space Spudgs mobile screen designs.
• Reach Chapter 8 in Better Web Type

Class Topics

• Q&A
• Small Caps Test File
• Retrieval Practice
• Project 1 Brainstorm
  • Name/Concept
  • Backstory
  • Audience
  • Research: Top 10 Food Trucks in America
  • Logo/Brand Identity
  • Menu

Homework

• Read chapters 1-2 in Better Web Type
• Finish Retreival Practice (if ran out of time in class)

Class Topics

• Q&A
• Open Type Features: ligatures, small caps, old-style figures, lining figures, tabular figures, em dash, en dash, hair space, non-breaking space, thin space, smart quotes, prime marks, ellipsis
• CSS Properties: font-variant-ligatures, font-variant-caps, font-variant-numeric, font-feature-settings, text-rendering
• Get feedback from classmates.

Homework

• Finish Exercise 4.

Class Topics

• Q&A
• Modular Scale Tools: Modularscale.com, Type-scale.com
• Choosing an image: Fair Use and Public Domain
• Guide to Copyright Documentation

Homework

• Exercise 4: Implement modular scale; incorporate one image; complete copyright documentation.
• Read Chapters 10-12 in Better Web Type

Class Topics

• Vertical Rhythm: Baseline Grid
• Horizontal Rhythm: letter spacing (tracking), kerning, indenting (p+p selector, text-indent property), hanging punctuation
• Check Browser Support

Homework

• Exercise 4: Set paragraphs (equilateral triangle), implement baseline grid, implement horizontal rhythm on paragraph text. Implement media queries so that the text works well across screen sizes.
• Read Chapter 7 in Better Web Type
• Read Fair Use FAQ and Public Domain FAQ from Teaching Copyright

Class Topics

• Retrieval Practice
• Critique & Troubleshooting
• Start Exercise 4

Homework

• Read Chapter 6 in Better Web Type
• Markup content for Exercise 4. Take good notes, we’ll be putting this into practice in class on Monday.
• Finish revisions for Exercise 3.

Class Topics

• Review Alt attributes exercise.
• Saving images for the web.
• Basic Layout: floats and clears
• Copyright Documentation
• Wireframes

Homework

• Complete exercise 3. Find a photo, use your own, or use this Pixabay image of Peanut Butter cookies for the recipe page. Plan for critique and troubleshooting on Friday (there will also be retrieval practice on Friday).

Class Topics

• Critique: How well does the design meet the needs of various audience members? Focus on readability (and the optimal paragraph).
• Image file types.
• Adding images to the HTML.
• Alt attribute exercise.

Homework

• Revise Exercise 2 based on critique. Write a summary of the critique you received and what you changed and why about your design. Conclude with a reflection on how effective (or not) your design is and why.
• Read Use of Illustrations and Use of Photography in AIGA’s Design + Business Ethics.
• HTML for Bio part of Exercise 3

Class Topics

• Media Queries
• Progressive Enhancement
• WCAG 2.1

Homework

• Prepare Exercise 2 for critique. CSS for all screen sizes should be complete using the mobile-first approach.

Course Topics

• Web Fonts (Google Fonts)
• Hierarchy through contrast
• Chunking
• Mobile First & Progressive Enhancement
• CSS Reset
• Chrome Add-ons: Measure & WAVE

Homework

• Work on Exercise 2. Complete all CSS for small screens (mobile first) and prepare file for progressive enhancements. The Chrome Add-on I mentioned in class is Measure (can help you measure line lengths without manually having to count characters).

Class Topics

• Review Exercise 1
• Review Design Math Exercise
• Review Equilateral Triangle and basic typographic terminology.
• Start Exercise 2

Homework

• Complete markup for Exercise 2

Class Topics

• Q & A about HTML
• Retrieval Practice
• Relative Units: em, rem, %
• Color & Color Contrast
• Font Stacks & Web-safe Fonts
• CSS Syntax

Homework

• Finish Exercise 1 and Retrieval Practice (Design Math)
• Read, annotate and take notes on Chapter 1 and Chapter 4 of Better Web Type
• Read, annotate and take notes on Copyright Basics (Circular 1)

Class Topics

• Overview of Teach Access Research: Pre-Course Survey
• Google Drive Folders
• Join Slack Group
• Review Web as User Worksheet
• World’s worst floor plan
• Exercise 1: Getting Started

Homework

• Complete HTML and written content for Exercise 1
• Not familiar with Slack? Use this getting started guide.

Class Topics

• Introduction to course
• Hopes & Fears

Homework

• Read Syllabus
• Purchase Textbook
• Complete Web as a User worksheet