Articles, Links, and Tools From An Event Apart DC 2019
An in-progress compendium of articles, links, tools, and other resources shared by our speakers at An Event Apart DC 2019.
Community
- Detailed session notes by Torre Capistran
- Session sketchnotes by Chris Basham
Jeffrey Zeldman, “Slow Design for an Anxious World”
Learn how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.
- 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”
Consumers and citizens alike turn inward for the truth. By designing for empowerment, the smartest organizations meet them there.
- 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”
It’s time to create apps, websites, and internal processes that account for still another strand of human diversity: our very different personality types.
- 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”
A spotlight on generated content that shows how it can be a generator of creativity as well as a powerful, practical tool for everyday use.
Rachel Andrew, “Making Things Better: Redefining the Technical Possibilities of CSS”
By understanding the new medium of web design we can start to imagine the future, and even help to shape it.
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”
Jen walks you through the thinking process of creating accessible & reusable page and component layouts.
Val Head, “Making Motion Inclusive”
How to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.
- 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”
Once you get a grasp of how SVG Filters work, you'll have a very powerful tool in your arsenal that allows you to push the boundaries of what is possible on the Web.
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
feMorphology
filter 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
feComponentTransfer
to create poster image effects. - SVG Filter Effects: Duotone Images with feComponentTransfer — in which you learn how to use
feComponentTransfer
to 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?”
Just about any process or tool that saves time and money can be “oped,” getting design improvements to those that need it most: the people using our websites and products.
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”
The way we build products is always changing, and so too is the way we track how people use them—we’ve come a long way from the days of just tracking clicks and page views.
- 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?”
Where web technology is going and what choices you might want to consider if you’re making new decisions today to help future-proof your site for tomorrow.
- 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”
Our work thrives when it’s communicated in language that aligns to the goals of the business and invites participation early and often.
Cyd Harrell, “Making Research Count”
How to build a valuable research practice in any company by doing strong small research projects and involving the broader team.
Aaron Gustafson, “Progressive Web Apps: Where Do I Begin?”
How to grow a project from a core, universally-accessible experience to a sophisticated Progressive Web App that ensures users will be able to access your product, no matter what.
- 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”
Become more agile by increasing the amount of customer feedback you receive, and developing faster methods to make changes to your code, content, or design.
- 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