⚡ Code Learning resources for Designers
Sep 19, 2024
The following resource list is managed by Sam Gordashko but I have converted them to a blog post. These are helpful resources that assist designers who need to gain better understanding how their designs have an impact in development.
Want to contribute to this list? Fill out the form here and Sam will receive that.
Designing Accessible Components
Common usability issue and best practices for creating accessible UI components: forms, drop-downs, tabbed interfaces, modals, and disclosure widgets.
Tags: Accessibility, Design Best Practices (UI / Visual), Components (UI)
Create accessible color pallets
"Endless" color pair generator for accessible colours using AI
Tags: Accessibility, Foundations (Color)
Tailwind CSS Color Generator
HSL sliders to http://uicolors.app, so you can play with the hue, saturation and lightness and instantly see what effect that has on whole range and UI examples.
Tags: Accessibility, Foundations (Color), Tailwind
Sidekick - AI via Stark
Meet Sidekick, your AI-powered accessibility assistant in Stark!
Sidekick is a supercharged audit of your design files, making accessible design 100% faster.
Tags: Accessibility, AI Powered
UI Color Generator - Tailwind
A web tool and Figma Plug-in to generate color pallets & style guide based from Tailwind CSS
Tags: Foundations (Color), Tailwind
Washington Post Accessibility Guide
A massive resource on how they implement WCAG guidelines at the Washington Post
Tags: Accessibility
Zebra - Contrast Checker
Uses the new WCAG 3.0 standards which pays more attention to dark mode contrast using APCA (Advanced Perceptual Contrast Algorithm).
Tags: Accessibility
Stark - Accessibility Co-pilot
AI powered plug-in for Figma that checks for several accessibility issues within the design
Tags: Accessibility, AI Powered
Dark mode UI best practices
Article breaks down several topics in dark mode for things like color, elevation, focus rings and reading for people with an astigmatism
Tags: Accessibility, Dark Mode
Font and typography for dark mode
Article with considerations for accessible design in Dark Mode
Tags: Accessibility, Dark Mode
Understanding WCAG color contrast
Blog post that breaks down come of the key concepts including interaction design (hover, disabled elements) borders, placeholder text etc.
Tags: Accessibility, Foundations (Color)
Making components accessible
Guide on resources and practical tips on how to make web components accessible
Tags: Accessibility
Accessibility Training by Webaim
Online training by Webaim on accessibility. Geared towards developers but the site says designers and PM's are also welcome.
Tags: Accessibility
How to create accessible design system components
A guide that covers what it means to build accessible design system components, where to look to research components as they are built, and tips for workflow
Tags: Accessibility, Design Systems
Contrast checker - gov.uk inspo
Checks the font color, object background, and the page background for manually entered hex codes, appearing as a circle
Tags: Accessibility
Understanding Accessibility - Interactive website tool
This site has been created to help web designers learn the basics of accessibility, so they can maximize the impact of their designs.
Tags: Accessibility
How a developer should read WCAG
WCAG is not centered around markup, styles, or scripts — it’s centered around principles. Once you understand that, it become easier. It can be a hard read, not because it’s complicated — but because it’s abstract and vague. You have to dig to find examples.
Tags: Accessibility
Learn to Code — For Free — Coding Courses for Busy People
Nothing beats FreeCodeCamp.com. they break it down into really small easy to digest lessons and their sandbox is great for playing with code.
Tags: HTML, CSS, and Javascript Learning
Design+Code Courses
Free and paid courses on design + code
Tags: HTML, CSS, and Javascript Learning
Foundations (of web development) | The Odin Project
This is for full stack development but the very first courses are about basic and advanced HTML & CSS.
Tags: HTML, CSS Learning
MDN Web Docs
First stop check "how does this work in code" for designers working on components.
Tags: HTML, CSS Learning
Component Driven User Interfaces
Resources to describe the development and design practice of building user interfaces with modular components. UIs are built from the “bottom up” starting with basic components then progressively combined to assemble screens.
Tags: HTML, CSS, and Javascript Learning
Design to Code Learning Path
Make Your Designs Come to Life Through Code!Learn UX principles and CSS coding techniques to take your designs to the finish line.
Tags: CSS Learning
Powerful web gradient generator
Outputs CSS code in higher fidelity than you can possibly make in Figma, supports more modern color spaces.
Tags: CSS Learning, Color Gradients
Color mix exploration tool and generator
Visual tool for exploring color mixing
Tags: CSS Learning, Foundations (Color)
Free clip-path tool - CSS Transitions
Visual tool to explore CSS Transition values in a drag and drop tool
Tags: CSS Learning, Animation & Motion Design
Free CSS variables - Open props
Supercharged CSS Variables: Expertly crafted web design tokens, Create consistent components, Useful in any framework
Tags: CSS Learning, Design Tokens
Browser with multiple views of the same url
Like using Devtools with cheats enabled. A stand-alone browser and devtool for ambitious web developers that want to build more responsive, accessible and performant sites in less time. Save hours on each project, love every minute of it.
Tags: CSS Learning, Responsive Design
Color accessibility overview
Visual preview of what color combos look like for the different color vision perception with contrast ratio and WCAG scores
Tags: Accessibility, Foundations (Color)
Free SVG patterns, textures, gradients, shapes
Collection of web based tools to create shapes that can be exported or copied as SVG's
Tags: CSS Learning, Color Gradients, Design Best Practices (UI / Visual), Color Gradients, Foundations (Color)
Debug tools for Designers in the browser
Open source web design debug tools built with JavaScript: a FireBug for designers.VisBug chrome extension: works on any website, visually edit your actual product, and screenshot what you changed
Tags: CSS Learning, Javascript Learning