“Being a product designer is constantly being reminded you have no idea what you’re doing.”

WebGL scrolling animations

Demos of impressing scrolling experiences based on WebGL.

Prioritise content over components

Components can trap reusable data into single-use decorations.

Showreelz

A collection of inspiring and notable design videos.

Glyphs

A collection of common Unicode symbols to copy and paste.

Ok! So…

An online drawing app to express and organize your thoughts and ideas.

Sargam Icons

700+ open-source icons with an emphasis on simplicity and consistency.

Everything you need to know about deceptive design

How to spot it in the wild, and what its future looks like.

SVG sprites: old-school, modern, unknown, and forgotten

Let’s go from SVG sprites to SVG stacks.

“Whatever problem you find on a big platform, I can promise you the design team has multiple detailed solutions collecting dust somewhere.”

“Designing fresh interfaces in only black & white is really hardcore, need to be super creative with layers, depth, shadows, and spotlights to make it interesting.”

Component-level Design Tokens: are they worth it?

How to navigate the various levels of design token abstraction.

“In product development, your risk of failure is directly proportional to the number of assumptions baked into each iteration.”

AI stock images

The uncanny valley from ShutterStock to StockAI.

“Great design comes from great dialogue.”

Randoma11y

An endless collection of accessible color combinations.

fffuel

A comprehensive collection of SVG generators and color tools.

“There is no perfect tool which is why we have so many of them.”

Progressively enhance for a more resilient web

Why it’s relevant to everyone and not just those with JavaScript disabled.

Why designers quit

Surprising results of an online survey with 156 designers.

Wordpress Full-Site Editing: a deep dive into the new feature

How to use it to make changes to your website.

The User Research Incentive Calculator

How much should I pay research participants as an incentive?

The 2022 Research Incentives Report

What to pay research participants, according to countless research projects.

When life gives you lemons, write better error messages

The anatomy of good and bad error messages at a glance.

Website Fidelity

Building websites in layers of fidelity instead of layers of technology.

Lucide

A community-sourced icon toolkit for popular web libraries.

Mesher

A tool to create beautiful mesh gradients only with CSS.

“For design leaders, there’s no such thing as overcommunication.”

Nabla

An isometric color font inspired by vintage computer games.

Blackmagic Design announces DaVinci Resolve for iPad

The popular video editing tool is coming to the Apple App Store.

Blending modes

How to effectively create a new color based on two input colors.

Artists say AI image generators are copying their style

Some AI companies argue their images can be copyrighted.

Photoshop for text

What to expect from the next evolution of text editors.

“The designer in me is excited about web components since they may take us all closer to the one open standard we're lacking in design tooling today.”

What is COLRv1 and what’s different from other color fonts?

The basics of color fonts and the newCOLRv1 spec.

Durable AI Site Builder

Build a website for your business in less than a minute using AI.

“I notice a lot of people keen to become better public speakers or greater writers but almost never an open focus on becoming better listeners.”

“The best way you can push on a product roadmap as a designer is to inspire the team by visualizing the future.”

Shutterstock will start selling AI-generated stock imagery

The well-known stock image platform incorporates OpenAI’s DALL-E 2.

“You’re not a real designer unless you buy design books just to put on your shelf and never read.”

The math behind nesting rounded corners

The CSS way to deal with rounded corners inside rounded containers.

Drag and drop UX best practices

A comprehensive guide including pattern UX examples and UI demos.

Typographic hierarchies

Six variables can powerfully transform your content in any format.

Adobe steals your color

Its customers who rely on Pantone colors must now pay for a license.

20 free quality Darkroom community presets

Darkroom presets created and shared by video and photo editors.

“Design systems are culture change disguised as a UI kit.”

A design research framework

Visual representation of the MULE Design Research Process Model.

OKLCH Color Picker & Converter

A new way to encode colors (like hex, RGBA, or HSL).

Will adding new features ruin your product?

Be mindful of the features you put into your product.

Potluck

What if you could start with a text note and evolve it into an interactive tool?

Beautiful CSS checkboxes examples

A varied collection of checkboxes for your design inspiration.

How user-centered design might be holding you back

Problem-centered design can help.

“I’ve almost never met a web form design that couldn’t be improved. Most just break your heart.”

The case for JPEG XL

A response to Chrome’s recent drop of the new image format.

Hostile patterns in error messages

Let’s assist users, not admonish them.

The creative switch

No ideas? Be wild and reasonable, but not at the same time.

Bezel

Design and prototype on a spatial canvas together.

SVGOMG

An online tool for optimizing SVG vector graphics files.

From finding to doing

More actionable design research by framing outputs.

Buttons I’d like to press

A collection of digital and physical buttons for your design inspiration.

Design System ROI Calculator

Project design systems cost savings by component usage and employee.

Seven mental models for UX Writing

Mental models to help you mature your work and deliverables.

Huge type on the web

Big, bold type makes a statement in print and on websites.

Introducing the features of Web 3.0 sites

Decentralization, AI- and AR/VR-driven experiences, semantic web.

Classic HCI demos

A collection of Human Computer Interaction demo videos 1983–2002.

MetalliCSS

Versatile metallic effects that make your CSS shine.

Stop treating all of your content as if it were news

“How we present content to readers should never be defined by the publication tool.”

“Isn’t ‘sleep on it’ the best design advice ever? Can’t count the number of times in my career this has been super helpful.”

“It's easy to shit on designers. It’s harder to shit on the unseen structures, management practices and power dynamics that directly influence designers’ work.”

Mona Sans & Hubot Sans

Two open-source variable fonts with countless variations.

CtrlAltCC

A place dedicated to helping you find useful tools.

6 steps to improve HTML images for users and developers

Better HTML images with responsive sizes and modern formats.

How to design a calendar

Calendar UI design best practices and date picker inspiration.

Bootstrap Icons v1.10.0

The popular open-source icon library now includes more than 1,900 icons.

A designer’s guide to React

What it is, why it is so popular, and what it means for designers.

What’s new in version 2 of the Affinity apps?

Affinity launches Designer 2, Publisher 2, and Photo 2 (Windows, Mac, iPad).

Command K Bars

An intro to a design pattern that has started to pop up everywhere.

The Design System Guide

A step-by-step interactive handbook to set up a design system.

“In a world of generative AI, curation will become the new creation.”

Most companies don’t need ‘great design’ – it can even hurt a business. Most just need ‘good enough’ design.

Dashboard Design Patterns

Dashboard genres, design process, guidelines, patterns, and cheat sheets.

“80% of the design process is exploring alternates only to come back to a slightly modified version of the one you started with.”

WordPress Photos

A collection of publicly-contributed, royalty-free stock photos.

Badge notifications

The psychology of badge notifications and why they can be overwhelming.

pppixelate

A simple tool to draw pixel art in the browser and render it as an SVG pattern.

“The current education in the UX field is way too focused on polished deliverables, not enough on your feet skills and thinking techniques.”

Natural language inputs

What if every form input was a text input that accepts natural language?

Introducing Magician

Design with the power of AI: copywriting, images, and icons.

What happened to text inputs?

We keep screwing up the simplest parts of web interfaces.

Interactive animations with variable fonts

Variable fonts are excellent candidates for smooth special effects.

Color Naming Buddy

A prototype for a tool to find names for your favorite colors.

Futicons

A set of niche icons from areas that may dominate the future.

Reimagining a token taxonomy

Challenges from design token projects, from audits to implementation.

more.graphics

A collection of creative pattern generators with many customization possibilities.

Futurepedia

A searchable and categorized directory of helpful AI tools.

Web development advent calendars for 2022

A selection of advent calendars covering web-related topics.

Avoid unnecessarily complex password-creation requirements

They have a significant negative impact on UX and conversion rate.

Design System Canvas

A tool to bring structure to the creation and updating of a design system.

Variants Tool

Create color variations of an image suitable for your website or presentation.

Introducing Mona Sans and Hubot Sans

GitHub open sources two versatile variable fonts.