SP15 Web Media

Jan 27 Topics

• Review Syllabus
• Web Design Survey
• Vocabulary: HTML, CSS, JS, FTP, HTTP, Server, Element, Component, Wireframe
• ANNOTATED GOOGLE SEARCH for Directory Landing Page

Due Jan 29

• Read Syllabus
• Read Building Your Personal Brand as a Graphic Designer by Roberto Blake
• Install Brackets code editor
• Take notes on HTML Tutorials: Video 02 “First Webpage” (10:13), Video 03 “Semantic Markup” (8:10), Video 04″Using Semantic Markup” (12:50), Video 05 Elements in the Head (10:31)
• CONTENT for Directory Landing Page & finish ANNOTATED GOOGLE SEARCH

Jan 29 Topics

• Introduction to HTML: <html>, <head>, <body>, <meta>, <title>, <header>, <footer>, <section>, <article>, <div>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <img>, <a>
• HTML Template
• Watch Video 06 Styles Part 1 (10:04), Watch Video 07 Styles Part 2 (12:12), Video 14: Images and Floats (14:19), and Video 13 FTP (6:01)
• FTP

Due Feb 3

• HTML for Directory Landing Page

Feb 3 Topics

• Introduction to CSS: background-color, color, font-family, font-size, letter-spacing, line-height, max-width, text-align, text-indent, text-transform, width
• Mobile First & Responsive Design
• Tutorial: Clickable Links for Process Book

Due Feb 5

• PUBLISH Directory Landing Page

Feb 5 Topics

• Review Exercise 1
• Introduce Exercise 2
• MLA Captions

Due Feb 10

• READ pages 11-37 in Type on Screen
• READ Web Design is 95% Typography
• RESEARCH & CONTENT for Exercise 2

Feb 10 Topics

• IN THE NEWS: Net Neutrality: John Oliver on Net Neutrality, FCC Fact Sheet (Feb 4), Battle for the Net (pro net neutrality)
• Review HTML, CSS and Typography Concepts
• <dl>, <dt>, <dd>
• Finding and Using Web Fonts
• Attributions & Citations
• Establishing Hierarchy
• Component Design

Due Feb 12

• Complete HTML, WIREFRAME, and find Fonts for Exercise 2
• Read “Use of Fonts” and “Guide to Copyright” in Design Business + Ethics by AIGA
• Read “HOW TO CHOOSE A FONT: Is the Font Easy to Read? Anatomy and Legibility”(PDF) by Laura Franz
• Read pages 60-75 in Type on Screen

Feb 12 Topics

• Typographic Scales: Modular Scale Calculator, Type Scale (for Google Fonts), More Meaningful Typography, Web Font Specimen
• Hierarchy through Contrast: Scale, Weight, Color, Case, Style, Classification

Due Feb 17

• Complete CSS for Exercise 2
• Read Creating Exciting And Unusual Visual Hierarchies by C. Knight and J. Glaser
• Read Avoiding Faux Weights And Styles With Google Web Fonts by Laura Franz
• Watch 09 Styles Part 3 (6:46), 10 Advanced Typography (9:32), 10-1 A Quickie on Classes (3:24), 11 Spacing (13:03), 16 Classes and IDs (6:47)

Feb 17 Topics

• Critique 1hr before the end of class
• Review Quiz 1
• Copyright Documentation & Record Keeping: See Example Documentation for Process Book
• Responsive Showcase Mockup
• Ellen Lupton: Anatomy of Letters

Due Feb 19

• Complete Revisions and Process Book for Exercise 2
• Exercise 2 POST MORTEM: What design choices did you make to meet the needs of your audience and to enhance their experience? Be specific and support your answers with concepts from assigned readings and class discussion and your research. For example, do not simply state “I chose a readable typeface” — explain why that typeface is particularly easy to read. Were there design choices that you made that were not particularly successful at meeting the demands of the audience or the brief? Explain. How would you remedy these choices in the future? Be specific.

Feb 19 Topics

• Brainstorm: Point of View
• Exercise 3 Mind Map

Homework Due Feb 24

• 20-25 images of Oswego that challenge viewers to pay attention to a particular object, theme, color, number, word, etc. in the local environment. Examples include: Images that feature the color yellow or boots or maybe something more specific like yellow boots.
• Identify a specific target audience for your images and a message the images convey. The message could be educational, humorous or serious, etc. The intent might be to teach elementary children about the color yellow or to highlight the effect snow has on a number of living generations, etc. Write a paragraph defining the audience and a second paragraph defining the intent/purpose/message.
• Read p50-57 in Type on Screen by Ellen Lupton

Feb 24 Topics

• Grids: Units, Columns, Regions, Fields, Gutter
• Modular Example: AIGA and AIGA Upstate New York
• Grid Example: International Polar Foundation (grid revealed on small screen, big screen)
• 12 Column Grid Example
• 9 Column Grid Example

Due Feb 26

• PROJECT BRIEF, RESEARCH, GRID & WIREFRAMES for Exercise 3
• Read Design Last by Rik Schennink

Feb 26 Topics

• Critique of Wireframes
• Grid Unit Template
• <figure> and <figcaption>
• Image Compression: see Designer’s Guide to Image Compression via Creative Bloq
• Image Compression Example

Due Mar 3

• CONTENT & HTML for Exercise 3
• Read Style Tiles and and How They Work by Samantha Warren
• Read ELEMENT COLLAGES: An abstract way to document design for Reading Is Fundamental by Daniel Mall
• Bring assorted drawing materials including paper and drawing pens, pencils or markers to class

Mar 3 Topics

• Design Exploration workshop with visiting designer Ken Woodworth

Due Mar 5

• COMPONENT DESIGNS for Exercise 3
• Watch 18 Media Queries (17:15)

Mar 5 Topics

• Critique of Component Designs
• Using the Developer Tools to Troubleshoot
• CSS Strategies for Columns
• Peeps Day Brainstorm (see 2014 Post Standard examples, 2014 Washington Post Examples)

Due Mar 10

• Supplies for Peeps Day

Mar 10 Topics

• Peeps Day

Due Mar 12

• CSS for Exercise 3

Mar 12 Topics

• Critique of Exercise 3

Due Mar 13 @ 11:59pm via Google Drive

• REVISIONS and PROCESS BOOK for Exercise 3

Due Mar 24

• Watch “I’ve Just Been Invited to Basecamp“
• Read Backstage: An inside look at how we use Basecamp
• Set up Basecamp account. Post what skill sets (Both design and non-design related) you have to offer your team in the final project
• Review for Quiz

Mar 24 Topics

• Review Project
• Establish Leaders in group: Research & User Testing, Content Strategy & Development, Design (Including Information Architecture & Aesthetics, and Development & Publication (coding)
• Clarifying the problem: Research competitors/peers & Audience, ask questions of the client.
• Email Writing Workshop with Stephanie Pritchard

Due March 26

• Peer & Competitor Research (2 per person)
• Questions to Client via Email to clarify brief (focus on purpose/goal, intent, audience, etc.)
• Research audience and brainstorm more ways to learn about audience (Start discussion in Basecamp)
• Identify leaders for each phase of the project (post in Basecamp)

Mar 26 Topics

• Goals of the Discovery Phase
• How do you clarify the Design Problem?
• What do you do with the research? Description, Analysis, Evaluation and Recommendation.
• Design/Strategy Proposal: Form & Function, User Experience, Context, Project Goals, Long and Short Term Impact

Due Mar 31 (no later than the end of class)

• Process Book with All Research
• Competitive Analysis with Recommendations to the Client for Approval
• Read: Target Audience Examples: Three Commerials Have it Figured Out, Myth #14: You are Like Your Users, and Generations 2010
• Read: A Closer Look At Personas: What They Are And How They Work (Part 1)

Mar 31 Topics

• Develop Personas and their User Tasks

Due Apr 2

• Personas (1 per person) complete with User Tasks in Process Book
• Read “The Core Model: Designing Inside Out for Better Results“

Apr 2 Topics

• Content Development: Content Lists and Tone of Voice
• Case Study: MailChimp: Tone of Voice, Style Guide
• Core Model

Due Apr 7

• Resend research email to client.
• Complete Brand Definition
• Complete Business Objectives & User Tasks
• Complete Top of Core Model Worksheets

Apr 7 Topics

• Email Quiz
• Modes of Persuasion: Ethos (credibility, author as authority), Pathos (emotional), Logos (logical)
• Writing Content: Inverted Pyramid
• Site Maps
• Complete Core Model Worksheets

Due Apr 9

• Drafts of Written Content
• Client approval of Content Lists
• Read p98-11 and p124-149 in Type on Screen

Apr 9 Topics

• Wireframes
• Brand Brainstorm
• Moodboards
• Navigation Patterns: International Polar Foundation, Hirondelle USA , A List Apart, UX London 2013, and Cyberthread

Due Apr 14

• Watch “Chapter 3: Navigation” and “Chapter 4: Site Layout” and “Chapter 6: Homepage” in User Experience Fundamentals for Web Design

Apr 14 Topics

• Prototypes & User Tests

Due Apr 16

• Revised prototypes
• Basic Brand Guide Approval

Apr 16 Topics

• Element Collages
• Single Page Navigation Quiz: Edit the HTML code so that the navigation jumps to specific sections on the page. This is similar to how the “Resources” page works on this site (minus the animation). Keyword: Anchors.

Due Apr 21

• Element Collage Approval

Apr 21 Topics

• Element Collage Revisions
• Managing Code: Patrick’s “Source Code Control” presentation, GitHub, GitHub for Web Designers (Lynda)
• Meet with Creative Director about status of project.

Due Apr 23

• Finished Element Collages
• HTML markup for each template page (note that “reuseable modules” should have identical code)
• Review Jason Pamental’s “The Life of <p>” slides from Create Upstate. Optional: Watch Jason’s FITC version of “The Life of <p>” (45 min)

Apr 23 Topics

• Helpful Development Tools: placehold.it, meettheipsums.com, primercss.com, Typecast, Adobe Edge Inspect
• Development Strategies: Base Page, Modules, and naming conventions

Due Apr 28

• Read: When Pages Are Not Paper
• Read: How CSS Selectors Work
• Read: CSS Positioning 101 (make sure you look at all of the linked examples)

Apr 28 Topics

• CSS Positioning: Examples related to reading due today. See also CSS-Tricks Reference and MDN Reference
• Styling Navigation: Navigation Examples
• Logo Scenario: Your boss has just let you know that the logo file you had been waiting to receive for the bakery website project finally arrived. She sends you this folder of materials and asks you to add the logo (100px tall) to the template file already started for the project. Submit on Google Drive like you would submit to your boss.

Due Apr 30

• Read: Why Your Links Should Never Say “Click Here”
• Read: Constructing a POUR Website (be sure to go through this entire multi-page article
• Read: Alternative Text
• Read: Deafness and the User Experience

Apr 30 Topics

• Accessibility Workshop
• Accessiblity Lecture
• Mobile Growth Statistics

Due May 5

• Read: 6 Mobile Web Design Tips for Google’s Algorithm Shift
• Read: Web Accessibility for Designers
• Approval of Prototype by Client

May 5 Topics

• TESTING Tools: Google Mobile Friendly Test, Color Contrast Checker, CSS Validator, HTML Validator, Browsershots, Browserstack, No Coffee, WAVE Evaluation Tool, Web Developer, Page Speed Insights, Pingdom Website Tool Test
• EMBEDDING MEDIA: Embed Responsively (Video and Maps), Embed Tweets (note site needs to be live to test), Basic JQuery Slider (Note: the “Activation” code should be between a <script> and </script> tags right before the </body>), HTML5 Audio & Video. View Live Example Incorporating these Elements or Download the Example
• In Progress Critique

Due May 7 by 11:59PM

• Publish Prototype
• Code on Google Drive
• Update individual directory pages to include link to live site

May 7 Topics

• Work Day

Due Monday, May 11 by 8:00AM on Google Drive

• Process Notebook (One per group, no Post Mortems)

Due at the Final

The AM class final is May 14 from 8-10am. The PM class final is May 12 from 2-4pm.

• Printed Portfolio Pages (2 – One for this project and one for an earlier exercise of your choice)
• Post Mortem (Printed AND on Google Drive)
• Updated Landing Page