Resources
A bunch of resources and references curated by me, with the goal to help others learn something new. For more frequent bursts of resources and other related content join me over on Threads , opens a new window .
Categories
Recently Added
Videezy
Free HD and 4K stock video footage you can download and use in your projects.
OKLCH Color Picker & Converter
A tool for picking and converting colors in the OKLCH color space, with support for P3 wide gamut and accessible contrast checking.
Netflix Culture Memo
Netflix's culture memo outlining its core principles—Dream Team, People Over Process, Uncomfortably Exciting, and Great and Always Better—and how they shape hiring, feedback, and decision-making.
My Tech Go Tos
Leveling Up
How the Internet Works
Deep Dive
New to Dev
Introduction
New to UX
Introduction
Blender 2D/3D for beginners, drawing and animating with greasepencil - Part 2/2
Part 2/2 of the series on how to use Blender to draw and animate with grease pencil.
Blender 2D/3D for beginners, drawing and animating with greasepencil (blender 2.8) - Part 1/2
A step-by-step tutorial on how to use the 2D/3D drawing tools in Blender 2.8.
Blender 3.0 Beginner Donut Tutorial
Learn the basics of Blender while making your very own donut! You'll learn the UI, modelling, sculpting, texturing, shading, geometry nodes, lighting, rendering, compositing and compiling a final animation.
Ducky 3D
Hi my name is Nathan Duck, i'm a graphic designer and amateur 3D artist. I make Tutorials for beginners. My videos are mainly focused on the abstract and ways to make things visually intriguing
Poly Haven
Poly Haven is a curated public asset library for visual effects artists and game designers, providing useful high quality 3D assets in an easily obtainable manner.
AmbientCG
Free materials never looked this good! Get 1000+ PBR materials and textures for free under the Public Domain license.
Stark Library
The Stark Public Library is a collection of resources around a11y, articles, books, checklists and more
We Are Colorblind
Making the world a better place for the colorblind
A11Y Project
The A11Y Project is a community-driven effort to make digital accessibility easier.
Web Content Accessibility Guidelines
WCAG is developed through the W3C process in cooperation with a goal of providing a single shared standard that meets the needs of individuals, organizations, and governments internationally.
Stark
The suite of integrated accessibility compliance tools for software teams.
Accessibility Developer Guide
If you want to learn more about designing and implementing fully accessible websites, you've come to the right place.
axe DevTools
Find and fix accessibility issues on your website by using the axe DevTools Chrome extension.
Accessibility for Teams
Remember, accessibility is a team effort. Every person has a role to play. This article outlines criteria for each of the major disciplines (project manager, UX designer, and developer) so that they can work to incorporate accessibility best practices into their process.
IBM Equal Access Accessibility Checker
The IBM Equal Access Accessibility Checker is an open source tool for auditing your sites accessibility against IBM's accessibility rule engine.
Vox Media Accessibility Guidelines
Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.
Disabled Buttons Suck
Showing buttons as disabled until a form is complete might seem like a good idea. It is not. They usually create a lousy user experience and exclude many people with disabilities. Here’s why disabled buttons suck and what to do instead.
Hocus :Focus
A keyboard navigation horror game. Find the 🎃 pumpkin.
The right tag for the job: why you should use semantic HTML
Whether you write plain old HTML, HTML templating or JSX, are you using the right HTML tags? A guide to semantic HTML: what it is, why it's so important, and how to use it
Contrast Grid
Test many foreground and background color combos for compliance with WCAG.
MDN Web Docs Accessibility
The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
An Accessibility-First Approach To Chart Visual Design
Using a data visualization case study, we will explore how an accessibility-first approach led us down the path of creating a better visual design for charts.
How to make your everyday images and visual content accessible
From alternative text to figcaptions, here are some best practices to implement, as well as some of the key things to avoid, when making visual content accessible.
Art of the Title
Art of the Title is the definitive industry publication for title sequence design and an educational resource, spanning the film, television, conference, and video game industries.
CMYK
A story about 3 ways to mix process colors.
Walt Disney's MultiPlane Camera
Walt Disney explains his invention. Probably the most advanced tool ever made in the field of animation. (At least until the computer was made.)
Everything Animated
A channel for admirers of animation. Just sit back, relax and enjoy the greatest animation talent out there carefully handpicked for you!
How Design Legend Saul Bass Changed Film and TV Forever
The designer of famed logos had a rich and important career in designing film titles, too.
Blender 2D/3D for beginners, drawing and animating with greasepencil - Part 2/2
Part 2/2 of the series on how to use Blender to draw and animate with grease pencil.
Blender 2D/3D for beginners, drawing and animating with greasepencil (blender 2.8) - Part 1/2
A step-by-step tutorial on how to use the 2D/3D drawing tools in Blender 2.8.
Blender 3.0 Beginner Donut Tutorial
Learn the basics of Blender while making your very own donut! You'll learn the UI, modelling, sculpting, texturing, shading, geometry nodes, lighting, rendering, compositing and compiling a final animation.
Pixar's Software R&D Vimeo Channel
A collection of videos from Pixar's Software R&D group presenting their latest technologies
How open source software powers modern filmmaking
From editing to animation, open source is part of how movies get made.
Dimensions
Dimensions.com is an ongoing reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces that make up our world.
Heatherwick Studio
A multi-award winning British design and architecture studio - buildings, spaces, master-plans, objects and infrastructure.
Visualizing Architecture
Visualizing Architecture explores the different graphics styling you may encounter in the industry.
Poly Haven
Poly Haven is a curated public asset library for visual effects artists and game designers, providing useful high quality 3D assets in an easily obtainable manner.
The MIT Press Open Architecture and Urban Studies collection
MIT Press Open Architecture and Urban Studies is a robust digital collection of classic and previously out-of-print architecture and urban studies.
Elements of AI
A free course covering the basics of artificial intelligence.
Machine Learning for Artists
ml4a is a collection of free educational resources devoted to machine learning for artists.
A Visual Introduction to Machine Learning
In machine learning, computers apply statistical learning techniques to automatically identify patterns in data. These techniques can be used to make highly accurate predictions.
Writing with the Machine
It’s like writing with a deranged but very well-read parrot on your shoulder.
Teachable Machine
Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required.
Blender 2D/3D for beginners, drawing and animating with greasepencil - Part 2/2
Part 2/2 of the series on how to use Blender to draw and animate with grease pencil.
Blender 2D/3D for beginners, drawing and animating with greasepencil (blender 2.8) - Part 1/2
A step-by-step tutorial on how to use the 2D/3D drawing tools in Blender 2.8.
Blender 3.0 Beginner Donut Tutorial
Learn the basics of Blender while making your very own donut! You'll learn the UI, modelling, sculpting, texturing, shading, geometry nodes, lighting, rendering, compositing and compiling a final animation.
Ducky 3D
Hi my name is Nathan Duck, i'm a graphic designer and amateur 3D artist. I make Tutorials for beginners. My videos are mainly focused on the abstract and ways to make things visually intriguing
Poly Haven
Poly Haven is a curated public asset library for visual effects artists and game designers, providing useful high quality 3D assets in an easily obtainable manner.
AmbientCG
Free materials never looked this good! Get 1000+ PBR materials and textures for free under the Public Domain license.
A Lightweight Branding Exercise for Startups
A bottom-up, alignment-oriented approach
Responsive Logos
An exploration in scalable logo design.
Brand New
Opinions on corporate and brand identity work.
Onym Resources
This guide is an on-going open source attempt to organize the best tools and resources for naming things.
Design Canada
A documentary film celebrating Canada's golden era of graphic design, exploring how designers helped shape the nation's visual identity in the 1960s and 70s.
Jony Ive Shows Me The Most Controversial Ferrari Ever (Ferrari Luce)
Jony Ive walks through the Ferrari Luce, the most controversial Ferrari ever designed.
5 Principles for Better Designer-Developer Collaboration
In product design, the only certainty is change. Here are 5 timeless principles for improving designer-developer communication & collaboration.
Designer vs. Developer
Designer vs. Developer aims to provide take aways, solutions to workflows, tools & discussions on everyday struggles.
CSS Gradient
A css gradient generator tool
We Are Colorblind
Making the world a better place for the colorblind
CMYK
A story about 3 ways to mix process colors.
How to use Colors in UI Design
Color is like everything else, it’s best used in moderation. You will tend to get better results if you stick to max three primary colors in your color scheme.
Grabients
Beautiful and simple UI for generating web gradients.
QULR.Life
Color, Colour, Colors, Colours No matter how you spell it they are beautiful.
Is My Blue Your Blue?
Test your color perception with this interactive test.
Mesher — CSS Mesh Gradient Generator
A tool for generating beautiful CSS mesh gradients visually.
OKLCH Color Picker & Converter
A tool for picking and converting colors in the OKLCH color space, with support for P3 wide gamut and accessible contrast checking.
Derek Watkins
Derek is Graphics Editor at The New York Times, where I work as a designer, developer, reporter and geographer to visually present the news.
Feltron Annual Report
The tenth and final Feltron Annual Report examines the state of state of self-tracking through widely available apps and devices.
Flowing Data
FlowingData explores how we use analysis and visualization to understand data and ourselves.
Information is Beautiful
Data, information, knowledge: we distil it into beautiful, useful graphics & diagrams.
Watch how the measles outbreak spreads when kids get vaccinated – and when they don't
If you take 10 communities and run a simulation, it’s easy to see why we need as many members of the ‘herd’ as possible to get vaccines – before it’s too late
On Broadway
The interactive installation ON BROADWAY represents life in the 21st century city through a compilation of images and data collected along the 13 miles of Broadway that span Manhattan.
Pudding.Cool
We are a digital publication that explains ideas debated in culture with visual essays.
A Visual Introduction to Machine Learning
In machine learning, computers apply statistical learning techniques to automatically identify patterns in data. These techniques can be used to make highly accurate predictions.
Visualising Data
Data visualization and infographic design
WSJ Graphics
Recent interactives, data visualizations, illustrations, maps and other graphics from the The Wall Street Journal’s Graphics team
Observable's Highlights
Explore and visualize data. Share and publish your insights. Discover and be inspired.
Data Visualisation Catalogue
The Data Visualization Catalogue is a library of different information visualization types. The website serves as a learning and inspiration resource for those working with data visualization.
Data Viz Project
Collection of data visualizations to get inspired and find the right type
Adele
The repository of publicly available design systems and pattern libraries
GOLD Design System
The GOLD Design System provides a framework and a set of tools to help designers and developers build government products and services more easily. Maintained by an open community to the Australian government.
Chicago Design System
The Chicago Design System is the public visual identity of the City of Chicago. It is an inclusive, equitable, cost saving system for City communication and for public use to show civic pride.
Design System Checklist
An open-source checklist to help you plan, build and grow your design system.
Design System Repo
An collection of Design System examples, resources, tools, articles and videos.
Design Systems
A Figma publication for design systems creators, designers, developers, and managers
From Form Fields to Ship It: How Not to Design System
Building a design system is very trendy, but when is it the right time to conceptualize, design and execute on a system for use across a product and an organization. Given the context of both new products and legacy products in the same ecosystem, this talk will explore the lessons learned and some best strategies for building a design system.
Cloudscape Design System
Cloudscape is an open source design system to create web applications. It was built for and is used by Amazon Web Services (AWS) products and services.
Primer Design system
Primer is a set of guidelines, principles, and patterns for designing and building UI at GitHub. It provides a shared language and standardized approach to delivering cohesive experiences.
Shopify Polaris
Shopify's design system, A starter kit for reimagining commerce.
The Component Gallery
An up-to-date repository of interface components based on real-world design systems, useful as a reference for naming, building, and communicating about UI components.
Arc
Curve your text upward, downward or into a circle. Adjust the slider and preview the result.
Content Reel
Design layouts more efficiently by pulling text strings, images, and icons from one palette.
Figmotion
Figmotion is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool.
Google Sheets Sync
Sync content from Google Sheets directly into your Figma file.
Image Tracer
‘Image tracer’ traces black & white bitmap images, and turns them into a vector layer.
Lineage
Visualize your component and style dependencies. Lineage helps you understand how your design system is being used and how every change impacts your project.
Lorem Ipsum
Generate ‘Lorem ipsum’ to fill your text layers with dummy text.
Map Maker
Map Maker allows you to make a customized map blazing fast.
Mesh Gradients
Mesh Gradient generates a gradient image with an underlying 2d mesh, and lets you edit the vertices & edges of the mesh to get the perfect gradient look.
Remove.bg
Remove the background of images automatically with just a single click - using the remove.bg API.
Similayer
This plugin takes Figma’s in-built ‘Select all with...’ command to the next level. Select similar layers; based on a whole range of properties.
Unsplash
Insert beautiful images from Unsplash straight into your designs.
Abstract: The Art of Design
Step inside the minds of the most innovative designers in a variety of disciplines and learn how design impacts every aspect of life.
Art of the Title
Art of the Title is the definitive industry publication for title sequence design and an educational resource, spanning the film, television, conference, and video game industries.
Disney's Practical Guide to Path Tracing
Path tracing is a method for generating digital images by simulating how light would interact with objects in a virtual world.
Everything Animated
A channel for admirers of animation. Just sit back, relax and enjoy the greatest animation talent out there carefully handpicked for you!
The Infuriating Truth behind Elevator Buttons
The elevator buttons in our office building are slowly driving us all insane. We dropped everything to figure out what was going on and a little science happened along the way.
How Design Legend Saul Bass Changed Film and TV Forever
The designer of famed logos had a rich and important career in designing film titles, too.
Chicago Camps Recordings
Low-cost, high-value events serving the technology community.
David Dylan Thomas - Design for Cognitive Bias: Using Mental Shortcuts for Good Instead of Evil
Users’ minds take shortcuts to get through the day. Usually they’re harmless. Even helpful. But what happens when they’re not? In this talk I’ll use real-world examples to identify some particularly harmful biases that frequently lead users to make bad decisions. I’ll then talk about some content strategy and design choices we can use in our apps, designs, and platforms to redirect or eliminate the impact of those biases. Finally, I’ll explore our own biases as designers and some methods to prevent our own blind spots from hurting users.
How open source software powers modern filmmaking
From editing to animation, open source is part of how movies get made.
CGI Champ
A fun quiz game exploring topics in CGO and Visual Effects
Shotdeck
The library of film, one beautiful shot at a time. ShotDeck is the largest collection of fully searchable high-definition movie images in the world.
Design Canada
A documentary film celebrating Canada's golden era of graphic design, exploring how designers helped shape the nation's visual identity in the 1960s and 70s.
The Magic of Animation
A look at the 12 principles of animation developed by Disney to give life to an image.
Thor: Love and Thunder | The Sound Design of Mjölnir!
Sound designers, sound editors, foley artists, and sound mixers work together to create the soundscape for every scene in a movie–a kind of worldbuilding all on its own. Adam Savage recently visited Skywalker Sound where Samson Neslund, one of the Sound Designers of Thor: Love and Thunder, broke down the layers of sound effects that make up a key scene in the latest Marvel Studios blockbuster.
Filmmaking Process
What goes into making an animated film? Each department works together to bring us the big picture. From sequence to shot to frame, the film comes together through the deep collaboration between everyone at the studio.
The UX of Lego Interface Panels
Two studs wide and angled at 45°, the ubiquitous “2x2 decorated slope” is a LEGO minifigure’s interface to the world.
Mechanical Watch
Interactive article explaining how a mechanical watch works.
Typeset In The Future
Typography and Design in Science Fiction Movies
Design Thinking!
Read comics about: Designers, developers, managers working in tech or product, blunt honesty or even imposter syndrome.
Tesla Light Show
Create your own light shows for Tesla vehicles.
Is My Blue Your Blue?
Test your color perception with this interactive test.
HTML Spirograph
HTML Spirograph - creates awesome psychedelic drawings
Method of Action
Method of Action creates tools, toys and games to help you learn design, for free.
User Inyerface
User Inyerface - A worst-practice UI experiment
Can't Unsee
A game where you need to pick the design that is most correct. Test your attention to details!
Hocus :Focus
A keyboard navigation horror game. Find the 🎃 pumpkin.
CGI Champ
A fun quiz game exploring topics in CGO and Visual Effects
The Password Game
Have fun trying to pick your password
CSS Grid Garden
A game for learning CSS grid layout
Flexbox Froggy
A game for learning CSS flexbox
Is My Blue Your Blue?
Test your color perception with this interactive test.
Avataaars
Create avatar illustrations in Sketch App with this free library. Combine clothes, hair, emotions, accessories, and colors.
Humaaans
A Mix-&-Match illustration library of humans
Pose
A simple web app for character posing. Design a character exactly the way you want it and follow the easy guidelines to bring it to life using your favorite app.
The Patten Library
This on going project compiles patterns shared by the most talented designers out there for you to use freely in your designs.
unDraw
The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.
Open Doodles
A library of sketchy illustrations of people free for personal and commercial use.
uiwtf
uiwtf is an experimental laboratory of user interface patterns and interactions that make you think
Codrops
Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.
Lapa Ninja
Lapa Ninja is a gallery featuring the best 3154 landing page design inspiration, free books for designers and free UI kits from around the web.
On Broadway
The interactive installation ON BROADWAY represents life in the 21st century city through a compilation of images and data collected along the 13 miles of Broadway that span Manhattan.
Refactoring UI
Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.
Sidebar
The five best design links, every weekday.
The Patten Library
This on going project compiles patterns shared by the most talented designers out there for you to use freely in your designs.
Visualising Data
Data visualization and infographic design
Really Good Emails
The web's best and most attractive, curated collection of emails, showing both design and code.
The People's Graphic Design Archive
A virtual archive built by everyone, about everyone, for everyone.
Page Flows
See how top brands design their onboarding, upgrading, downgrading and other key user flows
Screenlane
Get inspired and keep up with the latest web & mobile app UI design trends
Mobbin
Check out the hand-picked collection of latest mobile design patterns from apps that reflect the best in design.
The Importance of Play in Design Tools
While Ryan and I are working hard on Subform, I want to discuss something that one of our Kickstarter backers brought up: the importance of play.
BentoGrids
BentoGrids is a curated collection of bento designs for your inspiration.
curated.design
Unleash your creativity with out-of-this-world web design inspiration from across the web.
Fictional Brands Archive
Fictional Brands Archive is a collection of many fictional brands found in films, series and video games providing a comprehensive view of each fictional brand, framing them in their own fictional context and documenting their use and execution in the source work.
Godly
Astronomically good web design inspiration.
Footer
We saw a need for footer-specific inspiration in the web design space and decided to build a site to collect and curate inspiration for our fellow designers.
Guidebook
A website dedicated to preserving and showcasing Graphical User Interfaces, as well as various materials related to them.
Landbook
We collect awesome websites to help creatives find inspiration & motivation to do rad stuff.
Shotdeck
The library of film, one beautiful shot at a time. ShotDeck is the largest collection of fully searchable high-definition movie images in the world.
The Component Gallery
An up-to-date repository of interface components based on real-world design systems, useful as a reference for naming, building, and communicating about UI components.
A conversation with Jony Ive
An in-depth conversation with legendary Apple designer Jony Ive on design, creativity, and craft.
Deck.Gallery
A curated gallery of beautifully designed presentation decks, pitch decks, and brand guidelines.
Detail
A curated collection of small but thoughtful UI/UX details that make a big difference in the overall quality of a product.
Letters to a Young Creator
A curated collection of letters from accomplished creators — including Jony Ive, Dieter Rams, and Tim Cook — offering wisdom and guidance to emerging innovators across design, tech, and the arts.
Jony Ive Shows Me The Most Controversial Ferrari Ever (Ferrari Luce)
Jony Ive walks through the Ferrari Luce, the most controversial Ferrari ever designed.
Father of the iPod and iPhone on building taste, judgment, and creativity in the AI era
Tony Fadell discusses how to cultivate taste, judgment, and creativity in an era dominated by artificial intelligence.
‘The creative process is fabulously unpredictable. A great idea cannot be predicted’
In this episode of The Quarterly Interview: Provocations to Ponder, Jony Ive, the former design head of Apple, talks about what it takes for the creative process to thrive at any company.
Leading through uncertainty: A design-led company
Brian Chesky – Co-founder & CEO, Airbnb in conversation with Dylan Field during Figma's Config conference speaking about product development and design-led organizations
Setting Roles & Responsibilities in Product Development: The RACI Template
Use a flexible responsibility-assignment matrix to clarify roles and responsibilities, anticipate team collaboration points, and maintain productivity in product development.
A conversation with Jony Ive
An in-depth conversation with legendary Apple designer Jony Ive on design, creativity, and craft.
Letters to a Young Creator
A curated collection of letters from accomplished creators — including Jony Ive, Dieter Rams, and Tim Cook — offering wisdom and guidance to emerging innovators across design, tech, and the arts.
Are You Actually Making Progress? How I Rewired My Weekly Reflection to Drive Real Impact
Rachel Kobetz shares a six-question weekly reflection framework for leaders to cut through busy-ness and assess whether their work is actually driving meaningful impact.
Netflix Culture Memo
Netflix's culture memo outlining its core principles—Dream Team, People Over Process, Uncomfortably Exciting, and Great and Always Better—and how they shape hiring, feedback, and decision-making.
Product Principles & Strategies
A series of principles and strategies that I have found to work well when building product. Whether in the discovery phase or implementation phase they can help teams build the best experiences.
Cartography Comparison: Google & Apple Maps
What are the biggest differences between Google Maps & Apple Maps? (2016)
Snazzy Maps
Snazzy Maps is a repository of different color schemes for Google Maps aimed towards web designers and developers.
Disney's Practical Guide to Path Tracing
Path tracing is a method for generating digital images by simulating how light would interact with objects in a virtual world.
Tips for shooting aerial photos with your drone
Some great tips for getting your drone shots.
Unsplash
Beautiful, free images and photos that you can download and use for any project.
Pexels
Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty free stock images & copyright free pictures. No attribution required.
Depth of Field Simulator
Understand the depth of field of a camera lens with this simulator.
BBC Global Experience Language
Welcome to BBC UX&D. We do the layer between people and technology. Every day, we focus on the stuff that makes things special, as well as the stuff that makes things happen.
DesignGold
A podcast about all things design and technology, how we can create better experiences and the pitfall of things not considered or overlooked.
Want To Design Great Digital Experiences? Start Working With Architects
Hans Neubert was chief creative officer at Frog and Huge. Here’s why he jumped ship for the largest architecture firm in the world.
Shape Up
This book is a guide to how we do product development at Basecamp. It’s also a toolbox full of techniques that you can apply in your own way to your own process.
Sketching Interfaces
The time required to test an idea should be zero. This was the very first sentence I wrote when considering the Airbnb design tools team vision.
Want a Better Pitch?
A good read to help position your next pitch for success.
A wish list of three for UI / UX for the casual user
Don't forget about designing for the some times users.
There’s no such thing as “minor design changes”
Sharing a quick story I found on Intercom’s blog about how there’s no such thing as a small change in a product. “We want to limit the length of a review in the product to 140 characters, because we…
How being a developer makes me a better designer
Transcript of Rafa's talk, originally presented at MOBX conference in Berlin, titled 'How Being a Developer Makes Me a Better Designer'
Designer vs. Developer
Designer vs. Developer aims to provide take aways, solutions to workflows, tools & discussions on everyday struggles.
Aaron Irizarry Opening Keynote: Leading Successfully, By Leading Ourselves - UX Camp Fall 2020
Aaron Irizarry, aka “Ron,” is the Head of Credit Solutions Design in Capital One’s Commercial Bank. Aaron is also the co-author of Discussing Design: Improving Communication and Collaboration through Critique. More importantly, Aaron loves connecting with people through food, is a lover of heavy metal, and a lifelong Dodgers fan.
Abi Jones Keynote: How to Make the Right Turn - UX Camp Fall 2020
In this keynote, you’ll learn how to identify the work that fuels you, reflect on the principles that guide your preferences, consider the upsides of spite, and identify the people who will support you as you take the next step in your career.
Chicago Camps Recordings
Low-cost, high-value events serving the technology community.
David Dylan Thomas - Design for Cognitive Bias: Using Mental Shortcuts for Good Instead of Evil
Users’ minds take shortcuts to get through the day. Usually they’re harmless. Even helpful. But what happens when they’re not? In this talk I’ll use real-world examples to identify some particularly harmful biases that frequently lead users to make bad decisions. I’ll then talk about some content strategy and design choices we can use in our apps, designs, and platforms to redirect or eliminate the impact of those biases. Finally, I’ll explore our own biases as designers and some methods to prevent our own blind spots from hurting users.
Success and Failure at Pebble
We launched Pebble on Kickstarter 10 years ago today! It was an amazing ride and I learned a lot from the experience. Story time!
Your MVP is neither minimal, viable nor a product
MVP is such a profound misnomer; a good MVP is not viable, and it is certainly not a product. Chances are it isn't minimal either, come to think of it.
Defining Design Generalists
Exploring the skill set of an underrated superpower
Mastery for Generalists
Becoming good when you're interested in everything.
Paper at 10
How we designed the app that changed everything (for me)
‘The creative process is fabulously unpredictable. A great idea cannot be predicted’
In this episode of The Quarterly Interview: Provocations to Ponder, Jony Ive, the former design head of Apple, talks about what it takes for the creative process to thrive at any company.
Leading through uncertainty: A design-led company
Brian Chesky – Co-founder & CEO, Airbnb in conversation with Dylan Field during Figma's Config conference speaking about product development and design-led organizations
Setting Roles & Responsibilities in Product Development: The RACI Template
Use a flexible responsibility-assignment matrix to clarify roles and responsibilities, anticipate team collaboration points, and maintain productivity in product development.
Why Figma CEO Dylan Field is optimistic about AI and the future of design
The leader of design toolmaker Figma on life after the failed Adobe deal and what comes next in a live interview from SXSW.
How big companies kill ideas — and how to fight back, with Tony Fadell
Stories and lessons from his new book, Build: An Unorthodox Guide to Making Things Worth Making
The first secret of design is ... noticing
As human beings, we get used to "the way things are" really fast. But for designers, the way things are is an opportunity ... Could things be better? How? In this funny, breezy talk, the man behind the iPod and the Nest thermostat shares some of his tips for noticing -- and driving -- change.
The $900 million UX mistake at the Notre Dame Cathedral fire
Will we always make the same errors in building things? The $900 million UX mistake.
Bad UX Cost Citibank $500M – What Went Wrong?
Stakeholders often ask: “How much does it cost to do this? It sounds expensive.” Instead, they should ask: “How much does it cost not to do these things?”
Sonos’ $30M app fail is cautionary tale against rushing unnecessary updates
Sonos is delaying two hardware releases because of the app’s problems.
Detail
A curated collection of small but thoughtful UI/UX details that make a big difference in the overall quality of a product.
Are You Actually Making Progress? How I Rewired My Weekly Reflection to Drive Real Impact
Rachel Kobetz shares a six-question weekly reflection framework for leaders to cut through busy-ness and assess whether their work is actually driving meaningful impact.
"Make me think!" by Ralph Ammer
An essay questioning whether design's drive toward simplification creates dependency and ignorance, and proposing empowerment, resilience, and empathy as guiding dimensions for designing with complexity in mind.
Product Principles & Strategies
A series of principles and strategies that I have found to work well when building product. Whether in the discovery phase or implementation phase they can help teams build the best experiences.
‘The creative process is fabulously unpredictable. A great idea cannot be predicted’
In this episode of The Quarterly Interview: Provocations to Ponder, Jony Ive, the former design head of Apple, talks about what it takes for the creative process to thrive at any company.
How big companies kill ideas — and how to fight back, with Tony Fadell
Stories and lessons from his new book, Build: An Unorthodox Guide to Making Things Worth Making
The first secret of design is ... noticing
As human beings, we get used to "the way things are" really fast. But for designers, the way things are is an opportunity ... Could things be better? How? In this funny, breezy talk, the man behind the iPod and the Nest thermostat shares some of his tips for noticing -- and driving -- change.
A conversation with Jony Ive
An in-depth conversation with legendary Apple designer Jony Ive on design, creativity, and craft.
Father of the iPod and iPhone on building taste, judgment, and creativity in the AI era
Tony Fadell discusses how to cultivate taste, judgment, and creativity in an era dominated by artificial intelligence.
"Make me think!" by Ralph Ammer
An essay questioning whether design's drive toward simplification creates dependency and ignorance, and proposing empowerment, resilience, and empathy as guiding dimensions for designing with complexity in mind.
Netflix Culture Memo
Netflix's culture memo outlining its core principles—Dream Team, People Over Process, Uncomfortably Exciting, and Great and Always Better—and how they shape hiring, feedback, and decision-making.
Time Zone Converter
Keep all your time zones in sync with this simple web tool
Laws of UX
Laws of UX is a collection of principles that designers can consider when building user interfaces.
10 Usability Heuristics
Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines.
UXPin Books
Thoughtful content on mobile & web prototyping, wireframing, mockups, usability testing, project management, design process & more.
Design Kit
Brought to you by IDEO.org Design Kit is hardly the only place to learn about the power of human-centered design. These books, guides, and free downloads are all great destinations to help you routinely innovate and solve big problems.
Deceptive Design
A catalog of dark patterns — deceptive tricks used in websites and apps that manipulate users into doing things they didn't intend to do.
Bensound
Royalty free music
Free Music Archive
Free access to original music and creators
Freesound
Collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?
Success and Failure at Pebble
We launched Pebble on Kickstarter 10 years ago today! It was an amazing ride and I learned a lot from the experience. Story time!
Your MVP is neither minimal, viable nor a product
MVP is such a profound misnomer; a good MVP is not viable, and it is certainly not a product. Chances are it isn't minimal either, come to think of it.
CSS Gradient
A css gradient generator tool
Dimensions
Dimensions.com is an ongoing reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces that make up our world.
Jeffsum
A little text placeholder generator of Jeff Goldblum awesomeness.
Lapa Ninja
Lapa Ninja is a gallery featuring the best 3154 landing page design inspiration, free books for designers and free UI kits from around the web.
Loopy
A tool for thinking in systems
Noun Project
The most diverse collection of icons ever. Download SVG and PNG.
Responsively
Multi-panel responsive browser.
Retrobatch
Flexible, super charged, batch image processing for your Mac.
Snazzy Maps
Snazzy Maps is a repository of different color schemes for Google Maps aimed towards web designers and developers.
Subtle Patterns
A bunch of subtle patterns
The Patten Library
This on going project compiles patterns shared by the most talented designers out there for you to use freely in your designs.
Unsplash
Beautiful, free images and photos that you can download and use for any project.
Stark
The suite of integrated accessibility compliance tools for software teams.
Goodbye John Doe
Peculiar names for the placeholder connoisseur. Placeholder name generator.
Can I Use
'Can I use' provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Lorem Picsum
The Lorem Ipsum for photos
axe DevTools
Find and fix accessibility issues on your website by using the axe DevTools Chrome extension.
IBM Equal Access Accessibility Checker
The IBM Equal Access Accessibility Checker is an open source tool for auditing your sites accessibility against IBM's accessibility rule engine.
Boring Avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.
Checklist Design
Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets to help you make sure to cover the full needs of the design.
Box Shadow Generator
A free, interactive WYSIWYG tool for visually creating and customizing CSS box shadows with live preview and copy-ready code.
Poly Haven
Poly Haven is a curated public asset library for visual effects artists and game designers, providing useful high quality 3D assets in an easily obtainable manner.
Fonts Knowledge
Welcome to our library of original guides to the world of typography, which the Google Fonts team is producing in collaboration with typographic experts from around the world. Google Fonts Knowledge enables designers and developers of all skill sets to choose and use type with purpose.
AmbientCG
Free materials never looked this good! Get 1000+ PBR materials and textures for free under the Public Domain license.
Data Visualisation Catalogue
The Data Visualization Catalogue is a library of different information visualization types. The website serves as a learning and inspiration resource for those working with data visualization.
Open Doodles
A library of sketchy illustrations of people free for personal and commercial use.
Pexels
Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty free stock images & copyright free pictures. No attribution required.
Humane by Design
A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.
Codepen
CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.
Figma
Figma is a collaborative interface design tool. Design, prototype, and gather feedback all in one place.
ImageOptim
ImageOptim makes images load faster by removes bloated metadata and compressing images without losing quality.
Sketch
Sketch is the all-in-one platform for digital design — with collaborative design tools, prototyping and developer handoff.
Health Icons
Health Icons is a volunteer effort to create a ‘global good’ for health projects all over the world. These icons are available in the public domain for use in any type of project.
Contrast Grid
Test many foreground and background color combos for compliance with WCAG.
ray.so
Create beautiful images of your code
Shotdeck
The library of film, one beautiful shot at a time. ShotDeck is the largest collection of fully searchable high-definition movie images in the world.
Teachable Machine
Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required.
Time Zone Converter
Keep all your time zones in sync with this simple web tool
CSS Playground
CSS Playground is a collection of small, interactive tools designed to make working with CSS more fun and approachable. From visualizing tricky properties to quickly generating snippets, it's meant to be a space where you can experiment.
Mesher — CSS Mesh Gradient Generator
A tool for generating beautiful CSS mesh gradients visually.
OKLCH Color Picker & Converter
A tool for picking and converting colors in the OKLCH color space, with support for P3 wide gamut and accessible contrast checking.
Videezy
Free HD and 4K stock video footage you can download and use in your projects.
Type Scale
Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.
Typography Cheatsheet
Everything you need to know about setting proper typography—smart quotes, apostrophes, em dashes, en dashes, accented characters and more.
Fonts in Use
A searchable archive of typographic design, indexed by typeface, format, and topic.
Google Fonts
Making the web more beautiful, fast, and open through great typography
League of Moveable Type
The League of Moveable Type is the first open-source font foundry, dedicated to helping you level up as a designer.
Space Type Generator
Playing with type in 3D space
TypeTerms
Type Terms. The animated typographic cheat sheet.
Typographic Illusions
A collection of free tools for demonstrating typographic phenomena, for anyone teaching or studying typeface design.
Fonts Knowledge
Welcome to our library of original guides to the world of typography, which the Google Fonts team is producing in collaboration with typographic experts from around the world. Google Fonts Knowledge enables designers and developers of all skill sets to choose and use type with purpose.
Typeset In The Future
Typography and Design in Science Fiction Movies
Typewolf
Font recommendations, typographic inspiration, and resources for designers who love typography.
CSS Gradient
A css gradient generator tool
Understanding Z Index
A visual guide on how z-index and stacking contexts work in CSS.
Codrops
Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.
CSS Reference
CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
Visualizing Git Concepts with D3
This website is designed to help you understand some basic git concepts visually.
MDN Web Docs
Mozilla's web dev documentation, learn how and when to use HTML and CSS appropriately
Responsively
Multi-panel responsive browser.
Can I Use
'Can I use' provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
What Makes CSS Hard To Master
I feel we, the community, have to acknowledge that CSS is easy to get started with and hard to master. Let’s reflect on the language and find out what makes it hard.
Accessibility Developer Guide
If you want to learn more about designing and implementing fully accessible websites, you've come to the right place.
Digging Into CSS Logical Properties
The support for CSS logical properties is getting better by time. However, I still struggle to memorize them each time I want to use them in a project. What does start mean? And what does end mean? It’s a bit tricky to grasp all the details without trial and error.
Box Shadow Generator
A free, interactive WYSIWYG tool for visually creating and customizing CSS box shadows with live preview and copy-ready code.
Defensive CSS
Practical CSS and design tips that helps in building future-proof user interfaces.
Codepen
CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.
CSS {In Real Life}
A blog about CSS, front-end development, the web, and beyond.
ray.so
Create beautiful images of your code
HTML for people
HTML isn't only for people working in the tech field. It's for everyone. Learn how to make a website from scratch in this beginner friendly web book.
CSS Playground
CSS Playground is a collection of small, interactive tools designed to make working with CSS more fun and approachable. From visualizing tricky properties to quickly generating snippets, it's meant to be a space where you can experiment.
Mesher — CSS Mesh Gradient Generator
A tool for generating beautiful CSS mesh gradients visually.
OKLCH Color Picker & Converter
A tool for picking and converting colors in the OKLCH color space, with support for P3 wide gamut and accessible contrast checking.
Design Vault
Browse a curated collection of mobile, web & desktop screenshots from the world’s best apps and websites. Gain insights, explore trends and understand competitors and best practices.
User Onboarding
A bunch of walkthroughs of onboardings out in the wild, the good and the bad.
UX Archive
We lay out the most interesting user flows so you can build your point of view and be inspired to design the best user experiences.
Page Flows
See how top brands design their onboarding, upgrading, downgrading and other key user flows
Screenlane
Get inspired and keep up with the latest web & mobile app UI design trends
Mobbin
Check out the hand-picked collection of latest mobile design patterns from apps that reflect the best in design.
Flowstate
Flowstate is a library of walkthrough teardowns & design patterns from the digital products all around us. Explore trends and gain insights from the industry as a whole.
UX writing: the definite guide for designing text in mobile apps
A must-have UX Writing resource: 40 rules for writing microcopy that looks stunning, from a UI design standpoint.
Tiny Words Matter
A curated dose of ✍️ microcopy. Because tiny words matter!
How to write useful error messages
Aw snap, it broke. What do you say when things go wrong? Here’s a UX Writer’s guide to writing every error message with ease.
Shopify Polaris - Writing Error Messages
Error messages can be scary. Make errors visible easy to understand, and helpful.