Articles, Links, and Tools From An Event Apart San Francisco 2018
Jeffrey Zeldman
- Beyond Engagement: the Content Performance Quotient
- No More FAQs: Create Purposeful Information for a More Effective User Experience by Lisa Wright
- The King vs. Pawn Game of UI Design by Erik Kennedy
- Why Performance Matters by Jeremy Wagner
- Marlboro Man (Wikipedia)
- @DesignCPQ on Twitter
- Performance: Showing Versus Telling by Laura Hogan
- Planning for Performance by Scott Jehl
- We need design that is faster and design that is slower.
- Art Direction and the Web by Stephen Hay
- Large Type: One Web Designer Puts Content First in a Big Way by Anthony Wing Kosner
- Authoritative, Readable, Branded: Report From Poynter Design Challenge, Part 2
- To Save Real News
- The Big Web Show № 171: Art Directing the News – with ProPublica Design Director David Sleight
- Top Task Management: Making it Easier to Prioritize by Gerry McGovern—An Event Apart video
- Organizing Mobile by Luke Wroblewski
- Redesigning in Public Again
- The Year in Design
Mina Markham
Art Direction, Design & Creativity
Progressive
Localized
- Amélie Lamont on the hegemonic design gaze
- Content or white space? Chinese vs. Western design aesthetics
- Why Can’t the U.S. Decolonize Its Design Education?
- Disney Shanghai Recruitment Campaign
Cross-Functional
- Til Launch Do Us Part
- How cross-functional design collaboration is shaping our future
- Design Systems and Hybrids
Inclusive
- Removing that ugly :focus ring (and keeping it too)
- Styling better focus states
- Inclusive Components
- Audio H
- Braille pin
Systematic
Cameron Moll
History & Principles
- Quadrant of Hierarchy (PDF)
- Hierarchy of Angels
- The Assumption of the Virgin (Francesco Botticini)
- Gestalt Principles
- John Maeda's Laws of Simplicity
- The Elements of Typographic Style (Robert Bringhurst)
- Jobs To Be Done (JTBD) Theory
Rachel Andrew
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)
Paged Media
Regions
Exclusions
Eric Meyer
- CSS Conditional Rules Module Level 3
- Picture credit: Innerbelt Bridge by Erik Drost, used under the terms of CC BY 2.0; minor straightening and color enhancement applied
- CSS:TDG4e Table of Contents
- CSS Flexible Box Layout Module Level 1
- Speaker pages:
- An Event Apart San Francisco 2018 store page (note: page will expire December 2018)
- CSS Grid Layout Module Level 1
- How We Adopted CSS Grid at Scale
Jen Simmons
- Layout Land on YouTube
- Layout Land
- Jen Simmons
- @jensimmons
- Firefox Nightly
- Example 1, HTML Flow only
- Example 2, Fluid Web Design
- Example 2.5, Fluid Web Design
- Example 3, Fixed Web Design
- Example 4, Responsive Web Design
- Example 5, Intrinsic Web Design
- Example of Image Options
- Stages of Squish
- Nesting Contexts
- Teaser card
- Multiple Teaser Card nested in a Grid layout
- Firefox CSS Grid Inspector
- Firefox Shape Path Editor
- Firefox Font Editor
Josh Clark
More on this topic from Josh
- Design in the era of the algorithm
- Systems smart enough to know they’re not smart enough
- The Juvet Agenda
- The state of UX in UI (User Defenders podcast)
- Designing with artificial intelligence: the dinosaur on a surfboard (Presentable podcast)
- The rise of artificial intelligence: how AI will affect UX design (Adobe interview)
- Making software with casual intelligence
- Stop pretending you really know what AI is
- AI first—with UX
- In a few years, no investors are going to be looking for AI startups
- “Algorithms aren’t racist. Your skin is just too dark.”
Context
- Benedict Evans: Ways to think about machine learning
- MIT Technology Review: Machine Learning: The New Proving Ground for Competitive Advantage
- Harvard Business Review: In the AI age, “being smart” will mean something completely different
- Kranzberg’s laws (PDF)
Example applications
- Slack topic search: A new way to discover and connect with just the right teammates
- Google Forms: No Machine Learning in your product? Start here
- CycleGAN transforms photos of apples into oranges, horses into zebras
- Douglas Summers Stay: Wordplay utilities
- Barnes Foundation: Using computer vision to tag the collection
- Dropbox: Using machine learning to index text from billions of images
Robot designers: AI for design and code
Machine learning APIs and data sets
- Microsoft cognitive services
- Amazon Web Services (AWS) machine learning
- Google Cloud AI building blocks
- IBM Watson products and services
- Topbots: Chihuahua or muffin? Searching for the best computer vision API
Customize or construct your own model
- Lobe (user-friendly visual interface)
- Google Cloud AutoML
- Microsoft Custom Vision
Mental models and opaque logic
- MIT Technology Review: The dark secret at the heart of AI
- Ralph Ammer: Make me think! The design of complexity
- Matt Jones: B.A.S.A.A.P. (Be As Smart as a Puppy)
Surveillance capitalism
- Vicki Boykis: What should you think about when using Facebook?
- Digital Content Next: Google data collection research
- Gizmodo: Facebook is giving advertisers access to your shadow contact information
Designing to counter misinformation, error and bias
- Book by Cathy O’Neil: Weapons of math destruction
- Facebook: Designing against misinformation
- ACLU: Amazon’s face recognition falsely matched 28 members of congress with mugshots
- Google’s speech recognition has a gender bias
- AI programs are learning to exclude some African-American voices
- Amazon scraps secret AI recruiting tool that showed bias against women
- Passport system rejects this dude's photo for a pretty racist reason
- Google mistakenly tags black people as ‘gorillas,’ showing limits of algorithms
- Machine Bias: There’s software used across the country to predict future criminals, and it’s biased against blacks.
Manner and language as cues for confidence and interaction
- Wikipedia: Paralanguage
- Amazon: Alexa speechcons
- Google: Google Duplex
- Jeremy Keith: Google duplicitous
Machine ethics
- Mindful Technology
- The Juvet Agenda
- Book by Cennydd Bowles: Future Ethics
- Mike Loukides: The ethics of artificial intelligence
- Genevieve Bell: From human-computer interactions to human-computer relationships
Laura Martini
- 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
Aaron Gustafson
- You Are @ 10K Apart
- Resource Hints: dns-prefetch, preconnect, prefetch, preload and prerender
- Preload, Prefetch And Priorities in Chrome
- Web Font Anti-Pattern: Aggressive subsetting
- Easy Navigation, Speed Are Leading Website Performance Attributes
- How Loading Time Affects Your Bottom Line
- How Page Load Time Affects Conversion Rates: 12 Case Studies
- Research: Performance Impact of Popular JavaScript MVC Frameworks
- Vanilla JS
- The Best Request Is No Request, Revisited
- HTTP/2: the Future of the Internet | Akamai
- The Growth of Web Page Size
- Not every article needs a picture