This category collects practical design tools, resources, and principles for developers and designers building web projects. It covers everything from wireframing with WireframeSketcher and styling with classless CSS like concrete.css, to sourcing assets like open-source fonts from The League of Movable Type and custom illustrations from Blush. I aim to list functional resources that directly impact design and user experience.
This article explains why adding icons to every menu item, like in macOS Tahoe, hinders usability. I found it a nice little breakdown on when and how *not* to use icons in menus, detailing failures in consistency and differentiation.
WireframeSketcher is a desktop wireframing tool that also functions as an Eclipse IDE plugin. It serves as a solid, one-time payment alternative to subscription-based options like Balsamiq Cloud.
concrete.css is a simple, classless CSS stylesheet designed for lightness and straightforward websites. It's an excellent starting point and includes automatic dark theme support based on OS settings.
LaTeX.css provides a straightforward stylesheet to give web content a LaTeX document aesthetic. I find this useful for technical documentation or academic-style articles that benefit from a familiar, print-like layout on the web.
daisyUI is a nice component library for Tailwind CSS, and this page details its extensive theming system. I find the built-in themes and customization options very practical for quickly styling applications.
Rive is an affordable interactive animation editor that allows designers and developers to create and ship motion graphics natively across multiple platforms from a single tool.
This guide on 'Juice' provides a technical perspective on enhancing interface interactions. It explains how non-essential sensory feedback, derived from game design, improves responsiveness and user emotional connection.
Driver.js is a lightweight JavaScript library for implementing product tours, highlights, and contextual help in web applications. It's a solid choice for guiding users and onboarding.
HTML5Up provides free, responsive HTML5 + CSS3 website templates under a CC-BY license. I find these a solid starting point for many web projects.
Transfonter is a modern online @font-face generator that handles conversion of various font formats (TTF, OTF, WOFF, etc.) and outputs the perfect CSS code. It's my go-to for reliable webfont kits.
This is a solid resource for open-source fonts. They were an early player in web fonts, providing a catalogue of free, high-quality typefaces for various projects.
This is a collection of hand-drawn, 'absurd' style illustrations. I'm considering these for projects where a unique, imperfect, and thought-provoking visual aesthetic is desired.
StockSnap is a search engine for CC0-licensed images, providing high-resolution photos free from copyright restrictions. I find it useful for quickly sourcing assets without licensing overhead.
Shotsnapp is a device mockup generator. It's surprisingly easy to use for creating presentable images of apps or websites within various devices quickly.
Streamline is a paid library offering over 100,000 icons, illustrations, and emoji. It's a comprehensive resource for design projects, allowing quick customization to maintain brand consistency.
Blush is an illustration marketplace offering customizable vector graphics from various artists. I find its deep customization features and direct integration with design tools like Figma quite useful for project assets.
Creative Market is a solid platform for sourcing paid digital design assets from independent creators. I use it for high-quality fonts, graphics, and templates when generic stock isn't sufficient.
Carbon is a great tool for generating aesthetically pleasing images of source code. I find it especially useful for sharing snippets on social media to enhance readability and engagement.
UXArchive is a useful reference for mobile design, specifically a library of user flows from various apps. I find it good for quickly seeing how common patterns are implemented across different applications.
RefactoringUI is a design book by the creators of Tailwind CSS. It provides actionable UI tactics from a developer's perspective, helping engineers create better interfaces without needing a dedicated designer.
Growth Design provides detailed Growth & UX case studies presented in an engaging comic book format. It's a useful resource for analyzing real-world product decisions and improving design skills.
I find the common trial-and-error for characters per line (CPL) imprecise. This post introduces a mathematical approach to predict exact CPL for a given font size and width, ensuring typography dictates column width for optimal readability.
Chart.js offers simple yet flexible JavaScript charting, ideal for developers and designers building modern web applications. It provides excellent performance and customizability for data visualization.
This site offers AI-generated human faces and full-body images for projects. It's a solid resource for cheap, worry-free stock photos, usable via gallery search or custom generation.
Avataaars is a solid avatar vector generator. It provides a free online tool to easily create custom personal avatars from a variety of components, suitable for profile pictures or placeholders.
This is the Atkinson Hyperlegible Font, developed by Braille Institute for enhanced legibility. It focuses on unique letterform distinction to improve readability, particularly for low-vision readers.
The Atkinson Hyperlegible font family is specifically engineered for enhanced readability, particularly for users with low vision. It features distinct letterforms to prevent character confusion, aiming for maximum legibility.
This typeface accurately mimics the router-carved text from national park signs. It achieves this while maintaining legibility and versatility, which is a smart design choice.
BigHeads is a big head avatar library for programmatically generating unique, cartoonish characters. I appreciate that it also offers a React library for seamless integration into web projects.
Rough.js is a JavaScript library for generating vector graphics with a distinctive hand-drawn, sketchy aesthetic. It's a lightweight option for adding an organic feel to web-based visualisations or diagrams.
This is a curated collection of design tools specifically for developers, helping those of us without an artistic eye build better UIs without needing a dedicated designer.
Smash offers an illustration constructor featuring colorful, trendy characters. This tool is effective for rapidly visualizing startup concepts by allowing users to combine and overlap elements.
Fresh Folk is a well-crafted illustration library offering customizable characters and objects. Its mix-and-match approach simplifies creating diverse scenes for various projects.
Sketchvalley provides hand-drawn free vector illustration resources. I find it a solid option for designers needing distinct visuals for web and UI projects without a budget.
Humaaans provides a mix-and-match design library of people illustrations. It's a solid, free resource for quickly generating custom human figures for digital interfaces or presentations.
IRA Design provides a collection of SVG illustrations that can be customized directly in the browser. I appreciate the flexibility for rapid prototyping and visual enhancements in projects.
Woosh offers a collection of cartoon-style illustrations primarily for web and app projects. While a bit generic, these assets could be useful for rapid prototyping or filling placeholder content without requiring custom design work.
This is a gallery of free illustrations, many in a distinctive 3D isometric style, useful for design assets. I find the extensive collection and filtering by style valuable.
Ouch by Icons8 offers a solid collection of free vector, 3D, and animated illustrations, providing designers with royalty-free graphics. The integrated online editor allows for useful customization before download, which is a practical feature.
unDraw provides a library of open-source illustrations, similar to Drawkit, that I find highly useful. Its on-the-fly color customization feature is a great technical detail for aligning with brand identities.
This is a minimalistic graphic library featuring interchangeable vector ghost illustrations. It's useful for apps, websites, or print, offering 80 characters, 55 elements, and 20 scenes, all editable for line thickness and colors.
Blush provides customizable illustration collections from various artists, which can be easily integrated into design tools like Figma and Sketch. It's a solid resource for quickly adding unique, scalable vector art to projects.
Open Doodles provides a collection of free, hand-drawn, open-source illustrations featuring humans in various actions. This resource is valuable for projects requiring a distinct, sketchy visual style, with assets available in SVG, PNG, or GIF formats.
Stubborn is a free character generator for vector illustrations. It allows combining ready-made elements and styles to create custom persons and scenes, which is useful for quick design mockups.
This is a vast library of high-quality vector icons and illustrations, suitable for various design projects. I find it useful for quick access to consistent iconography.
Flaticon provides a vast database of vector icons. It's a solid resource for quickly finding assets in various formats for design and development projects.
DrawKit is my go-to for high-quality, hand-drawn vector illustrations and icons, updated weekly. It's an excellent resource for any project needing a modern, consistent visual style.
This is a straightforward online tool for applying duotone effects to images. It's useful for quickly converting full-color images into a striking two-color palette.
Duo is a straightforward, curated collection of color combinations, some of which meet AA accessibility standards. I find it a helpful quick reference for design inspiration, especially when kickstarting a project or looking for specific contrasts.
Bulma is a straightforward CSS framework built entirely on Flexbox. I appreciate its simplicity and how it avoids JavaScript dependencies, making it a refreshingly pure CSS solution.
TailwindCSS is a utility-first CSS framework that lets me rapidly build UIs directly in HTML, significantly streamlining front-end development. Its atomic class approach ensures minimal CSS output for production builds.
Open Peeps is a hand-drawn illustration library that provides customizable vector components to build unique characters. It's great for quickly generating diverse illustrations under a CC0 license.
I found this to be a nice resource to start a UX journey, specifically for understanding how to design better confirmation prompts by focusing on action labels over generic 'Are you sure?' questions.
This is a solid resource for designers to inspect user flows from popular applications. It provides detailed examples across various platforms and flow types, which I find invaluable for understanding current UX patterns.
This resource defines and categorizes various dark patterns, detailing manipulative UI/UX techniques designed to mislead users into unintended actions. It's a useful reference for identifying common deceptive design practices.
Coolors is a fast color scheme generator, allowing quick palette creation by hitting the spacebar, or deriving colors from images. It's a solid utility for designers needing quick color inspiration or validation.
Happy Hues offers curated color schemes, presenting them within a live page context. I find this approach useful for quickly visualizing how different palettes perform in a real UI.
This post features various animated CSS button designs, including some that simulate package delivery with trucks and drones. While visually engaging, I find some lean towards over-animation for a simple button click.