ART 317: Web Media I
- ART 317 Syllabus
- ART 517 Syllabus
- Class Slack Group
- Grades and Attendance on Blackboard
- Space Spuds Assets
- Timesheet Template
- Process Book Rubric
December 12 – You Made it!
Class Topics
- Final Presentations
- Course Evaluations
- Celebrate AIR-U win and semester accomplishments
Homework
- Team Evaluations due by 8am on Thursday, December 13
December 7 – Critique
Class Topics
Due at 11:59pm on Dec 7
- Website
- Shortcut to live website
- Copyright documentation
December 5 – Portfolio Prep
Class Topics
- Portfolio Documentation
- Portfolio examples: Kate Percival, Miranda Guarno, Marissa Specioso
November 30 – Critique
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
November 28 – Prepare for critique
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.
November 26 – Forms
Class Topics
- Layout Review: Products Page Challenge
- Forms: MDN HTML Forms, WebAIM: Creating Accessible Forms, Exercise Screenshot
Homework
- Finish template markup and CSS typography.
November 16 – Design Decisions
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.
November 14 – Prototyping
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!
November 12 – Pitches
Class Topics
- Pitches to client
Homework
- Revise idea. Start prototyping.
November 9 – Final Preparations
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!
November 7 – Work Day
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.
November 5 – Research
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
November 2 – Launch Project 2
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
October 29 – Exercise 6
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.
October 26 – Complex Layout
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.
October 24 – CSS Grid
Class Topics
- Grids: Thinking with Type
- CSS Grid: Quickstart Guide, A Complete Guide to Grid
- Exercise 5
Homework
October 22 – Copyright
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.
October 17 – Visiting Artist
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.
October 15 – Critique
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.
October 12 – Troubleshooting
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).
October 10 – Mobile First
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.
October 8 – Project 1 HTML
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.
October 5 – Work Day
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.
October 3 – Space Spuds
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
October 1 – Launch Project 1
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)
September 28 – Micro Typography
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.
September 26 – Modular Scale
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
September 24 – Baseline Grid
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
September 21 – Critique
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.
September 17 – Images Part 2
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).
September 14 – Images
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
September 12 – Media Queries
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.
September 7 – Mobile First
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).
September 5 – Typography
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
August 31 – CSS
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)
August 29 – Exercise 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.
August 27 – Introductions
Class Topics
- Introduction to course
- Hopes & Fears
Homework
- Read Syllabus
- Purchase Textbook
- Complete Web as a User worksheet