Class Resources List - J4502-SS19/class GitHub Wiki
Here you'll find a list of class resources that will help you through various assignments. Check back as this page will be frequently updated.
Books
Web Philosophy and History
- A Dao of Web Design
- The Slow Web
- The Web We Have To Save
- Continuum
- The Long Web
- An Oral History of the Hamburger Menu
- What Comes Next is the Future
- What We Get Wrong About Technology
- 12 Things Everyone Should Understand about Tech
- Sarah Parmenter for coders, designers and really anyone with dreams in general.
- The Missing Building Blocks of the Web
- The Building Blocks of the Indie Web
- Dear Developer: The Web Isn't About You
Designing With Kindness
- Inadvertent Algorithmic Cruelty
- Well, That Escalated Quickly
- Content For Kindness
- What Would a Human Do?
- Instagram uses 'I will rape you' post as Facebook ad in latest algorithm mishap
- Creating distraction free reading experiences
Accessibility
- Inclusive Design (Microsoft)
- Vox Media Accessibility Guidelines
- Getting Started with VoiceOver
- Empathy Prompts
- Designing for Accessibility (SOFLUX)
- Accessibility is Not Enough
- Building Accessible Websites and Apps is a Moral Obligation
- All technology is assistive
Design Philosophy
- Style Versus Design
- Object-Oriented UX
- What the Heck Is Inclusive Design?
- BBC Global Experience Language
- Content As Medium
- Web Design: The First 100 Years
- Discourse in Web Design
- How Designers Destroyed the World
- Researching Design Systems
- On Writing Less Damn Code
- Content Display Patterns
- Design Patterns for Humans
- Why Data is Never Raw
Git and Github References
HTML References
- HTML Tutorial
- HTML tag definitions
- HTML Validator
- Marksheet, an HTML reference
- Don't Fear the Internet
- Web Platform Docs
- Elements of HTML (from the W3C)
- HTML5 Please
- Dive Into HTML5
CSS References
- Rachel Andrews' Guide to CSS Layout
- Resilient CSS
- Learn Layout
- CSS Font Sizing
- CSS Validator
- Can I still use "px"?
- CSS3 Cheat Sheet
- Vertical Alignment in CSS
- Using Viewport Units in CSS
- Positioning
- Backgrounds
- Transparent Backgrounds
Miscellaneous CSS Tricks and Fun Stuff
- Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion
- Javascript Free Accordions
- Three ways to build Crouwel's Hiroshima poster in CSS
- Create a Sticky Hero Section with CSS
Grid (Background) References
Image References
Flexbox
- Learn Layout: Flexbox
- Flexbox Froggy
- A Complete Guide to Flexbox
- A Visual Guide to CSS3 Flexbox Properties
- Dive Into Flexbox
- CSS Writing Mode (Vertical type) explainer
Grid (CSS Specification)
- Labs by Jen Simmons
- Grid By Example
- Grid Cheat Sheet
- Adding Grid to an existing design
- CSS Grid Garden
- Here's a Super Quick Way to Try out CSS Grid
- CSS Grid Gotchas and Stumbling Blocks
- This website now uses Grid layout
- CSS Grid Layout & Flexbox City (big link dump from Zeldman)
- Flexbox and Grids, your layout’s best friends
- Best Practices for Grid Layout
JavaScript
Typography
- Web Design Is 95% Typography
- Butterick's Practical Typography
- Thinking With Type
- Professional Web Typography
- Font Joy (Font Picker)
- The Equilateral Triangle of a Perfect Paragraph
- Type Connection (A Typography Dating Game)
- Jason Santa Maria at AEA: "On Web Typography"
- Typograph: Scale and Rhythm
- Jessica Hische's Gatsby type game
- Intro to Font Metrics
- Why San Francisco, part 1 (type primer)
- Fonts In Use
- A Visual Lexicon
- A Few Basic Typefaces
- Why do pull quotes exist on the web?
- Web Safe Fonts from W3
- Turning Type Sideways
Browser Testing
Content Blocking
Bad Computing
Journalism Games
Design Inspiration
- Stuck Kids
- The Merchant Fleet of Late Medieval and Tudor England, 1400–1580
- Color Wheels, Charts and Tables Throughout History
Nontraditional paging:
Meant to be seen, not read:
Annotations:
- A field guide to the musical leitmotifs of Star Wars
- Elizabeth Wurtzel on discovering the truth about her parents
Big animations:
- Can China Turn the Middle of Nowhere Into the Center of the World Economy?
- Data Ghosts
- Stuck in Seattle
- The History of the Option
Maps:
Other:
- Notre Dame fire
- WaPo on solar eclipses
- Summers Are Getting Hotter
- Captain DaCosta
- Ship Map
- A Single Div
- Dogs of NYC
- Beyond the Breach
- Overlooked
- Dallas Pension Fund Explainer
- MLB Launch Angles
- SB Nation's World Cup Bracket 2014
- The Web is Read/Write
- The Ada Initiative
- Polar Bear Selfies
AR/VR/360 experiences
- The Winning View from Chicago
- A Year In Bloopers
- House to House: The Battle for Mosul (AP)
- Life on Mars (NYT)
- Capturing Everest (SI)
- Greenland Melting
- Beneath These Restless Skies
- Eisenhower VR (US Navy)
- Apple ARKit
- Intro to ARKit (WWDC)
Coaching Resources
- Digital Women Leaders
- News Nerdery (Site and Slack channel)
- IRE Listservs
- An editors guide to creating an online portfolio
Video Inspiration
- Jeffrey Zeldman: 20 years of Web Design and Community
- The Future Mundane
- Webstock ‘13: Mike Monteiro - How Designers Destroyed the World
- Resilience by Jeremy Keith
Google Maps API and tutorial information
- Using Google Fusion tables to build maps
- Google Maps documentation guide
- Google News Lab reporting tools
- Google Street View resources
- Streetview Embed
- Streetview Embed on Github
- Embedding VR view from Google
Mapping and Visualization
- Always Make A Map (But Don't Always Publish It)
- The Data Visualization Catalogue
- Ann K. Emery's Chart Choosing Tool
Service Workers
Embedding Youtube and Twitter
Great Style Guides or Brand Guidelines
- BBC GEL
- The Guardian's Design Guide
- Yelp
- Heroku
- Github
- Apple HIG
- Google Android Guidelines
- Dropbox
Creative Brief Resources:
Storyboard Resources
- Prototyping: Fake It Till You Make It (Apple)
- Interface Sketch Templates
- Draw.io sketching website
- Sneakpeekit (printable grids for drawing)
One-Liners
- If someone from the 1950s suddenly appeared today, what would be the most difficult thing to explain to them about life today?
- Do websites need to look exactly the same in every browser?
- Should I use a carousel?
- How To Pronounce "Gif"
- "Typography isn't a pressing issue"