Remotion
Make videos programmatically
Design entries
It’s hard to justify Tahoe icons
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.
Wireframe Sketcher
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
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
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 themes — Tailwind CSS Components
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
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.
Juice
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
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
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
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.
The League of movable type
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.
Absurd Design
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
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
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
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
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 Markter
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
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
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
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
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.
Characters Per Line
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
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.
Generated Photos
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
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.
Atkinson Hyperlegible Font
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.
Atkinson Hyperlegible Font
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.
National Park Font
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
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
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.
Nodesign.dev
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 illustrations
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
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
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.
Humaans
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
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
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.
Many Pixels
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
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
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.
Ghost Vector Illustrations
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
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
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 Characters
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.
Streamline Icons
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
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
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.
Dutones
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
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
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
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
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.
Mini UX Course
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.
User flows inspirations
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.
Dark 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.
Coloors
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
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.
Nice delivery buttons
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.
Questions & Answers
- What kind of design resources are covered in this list?
- This list covers practical resources for UI/UX design, web styling, visual assets, and design principles. Examples include wireframing tools like WireframeSketcher, CSS frameworks such as concrete.css and daisyUI, and asset libraries like StockSnap for images and The League of Movable Type for fonts.
- Who is this category intended for?
- This category is primarily for developers and designers who need functional tools and practical guidance for building and styling web applications and interfaces. Resources like RefactoringUI are specifically helpful for developers aiming to improve their UI skills.
- What are some notable tools for styling or building web interfaces?
- Notable tools include WireframeSketcher for desktop wireframing, concrete.css and LaTeX.css for simple, classless stylesheets, and daisyUI for Tailwind CSS components. For interactive elements, Rive provides an animation editor, and Driver.js helps with product tours.
- Where can I find visual assets like fonts, icons, or illustrations?
- You can find visual assets through various entries: The League of Movable Type offers open-source fonts, StockSnap provides CC0 images, and Streamline and Blush offer extensive libraries of icons and customizable illustrations. Transfonter is useful for generating webfont kits.
- When should I browse this 'Design' category versus other development-focused categories?
- Browse this 'Design' category when you need specific tools for visual interface creation, UX/UI patterns, design assets, or principles to improve user experience. For backend, infrastructure, or purely code-logic solutions, other development-focused categories would be more relevant.