Web Design Tools
An assortment of tools to aid web wizards in designing magical websites.
Figma
Figma is my go-to tool for designing websites and apps. It has vector and raster capabilities, but most importantly it allows you to make divs and mimic CSS with your designs. When you’re done it even has a dev mode that show the CSS for what you’ve designed. It also has prototyping capabilities which is great for testing your designs with users before coding it.
Framer
Framer is a no-code website builder that allows you to design, build and publish websites. While you can design in it like Figma, I actually prefer to design in Figma and then use the Figma to Framer extension in Figma to copy the designs to Framer. This is how I built my UX Design portfolio, before I knew how to code. You can also insert and edit code in Framer if you want / know how to.
Dreamweaver
Dreamweaver is the tool I used to learn HTML and CSS, so I might be biased, but it’s a pretty good tool for coding and managing websites. It automatically manages and updates the files for your site as well as letting you code and view live changes to the site in split screen. It’s a part of the adobe creative cloud subscription, so if you already use Adobe products it’s a good option.
WebAIM Color Contrast Checker
The WebAIM color contrast checker is a convenient little tool to check whether the colors you’re using for text meet accessibility standards. Simply copy the color code for the text and background and paste them into the checker to see their contrast ratio and which standards they meet. You can get to it in a pinch by just googling “color contrast checer.”
Material Design 3
Material Design is Google’s open-source design system. Here you can find icons and components to use in your designs as well as guidelines to make your own. They have individual resources for whichever tool you are using to design / develop.
CSS.gg
CSS.gg has loads of icons that you can use in your web designs. The cool thing about their website is that you can copy the svg code directly from the site, download the icon to your computer, or copy and paste the icon. It seems they will have a page for patterns and colors soon as well.