"" Achievement Unlocked

View Achievements

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 Opens a new window .

Categories

Recently Added

event

UXDX

Up to 90% of product features still fail to deliver their expected value. We run conferences to help you improve these odds. Our speakers share case studies on how they are adopting the latest best practices, and the challenges they had to overcome so you can put the theory into practice.

event

Siggraph

The premier conference & exhibition on computer graphics and interactive techniques. Hosted by the Association for Computer Machinery (ACM)

event

Information Architecture Conference

The IA Conference is the leading gathering for academics and practitioners of information architecture. Since 2000, our community of information architects, user experience designers and researchers, content strategists, and engineers have met to learn about and discuss the intentional design of rich information environments.

tool

AmbientCG

Free materials never looked this good! Get 1000+ PBR materials and textures for free under the Public Domain license.

video

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.

video

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.

video

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.

video

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

reference

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.

reference

Stark Library

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

publication

We Are Colorblind

Making the world a better place for the colorblind

reference

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.

tool

axe DevTools

Find and fix accessibility issues on your website by using the axe DevTools Chrome extension.

reading

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.

reading

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.

article

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.

publication

A11Y Project

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

reference

Accessibility Developer Guide

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

article

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.

tool

Contrast Grid

Test many foreground and background color combos for compliance with WCAG.

interactive

Hocus :Focus

A keyboard navigation horror game. Find the 🎃 pumpkin.

tool

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.

reference

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.

reading

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

tool

Stark

The suite of integrated accessibility compliance tools for software teams.

reference

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.

publication

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.

video

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.

video

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.

video

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.

video

CMYK

A story about 3 ways to mix process colors.

video

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

video

Everything Animated

A channel for admirers of animation. Just sit back, relax and enjoy the greatest animation talent out there carefully handpicked for you!

reading

How open source software powers modern filmmaking

From editing to animation, open source is part of how movies get made.

video

Pixar's Software R&D Vimeo Channel

A collection of videos from Pixar's Software R&D group presenting their latest technologies

reading

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.

reference

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.

portfolio

Heatherwick Studio

A multi-award winning British design and architecture studio - buildings, spaces, master-plans, objects and infrastructure.

Publication

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.

reference

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.

reading

Visualizing Architecture

Visualizing Architecture explores the different graphics styling you may encounter in the industry.

reading

Elements of AI

A free course covering the basics of artificial intelligence.

publication

Machine Learning for Artists

ml4a is a collection of free educational resources devoted to machine learning for artists.

tool

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.

reading

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.

reading

Writing with the Machine

It’s like writing with a deranged but very well-read parrot on your shoulder.

tool

AmbientCG

Free materials never looked this good! Get 1000+ PBR materials and textures for free under the Public Domain license.

video

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.

video

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.

video

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.

video

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

reference

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.

reference

Brand New

Opinions on corporate and brand identity work.

reading

A Lightweight Branding Exercise for Startups

A bottom-up, alignment-oriented approach

reference

Onym Resources

This guide is an on-going open source attempt to organize the best tools and resources for naming things.

interactive

Responsive Logos

An exploration in scalable logo design.

video

Designer vs. Developer

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

reading

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.

publication

We Are Colorblind

Making the world a better place for the colorblind

video

CMYK

A story about 3 ways to mix process colors.

reading

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.

tool

Grabients

Beautiful and simple UI for generating web gradients.

reference

QULR.Life

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

reference

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.

portfolio

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.

reading

Feltron Annual Report

The tenth and final Feltron Annual Report examines the state of state of self-tracking through widely available apps and devices.

reading

Flowing Data

FlowingData explores how we use analysis and visualization to understand data and ourselves.

reading

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

publication

Information is Beautiful

Data, information, knowledge: we distil it into beautiful, useful graphics & diagrams.

reading

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

reference

Observable's Highlights

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

interactive

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.

reading

Pudding.Cool

We are a digital publication that explains ideas debated in culture with visual essays.

reading

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.

publication

Visualising Data

Data visualization and infographic design

reading

WSJ Graphics

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

reference

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.

reference

Adele

The repository of publicly available design systems and pattern libraries

reference

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.

reference

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.

reference

Design System Checklist

An open-source checklist to help you plan, build and grow your design system.

reference

Design System Repo

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

reading

Design Systems

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

my content

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.

reference

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.

reference

Shopify Polaris

Shopify's design system, A starter kit for reimagining commerce.

tool

Arc

Curve your text upward, downward or into a circle. Adjust the slider and preview the result.

tool

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.

tool

Image Tracer

‘Image tracer’ traces black & white bitmap images, and turns them into a vector layer.

tool

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.

tool

Remove.bg

Remove the background of images automatically with just a single click - using the remove.bg API.

tool

Content Reel

Design layouts more efficiently by pulling text strings, images, and icons from one palette.

tool

Google Sheets Sync

Sync content from Google Sheets directly into your Figma file.

tool

Lorem Ipsum

Generate ‘Lorem ipsum’ to fill your text layers with dummy text.

tool

Map Maker

Map Maker allows you to make a customized map blazing fast.

tool

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.

tool

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.

tool

Unsplash

Insert beautiful images from Unsplash straight into your designs.

video

Chicago Camps Recordings

Low-cost, high-value events serving the technology community.

video

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.

publication

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.

interactive

CGI Champ

A fun quiz game exploring topics in CGO and Visual Effects

video

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.

video

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.

video

Everything Animated

A channel for admirers of animation. Just sit back, relax and enjoy the greatest animation talent out there carefully handpicked for you!

video

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.

reading

How open source software powers modern filmmaking

From editing to animation, open source is part of how movies get made.

reading

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.

reference

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.

Publication

Typeset In The Future

Typography and Design in Science Fiction Movies

publication

Design Thinking!

Read comics about: Designers, developers, managers working in tech or product, blunt honesty or even imposter syndrome.

reading

Mechanical Watch

Interactive article explaining how a mechanical watch works.

tool

Tesla Light Show

Create your own light shows for Tesla vehicles.

reading

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.

interactive

Can't Unsee

A game where you need to pick the design that is most correct. Test your attention to details!

interactive

CGI Champ

A fun quiz game exploring topics in CGO and Visual Effects

interactive

CSS Grid Garden

A game for learning CSS grid layout

interactive

Flexbox Froggy

A game for learning CSS flexbox

interactive

Hocus :Focus

A keyboard navigation horror game. Find the 🎃 pumpkin.

interactive

HTML Spirograph

HTML Spirograph - creates awesome psychedelic drawings

interactive

Method of Action

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

interactive

The Password Game

Have fun trying to pick your password

interactive

User Inyerface

User Inyerface - A worst-practice UI experiment

tool

Avataaars

Create avatar illustrations in Sketch App with this free library. Combine clothes, hair, emotions, accessories, and colors.

tool

Humaaans

A Mix-&-Match illustration library of humans

resource

Open Doodles

A library of sketchy illustrations of people free for personal and commercial use.

tool

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.

reference

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.

tool

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.

reading

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.

reference

BentoGrids

BentoGrids is a curated collection of bento designs for your inspiration.

reference

Codrops

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

blog

Control Panels

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

reference

curated.design

Unleash your creativity with out-of-this-world web design inspiration from across the web.

reference

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.

reference

Godly

Astronomically good web design inspiration.

reference

Empty States

A curated gallery showcasing designs where no data is available in the UI.

reference

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.

reference

Guidebook

A website dedicated to preserving and showcasing Graphical User Interfaces, as well as various materials related to them.

reference

Landbook

We collect awesome websites to help creatives find inspiration & motivation to do rad stuff.

reference

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.

reference

Mobbin

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

interactive

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.

reference

Page Flows

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

reference

The People's Graphic Design Archive

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

reference

Really Good Emails

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

reading

Refactoring UI

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

reference

Screenlane

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

reference

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.

publication

Sidebar

The five best design links, every weekday.

reference

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.

interactive

uiwtf

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

publication

Visualising Data

Data visualization and infographic design

reading

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

video

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

reading

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.

my content

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.

reading

Cartography Comparison: Google & Apple Maps

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

tool

Snazzy Maps

Snazzy Maps is a repository of different color schemes for Google Maps aimed towards web designers and developers.

video

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.

resource

Pexels

Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty free stock images & copyright free pictures. No attribution required.

reading

Tips for shooting aerial photos with your drone

Some great tips for getting your drone shots.

tool

Unsplash

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

reading

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'

video

Designer vs. Developer

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

video

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.

video

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.

video

Chicago Camps Recordings

Low-cost, high-value events serving the technology community.

reading

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!

reading

Defining Design Generalists

Exploring the skill set of an underrated superpower

publication

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.

reading

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

video

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.

podcast

DesignGold

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

reading

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.

podcast

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.

video

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

reading

Mastery for Generalists

Becoming good when you're interested in everything.

reading

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…

reading

Paper at 10

How we designed the app that changed everything (for me)

reading

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.

reading

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.

podcast

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

video

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.

reading

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.

reading

Want a Better Pitch?

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

reading

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

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

reading

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.

my content

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.

tool

Time Zone Converter

Keep all your time zones in sync with this simple web tool

reference

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.

reference

Laws of UX

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

reference

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.

reading

UXPin Books

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

reference

Bensound

Royalty free music

reference

Free Music Archive

Free access to original music and creators

reference

Freesound

Collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?

reading

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!

reading

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.

tool

axe DevTools

Find and fix accessibility issues on your website by using the axe DevTools Chrome extension.

reference

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.

reference

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.

tool

AmbientCG

Free materials never looked this good! Get 1000+ PBR materials and textures for free under the Public Domain license.

tool

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.

tool

ImageOptim

ImageOptim makes images load faster by removes bloated metadata and compressing images without losing quality.

tool

Boring Avatars

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

reference

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.

tool

Box Shadow Generator

A WYSIWYG CSS box shadow generator

tool

Contrast Grid

Test many foreground and background color combos for compliance with WCAG.

tool

CSS Gradient

A css gradient generator tool

reference

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.

reference

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.

tool

Figma

Figma is a collaborative interface design tool. Design, prototype, and gather feedback all in one place.

tool

Goodbye John Doe

Peculiar names for the placeholder connoisseur. Placeholder name generator.

tool

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.

tool

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.

reference

Humane by Design

A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.

tool

Sketch

Sketch is the all-in-one platform for digital design — with collaborative design tools, prototyping and developer handoff.

tool

Jeffsum

A little text placeholder generator of Jeff Goldblum awesomeness.

reference

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.

tool

Loopy

A tool for thinking in systems

tool

Lorem Picsum

The Lorem Ipsum for photos

tool

Noun Project

The most diverse collection of icons ever. Download SVG and PNG.

resource

Open Doodles

A library of sketchy illustrations of people free for personal and commercial use.

reference

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.

resource

Pexels

Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty free stock images & copyright free pictures. No attribution required.

tool

ray.so

Create beautiful images of your code

tool

Responsively

Multi-panel responsive browser.

tool

Retrobatch

Flexible, super charged, batch image processing for your Mac.

reference

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.

tool

Snazzy Maps

Snazzy Maps is a repository of different color schemes for Google Maps aimed towards web designers and developers.

tool

Stark

The suite of integrated accessibility compliance tools for software teams.

tool

Subtle Patterns

A bunch of subtle patterns

tool

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.

reference

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.

tool

Time Zone Converter

Keep all your time zones in sync with this simple web tool

tool

Unsplash

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

tool

Type Scale

Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

reference

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.

Publication

Typeset In The Future

Typography and Design in Science Fiction Movies

reference

FontMap

Hundreds of fonts arranged using machine learning

reference

Fonts in Use

A searchable archive of typographic design, indexed by typeface, format, and topic.

tool

Google Fonts

Making the web more beautiful, fast, and open through great typography

tool

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.

interactive

Space Type Generator

Playing with type in 3D space

interactive

TypeTerms

Type Terms. The animated typographic cheat sheet.

reference

Typographic Illusions

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

reference

Typography Cheatsheet

Everything you need to know about setting proper typography—smart quotes, apostrophes, em dashes, en dashes, accented characters and more.

reading

Understanding Z Index

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

reading

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.

tool

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.

reference

Accessibility Developer Guide

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

reference

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.

reference

Codrops

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

tool

Box Shadow Generator

A WYSIWYG CSS box shadow generator

tool

CSS Gradient

A css gradient generator tool

reading

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.

publication

CSS {In Real Life}

A blog about CSS, front-end development, the web, and beyond.

reference

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.

reference

CSS Vocabulary

Learn what all the parts of CSS are called

publication

Defensive CSS

Practical CSS and design tips that helps in building future-proof user interfaces.

interactive

Visualizing Git Concepts with D3

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

reference

MDN Web Docs

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

tool

ray.so

Create beautiful images of your code

tool

Responsively

Multi-panel responsive browser.

reference

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.

reference

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.

reference

Empty States

A curated gallery showcasing designs where no data is available in the UI.

reference

Mobbin

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

reference

Page Flows

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

reference

Screenlane

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

reference

User Onboarding

A bunch of walkthroughs of onboardings out in the wild, the good and the bad.

reference

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.

article

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.

reading

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.

article

Shopify Polaris - Writing Error Messages

Error messages can be scary. Make errors visible easy to understand, and helpful.

reference

Tiny Words Matter

A curated dose of ✍️ microcopy. Because tiny words matter!

🎬

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