Web Media (fall 2014)

Topics & Activities

• Review Syllabus
• Web Presence & Online Reputation
• How Search Engines Work (GOOGLE SEARCH ANNOTATION)
• Web Terms: Wiki, CMS, Social Media, Blog, RSS, Server, Internet, Intranet, HTML, CSS

Due Aug 28

• Read “Finding Your Tone of Voice” by Robert Mills
• Read “How To Define Your Brand’s Tone of Voice” by Tom Albrighton
• Write Web Presence: ANALYSIS OF OTHER DESIGNERS
• Complete Web Design Survey

Topics & Activities

• Project 1 FREE WRITE
• Project 1 MIND MAP
• Project 1 Share Research
• Project 1 Creative Brief
• Writing on the Web
  • Rhetoric
  • Inverted Pyramid
  • Tone of Voice
  • Branding
  • Connotation vs. Denotation

Due Sept 2

• Read Chapter 9: Editorial Style in Web Style Guide by Patrick J. Lynch and Sarah Horton.
• Project 1: CREATIVE BRIEF
• Project 1: BIO TEXT (3 Copies)

Topics & Activities

• Content
• Lorem Ipsum & Friends
• Semantic Markup
• Code Editors
• Mark Up Bio Page
  • Watch Video 02 “First Webpage” (10:13)
  • Watch Video 03 “Semantic Markup” (8:10)
  • Watch Video 04″Using Semantic Markup” (12:50)
  • Watch Video 05 Elements in the Head (10:31)
• Display vs. Body Type
• Licensing & Attribution

Due Sept 4

• Watch Chapter 1 Using Fonts to Communicate the Meaning of a Word or Headline in Typography for Web Designers by Laura Franz on Lynda.com. Use the available course files to follow along with the video tutorial. (41:03) Skip the last video for now.
• Read AIGA Design Business + Ethics: Use of Fonts.
• Collect Web Fonts for Bio (Gather many options for both body and display type).
• Revise Project 1: BIO TEXT

Topics & Activities

• Mobile First
• Typography Sketches
• Feedback on content
• Update HTML with actual content

Due Sept 9

• Read Guide to Copyright from AIGA’s Design Business + Ethics
• Watch Video 06 Styles Part 1 (10:04)
• Watch Video 07 Styles Part 2 (12:12)
• Watch Video 9 Styles Part 3 (6:46)
• Finish Project 1: MOCKUPS (6 mobile & 2-3 Large Screen)

Topics & Activities

• Intellectual Property
  • Copyright Documentation Guidelines
  • Copyright Documentation Example
  • Example Colophon
• FTP – Make Your Site Live
  • Video 13 FTP (6:01)
  • FTP Handout for Oswego Account
• Content vs. Presentation
• Review
• Start CSS

Due Sept 11

• Watch Video 11 Spacing (13:03)
• Read Damage Inc. by Sergio Muñoz Sarmiento and Structures by Sergio Muñoz Sarmiento in preparation for his artist talk.

Due Sept 16

• Watch Video 10-1A A Quickie on Classes (3:24)
• Watch Chapter 2 Using Fonts for Text in Typography for Web Designers by Laura Franz on Lynda.com (38:00)
• Revise Project 1: MOCKUPS
• Start Project 1: CSS (you should have your fonts loaded, font-sizes, font color and line-height set for your display and body type of your design. Get as far as you can and come with questions

Note: On September 11 we have a visiting artist. From 2:30-5:30 Artist/Lawyer Sergio Muñoz Sarmiento will be giving us a workshop on Legal issues facing artists/designers in the Marano Campus Center Auditorium (132). Please go directly there. From 6-7:30 he will give an artist talk in 105 Lanigan (the evening class should go directly there). Please try to attend both events if possible.

Due Sept 16

• Watch Video 11 Spacing (13:03)
• Watch Video 10-1A A Quickie on Classes (3:24)
• Watch Chapter 2 Using Fonts for Text in Typography for Web Designers by Laura Franz on Lynda.com (38:00)
• Revise Project 1: MOCKUPS
• Start Project 1: CSS (you should have your fonts loaded, font-sizes, font color and line-height set for your display and body type of your design. Get as far as you can and come with questions

Topics & Activities

• Recap Sergio’s Visit — address remaining questions
• Code Validation: CSS Validation & HTML Validation
• Assembling a Process Book
• Document Web Project with Template
• TYPE ANATOMY REVIEW: aperture, bowl, counter
• COMPARE TYPE REVIEW
• HTML CODE REVIEW: head, header, title, h1, h2, p, article, meta, !Doctype html, link, a, span
• HTML MAKE A LIST: ul, li, ol
• CSS: Dealing with space (width, min-width, max-width, css-reset, padding, margin
• CSS Baby Media Query Syntax @media screen and(min-width:500px){ }
• Introduction to Project 2

Due Sept 18

• Draft Project 1:DESIGN RATIONALE (Bring 2 printed copies to class)
• Bring USB Drive & Headphones to Class

Code Resources

• HTML Character Codes
• CSS Declarations
• CSS Box Model (padding, margin and borders)
• CSS Media Queries
• CSS Validation
• HTML Validation

Topics & Activities

• COLLECT content for Project 2
  • Scanning Primary Documents In Special Collections
    1. Turn scanner on.
    2. Open Photoshop Elements (Start > All Programs > Adobe > Photoshop Elements.
    3. Place document facedown on scanning bed
    4. In Photoshop Elements go to File > Import> NAME OF SCANNER
    5. In the Dialog Window choose “Professional Mode”
    6. Your scan settings should be: REFLECTIVE, PHOTO, 24-bit COLOR, 600dpi, Photo
    7. Preview your scan
    8. Scan as a TIFF and save to your USB Drive
    9. Check your USB drive to make sure the file opens and that the scan came out ok
    10. Safely Eject your USB
• Proper Attribution for Project 2
  • CITATION: Coye, Laura Parker. Letter to XX. 8 May 1844. MS 013 “Laura Parker Coye correspondence”, Special Collections of Penfield Library, SUNY at Oswego, Oswego, NY.
  • ATTRIBUTION: Letter from Laura Parker Coye to XX on May 8, 1944. MS 013 “Laura Parker Coye correspondence”, Special Collections of Penfield Library, SUNY at Oswego, Oswego, NY. Transcribed by Your Name.
• Feedback & Revision on DESIGN RATIONALE

Due Sept 23

• Watch Chapter 5 Shaping a Page Using Typography in Typography for Web Designers by Laura Franz on Lynda.com (17:57)
• Project 1:PROCESS NOTEBOOK & Project 2:PROJECT FILES
• Publish Project 1

Topics & Activities

• Project 1 Reflection
• Modern vs. Traditional
• Project 2: SITE ANALYSIS
• Patterns & Textures
• Project 2 STYLE TILES

Due Sept 30

• Watch Chapter 3: Maximizing Readability in Typography for Web Designers by Laura Franz on Lynda.com (55:31)
• Watch Chapter 6: Shaping the Traditional Page in Typography for Web Designers by Laura Franz on Lynda.com (55:31)
• Watch Chapter 1 Introducing Responsive Design in Responsive Design Fundamentals by James Williamson on Lynda.com (14:16)
• Project 2: TRANSCRIPTION
• Project 2: TYPE ANALYSIS
• Project 2: Visual Research
• Project 2: Find Fonts

There are no classes on Thursday, September 25 in honor of Rosh Hashanah. Make sure to complete homework assigned on September 23 for next class.

Topics & Activities

• Proofread Content
• Introduction to Style Tiles
• Responsive Design
• Introduction to Patterns/Textures

Due October 2

• Watch Video 16 Classes and IDs (6:47)
• Watch Video 17 Designing for Multiple Screens (5:18)
• Project 2: HTML MARKUP
• Project 2: STYLE TILES or MOCKUPS

Topics & Activities

• Critique of STYLE TILES
• Review Project 2: HTML MARKUP Example
• Start Project 2: Mobile CSS
• Media Queries (Let Your Content Be Your Guide)
• Process Notebook Reminders
  • Combine PDF in Acrobat Pro: File > Create > Combine Files into Single PDF
  • Link to Website in Acrobat Pro: Tools > Content > Link
  • SWOT Analysis: Consider the site in Context
  • Target Audience: What is your audience looking for? What do they need?
  • Screenshot Mockup File
  • Copyright Documentation Example, Copyright Documentation Guidelines, Colophon Example
• Describe, Analyze & Evaluate

Due October 7

• Watch Chapter 4: Working with Scanned Fabric (22:45) and Chapter 6: Adding Texture with Filters (21:25) from Photoshop for Fashion Design: Rendering Techniques with Robin Schneider to learn about creating repeating textures.
• Watch Introduction: What Are Patterns? (3:03), Drawing Out and Refining your Design (09:39) and Building your vector Pattern with a bounding box (15:22) in Chapter 1: Building a Repeating Pattern from Scratch, and Pattern Tool Basics (11:16) from Chapter 2: Building A Repeating Pattern Using the Pattern Tool in Drawing Vector Graphics: Patterns with Von Glitschka
• Project 2: MOBILE CSS

Topics & Activities

• Introduction to Images: Content vs. Decoration
• Implement typography based media queries

Due October 9

• Project 2: MOBILE CSS
• Start Project 2: IMAGES

NOTE: Rebecca will be out of town attending the Level Up Conference in Saratoga. Class will meet as usual.

Topics & Activities

• Watch Favicon Tutorial via Tim Ano (1:50)
• Develop and implement patterns, textures and decorative elements.

Due October 14

• Finish project!

Topics & Activities

• Publish Projects
• Project Critique
• Troubleshoot Projects

Due Oct 16

• Project 2: DESIGN RATIONALE

Topics & Activities

• Feedback on DESIGN RATIONALE

Due Oct 21

• Finish PROCESS NOTEBOOK
• Read Designing for Different Age Groups by Alexander Dawson
• Read Myth #14: You Are Like Your Users by Zoltán Gócza
• Read You are not your user. No matter how good you think you are. by Dana Chisnell.

Topics & Activities

• Introduction to Project 3
• Designing for Audiences
• Personas
• Competitor Research
• Project Management

Due October 23

• Project 3: COMPETITOR RESEARCH
• Project 3: PERSONAS
• Read Mood Boarding Methods for Web Designersby Stephanie Hamilton
• Read How to create mood boards: 40 pro tips and tools via Creative Bloq
• Review Reading is Fundamental Website Process: Note that you might want to start at the bottom of the screen, as that is where the design process starts (look at the dates). Explore all of the pages of the site, as it reveals how this particular site evolved over time.

Topics & Activities

• Concept Development
• Develop Pitch
• Develop Moodboard
• Review Readings
• Age Groups

Due October 28

• Draft schedules for advisement.
• Project 3: CONTENT LIST

NOTE: There is an advisement session scheduled during the afternoon section of web design which art/design students are expected to participate in if they have not already attended an advisement session and are not graduating in December.

Topics & Activities

• Advisement
• Develop Brand Identity

Due October 30

• Project 3: PITCH PDFs (include Concept Overview, Audience Overview, Competition Overview and Moodboard)
• Identity system sketches

Topics & Activities

• Present Pitches
• Professional Writing Workshop

Due November 4

• Project 3: REVISED PITCH DECK — Get Client Signature to Approve Deck by email
• Project 3: CONTENT – Each team member is responsible for at least two pages of content
• Read Organizing Mobile by Luke Wroblewski
• Read Separate Mobile Website vs. Responsive Website by Brad Frost
Read Sketching for Better Mobile Experiences by Lennart Hennigs

Topics & Activities

• Navigation Examples (International Polar Foundation, Hirondelle USA ,, and A List Apart, UX London 2013, and Cyberthread
• Wireframes
• Accessibility Workshop

Due November 6 (by the end of class)

• Project 3: REVISE SITE CONTENT
• Project 3: WIREFRAMES
• Project 3: SITEMAP

NOTE: Rebecca is attending the RGD Design Thinker’s Conference in Toronto. Class will meet as usual.

Due November 11

• Project 3: IDENTITY SYSTEM
• Read When Pages are Not Paper
• Watch 21 Navigation Basics (7:24), 22 Styling Navigation (10:17), and 23 Styling Navigation Addendum (1:42)
• Review Code Samples
  • Horizontal Navigation on large screens to vertical navigation on mobile device 
  • Tabs to Navicon (also useful just to see how to make tabbed navigation)
  • Tabs to Pull-down

Topics & Activities

• User Testing
  • Paper Prototypes: UX Sketching Wireframe Templates (Smashing Magazine), Board of Innovation Wireframe Templates, UI Stencils
  • Usability Hub
  • POP – Prototyping on Paper
  • InVision (EDU account free for 6 months after graduation)
• Page Templates (Web Style Guide): Start with internal page design; Work on functioning wireframe before skinning site.

Due November 13

• Project 3: TEMPLATE HTML
• Project 3: MOCKUPS/STYLE TILES/ELEMENT COLLAGES
• Project 3: WIREFRAME REVISIONS — Email Revised Wireframes to client for approval
• Read CSS Positioning 101

• Eliciting Useful Feedback

Topics & Activities

• CSS Transforms
• Advanced CSS Typography
• CSS Transitions
• CSS Positioning

Topics & Activities

• Finish and troubleshoot projects. Projects are due on LisaFrench @ 8:59pm

Homework

• Project 1: Part 2 CONTENT LIST: Make a list of all of the imagery you need to gather. Identify what you already have and what needs to be created. Consider background textures/patterns, thumbnails of creative work, decorative elements, logotype or wordmark, favicon, etc. Make a second list of any additional text you might need. Consider resume elements, links to social networks, expanding your bio, a list of exhibitions, details about projects you have worked on, etc. Clearly identify what you already have and what needs to be written.
• Project 1: Part 2 BRAINSTORM: (use a mind map or list or other method that works for you) What qualities does your imagery need to have to reinforce your message and tone of voice?

No classes.

Homework

• Project 1: Part 2 CONTENT LIST: Make a list of all of the imagery you need to gather. Identify what you already have and what needs to be created. Consider background textures/patterns, thumbnails of creative work, decorative elements, logotype or wordmark, favicon, etc. Make a second list of any additional text you might need. Consider resume elements, links to social networks, expanding your bio, a list of exhibitions, details about projects you have worked on, etc. Clearly identify what you already have and what needs to be written.
• Project 1: Part 2 BRAINSTORM: (use a mind map or list or other method that works for you) What qualities does your imagery need to have to reinforce your message and tone of voice?

Topics & Activities

• In the News: Blue Beanie Day and Designing with Web Standards and FLICKr
• Show and Tell: Project 2
• View Live Bio Page Example or Download Bio Page Example.
  • Embed video and maps with Embed Responsibly
  • Embed Tweets
  • Basic JQuery Slider by J Cobb
  • CSS: box model and box-sizing
  • HTML5 Audio and Video

Homework

• Project 1: Part 2 SKETCHES/MOCKUPS/WIREFRAMES/PROTOTYPES
• Project 1: Part 2 ALL CONTENT

Topics & Activities

• User Tests
• Marketing

Homework

• Project 1: Part 2 WEBSITE & PROCESS BOOK

The final critique for the afternoon section is from 2-4pm.

The final critique for the evening class is from 6-8pm.

Web Presence Assignment Sheet

Deadlines

• 8.28 Annotated Google Search
• 9.2 Action Plan
• 10.1 Domain Name
• 12.9 Web Design Portfolio (Print, PDF & URL)
• 12.9 Professional Presence
• 12.9 Evaluation

Tech Bootcamp Assignment Sheet

• 8.28 Course List for Approval
• 9.4 CSS Selector Game (complete in class — show me that you have reached level 26)
• 9.9 Courses complete with documentation

Designer Project Assignment Sheet

Deadlines

• 9.18 Copyright Agreement + Brief + Learning Plan
• 9.23 Deliverables Plan (what, who and when)
• 10.2 Planning Deliverables + Content
• 10.16 Final Site (critique in class)
• 10.21 Process Book + Post-Mortem

Design For Good Assignment Sheet

Deadlines

• 10.23 Design Brief (end of class)
• 10.28 Learning Plan (start of class)
• 11.6 Planning Deliverables (end of class)
• 11.20 Solution (critique at start of class)
• 11.25 Process Book & Post Mortem

Storytelling

• A Periodic Table of Storytelling Tropes
• Design Tells an Intentional Story
• Design Tells an Empathetic Story
• 2013: The Year in Interactive Storytelling

Calls to Action

• 10 of the Sexiest
• Call to Action Buttons: Examples and Best Practices by Jacob Gube
• “Like”-able Content: Spread Your Message with Third-Party Metadata by Clinton Forry
• Being Real Builds Trust by Steph Hay

Extending the Brand/Campaign Assignment Sheet

Deadlines

• 10.23 Design Brief (end of class)
• 10.28 Learning Plan (start of class)
• 11.6 Planning Deliverables (end of class)
• 11.20 Solution (critique at start of class)
• 11.25 Process Book & Post Mortem

Proposal Assignment Sheet

Deadlines

• 9.18 or 10.23 Design Brief (end of class)
• 9.18 or 10.28 Learning Plan (start of class)
• 10.2 or 11.6 Planning Deliverables (end of class)
• 10.16 or 11.20 Solution (critique at start of class)
• 10.21 or 11.25 Process Book & Post Mortem