Design Tools & Assets
You do not need to be a professional designer to ship clearer interfaces. A simple mockup, a restrained color palette, and consistent fonts go a long way for student projects.
Figma dominates industry mockups; Penpot is a strong open-source alternative. Asset sites (fonts, icons, illustrations) are usually free for personal and many commercial uses—always read the license on each pack.
Prefer fewer fonts and a small icon set over mixing five libraries in one page. Consistency beats novelty for learning projects.
UI design
Figma
Browser-based UI design and prototyping. The free starter plan is enough for personal files and light collaboration; education and paid plans add more seats and features.
Industry-standard for wireframes and high-fidelity layouts you can hand off or export.
Penpot
Open-source design and prototyping tool that runs in the browser (and can be self-hosted). A practical free alternative when you want open formats and no vendor lock-in.
Choose this if you prefer open-source tooling or need to self-host design files.
Excalidraw
Hand-drawn-style whiteboard for diagrams, flowcharts, and quick sketches. Free to use in the browser; optional paid/end-to-end features exist for teams.
Perfect for architecture doodles and explaining ideas without polishing pixels.
Colors & type
Coolors
Fast palette generator and explorer. Free for generating and exporting palettes; some advanced features sit behind an account or paid plan.
Use it to pick 3–5 colors and stick to them across a project.
Google Fonts
Large library of free, open-licensed fonts you can link from a CDN or download. Pairings and filters help you choose readable type for the web.
Default source of web fonts for student sites—check license notes, but most faces are open for web use.
Icons & illustrations
Lucide
Clean, consistent open-source SVG icon set (a community fork in the Feather Icons family). Free to use with attribution per the project license.
Great default icon pack for apps and docs sites.
Heroicons
MIT-licensed SVG icons from the makers of Tailwind CSS, in outline and solid styles sized for UI work.
Use when you want icons that match common Tailwind/UI kit aesthetics.
unDraw
Open-source illustration set with color customization. Free for personal and commercial use under unDraw’s license—credit is appreciated but check their current terms.
Handy for empty states and landing sections when you do not want stock photos.
Comments
One comment per signed-in account. Comments are saved with this page’s URL.