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 twitter.

Categories

A11Y Project

The A11Y Project is a community-driven effort to make digital accessibility easier.

Accessibility Developer Guide

If you want to learn more about designing and implementing fully accessible websites, you've come to the right place.

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.

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.

Hocus :Focus

A keyboard navigation horror game. Find the 🎃 pumpkin.

Stark Library

The Stark Public Library is a collection of resources around a11y, articles, books, checklists and more

Stark

The suite of integrated accessibility compliance tools for software teams.

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.

We Are Colorblind

Making the world a better place for the colorblind

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.

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.

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.

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.

CMYK

A story about 3 ways to mix process colors.

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.

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.)

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.

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.

A Lightweight Branding Exercise for Startups

A bottom-up, alignment-oriented approach

Responsive Logos

An exploration in scalable logo design.

Designer vs. Developer

Designer vs. Developer aims to provide take aways, solutions to workflows, tools & discussions on everyday struggles.

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.

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.

CMYK

A story about 3 ways to mix process colors.

Grabients

Beautiful and simple UI for generating web gradients.

QULR.Life

Color, Colour, Colors, Colours No matter how you spell it they are beautiful.

We Are Colorblind

Making the world a better place for the colorblind

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.

The Functional Art

The Functional Art is an introduction to Information Graphics and Visualization, the communication of facts and data by means of charts, graphs, maps, and diagrams

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.

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.

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

Observable's Highlights

Explore and visualize data. Share and publish your insights. Discover and be inspired.

WSJ Graphics

Recent interactives, data visualizations, illustrations, maps and other graphics from the The Wall Street Journal’s Graphics team

Adele

The repository of publicly available design systems and pattern libraries

Australian Government's Design System

The Australian Government Design System provides a framework and a set of tools to help designers and developers build government products and services more easily.

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 Systems

A Figma publication for design systems creators, designers, developers, and managers

Design System Repo

An collection of Design System examples, resources, tools, articles and videos.

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.

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.

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.

Google Sheets Sync

Sync content from Google Sheets directly into your Figma file.

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.

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.

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.

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

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.

Codrops

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.

Control Panels

In praise of dials, toggles, buttons, and bulbs.

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.

Page Flows

See how top brands design their onboarding, upgrading, downgrading and other key user flows

The People's Graphic Design Archive

A virtual archive built by everyone, about everyone, for everyone.

Screenlane

Get inspired and keep up with the latest web & mobile app UI design trends

uiwtf

uiwtf is an experimental laboratory of user interface patterns and interactions that make you think

Really Good Emails

The web's best and most attractive, curated collection of emails, showing both design and code.

Visualising Data

Data visualization and infographic design

Mobbin

Check out the hand-picked collection of latest mobile design patterns from apps that reflect the best in design.

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.

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.

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.

CSS Vocabulary

Learn what all the parts of CSS are called

Visualizing Git Concepts with D3

This website is designed to help you understand some basic git concepts visually.

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.

Figma Design Dictionary

This dictionary of design terms will help you learn about a broad range of important terms you'll hear in your career as a designer.

DesignGold

A podcast about all things design and technology, how we can create better experiences and the pitfall of things not considered or overlooked.

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.

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.

Laws of UX

Laws of UX is a collection of principles that designers can consider when building user interfaces.

Method of Action

Method of Action creates tools, toys and games to help you learn design, for free.

Refactoring UI

Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.

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.

User Inyerface

User Inyerface - A worst-practice UI experiment

UXR Presentation

A intro to the world of design.

A wish list of three for UI / UX for the casual user

Don't forget about designing for the some times users.

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.

Designer vs. Developer

Designer vs. Developer aims to provide take aways, solutions to workflows, tools & discussions on everyday struggles.

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.

Want a Better Pitch?

A good read to help position your next pitch for success.

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.

Cartography Comparison: Google & Apple Maps

What are the biggest differences between Google Maps & Apple Maps? (2016)

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.

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'

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.

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.

Elements of AI

A free course covering the basics of artificial intelligence.

Laws of UX

Laws of UX is a collection of principles that designers can consider when building user interfaces.

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.

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

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.

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…

Sidebar

The five best design links, every weekday.

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.

Stark Library

The Stark Public Library is a collection of resources around a11y, articles, books, checklists and more

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.

Tips for shooting aerial photos with your drone

Some great tips for getting your drone shots.

Typographic Illusions

A collection of free tools for demonstrating typographic phenomena, for anyone teaching or studying typeface design.

Understanding Z Index

A visual guide on how z-index and stacking contexts work in CSS.

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.

UXPin Books

Thoughtful content on mobile & web prototyping, wireframing, mockups, usability testing, project management, design process & more.

A wish list of three for UI / UX for the casual user

Don't forget about designing for the some times users.

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.

Bensound

Royalty free music

CSS Gradient

A css gradient generator tool

Boring Avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

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.

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.

GIF Brewery

Creating fine-crafted GIFs for Mac users worldwide.

Goodbye John Doe

Peculiar names for the placeholder connoisseur. Placeholder name generator.

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

Lorem Picsum

The Lorem Ipsum for photos

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.

Stark

The suite of integrated accessibility compliance tools for software teams.

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.

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.

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.

Unsplash

Beautiful, free images and photos that you can download and use for any project.

FontMap

Hundreds of fonts arranged using machine learning

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.

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.

Accessibility Developer Guide

If you want to learn more about designing and implementing fully accessible websites, you've come to the right place.

CSS Gradient

A css gradient generator tool

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.

Codrops

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.

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.

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.

CSS Vocabulary

Learn what all the parts of CSS are called

DzgnIO Toolkit

A open set of web development resources to help you develop better and quicker with simple styling blocks.

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.

MDN Web Docs

Mozilla's web dev documentation, learn how and when to use HTML and CSS appropriately

Responsively

Multi-panel responsive browser.

Understanding Z Index

A visual guide on how z-index and stacking contexts work in CSS.

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.

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

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.

Mobbin

Check out the hand-picked collection of latest mobile design patterns from apps that reflect the best in design.

🎬

Explore the projects to see notes giving you a look behind the curtain. Achievement unlocked!