📚 Table of Contents
- Design & Layout Editors
- Prototyping & Interaction
- Component & UI Libraries
- Design Systems & Documentation
- Icon & Illustration Resources
- Color & Theme Generators
- User Research & Usability Testing
- Analytics & Behaviour Insights
- Accessibility & Inclusive Design
- Hand‑off & Front‑End Integration
- AI‑Powered Design Assistants
- Inspiration & Trend Spotting
- Collaboration & Handoff Platforms
- Contribution Guide
🎨 Design & Layout Editors
| Tool | Primary Strength | URL |
|---|---|---|
| Figma | Real‑time, browser‑based UI/UX design; auto‑layout, components, plugins. | **https://www.figma.com/** |
| Sketch (macOS) | Vector UI editor with extensive plugin ecosystem; great for symbol libraries. | **https://www.sketch.com/** |
| Adobe XD | Integrated vector design + prototyping; auto‑animate, voice prototyping. | **https://www.adobe.com/products/xd.html** |
| Framer | Design‑to‑code with high‑fidelity motion; React‑ish component model. | **https://www.framer.com/** |
| Penpot (Open‑Source) | Web‑based design & prototyping, self‑hostable, SVG‑native. | **https://penpot.app/** |
| Affinity Designer | One‑time‑pay vector graphics editor; good for UI artboards. | **https://affinity.serif.com/en‑us/designer/** |
| Whimsical | Simple flowcharts, wireframes & sticky notes in one canvas. | **https://whimsical.com/** |
| UXPin | End‑to‑end design system management + interactive states without code. | **https://www.uxpin.com/** |
| Marvel | Fast web‑based UI design + prototyping; integrates with user testing tools. | **https://marvelapp.com/** |
| Balsamiq | Low‑fidelity “sketch‑style” wireframing; focus on structure, not pixel‑perfect. | **https://balsamiq.com/** |
⚡ Prototyping & Interaction
| Tool | What It Does | URL |
|---|---|---|
| ProtoPie | No‑code micro‑interaction prototyping; supports mobile sensors & device APIs. | **https://www.protopie.io/** |
| Principle | Mac‑only animation & interaction design; timeline‑based, great for handoffs to After Effects. | **https://principleformac.com/** |
| Framer Motion (React) | Declarative animation library for React; works with code‑generated UI. | **https://www.framer.com/motion/** |
| LottieFiles | Browse, edit, and export JSON‑based vector animations for web & mobile. | **https://lottiefiles.com/** |
| Rive | Real‑time interactive animations; runtime for web, iOS, Android, Unity. | **https://rive.app/** |
| Animaker | Drag‑and‑drop video & animation maker; useful for UI walkthroughs. | **https://www.animaker.com/** |
| Haiku Animator | Timeline‑based animation tool that exports to React & HTML/CSS. | **https://haiku.ai/** |
| Keyshape | Vector animation editor that outputs SVG and CSS animation code. | **https://keyshapeapp.com/** |
| Fluid UI | Cloud‑based UI prototyping with extensive component libraries. | **https://www.fluidui.com/** |
| Justinmind | High‑fidelity prototyping with conditional logic & data‑driven widgets. | **https://www.justinmind.com/** |
🧩 Component & UI Libraries
| Library | Framework / Language | Highlights | URL |
|---|---|---|---|
| Material‑UI (MUI) | React | Google Material Design with theming & style‑engine. | **https://mui.com/** |
| Ant Design | React | Enterprise‑grade UI components, rich internationalisation. | **https://ant.design/** |
| Chakra UI | React | Accessible, composable primitives with dark‑mode support. | **https://chakra-ui.com/** |
| Tailwind UI | Tailwind CSS | Pre‑built component markup; works with any framework. | **https://tailwindui.com/** |
| Radix UI | React | Unstyled, accessible primitives (dialogs, dropdowns, etc.). | **https://www.radix-ui.com/** |
| Evergreen | React | UI kit from Segment, focuses on desktop‑first SaaS apps. | **https://evergreen.segment.com/** |
| Vuetify | Vue.js | Material Design component framework for Vue 3. | **https://vuetifyjs.com/** |
| Quasar | Vue.js | Full‑stack UI kit with PWA, Electron, and mobile builds. | **https://quasar.dev/** |
| Svelte Material UI | Svelte | Material Design components built for Svelte’s reactivity. | **https://sveltematerialui.com/** |
| Bootstrap 5 | CSS/JS | Classic responsive grid & component library, now utility‑first. | **https://getbootstrap.com/** |
| Carbon Design System | React & Web Components | IBM’s design system with extensive UI kit and guidelines. | **https://carbondesignsystem.com/** |
| UIKit | CSS/JS | Lightweight modular front‑end framework with a modern aesthetic. | **https://getuikit.com/** |
| Blueprint | React | UI toolkit for data‑intensive desktop‑like web apps. | **https://blueprintjs.com/** |
| PrimeReact | React | Rich set of UI components with themes and accessibility. | **https://www.primefaces.org/primereact/** |
| Grommet | React | Accessible, responsive, and themable design system for enterprise. | **https://v2.grommet.io/** |
🧱 Design Systems & Documentation
| Tool / Service | Core Feature | URL |
|---|---|---|
| Storybook | Interactive UI component explorer; works with React, Vue, Angular, Svelte. | **https://storybook.js.org/** |
| Zeroheight | Syncs design tokens & components from Figma/Sketch to living style‑guides. | **https://zeroheight.com/** |
| Supernova | Turns design tokens into production‑ready code (iOS, Android, Flutter, Web). | **https://supernova.io/** |
| Lona (Airbnb) | Open‑source design‑to‑code system for cross‑platform UI. | **https://github.com/airbnb/Lona** |
| Specify | Design‑system management platform with versioning, tokens, and documentation. | **https://specify.design/** |
| Frontify | Centralised brand‑asset hub + design‑system creation, supports Figma & Sketch. | **https://frontify.com/** |
| InVision DSM (Design System Manager) | Component library, documentation & version control. | **https://www.invisionapp.com/design-system-manager** |
| Pattern Lab | Atomic‑design methodology for building UI component libraries (HTML, CSS, JS). | **https://patternlab.io/** |
| Clarity Design System | Microsoft’s open‑source UI and UX guidelines for web & native. | **https://clarity.design/** |
| Kendo UI | Comprehensive UI widget set for Angular, React, Vue, jQuery. | **https://www.telerik.com/kendo-ui** |
🎨 Icon & Illustration Resources
| Resource | Icon Set / Illustration Style | URL |
|---|---|---|
| Feather Icons | Minimalist line icons (MIT). | **https://feathericons.com/** |
| Tabler Icons | 1500+ pixel‑perfect SVG icons (MIT). | **https://tabler-icons.io/** |
| Heroicons | Outline & solid icons by Tailwind team (MIT). | **https://heroicons.com/** |
| Iconify | Unified search across 100+ icon collections; API & SVG sprite. | **https://iconify.design/** |
| Streamline Icons | High‑detail icon packs (multiple weights). | **https://streamlinehq.com/** |
| Noun Project | Massive library of vector icons; subscription for unlimited. | **https://thenounproject.com/** |
| Flaticon | Free + premium icons, ready for UI kits. | **https://www.flaticon.com/** |
| unDraw | Open‑source, constantly updated illustrations (SVG). | **https://undraw.co/** |
| Humaaans | Mix‑and‑match human illustrations, customizable. | **https://www.humaaans.com/** |
| Open Peeps | Hand‑drawn characters for UI mockups. | **https://www.openpeeps.com/** |
| Lordicon | Animated SVG icons with hover/state interactions. | **https://lordicon.com/** |
| Streamline Illustrations | Consistent illustration style for SaaS products. | **https://streamlinehq.com/illustrations** |
| Absurd Design | Abstract, surreal illustrations for modern UI backgrounds. | **https://absurd.design/** |
| ManyPixels | Daily refreshed, royalty‑free illustrations (SVG/PNG). | **https://www.manypixels.co/gallery** |
🌈 Color & Theme Generators
| Tool | What It Generates | URL |
|---|---|---|
| Coolors | Fast colour‑palette generator, export to CSS/SCSS. | **https://coolors.co/** |
| Colormind | AI‑powered palette extraction from images or UI. | **http://colormind.io/** |
| Khroma | Machine‑learning based colour‑combination explorer. | **https://khroma.co/** |
| Color Hunt | Curated community colour palettes. | **https://colorhunt.co/** |
| Adobe Color | Theme creation, colour rules (analogous, triadic, etc.). | **https://color.adobe.com/** |
| Happy Hues | Ready‑to‑use colour palettes with UI mockups. | **https://www.happyhues.co/** |
| UI Gradients | Gradient library with CSS export. | **https://uigradients.com/** |
| Gradient Hunt | Community‑curated gradients (also offers CSS). | **https://gradienthunt.com/** |
| Palette Generator (Material UI) | Generates accessible palettes based on Material Design. | **https://material.io/resources/color/** |
| Paletton | Interactive colour scheme designer (static & dynamic). | **https://paletton.com/** |
| Tints and Shades | Quick generation of tints/shades for a base colour. | **https://tintsandshades.com/** |
📊 User Research & Usability Testing
| Platform / Tool | Main Capability | URL |
|---|---|---|
| Lookback | Remote moderated & unmoderated user testing with video capture. | **https://lookback.io/** |
| UserTesting | Recruit participants on demand; full‑stack video feedback. | **https://www.usertesting.com/** |
| Maze | Prototype testing, click‑maps, quantitative metrics (Free tier). | **https://maze.co/** |
| Dovetail | Central repository for qualitative research, tagging, insights. | **https://dovetailapp.com/** |
| Hotjar | Heatmaps, session recordings, surveys (Free up to 2 k pageviews). | **https://www.hotjar.com/** |
| Optimal Workshop | Card sorting, tree testing, first‑click testing, surveys. | **https://www.optimalworkshop.com/** |
| Useberry | Usability testing embedded directly into prototypes (Figma, Sketch). | **https://www.useberry.com/** |
| Userbrain | Continuous remote usability testing with targeted user panels. | **https://userbrain.net/** |
| UsabilityHub | Short‑form design tests (5‑second test, click test, preference test). | **https://usabilityhub.com/** |
| PlaybookUX | Qualitative & quantitative testing, automated transcription. | **https://www.playbookux.com/** |
| Crazy Egg (Heatmaps) | Visual click‑maps & scroll‑maps for live sites. | **https://www.crazyegg.com/** |
| Loop11 | Full‑featured remote usability testing platform. | **https://www.loop11.com/** |
📈 Analytics & Behaviour Insights
| Service | Core Data | URL |
|---|---|---|
| Google Analytics 4 | Event‑based tracking, funnel analysis, AI insights. | **https://marketingplatform.google.com/about/analytics/** |
| Mixpanel | Advanced product analytics, cohort analysis, retention. | **https://mixpanel.com/** |
| Amplitude | Behavioural analytics, user journeys, A/B testing integration. | **https://amplitude.com/** |
| Heap | Automatic event capture, no‑code instrumentation. | **https://heap.io/** |
| FullStory | Session replay with behavioural heatmaps (Free up to 1 k sessions). | **https://www.fullstory.com/** |
| Hotjar (Analytics tab) | Funnel & form analysis, feedback polls. | **https://www.hotjar.com/** |
| Crazy Egg (Analytics) | Click‑map analytics, scroll‑map, confetti heatmaps. | **https://www.crazyegg.com/** |
| Smartlook | Session recordings + event tracking, free tier. | **https://www.smartlook.com/** |
| Plausible | Simple, privacy‑first web analytics (open source). | **https://plausible.io/** |
| Matomo | Self‑hosted, GDPR‑compliant analytics suite. | **https://matomo.org/** |
♿ Accessibility & Inclusive Design
| Tool / Resource | Main Function | URL |
|---|---|---|
| axe DevTools (Chrome/Firefox) | Automated a11y testing, detailed issue reports. | **https://www.deque.com/axe/** |
| WAVE (WebAIM) | Visual accessibility evaluation overlay. | **https://wave.webaim.org/** |
| Stark (Figma/Sketch/Adobe XD plugin) | Contrast checker, colour blindness simulation, accessibility audit. | **https://www.getstark.co/** |
| Tenon.io | API‑driven accessibility testing, CI integration (Free trial). | **https://tenon.io/** |
| Color Oracle | Simulates colour‑vision deficiencies on the screen. | **https://colororacle.org/** |
| NVDA | Free Windows screen reader for manual testing. | **https://www.nvaccess.org/** |
| VoiceOver (macOS/iOS) | Built‑in screen reader for Apple platforms. | **https://developer.apple.com/voiceover/** |
| Microsoft Accessibility Insights | Fast scan for contrast, ARIA, keyboard navigation. | **https://accessibilityinsights.io/docs/en/web/** |
| A11y Project | Curated list of accessibility patterns, cheat‑sheets & resources. | **https://www.a11yproject.com/** |
| Inclusive Design Toolkit (Microsoft) | Principles, checklists, and templates for inclusive design. | **https://www.microsoft.com/design/inclusive/** |
| Overlay (by Kiwix) | Quick overlay that highlights accessibility issues directly on live site. | **https://overlay.kiwix.org/** |
| UserWay Widget | Real‑time accessibility widget for sites (Free tier). | **https://userway.org/** |
🔧 Hand‑off & Front‑End Integration
| Tool | What It Does | URL |
|---|---|---|
| Zeplin | Generates specs, assets, and style guides from Sketch/Figma/Adobe XD. | **https://zeplin.io/** |
| Avocode | Inspects design files, extracts CSS, works with Photoshop & Sketch. | **https://avocode.com/** |
| Supernova | Transforms design tokens into native code for iOS, Android, React Native, Flutter, and Web. | **https://supernova.io/** |
| Lona (Airbnb) | Converts design files into reusable component code. | **https://github.com/airbnb/Lona** |
| Figma Inspect | Built‑in code panel (CSS, iOS, Android) for developers. | **https://www.figma.com/inspect** |
| Framer Code Export | Generates clean React code from Framer prototypes. | **https://www.framer.com/code/** |
| Storybook Addons for Design Systems | Sync design tokens, automatically generate docs for hand‑off. | **https://storybook.js.org/addons/** |
| Kactus | Generates style‑guide documentation from React components. | **https://kactus.dev/** |
| Bit.dev | Share and version UI components across projects, integrates with CI. | **https://bit.dev/** |
| Lottie‑Web (npm) | Embeds Lottie animations as JSON for web; minimal bundle size. | **https://github.com/airbnb/lottie-web** |
| CSS‑in‑JS Playground (e.g., styled‑components, Emotion) | Enables designers to experiment with CSS as JavaScript objects. | **https://styled-components.com/** (example) |
| Responsive Design Checker | Visual testing of break‑points across devices (browser extension). | **https://chrome.google.com/webstore/detail/responsive-design-checker/** |
🤖 AI‑Powered Design Assistants
| Service | AI Capability | URL |
|---|---|---|
| Uizard | Turns sketches or screenshots into editable UI designs (Figma output). | **https://uizard.io/** |
| Adobe Firefly | Generative AI for images, vector assets, and design patterns (integrated in Photoshop/Illustrator). | **https://www.adobe.com/sensei/generative-ai/firefly.html** |
| Microsoft Designer (Copilot) | AI‑generated UI mockups based on natural‑language prompts. | **https://designer.microsoft.com/** |
| Figma AI Plugins (e.g., DesignGPT, FigGPT) | Generate components, copy, or redesign with GPT‑4. | **https://www.figma.com/community/plugin/1246871779617224151/DesignGPT** |
| Remove.bg | AI‑powered background removal for UI assets, fast API. | **https://www.remove.bg/** |
| Visily | AI‑driven low‑code wireframing & prototyping platform. | **https://www.visily.ai/** |
| ChatGPT for Designers (OpenAI) | Language model for copywriting, UX copy, and design rationale generation. | **https://chat.openai.com/** |
| RunwayML | Video & image generation, style transfer; useful for creating UI backgrounds. | **https://runwayml.com/** |
| Colormind AI | Generates colour palettes from images or UI screenshots. | **http://colormind.io/** |
| Fontjoy | AI‑assisted font pairings based on visual harmony. | **https://fontjoy.com/** |
| PatternPad | AI‑generated pattern textures for UI backgrounds. | **https://patternpad.co/** |
| Designify | AI‑auto‑enhance icons, logos, and UI assets for web. | **https://designify.com/** |
🌟 Inspiration & Trend Spotting
| Platform | Content Type | URL |
|---|---|---|
| Awwwards | Awarded sites, UI trends, case studies. | **https://www.awwwards.com/** |
| Dribbble | UI shots, motion graphics, micro‑interaction GIFs. | **https://dribbble.com/** |
| Behance – UI/UX Gallery | Full‑project case studies, high‑resolution mockups. | **https://www.behance.net/galleries/ui-ux** |
| UI Movement | Curated UI animation & interaction patterns. | **https://uimovement.com/** |
| Collect UI | Daily collection of UI patterns (buttons, forms, navbars). | **https://collectui.com/** |
| Land‑Book | Landing‑page showcase with categorised filters. | **https://land-book.com/** |
| One Page Love | Single‑page site inspiration, CTA best practices. | **https://onepagelove.com/** |
| Muzli | Continuous feed of design news, UI trends, and inspiration. | **https://muz.li/** |
| Mobile Patterns | Mobile UI pattern library (iOS, Android). | **https://mobile-patterns.com/** |
| Pttrns | Mobile UI design patterns and inspiration. | **https://pttrns.com/** |
| Mobbin | Real‑app screenshots, UI flow archives. | **https://mobbin.com/** |
| Sidebar.io | Weekly newsletter of design tools, resources, and inspiration. | **https://sidebar.io/** |
| Lapa Ninja | Curated landing page designs with BEM‑style categorisation. | **https://www.lapaninja.com/** |
| CSS‑Tricks – Examples | Real‑world CSS/HTML snippets for UI components. | **https://css-tricks.com/** |
| Medium – UI/UX Publication | Articles on design processes, case studies, and research. | **https://medium.com/tag/ui-ux** |
🤝 Collaboration & Handoff Platforms
| Platform | Main Use | URL |
|---|---|---|
| Miro | Online whiteboard, sticky‑note collaboration, journey mapping. | **https://miro.com/** |
| FigJam (Figma) | Collaborative brainstorming directly alongside design files. | **https://www.figma.com/figjam/** |
| Mural | Visual collaboration for design sprints, affinity mapping. | **https://www.mural.co/** |
| Notion | All‑in‑one workspace for design specs, research docs, and roadmaps. | **https://www.notion.so/** |
| Coda | Document + spreadsheet hybrid for design tracking and specs. | **https://coda.io/** |
| Slack (Design Channels) | Real‑time design discussion, file sharing, integrations (e.g., with Zeplin). | **https://slack.com/** |
| Microsoft Teams – Design Hub | Collaboration for enterprises with integrated Planner & Whiteboard. | **https://www.microsoft.com/microsoft-teams/group-chat-software** |
| Discord – Design Communities | Communities like r/Design, #ui-ux channels for feedback. | **https://discord.com/** |
| Basecamp | Project management with design milestones and file attachments. | **https://basecamp.com/** |
| Trello (Design Boards) | Kanban boards for design task tracking, integrates with Figma/Sketch. | **https://trello.com/** |
| Asana | Timeline & workload planning for design teams. | **https://asana.com/** |
| ClickUp | All‑in‑one work hub; helps track design tickets, bugs, and assets. | **https://clickup.com/** |
| GitHub Projects (Beta) | Kanban boards tied directly to code repos, perfect for design‑dev sync. | **https://github.com/features/project-management** |
No comments:
Post a Comment