Articles, Links, and Tools From An Event Apart DC 2019
Jeffrey Zeldman, “Slow Design for an Anxious World”
- A Simpler Page
- Whitespace
- “Beyond Engagement: the Content Performance Quotient”
- Readability
- Mercury Web Parser
- Web Design Manifesto 2012
- Poynter Style Guide
- To Save Real News
- We Were Sofa
- Chanel
- Art Direction for the Web (book and courses by Andy Clarke)
- Art Direction and the Web by Stephen Hay (A List Apart, 2004)
- Art Direction vs. Design (zeldman.com, 2003)
- The Economist, front cover, April, 2003
Margot Bloomstein, “Designing for Trust in an Uncertain World”
- The Case for Content Strategy, Motown Style
- Content Strategy at Work
- How to Turn Off the Gaslighters
- Factcheck.org: Donald Trump and the Iraq War
- President Flip Flops
- Blur: How to Know What's True in the Age of Information Overload
- Edelman Trust Barometer
- The Politics of Climate (Pew)
- Confidence in Institutions (AP-NORC)
- xkcd
- The Unhealthy Other: How Non-Vaccinating Parents Construct the Vaccinating Mainstream
- Plain Language
- ClinicalTrials.gov
- Buzzfeed: What We Learned from a Week of Prototyping in Public
- FBI Crime Data Explorer
Sarah Parmenter, “Designing for Personalities”
- Ancestry
- Facebook Ad Preferences
- Every Website
- This Person Does not Exist
- Kill Your Personas
- Cookie Cleaner
- Natural Cycles
- Google Photos
- Bloom & Wild
- Metro UK
- Design for Real Life
- GoSquared
Tools I use that are relevant to this work:
Eric Meyer, “Generation Style”
Rachel Andrew, “Making Things Better: Redefining the Technical Possibilities of CSS”
The code examples can be found in this CodePen Collection.
Flexbox
Sizing
- CSS Intrinsic and Extrinsic Sizing Spec
- How Big Is That Flexible Box
- CSS is Awesome discussion on CSS Tricks
- Graduating to Grid An Event Apart Video
- How Big Is That Box: Understanding Sizing in Grid Layout
Logical Properties and Values
- Logical Properties and Values Spec
- Understanding Logical Properties and Values
- CSS Logical Properties and Values on MDN
Scroll Snap
Subgrid (Grid Level 2)
- CSS Grid Spec Level 2
- CSS Grid Level 2 Examples
- Grid Level 2: Here Comes Subgrid
- Digging Into The Display Property: Grids All The Way Down
- Subgrid - CSS: Cascading Style Sheets | MDN
- Hello subgrid!
- A design pattern solved by subgrid
Paged Media
Multicol
Fragmentation
Regions
Exclusions
Jen Simmons, “Designing Intrinsic Layouts”
Val Head, “Making Motion Inclusive”
- Your interactive makes me sick (and what to do about it)
- Responsive design for motion
- The prefer-reduced-motion query at a glance
- Safer web animation for motion sensitivity
- An introduction to the reduced motion query
- Move Ya! Or maybe, don't, if the user prefers-reduced-motion!
- Reduced motion picture technique take two
- Exclusive Design
Sara Soueidan, “SVG Filters: The Crash Course”
The following series of articles is basically the talk written down in more depth:
- SVG Filters 101 — an introduction to SVG Filters, how to create them and use them.
- SVG Filter Effects: Outline Text with feMorphology — deep dive into the
feMorphologyfilter primitive and how to use it to create text outlines. - SVG Filter Effects: Poster Image Effect with feComponentTransfer — in which you learn how to use the
feComponentTransferto create poster image effects. - SVG Filter Effects: Duotone Images with feComponentTransfer — in which you learn how to use
feComponentTransferto create Photoshop-grade duotone image effects. - SVG Filter Effects: Conforming Text to Surface Texture — what the title says. ;)
- SVG Filter Effects: Creating Texture with feTurbulence — did you know SVG can generate and create texture?!
More resources that I used to learn SVG Filters and find inspiration from:
- Lucas Bebber’s Codepen experiments
- Michael Mullany’s writing, Codepen experiments, and his contributions to the Web Platform Docs on SVG Filters.
- David Dailey’s introduction to SVG Filters
- Dirk Weber’s text Effects created with SVG Filters
- Yoksel’s SVG Filter Experiments on Codepen
- Yoksel’s visual SVG Filters tool
- The SVG Filters Specification
Kevin M. Hoffman, “What is Design Ops, and Why Do I Care?”
Articles, Videos, Podcasts, and Websites
- What We Call Things and Why It Matters - WHYY (Podcast)
- The environment: what’s in a word? - nature
- Operations management - Wikipedia
- Industrial Revolution - Wikipedia
- What is CICD — Concepts in Continuous Integration and Deployment - Medium
- The Allure of a Shiny (misunderstood) Silver Bullet - Medium
- An Introduction to Design Operations - Digital Ocean
- Agile is Reducing the Value of Your Design Team - Amplify Design - Medium
- DesignOps at Airbnb - Airbnb Design - Medium
- The New Design Frontier: A Design Maturity Model - DesignBetter by InVision
- Manifesto for Agile Software Development
- Communicating and Establishing DesignOps as a New Function - Brennan Hartich (Video)
- Exploring Key Elements of Spotify’s Agile Scaling Model
- Spotify Engineering Culture part 1 (Video)
Books
- The Environment: The History of an Idea
- Org. Design for Design Orgs.
- DesignOps Handbook - DesignBetter by InVision
- The Phoenix Project
How would we live without
Laura Martini, “Data Basics”
- How to choose the right UX metrics for your product
- How to Choose the Right UX Metrics for Your Project (interactive)
- I’m Sorry, But Those Are Vanity Metrics
- Case Study: Firebase Machine Learning Predictions
- Sample Size Calculator for A/B testing
- Pirate metrics
- Analytics and user experience
- Three Uses for Analytics in User-Experience Practice
Dave Rupert, “What Has Changed and Where’s it Going?”
- A Book Apart
- Atomic Design by Brad Frost
- Design Systems by Alla Kholmatova
- HTTP Archive State of the Web
- The need for mobile speed: How mobile latency impacts publisher revenue (Doubleclick)
- Khoros
- Austin Chamber of Commerce
- Papa Johns
- CSS Stats
- Lighthouse
- source-map-explorer
- Notion
- Angular
- React
- Vue
- JAM Stack
- GraphQL
- Serverless
- Internet Trends Report by Mary Meeker
- Web Components
- Squoosh App
- LiquidFun by Lorenzo Cadamuro
- Perception Toolkit
- CSS Houdini: Rough boxes
- CSS Houdini: Random irregular grid
- CSS Houdini: Masonry
Aarron Walter, “Leveling Up Your Design Communication”
Cyd Harrell, “Making Research Count”
Aaron Gustafson, “Progressive Web Apps: Where Do I Begin?”
- Carnival Cruise Line | Web | Google Developers
- Chromium Blog: The State of the Web at Google I/O 2018
- A Tinder Progressive Web App Performance Case Study
- The next billion users: trivago embrace progressive web apps as the future of mobile
- The New Bar for Web Experiences (Chrome Dev Summit 2017)
- PWA Stats
- Microsoft - Official Home Page
- Developing Dependency Awareness
- CodePen - Demo: Progressive Enhancement and CSS Grid Layout
- Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!
- Does your browser support
let? - Removing jQuery from GitHub.com frontend - The GitHub Blog
Gerry McGovern, “The Customer-Obsessed Professional”
- Buurtzorg website
- Buurtzorg: the Dutch model of neighbourhood care that is going global
- It’s too slow! It’s taking 600 milliseconds to load: Larry Page - Gmail
- Ask HN: Anyone else find the new Gmail interface sluggish?
- The New Normal: Viacom young people study
- Physics paper sets record with more than 5,000 authors
- Atypical Combinations and Scientific Impact
- Top user tasks European Union
- Fast Path to a Great UX — Increased Exposure Hours
- Empathy: the web professional’s greatest skill
- How Slack Became a Unicorn Company in 2 Years
- Collaborating and Connecting: Gerry McGovern
- The Huge, Unseen Operation Behind the Accuracy of Google Maps
- Continuous user research in 11.6 seconds, Tomer Sharon, Amazon
- Inclusive content, ethical tech, and you: Sara Wachter-Boettcher, Confab 2018
- Make me think! The design of complexity. Ralph Ammer
- Gerry McGovern website
- Top Tasks: Customer Carewords website