Table of Contents
1. Plan & Organise
<! Content TBC –>
1.A Team Models (centralised, embedded, hybrid)
- 3 Steps for Getting Started with DesignOps
- A Go-To Article for the Best DesignOps Resources
- A mini DesignOpresource list. Unlock the power of DesignOps with this… | by Victor | Medium
- Design Ops 101 · DesignOps Guide & Glossary (DOGG)
- DesignOps at Elen: How Our Business Operates
- DesignOps: Study Guide - NN/g
- Managing UX Teams Articles, Videos, Reports, Training Courses, and Online Seminars by NN/g
- Resources - DesignOps LOL
1.B Capacity & Resource Planning
- Effectively Planning UX Design Projects
- Progression: Helping teams to grow, together
- The importance of Gestalt laws for UX design planning
1.C Governance & Standards
1.D Onboarding & Knowledge Sharing
- The Language Of Gamification
- User Onboarding | A frequently-updated compendium of web app first-run experiences
2. Create & Deliver
<! Content TBC –>
2.A Design Systems
<! Content TBC –>
2.A.1 Foundations (colour, type, spacing)
- 8-Point Grid
- A CSS Font Stack
- Color Finder
-
[Color Palette Generator ColorDesigner](https://colordesigner.io) - Color Space - Palette and Gradient Tool
- Color Tool - Material Design
- Colormind - the AI powered color palette generator
- Converting Colors - Conversion, Gradients, Harmonies and More
- CSS Color Extractor
- CSS Grid Generator
- CSS Shadow Palette Generator
- Data Viz Color Palette Generator (for Charts & Dashboards)
- Everything you should know about 8 point grid system in UX design | by Ashphiar Raihan Rumman | UX Planet
- FA
- Fontawesome Cheatsheet
- Free SVG generators, color tools & web design tools
- Golden Ratio Typography Calculator
- Google Fonts
-
[Gradient Generator ColorDesigner](https://colordesigner.io/gradient-generator) - Grid lover for Type Scales
-
[HEX <> P3 Quickly convert your HEX colors to Dplay P3 color space.](https://hexp3.com) - Material Color Palette Generator
- Modular Type Scale
- Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher
-
[Palette Generator Tailtools: Tailwind CSS Tools](https://tailtools.app/palette-generator) - Shadowlord - Tints and Shades Generator Tool
- Site Palette - Get the essential colours from a website
- Systematic Color Palette Generator
- Tailwind CSS Color Generator
- Tailwind Grid Generator
-
[Tailwind Ink AI color palette generator for Tailwindcss](https://tailwind.ink) - The Grid System: Importance of a Solid UX/UI Layout | Designlab
- The Infinite Grid
- The Science of Color & Design - Material Design
- tts.dev
- Type Scale
- W3C Color Names?
2.A.2 Components (UI kits, patterns)
- Aceternity UI Library
- Build it in Figma: Create a Design System V: Documentation - YouTube
- Cerberus Email Patterns
- Common Ground
- Complex Navigation Patterns for Responsive Design
- Design Patterns: You Already Know How To Use It
- Design Reviews: Going Beyond the Surface - Library - Google Design
- Extending Atomic Design
- Figma & design thinking: Building a design system for an existing product | by Tammy Taabassum | Sep, 2020 | UX Collective
- Filtering stats: What are some good patterns to follow for filtering a time/date range?
- Good Call-To-Action Buttons
- How to Make Sure Users Don’t Accidentally Delete
- Introducing design systems
- Managing Your Design System in Figma
- Mochi
- Motion - A modern animation library for JavaScript and React
- Navigation UX: Pattern Types and Tips to Enhance User Experien
- Nine patterns among great UX teams
- Pattern Lab
- Responsive Navigation Patterns
- Revisiting the Priority+ Pattern
- SHADCN/UI Library
- Tailwind CSS Component Playground - Tailwind UI
-
[Tailwind CSS Modals Interactive Popup & Dialog Components](https://wpdean.com/tuikit/modals.html) - TailwindFlex: Components + Samples
- The Component Gallery - UX Design Patterns
- The Priority+ Navigation Pattern
- UI-Patterns.com
2.A.3 Documentation (usage guidelines, principles)
- Agile Principles and 18F Practices
- Basic writing and formatting syntax - GitHub Docs
- Common Design Principles for a Progressive Web App
- CSS
- Design Principles: Visual Perception And The Principles Of Gestalt
- Design Tokens Generator - For Web Developers and Designers
- Design tokens with Figma
- DesignOps 101 | What is Design Operations? | frog, part of Capgemini Invent
- First Principles of Interaction Design (Revised & Expanded)
- Gestalt Principles and the Psychology of Design
- Introduction, Technical Explanation | Remix
- Managing Design Tokens Using Storybook
- MDN Web Docs
- Principles
- principles.design
- readme.so
- Sitemap Generator. Create XML Sitemaps Online
- Tunnels · Cloudflare Zero Trust docs
2.B Toolchains & Platforms
- Abstract
- Anima
- Automator for Figma
- Balsamiq
- Chromatic: Storybook deployment, review, and test
- Fractal
- Framer - Prototype Interaction and Animation
- GitHub Profile
- GitHub Repositories
- loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator
- Lucide
- Modulz
- Render Dashboard
- Sketch.systems
- Strapi - Open source Node.js Headless CMS 🚀
- Tailbone - TailwindCSS UX Skeleton Generator
- Tailwind CSS Cheatsheet
- Tailwind Generator
- The Tailwind Cheat Sheet
- Vercel
-
[Weavely Design & Publish Forms in Figma](https://wwweavely.ai) - WebFlow
- ZeHeight
- Zeplin
2.C Workflow Optimisation
-
[A Complete Guide To Flexbox CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox) - DIY Priority+ Navigation
- The One Generator
- Transition.css - easy transitions with clip-path
2.D Collaboration with Engineering
- Adaptive Images in HTML
- Analysis: Option Availability And Loss Aversion in Game Design
- Apify: Web Scraping and Data Extraction platform
-
[Blisk A browser for web developers](https://blisk.io) - Can I use… Support tables for HTML5, CSS3, etc
- Content Inventory
-
[Creating space for design reviews by Lauren Smith UX Collective](https://uxdesign.cc/creating-space-for-design-reviews-bd23a14f307d) - CSS Analytics - Project Wallace
- CSS Stats
-
[Design Review Process Essentials Smartsheet](https://www.smartsheet.com/content/design-review-process) - Designing Effective User Interfaces
- Digital Psychology
- Every Layout
-
[Gephi Open Graph Viz Platform](https://gephi.github.io) - Good User Interface Design Tips
- How to Run a Successful Design Review | UX Booth
- How Venture Capital Works
- ICON, INDEX and SYMBOL (Long Version)
- If heuristics were written from the customer’s point of view?
- Implement design reviews the right way
- Information Architecture Methods | Usability.gov
- JSON Minify and Compress
- List of User Agent strings
- Lucide
- Modulator
- Object Detection: Live Camera - Material Design
- Organization Schemes
- Organization Structures
- Professional Development Framework (v1.1) | Trello
- Progressive Web App Checklist
- Responsive Design: Why and how we ditched the good old select element
-
[Screen Sizes Viewport Sizes and Pixel Densities for Popular Devices](https://screensiz.es) -
[Swagger API Editor & Validator](https://editor.swagger.io) - The ‘Design Review’ Between Designers and Developers | by Aurélie Radom | UX Planet
- The Data Visualisation Catalogue
- The Web App Manifest
- Turndown Demo
- Unicode Date formats » UTS5
- Usability resources
- User interface design: 4 rules you need to know
- Welcome - SerpApi
- What makes a good Progressive Web App?
- Wireframing
3. Validate & Evolve
<! Content TBC –>
3.A Testing & Accessibility
- Accessibility r teams - Digital.gov
-
[Accessible Colors WCAG 2.0 AA and AAA color contrast checker](https://accessible-colors.com) -
[Accessible Web WCAG & ADA](https://accessibleweb.com) -
[ARIA Authoring Practices Guide APG WAI W3C](https://www.w3.org/WAI/ARIA/apg) - Cards
- Color Contrast Checker - Coolors
-
[Color contrast checker analyzer tool Adobe Color](https://color.adobe.com/create/color-contrast-analyzer) - Color-Blindness Simulators
- Colour Contrast Tool - Grid | EightShapes
- Colour Contrast Checker
- CSS Variables and Theming | Plugin API
- WCAG Accessibility Guidelines
- Web Content Accessibility Guidelines
3.B Metrics & Measurement
- Amplitude
- Analytics
- Datawrapper
- Dimple JS
- KardSort
- Mockaroo
- Ngram Analyzer
- Online Graph Maker · Plotly Chart Studio
- RAW Graphs
- SankeyMATIC
3.C Feedback Loops
- 8 Reasons Users Don’t Fill Out Sign Up Forms
- An Excellent Beginner’s Guide to Information Architecture
- Helio - Test prototypes, screens, concepts, and design ideas. Learn from real people in minutes
- How To Transform The Minds Of Clients
- How To Design Outstanding Feedback Loops
- How to run an efficient remote design critique |…
- Information Scent: How Users Decide Where to Go Next
- JSON Formatter & Validator
- [lists
- Unambiguous way to display timezone information in a compact manner - User Experience Stack Exchange](https://ux.stackexchange.com/questions/525/unambiguous-way-to-display-timezone-information-in-a-compact-manner)
- Native Form Elements
-
[Optimal Workshop Information architecture validation software](https://www.optimalworkshop.com/treejack) - Platforms vs Aggregators - Stratechery by Ben Thompson
- Relate - The open platform to create for the web
- Shopify and Platforms
- Struggle to give verbal feedback during Design Cr…
- The Art of Guerrilla Usability Testing
- Typeform
- UX Maturity: The Reality of Performance
- Website Information Architecture: How to Optimize for UX