When I start a new project there's some free tools that I often use and I want to share those with you
Accessibility Tools
WebAim color contrast - quick way to test if color combinations pass WCAG standards
How I use it: While choosing colors for a project, I use this to do a quick double check that they are accessible with the background I’m using
Axe DevTools - browser ext - scans your site and gives recommendations on how to improve accessibility
How I use it: When building websites I run axe devtools before I deploy to catch any A11y issues that need to be corrected
Deque University Screen Reader Cheatsheet - A central area to review shortcuts for popular screen readers
How I use it: I use this when testing enterprise applications with a screen reader and need a refresher on shortcuts
Figma A11y Color Contrast Checker- figma plugin to check color contrast on designs
How I use it: When I'm creating new designs and picking out a new color palette I use this plugin to catch any color contrast issues in the designs
UX/UI Tools
0to255- color picker with a large variety of color shades
How I use it: I use this a lot in combination with the adobe color wheel when choosing out color pallets for new projects
Adobe Color Wheel - color picker with a large variety of color shades
How I use it: When experimenting with colors for a color palette I use this to get some of the base colors like primary, secondary, and accent
Dribble - UX/UI designs for inspiration and show and tell
How I use it: When I just need some inspiration or new ideas I look through some of the projects on this site
PX to REM Converter - Simply converts pixels to REM
How I use it: When setting up typography on a project I use this to convert font sizes to REM
Drawing and Animations
Krita - Free software similar to Adobe Illustruator
How I use it: I use this to create NFTs, SVGs, and other digital art
Lottie Files - Free and paid SVG animations that can be used in web applications
How I use it: This is a great way to add free animations to zuzh up my websites
Photopea - Free and browser software similar to Photoshop
How I use it: I use this to manipulate photos for art or websites
AOS - Animate on scroll is a free npm package that provides basic animations when scrolling
How I use it: I mostly use this on static sites to help tell a story through animation while the user is scrolling