🎨 Design Inspiration Websites
✨ Special Categories
🌑 Dark UI Inspiration
🍭 Minimal & Modern
🎞 Motion & Animation
💡 Creative Code / Web Effects
🎯 UI Pattern Libraries
| Name |
Focus |
| UI Patterns |
UI conventions & examples |
| Mobbin |
Mobile & web UI reference |
| Pttrns |
Mobile UI patterns |
| Page Flows |
UX flows & onboarding examples |
🖌 Color, Fonts & Style Inspiration
🎨 Color
✍️ Fonts
✨ Visual Aesthetic Boards
⚙️ Tools To Practice Design
🎥 YouTube Channels (Web Design Inspiration)
- Charli Marie TV
- Flux Academy
- Jesse Showalter
- Kevin Powell (CSS magic)
- DesignCourse
📚 Bonus — Design Systems for Inspiration
- Apple Human Interface Guidelines
- Google Material Design
- IBM Carbon Design System
🌐 All Disciplines in Web Design
🎨 Visual & Creative Design
| Discipline |
Focus |
| UI Design |
Layout, buttons, colors, typography, spacing |
| Graphic Design |
Visual elements & branding |
| Digital Branding |
Logos, brand identity, guidelines |
| Motion Design |
Animations & visual movement |
| Illustration |
Website drawings, custom icons |
| Web Typography |
Font systems, readability |
| Color Theory |
Palette creation, contrast + mood |
| Accessibility Design |
WCAG, screen reader, keyboard navigation |
| Design Systems |
Reusable components + style guides |
| Responsive Design |
Desktop, tablet, mobile layouts |
🧠 UX / User Experience
| Discipline |
Focus |
| UX Research |
User interviews, testing, surveys |
| Information Architecture (IA) |
Organizing site content & navigation |
| Wireframing |
Low-fidelity page layout planning |
| Prototyping |
Interactive mockups |
| User Testing |
Testing with real people |
| Content Strategy |
What content goes where & why |
| UX Writing |
Micro-copy (buttons, labels, errors) |
🏗 Front-End Development
| Discipline |
Focus |
| HTML & CSS |
Structure & style |
| JavaScript |
Interactivity |
| Responsive CSS Systems |
Flexbox, grid, fluid design |
| CSS Frameworks |
Tailwind, Bootstrap |
| Web Animation |
CSS animations, GSAP, Lottie |
| Front-End Performance |
Page speed optimization |
| Version Control |
Git/GitHub |
| SEO Basics |
On-page SEO structure |
| CMS Integration |
WordPress, Webflow, Wix |
🧩 Interaction & Experience
| Discipline |
Focus |
| Interaction Design (IxD) |
Buttons, hover states, transitions |
| Micro-interactions |
UI feedback, signals |
| Conversion Design |
Landing page optimization, funnels |
| Personalization |
Dynamic user experiences |
🏛 Architecture & Strategy
| Discipline |
Focus |
| Web Architecture |
Structure & functionality planning |
| UX Strategy |
Aligning design to business goals |
| Product Design |
Feature planning, product flows |
| Design Thinking |
User-centered design process |
🛠 No-Code Web Building
| Tool Category |
Focus |
| Wix / Squarespace |
Drag-and-drop sites |
| Webflow / Framer |
Pro-design visual builders |
| Shopify / WooCommerce |
Ecommerce design |
| Notion / Carrd |
Lightweight landing pages |
🎬 Content & Media
| Discipline |
Focus |
| Photography |
Visual storytelling |
| Videography |
Hero videos, brand films |
| Photo Editing |
Photoshop, Lightroom |
| Video Editing |
Premiere, CapCut, DaVinci |
| Icon Design |
UI icon systems |
🧾 Legal, Compliance & Ethics
| Discipline |
Focus |
| Web Accessibility (WCAG) |
Inclusive design compliance |
| Privacy & Cookies |
GDPR / CCPA |
| Security Basics |
SSL, safe forms, anti-spam |
🧪 Testing & Quality
| Discipline |
Focus |
| Browser Testing |
Chrome, Firefox, Safari, mobile |
| Performance Testing |
PageSpeed Insights, Lighthouse |
| Usability Testing |
User observation, feedback |
📊 Business & Marketing
| Discipline |
Focus |
| SEO |
On-page, off-page, technical |
| Analytics |
Google Analytics, heatmaps |
| CRO |
Improving conversions (CTAs, funnels) |
| Social Media Integration |
Instagram, TikTok, Tumblr |
| Content Marketing |
Blogs, landing page copy |
| Email Design |
Newsletter layouts |
💼 Professional Roles
| Role |
What they do |
| Web Designer |
Visual layouts & design |
| UX Designer |
User flows & research |
| UI Designer |
Interface details & comps |
| Full-Stack Designer |
Design + front-end |
| Webflow / No-Code Designer |
Builds visually |
| UX Researcher |
Research + testing |
| Product Designer |
App/web product creation |
| Front-End Developer |
Code interactive UI |
| Visual Designer |
Branding + visuals |
🧭 Categories
🎛 UI Design
Focus: Layout, buttons, typography, spacing, components
📂 Inspiration
- Awwwards
- Dribbble
- Behance
- Mobbin
- Uplabs
🛠 Tools
- Figma
- Sketch
- Adobe XD
- Visily (AI)
📚 Learning
- Webflow University (UI basics)
- Coursera – Google UX Certificate
- DesignCourse (YouTube)
- Flux Academy
🖼 Graphic Design
Focus: Visual elements, overall style, visual identity
🛠 Tools
- Adobe Photoshop
- Adobe Illustrator
- Affinity Designer
- Canva
📚 Learning
- Adobe Tutorials
- The Futur Academy
- Envato Tuts+
🌟 Digital Branding
Focus: Logos, brand identity, guidelines, consistency
Tools
- Figma Brand Kits
- BrandPad
- Corebook.io
- Coolors Brand Kit
Resources
- Logo Lounge
- Behance Branding Gallery
🎥 Motion Design
Focus: UI animations, transitions, motion systems
Tools
- After Effects
- Lottie / LottieFiles
- Rive
- Framer
Inspiration
✍️ Illustration
Focus: Website graphics, custom icons, character design
Libraries
- Humaaans
- Undraw
- OpenPeeps
- Blobmaker
Tools
- Procreate
- Illustrator
- Figma Vector
🔤 Web Typography
Focus: Font systems, readability, hierarchy
Inspiration & Tools
- Google Fonts
- Adobe Fonts
- FontPair
- Typewolf
- FontsInUse
Learning
- Better Web Typography ebook
- Refactoring UI – Typography Guide
🎨 Color Theory
Focus: Palette design, contrast, emotion & mood
Tools
- Coolors
- Color Hunt
- Khroma
- Adobe Color
- Happy Hues
Learning
- Interaction Design Foundation — Color Psychology
- Envato Color Theory Course
♿ Accessibility Design
Focus: Inclusive design, WCAG, screen readers, keyboard navigation
Tools
- Contrast Checker (WCAG)
- Stark Figma Plugin
- Axe DevTools
Guides
- W3C Web Accessibility
- Google Accessibility Guide
- Inclusive Design Principles
🧱 Design Systems
Focus: Component libraries, tokens, guidelines
Real Systems to Study
- Google Material Design
- Apple Human Interface Guidelines
- IBM Carbon
- Salesforce Lightning
- Atlassian Design System
Tools
- ZeroHeight
- Figma Tokens Plugin
- Storybook
📱 Responsive Design
Focus: Mobile-first layouts, grids, scaling
Tools
- Figma Auto Layout
- CSS Grid & Flexbox
- Fluid Type Scales (Utopia)
Guides
- MDN Responsive Design Docs
- Josh Comeau – CSS Course
- Kevin Powell – Responsive CSS tutorials
✅ Bonus Practice Ideas
| Skill |
Project |
| Typography |
Redesign a blog page using new fonts |
| Color |
Build mood boards for different brands |
| UI |
Recreate a landing page in Figma |
| Illustration |
Create a custom icon set |
| Motion |
Animate button hover + page transitions |
| Accessibility |
Build a WCAG-compliant landing page |
🎛 UI Design
📂 Inspiration
🛠 Tools
📚 Learning
🖼 Graphic Design
🛠 Tools
📚 Learning
🌟 Digital Branding
Tools
Resources
🎥 Motion Design
Tools
Inspiration
✍️ Illustration
Libraries
Tools
🔤 Web Typography
Inspiration & Tools
Learning
🎨 Color Theory
Tools
Learning
♿ Accessibility Design
Tools
Guides
🧱 Design Systems
Real Systems to Study
Tools
📱 Responsive Design
Tools
Guides
🧠 UX Research
Focus: User interviews, testing, surveys
| Category |
Website / Tool |
Notes |
| Research Platform |
Nielsen Norman Group |
Gold-standard UX research articles & courses |
| User Research Guides |
Interaction Design Foundation |
Deep learning for UX research skills |
| User Research Community |
UX Research Collective |
News, articles, case studies |
| Participant Recruiting |
UserInterviews.com |
Recruit participants for research |
| Survey Tool |
Typeform |
Beautiful, high-completion surveys |
| AI + Surveys |
Maze |
Fast testing & survey feedback |
| Research Repository |
Dovetail.com |
Store, tag, and analyze qualitative data |
🗺️ Information Architecture (IA)
Focus: Organizing site content & navigation
| Category |
Website / Tool |
Notes |
| IA Knowledge |
Nielsen Norman Group – IA Guide |
Best IA tutorials online |
| Content Mapping |
Miro |
Mind maps & content maps |
| Sitemaps |
FlowMapp |
UX sitemaps & IA planning |
| Content Strategy |
Content Design London |
IA & content UX methodology |
📝 Wireframing
Focus: Low-fidelity layouts
| Category |
Website / Tool |
Notes |
| Wireframing Tool |
Balsamiq |
Best low-fi wireframes |
| Design Suite |
Figma |
Industry standard for wireframes |
| Inspiration |
Mobbin |
UX flows & wireframe library |
| Wireframe UI Kits |
Figma Community |
Thousands of free wireframe kits |
🧩 Prototyping
Focus: Interactive mockups
| Category |
Website / Tool |
Notes |
| Prototype Design |
Figma |
#1 for UI & prototyping |
| Advanced Prototypes |
ProtoPie |
Real-device interaction |
| Pro Web Prototypes |
Axure |
Complex logic prototypes |
| Quick Prototypes |
Marvel App |
Beginner-friendly |
| Flow Prototypes |
Overflow |
Click-flow mapping |
👥 User Testing
Focus: Testing with real users
| Category |
Website / Tool |
Notes |
| User Testing Platform |
UserTesting.com |
Live moderated tests |
| AI Feedback |
Maze |
Test prototypes fast |
| Usability Testing |
Userbrain |
Subscription test users |
| Remote Testing |
Lookback |
Observe user sessions |
| Heatmaps & Behavior |
Hotjar |
Heatmaps, recordings, feedback widgets |
📚 Content Strategy
Focus: Content planning & structure
| Category |
Website / Tool |
Notes |
| Content Strategy Guide |
ContentDesign.com |
Leading content design school |
| Industry Blog |
Content Design London Blog |
Top-tier content methods |
| Editorial Planning |
Notion |
Content calendars & docs |
| SEO + Content |
Ahrefs |
Keyword content insights |
| UX Content Inspiration |
GoodUI.org |
Real tested UI content patterns |
✍️ UX Writing
Focus: Micro-copy (buttons, labels, errors)
| Category |
Website / Tool |
Notes |
| UX Writing Platform |
UXWritingHub.com |
Courses, templates, resources |
| UX Writing Academy |
Google UX Writing Guide |
Free Google curriculum |
| Tone & Voice |
Mailchimp Content Style Guide |
Industry-leading tone playbook |
| Microcopy Library |
Microcopy Inspirations |
Button, form, and UX text gallery |
| AI UX Copy Tool |
Writer.com |
AI writing for product UI text |
🧠 UX Research
🗺️ Information Architecture (IA)
📝 Wireframing
🧩 Prototyping
👥 User Testing
📚 Content Strategy
✍️ UX Writing
🏗 HTML & CSS
Focus: Structure & style
📚 Learn
🛠 Tools
⭐ Inspiration
⚡ JavaScript
Focus: Interactivity
📚 Learn
🛠 Tools
🎮 Practice
📱 Responsive CSS Systems
Focus: Flexbox, grid, fluid design
📚 Learn
⚙ Tools
🎨 CSS Frameworks
Focus: Tailwind, Bootstrap
🛠 Frameworks
📚 Learn
🎬 Web Animation
Focus: CSS, GSAP, Lottie
🛠 Tools
📚 Learn
✨ Inspiration
🚀 Front-End Performance
Focus: Speed optimization
🛠 Tools
📚 Learn
🔄 Version Control
Focus: Git/GitHub
📚 Learn
✅ Platforms
🔍 SEO Basics
Focus: On-page SEO structure
Tools
🧩 CMS Integration
Focus: WordPress, Webflow, Wix
Platforms
Learning
📖 Table of Contents
- Interaction Design (IxD) – Buttons, Hover States, Transitions
- Micro‑Interactions – UI Feedback & Signals
- Conversion Design – Landing‑Page Optimization & Funnels
- Personalization – Dynamic User Experiences
1️⃣ Awesome Interaction Design (IxD) – Buttons, Hover States, Transitions
| Category |
Resource |
Description |
| Pattern Libraries |
UI‑Patterns.com – Buttons |
Curated button patterns with interaction notes, code snippets and usability pros/cons. |
|
Micro‑Interactions.io – Hover & Transition Gallery |
Real‑world examples of hover states & subtle transitions, with CSS/JS source. |
|
CSS‑FX – Hover Effects |
250+ pure‑CSS hover/animation effects, searchable by effect type. |
| Component Libraries |
Radix UI |
Unstyled, accessible primitives (Button, Popover, Tooltip) you can style and animate yourself. |
|
Headless UI (Tailwind Labs) |
Fully‑controlled, keyboard‑friendly components; perfect for custom transitions. |
|
React Spring |
Spring‑physics animation library – ideal for natural button presses & hover motion. |
| Design‑Systems |
Material‑UI (MUI) – Buttons |
Pre‑built button variants + theming + transition hooks. |
|
Carbon Design System – Interactive Elements |
IBM’s design system with detailed interaction specs and CSS‑in‑JS tokens. |
| CSS‑Only Tricks |
CSS‑Tricks – Hover, Focus, Active States |
Practical guide to pseudo‑classes, custom properties and transition timing. |
|
Animista – Ready‑to‑Copy Animations |
Generate keyframe CSS for button presses, hover reveals, loading spinners. |
| Prototyping Tools |
Figma Interactive Components |
Create variants for hover/pressed states and preview transitions instantly. |
|
Framer Motion (for Figma/React) |
Visual animator + code export for fluid button motion. |
| Books & Articles |
“Designing Interfaces” – Jenifer Tidwell (Chapters 5‑6) |
Classic UI pattern catalog with interaction specifications. |
|
“Micro‑Animations in UI Design” – Smashing Magazine (2022) |
Deep‑dive into the psychology of hover & transition timing. |
|
“The Art of UI Motion” – Dan Saffer |
Theory & practical techniques for motion‑rich interactions. |
| Case Studies |
Airbnb – “Hover‑State Re‑Design” (Medium, 2023) |
How subtle hover elevation increased click‑through by 8 %. |
|
Spotify – Button Press Feedback (Design System Docs) |
Use of haptic‑like animation to convey action confirmation. |
2️⃣ Awesome Micro‑Interactions – UI Feedback & Signals
| Category |
Resource |
Description |
| Pattern Galleries |
Micro‑Interactions.io |
Curated collection of 150+ micro‑interaction examples (toggles, loading, success, error). |
|
LottieFiles – Micro‑Interaction Library |
JSON‑based vector animations ready for web & mobile, searchable by trigger type. |
|
Spotlight‑Interaction Patterns (UX Collective) |
Annotated UI snippets with interaction rationale. |
| Animation Libraries |
Framer Motion |
Declarative animation API; great for tap, hover, drag & shared‑layout transitions. |
|
Anime.js |
Lightweight timeline‑based animation engine for SVG, CSS, JS. |
|
Lottie‑Web |
Play After‑effects‑style animations from After Effects → JSON. |
| Feedback‑Design Toolkits |
Notistack (React Snackbar) |
Stackable toast notifications with auto‑dismiss & custom transitions. |
|
Toastify JS |
Minimalist toast library with progress bar & click‑to‑dismiss. |
|
PNotify |
Accessible alerts with optional audio cues. |
| Prototyping & Handoff |
ProtoPie |
No‑code micro‑interaction prototyping, exportable to iOS/Android/React Native. |
|
Principle for Mac |
Timeline‑based micro‑animation prototyping; exports to JSON for Web. |
| Accessibility Guidelines |
WAI‑ARIA Authoring Practices – Live Regions |
How to expose dynamic feedback to screen readers. |
|
Inclusive Design Patterns – Feedback |
Best practices for visual & auditory cues. |
| Articles & Guides |
“Micro‑Interactions: Making UI Delightful” – Smashing Magazine (2021) |
Psychology of small motions & design checklist. |
|
“Designing Effective Loading Indicators” – CSS‑Tricks (2022) |
When to use spinners vs skeleton screens vs progress bars. |
|
“The Signal‑Noise Ratio in UI Feedback” – Nielsen Norman Group (2023) |
How much feedback is too much. |
| Books |
“Microinteractions: Designing with Details” – Dan Saffer |
The seminal book; covers triggers, rules, feedback, loops. |
|
“Designing Interfaces” – Chapter 7 (Micro‑Interactions) |
Overview of common patterns and implementation tips. |
| Case Studies |
Duolingo – Gamified Feedback Loops (UXPin case study) |
Small animated cues raise lesson completion by 12 %. |
|
Dropbox – File‑Upload Progress UI (UXPin) |
Skeleton loading + progress bar reduces perceived wait time. |
3️⃣ Awesome Conversion Design – Landing‑Page Optimization & Funnels
| Category |
Resource |
Description |
| Frameworks & Templates |
Unbounce Landing Page Templates |
High‑converting, CRO‑tested page blocks (hero, form, CTA). |
|
Conversion‑Focused UI‑Kits – Figma Community |
Free UI kits built for fast A/B testing. |
|
HubSpot Landing Page Builder |
Drag‑and‑drop with built‑in analytics & smart content. |
| A/B Testing Platforms |
[Google Optimize (Legacy) → Optimize 360] |
Split‑test variants, integrate with GA4. |
|
VWO – Visual Experience Platform |
Full‑stack testing, heatmaps, session replay. |
|
Split.io (Feature Flags + Experiments) |
Run experiments on UI changes without redeploy. |
| Analytics & Heatmaps |
Hotjar |
Heatmaps, recordings, surveys to spot friction. |
|
Microsoft Clarity |
Free, privacy‑first session replay and heatmaps. |
|
Crazy Egg |
Scroll maps, confetti clicks, A/B testing integration. |
| Copy & Persuasion Guides |
Copyhackers – Conversion Copy Library |
Proven headline, CTA, form‑copy patterns. |
|
[The Psychology of Persuasion – Cialdini (Book)] |
Core principles you can embed into landing copy. |
|
Nielsen Norman Group – Landing Page Best Practices (2023) |
Checklist for layout, trust signals, forms. |
| Form & Checkout Optimization |
Typeform – Conversational Forms |
Higher completion rates via UI‑guided questions. |
|
PayPal Checkout SDK |
One‑click payment flow, built‑in fraud protection. |
|
Formspree + Spam‑Protection |
Simple backend‑less forms with reCAPTCHA. |
| Performance Tools |
WebPageTest – First Contentful Paint (FCP) & LCP |
Optimize page speed → higher conversion. |
|
Lighthouse CI |
Automated performance audits in CI/CD. |
| Conversion‑Focused Books |
“Landing Page Optimization” – Tim Ash (2014) |
Proven CRO framework (AARRR → CAC). |
|
“Don't Make Me Think (Updated)” – Steve Krug |
Usability fundamentals that directly affect conversion. |
| Case Studies |
Shopify – 22 % Revenue Lift After Reducing Form Fields (Shopify Engineering Blog, 2022) |
Demonstrates the impact of minimalism. |
|
Airbnb – 8 % Increase Using Personalized Hero Image (Airbnb Design Blog, 2023) |
Shows power of dynamic hero content. |
|
Buffer – 15 % More Sign‑ups with Social Proof Badges (ConversionXL, 2021) |
Trust signals boost CTA clicks. |
| Conversion‑Oriented Plugins |
WP Rocket (WordPress) |
Speed‑optimisation → better conversion rates. |
|
Optimizely Full‑Stack |
Feature flagging & experimentation in code. |
|
Zapier Integration – Lead Routing |
Auto‑send leads to CRM, reducing drop‑off. |
4️⃣ Awesome Personalization – Dynamic User Experiences
| Category |
Resource |
Description |
| Personalization Engines |
Segment (Twilio) |
Collects user events, builds audiences, routes data to downstream personalization tools. |
|
Dynamic Yield |
Full‑stack personalization: A/B testing, recommendations, targeting. |
|
Algolia Recommendations |
AI‑driven product/ content recommendations with instant relevance. |
|
Microsoft Personalizer (Azure Cognitive Services) |
Reinforcement‑learning based real‑time personalization API. |
| Feature‑Flag & Targeting |
LaunchDarkly |
Release features to specific user segments, run personalized experiments. |
|
ConfigCat |
Simple feature toggles with targeting rules. |
| Content‑Management with Personalization |
Contentful + Personalization SDK |
Headless CMS + audience targeting in real time. |
|
Sanity.io – GROQ + Custom Rules |
Query language for dynamic content per user segment. |
| Front‑End Libraries |
React‑Query + Prefetching |
Fetch user‑specific data ahead of time for instant UI personalization. |
|
Tailwind‑UI – Variant‑Based Themes |
Use CSS variables + data‑attributes for per‑user theme toggling. |
| Recommendation UI Patterns |
Rainbow – UI‑Kit for Recommendation Tiles (Figma) |
Collection of card layouts, carousel patterns, “You may also like”. |
|
Masonry‑Grid Layout – CSS‑Tricks |
Dynamic, fluid product grids that adapt to user preferences. |
| Data‑Science & ML Toolkits |
TensorFlow.js – Real‑time Recommendations |
Run lightweight models in the browser for on‑device personalization. |
|
Scikit‑Learn + Flask API |
Backend model serving for user‑segmentation & scoring. |
| Privacy‑First Personalization |
Google Consent Mode |
Adjust analytics & personalization based on consent. |
|
Brave Search Personalization (Local) |
Example of on‑device personalization without server tracking. |
| Books & Guides |
“Designing for Personalization” – Aarron Walter (2022) |
Principles for adaptive UI & data‑driven experiences. |
|
“Hooked: How to Build Habit‑Forming Products” – Nir Eyal |
Psychological triggers that can be personalized per user. |
|
“Algorithmic Design for Personalization” – O'Reilly (2023) |
Practical guide to building recommendation pipelines. |
| Case Studies |
Netflix – 75 % of Views From Personalized Recommendations (Tech Blog, 2021) |
Shows ROI of a strong recommendation engine. |
| Spotify – Dynamic Playlists (2023) |
Personalized daily mixes boost listening time by 12 %. |
|
| Airbnb – Location‑Based Search Ranking (Airbnb Engineering, 2022) |
Real‑time guest preferences improve conversion. |
|
| Email & On‑Site Personalization |
Litmus – Email Personalization Playbook (2024) |
Best practices for dynamic content in email + web. |
| Tool‑Chains & Boilerplates |
Next.js – Incremental Static Regeneration (ISR) |
Serve pre‑rendered pages while swapping in personalized data at request time. |
|
Gatsby – DSG (Deferred Static Generation) |
Mix static and dynamic for fast, customized experiences. |
|
Vue Storefront – Headless PWA for e‑Commerce Personalization |
Ready‑made personalization modules (recommendations, promos). |
| Analytics for Personalization |
Amplitude – Behavioral Cohorts |
Build user segments based on product usage patterns. |
|
Mixpanel – User Profiles & Enrichment |
Real‑time user attributes to drive UI adaptation. |
🎛 Interaction Design (IxD)
Focus: Buttons, hover states, transitions, user flows, interaction patterns
🧠 Learn
⚙️ Tools
✨ Inspiration
⚡ Micro-Interactions
Focus: Small UI feedback moments — taps, likes, toggles, loaders, haptics
🧠 Learn
🛠 Tools
✨ Inspiration
🎯 Conversion Design (CRO / UX)
Focus: Landing pages, funnels, psychology, persuasion, forms
🧠 Learn
⚙️ Tools
📊 Inspiration & Libraries
👤 Personalization
Focus: Tailored UX, behavior-based experiences, AI customization
🧠 Learn
⚙️ Tools
| Tool |
Use |
| Google Optimize → GA Experiments |
A/B personalization |
| Optimizely |
Enterprise personalization |
| VWO |
UX testing + personalization |
| Segment |
User identity & tracking |
| Klaviyo |
Behavioral email personalization |
| Mutiny |
https://mutinyhq.com — no-code personalization |
✨ Inspiration
✅ Your Toolkit for Interaction-Driven UX
| Skill |
Best Tool |
Best Learning Link |
| IxD |
Figma / ProtoPie |
NNGroup IxD |
| Micro-Interactions |
Rive / Lottie |
Dan Saffer Book |
| Conversion |
Hotjar / CXL |
CXL Institute |
| Personalization |
Optimizely / GA4 |
Dynamic Yield Academy |
📁 1️⃣ Awesome Web Architecture – Structure & Functionality Planning
A curated collection of books, tools, frameworks, patterns and case studies that help architects design scalable, maintainable, and performant web systems.
| Category |
Resource |
What you’ll find |
| Foundational Books |
“Web Architecture: From 1995 to the Present” – Peter Gasston (2023) |
Chronological overview of architectural styles, from monolithic to micro‑frontends. |
|
“Designing Data‑Intensive Applications” – Martin Kleppmann |
Deep dive on data pipelines, consistency models, and distributed systems that underpin modern web apps. |
|
“Clean Architecture” – Robert C. Martin |
Principles for separating concerns, dependency rules, and building testable systems. |
| Reference Guides & Patterns |
Microsoft REST API Guidelines |
Standards for versioning, pagination, error handling, security. |
|
Architectural Patterns – Micro‑Frontends |
Intro to composition, integration, and deployment of independent UI fragments. |
|
The Twelve‑Factor App |
Checklist for SaaS‑ready services (config, logs, processes, dev‑prod parity). |
| Modeling & Diagramming Tools |
Structurizr DSL (C4 Model) |
Text‑based way to generate C4 architecture diagrams (context → container → component). |
|
Diagrams.net (draw.io) |
Free, web‑based diagramming with AWS, Azure, GCP stencils. |
|
Miro – Architecture Templates |
Collaborative whiteboard for remote architecture workshops. |
| Infrastructure‑as‑Code (IaC) |
Terraform – Registry Modules |
Proven modules for VPC, K8s, serverless, and multi‑cloud setups. |
|
Pulumi – Multi‑language IaC |
Write infra in JavaScript/TypeScript, Python, Go, .NET. |
|
AWS CDK (Cloud Development Kit) |
Define AWS resources using familiar programming languages. |
| Performance & Scalability |
WebPageTest – Global Test Matrix |
Real‑world latency, first‑byte, LCP across regions. |
|
Google Cloud – Architecture Framework |
Blueprint for reliability, security, cost‑optimization, sustainability. |
|
NGINX Amplify |
Monitoring & auto‑tuning for reverse‑proxy performance. |
| Security Essentials |
OWASP Top 10 |
Classic checklist for web‑app attack vectors. |
|
CSP Builder |
Generate and test Content‑Security‑Policy headers. |
|
Snyk – Open Source Vulnerability Scanning |
Integrate into CI pipelines for dependency‑level security. |
| Case Studies |
Netflix – Chaos Engineering at Scale (Netflix Tech Blog, 2022) |
How they built a resilient micro‑service architecture with automated fault injection. |
|
Shopify – Migrating Monolith → Micro‑services (Shopify Engineering, 2023) |
Step‑by‑step migration plan, lessons learned, tooling. |
|
Airbnb – Front‑end Architecture with React Server Components (Airbnb Blog, 2023) |
Reducing bundle size while keeping SEO friendliness. |
| Courses & Workshops |
Frontend Masters – “Architecting Large‑Scale Web Apps” |
Video series covering domain‑driven design, module federation, CI/CD. |
|
Pluralsight – “Web Application Architecture” |
Covers monolith → micro‑services, containers, API‑gateways. |
|
Udacity – “Scalable Web Architecture Nanodegree” |
Hands‑on project using Terraform + Kubernetes. |
📁 2️⃣ Awesome UX Strategy – Aligning Design to Business Goals
A toolbox for turning business objectives into user‑experience deliverables, measuring impact, and communicating ROI.
| Category |
Resource |
What you’ll gain |
| Strategic Frameworks |
“Strategic Design: The Roadmap to Innovation” – Roger Martin (2022) |
Aligns design thinking with business model canvas and strategy maps. |
|
Jobs‑to‑Be‑Done (JTBD) Framework |
Identify functional & emotional user needs that map directly to revenue drivers. |
|
OKR‑Driven UX |
How to translate Objectives‑Key Results into UX metrics. |
| Goal‑Setting & Metrics |
UX KPI Library (UX‑Metrics) |
Lists of actionable KPIs (NPS, Task Success Rate, Time‑to‑Complete, Conversion). |
|
Google Analytics 4 – Event‑Based Measurement Guide |
Track business‑critical actions (checkout, sign‑up) as UX outcomes. |
|
Amplitude – Product‑Led Growth Playbook |
Cohort analysis, funnel visualization, and retention tied to design changes. |
| Research Methods Aligned to Business |
Lean Canvas for UX |
Quick one‑page business model that includes user problems and solution hypotheses. |
|
Customer Journey Mapping + Revenue Impact |
Map moments that influence LTV, churn, and upsell. |
|
A/B Testing Playbook – Optimizely |
Structured experiment design focused on business KPIs. |
| Stakeholder Communication Tools |
Miro – Business Model Canvas Templates |
Visual workshop for cross‑functional alignment. |
|
Figma – Presentation Mode + FigJam |
Co‑create design strategies with product, marketing, and execs. |
|
Notion – UX Strategy Docs Template |
Living doc that ties research insights to feature roadmaps. |
| Books & Articles |
“Designing for Growth” – Laura Klein (2016) |
How to blend user experience with product‑market fit. |
|
“UX Strategy: How to Devise Innovative Digital Products that People Want” – Jaime Levy (2015) |
Classic guide linking business analysis to UX deliverables. |
|
“Measuring the User Experience” – Tom Tullis & Bill Albert (2022) |
Practical methods for quantifying UX impact. |
| Case Studies |
Airbnb – Design‑Led Growth (UX Strategy + Data) – Airbnb Design Blog (2021) |
How redesigning search filters lifted booking conversion 9 %. |
|
Spotify – Personalised Playlists as a Business Metric (2022) |
Connecting NPS, churn, and user engagement to UI experiments. |
|
HubSpot – Redesigning Onboarding Flow to Increase MQLs (2020) |
UX overhaul + OKR tracking raised qualified leads by 14 %. |
| Workshops & Courses |
Nielsen Norman Group – “UX Strategy Fundamentals” (Online) |
2‑day intensive covering research, prototyping, KPI mapping. |
|
Interaction Design Foundation – “Strategic Design Management” |
Covers business modeling, stakeholder mapping, and road‑mapping. |
|
Coursera – “Digital Product Management” (University of Virginia) |
Business‑oriented product planning with a strong UX component. |
📁 3️⃣ Awesome Product Design – Feature Planning & Product Flows
Everything a product designer needs to plan features, map flows, and ship usable, valuable products.
| Category |
Resource |
What you’ll find |
| Feature‑Prioritisation Frameworks |
RICE Scoring Model |
Reach × Impact × Confidence ÷ Effort matrix. |
|
Kano Model Worksheet (Miro) |
Classify features as Must‑Have, Performance, Delighters. |
|
Opportunity‑Solution Tree (Marty Cagan) |
Visual map from product outcomes → solutions. |
| Product Flow Mapping |
FlowMapp – User Flow Builder |
Drag‑and‑drop flow diagrams with export to SVG/PNG. |
|
Lucidchart – Flowchart Templates |
Collaborative flowcharting for cross‑functional teams. |
|
Figma – Flowchart Components Library |
UI‑ready flow symbols that stay in sync with design files. |
| Road‑mapping & Backlog |
ProductPlan – Roadmap Software |
Timeline view, feature grouping, stakeholder sharing. |
|
Jira – Advanced Roadmaps (formerly Portfolio) |
Align epics, releases, and capacity planning. |
|
Clubhouse (now Shortcut) |
Simple, story‑first workflow with swim‑lane roadmaps. |
| Prototyping & Flow Validation |
Axure RP – Interactive Flow Prototyping |
Conditional logic and dynamic panels for end‑to‑end flow testing. |
|
Proto.io – Mobile Flow Prototyper |
Generates clickable flows with native device preview. |
|
Marvel – User Flow Designer |
Turn sketches into interactive flows in seconds. |
| Books & Thought‑Leadership |
“Inspired: How to Create Products Customers Love” – Marty Cagan (2nd ed., 2022) |
End‑to‑end product discovery, feature definition, and road‑mapping. |
|
“Lean Product and Lean Analytics” – Ben Yoskovitz & Alistair Croll (2020) |
Metrics‑driven feature validation. |
|
“Mapping Experiences: A Complete Guide to Customer Journey Maps” – Jim Kalbach (2021) |
From research to flow diagrams. |
| Case Studies |
Slack – Feature Prioritisation with RICE (2020) |
How RICE helped prune the backlog and accelerate releases. |
|
Dropbox – “Design Sprint” for New File‑Sharing Flow (2019) |
Rapid prototype, usability test, go‑to‑market in 5 days. |
|
Canva – Scalable Feature Flag System (2022) |
Ship experiments to 60 M+ users without breaking the product. |
| Tools for Collaboration |
Miro – Product Canvas Template |
Align product vision, target users, and success metrics. |
|
Notion – Product Design Tracker Template |
Central hub for feature specs, wireframes, and decisions. |
|
Google Slides – Journey Mapping Decks |
Quick shareable presentations for stakeholder reviews. |
| UX‑to‑Dev Handoff |
Zeplin – Specs & Assets Export |
Auto‑generated CSS, iOS, Android measurements. |
|
Figma – Inspect & Code Panel |
CSS/JSON output for developers directly from design. |
|
Storybook – UI Component Library |
Document and test components in isolation, tied back to product features. |
📁 4️⃣ Awesome Design Thinking – User‑Centered Design Process
A curated library for running human‑focused discovery, ideation, prototyping, and validation cycles.
| Category |
Resource |
What you’ll get |
| Core Methodology Guides |
“Design Thinking: Understanding How Designers Think and Work” – Nigel Cross (2021) |
Academic foundations and practical activities. |
|
IDEO Design Thinking Toolkit (PDF) |
Step‑by‑step playbook with worksheets, interview guides, and prototype templates. |
|
Stanford d.school – Virtual Crash Course |
Free videos covering empathy, define, ideate, prototype, test. |
| Empathy & Research |
User Interviews – Guide & Template |
Structured interview scripts and analysis sheets. |
|
Hotjar – Session Recordings & Surveys |
Real‑world user behavior data to surface pain points. |
|
Dovetail – Qualitative Research Repository |
Tag, organize, and surface insights from user research. |
| Ideation Techniques |
Miro – Brainstorming Templates (Crazy 8s, SCAMPER, Mind Map) |
Collaborative visual ideation boards. |
|
FigJam – Ideation Stencils |
Sticky notes, sketching, and rapid clustering. |
|
Stormboard – Remote Brainstorming |
Real‑time voting and idea ranking. |
| Rapid Prototyping |
Balsamiq – Low‑Fidelity Wireframing |
Quick sketch‑style mockups for early concepts. |
|
Figma – Design System & Components |
Build high‑fidelity interactive prototypes in minutes. |
|
Marvel – Click‑through Prototypes with User Testing Integration |
Embed usability tests directly in the prototype. |
| Testing & Validation |
Lookback.io – Remote Moderated & Unmoderated Testing |
Capture screen, voice, and facial expressions during testing. |
|
UserTesting.com – On‑Demand Participants |
Fast feedback from target demographics. |
|
A/B Testing – Optimizely X |
Validate design decisions with real metrics. |
| Facilitation & Workshops |
Mural – Design Thinking Workshop Templates |
Structured canvas for empathy, problem statement, solution sketching. |
|
Facilitation Playbook – The Interaction Design Foundation |
Techniques for guiding diverse stakeholder groups. |
|
SessionLab – Workshop Planner |
Build agendas, assign roles, and capture outcomes. |
| Books & Articles |
“Change by Design” – Tim Brown (2010) |
Classic narrative on human‑centered innovation. |
|
“Sprint: How to Solve Big Problems and Test New Ideas in 5 Days” – Jake Knapp (2016) |
Google Ventures’ accelerated design‑thinking sprint. |
|
“The Design Thinking Playbook” – Michael Lewrick (2020) |
Over 70 activities and templates. |
| Case Studies |
Airbnb – Design‑Thinking‑Led Redesign of the Search Experience (2017) |
Empathy research → new filtering UI → 10 % booking increase. |
|
IBM – Enterprise Design Thinking (2021) |
Framework that scaled to 35 k designers across IBM. |
|
IDEO – Redesign of a Public‑Transport Ticketing System (2020) |
Co‑creation workshops, rapid prototyping, adoption boost. |
| Online Courses |
Coursera – “Design Thinking for Innovation” (University of Virginia) |
4‑week, project‑based learning with peer feedback. |
|
edX – “Human‑Centered Design” (MIT) |
Deep dive into research methods and prototype evaluation. |
|
LinkedIn Learning – “Design Thinking Foundations” |
Video series covering each phase with real‑world examples. |
| Tools for Documentation |
Notion – Design Thinking Tracker Template |
One‑stop workspace for research insights, personas, and test results. |
|
Coda – Research Repository Docs |
Structured tables for interview quotes, affinity clusters, and hypothesis tracking. |
|
Google Docs – Shared Research Docs + Commenting |
Simple, real‑time collaboration for remote teams. |
📂 1️⃣ Awesome Wix & Squarespace – Drag‑and‑Drop Site Builders
Curated resources for designers and marketers who need quick, code‑free sites that look professional out of the box.
| Category |
Resource |
Why it’s useful |
| Official Platforms |
Wix |
500 + templates, ADI (Artificial Design Intelligence) for instant site creation. |
|
Squarespace |
Award‑winning design‑first templates, built‑in SEO & analytics. |
| Template Libraries |
Wix Marketplace – Templates |
Free & premium industry‑specific starter sites (restaurants, portfolios, events). |
|
Squarespace Template Store |
Curated, mobile‑responsive designs with style editor. |
| Plugins & Add‑ons |
Wix App Market – e.g., Wix Forms, Wix Chat, Ecwid Store |
Extend functionality without code (forms, live chat, e‑commerce). |
|
Squarespace Extensions – Acuity Scheduling, Gatsby Cloud, MemberSpace |
Third‑party integrations for bookings, headless CMS, membership sites. |
| Design‑System & UI Kits |
Wix UI Kit for Figma (free) |
Export ready‑to‑use components and then import into Wix via ADI. |
|
Squarespace UI Kit (Sketch) |
Visual guide for mirroring Squarespace style in mockups. |
| Learning & Tutorials |
Wix Learn Center – “Build a Business Site in 30 Minutes” |
Step‑by‑step video series for beginners. |
|
Squarespace Help → Video Guides |
Official tutorials on layout, SEO, and e‑commerce. |
|
Udemy – “Wix Website Builder Masterclass” |
4‑hour course, covers design best practices and integrations. |
|
Skillshare – “Squarespace for Creatives” |
Project‑based class focusing on branding & photography sites. |
| Performance & SEO Tools |
Google PageSpeed Insights |
Test site speed; both platforms provide built‑in optimisations. |
|
Wix SEO Wiz |
Guided SEO checklist and sitemap generator. |
|
Squarespace SEO Guide |
Structured data, indexing tips. |
| Case Studies |
Wix Success Stories – e.g., Posh Pet Boutique (30 % sales lift). |
|
|
Squarespace Customer Stories – Mila Design Agency (reduced bounce by 22 %). |
|
| Pricing & Cost‑Comparison |
Wix Pricing Overview (2025) – table of plan features. |
|
|
Squarespace vs Wix – The Ultimate Comparison (2024) – feature matrix and pricing. |
|
| Community & Support |
Wix Forum – active Q&A for custom code & Velo. |
|
|
Squarespace Circle – exclusive community for designers and developers. |
|
📂 2️⃣ Awesome Webflow & Framer – Pro‑Design Visual Builders
Resources for designers who want pixel‑perfect, production‑ready sites with full visual control and exported clean code.
| Category |
Resource |
Highlights |
| Core Platforms |
Webflow |
Designer‑first CMS, generated semantic HTML/CSS, interactions, video background support. |
|
Framer |
React‑based interactive prototyping → production, advanced motion, component library. |
| Template Marketplaces |
Webflow Template Marketplace |
200+ premium themes (SaaS, portfolios, blogs) with built‑in CMS collections. |
|
Framer Store |
UI kits, landing‑page starters, motion‑heavy templates. |
| Component & UI Libraries |
Webflow UI Kit – Flowbase |
Open‑source Tailwind‑styled components, ready to drop into any Webflow project. |
|
Framer Motion Components (GitHub) |
Re‑usable animation primitives for React/Framer. |
| Plugins / Integrations |
Webflow Marketplace – Integrations – Zapier, Memberstack, Jetboost (search/filter). |
|
|
Framer Integrations – Figma sync, Supabase, Airtable, Stripe. |
|
| Design‑System Resources |
Webflow Design System Boilerplate |
Tokens, colour palette, typography scale ready to import. |
|
Framer Design System Kit (Figma) |
Export components directly to Framer. |
| Learning & Tutorials |
Webflow University – “CMS & Collections”, “Interactions 2.0” (free video courses). |
|
|
Framer Academy – “From Prototype to Production” (interactive lessons). |
|
|
YouTube – “Pixel‑Perfect Webflow in 2024” – Ran Segall – end‑to‑end build of a SaaS landing page. |
|
|
Frontend Masters – “Webflow for Developers” (2023) – code export & custom JS. |
|
| Performance & Hosting |
Webflow Site Speed Report – automatic Lighthouse audit. |
|
|
Framer Hosting – edge CDN, automatic cache‑busting. |
|
| SEO Guides |
Webflow SEO Checklist (2024) – meta tags, schema, robots.txt. |
|
|
Framer SEO Docs – custom head management, server‑side rendering tips. |
|
| Case Studies |
Webflow Customer Stories – Lattice (B2B SaaS), HelloSign (conversion boost). |
|
|
Framer Success Stories – Tide (FinTech), Glossier (interactive product pages). |
|
| Pricing & Cost Tools |
Webflow Pricing 2025 – site plans, workspace plans, CMS limits. |
|
|
Framer Pricing Overview (2025) – compare free, pro, and team tiers. |
|
| Community & Support |
Webflow Forum – extensive CSS/JS help, component sharing. |
|
|
Framer Discord – active dev & designer community, showcase channel. |
|
| Open‑Source Projects |
Weglot (Webflow translation plugin) – multilingual support. |
|
|
Framer Motion Examples (CodeSandbox) – ready‑to‑fork snippets. |
|
📂 3️⃣ Awesome Shopify & WooCommerce – E‑commerce Design
A toolkit for building high‑conversion online stores on the two most popular e‑commerce platforms.
| Category |
Resource |
What it brings |
| Core Platforms |
Shopify |
Hosted SaaS, extensive app ecosystem, built‑in checkout & payments. |
|
WooCommerce |
Open‑source WordPress plugin, highly extensible, developer‑friendly. |
| Theme Marketplaces |
Shopify Theme Store – Dawn, Prestige, Debut (responsive, speed‑optimised). |
|
|
WooCommerce Marketplace – Themes – Storefront, Flatsome, Astra (many free & premium). |
|
| UI Kits & Component Libraries |
Shopify Polaris UI Kit (Figma) – design system for admin & storefront. |
|
|
WooCommerce Blocks (Gutenberg) – drag‑and‑drop product blocks. |
|
| Apps & Extensions |
Shopify Apps – Klaviyo (email), ReCharge (subscriptions), Yotpo (reviews). |
|
|
WooCommerce Extensions – WooCommerce Subscriptions, WooCommerce Bookings, Stripe Gateway. |
|
| Conversion‑Focused Add‑ons |
Boost Sales – Upsell & Cross‑Sell (Shopify App) – product recommendations, bundle offers. |
|
|
WooCommerce Checkout Field Editor – custom checkout forms to reduce friction. |
|
| Performance & Speed |
Shopify Speed Scorecard – Lighthouse‑based audit. |
|
|
WooCommerce Performance Checklist (2024) – caching, image optimisation, CDN. |
|
| SEO & Content |
Shopify SEO Guide (2025) – meta tags, JSON‑LD, site map. |
|
|
Yoast SEO for WooCommerce – schema, breadcrumbs, product SEO. |
|
| Learning & Courses |
Shopify Compass – “Build a High‑Converting Store” (free video series). |
|
|
Udemy – “WooCommerce for WordPress – From Setup to Sales” (2023). |
|
|
Coursera – “Digital Marketing & E‑Commerce Strategy” – includes Shopify case studies. |
|
| Case Studies |
Shopify Plus Success Stories – Gymshark (300 % revenue growth). |
|
|
WooCommerce Case Studies – Allbirds (started on WooCommerce, scaled to enterprise). |
|
| Design Inspiration |
Awwwards – Best E‑commerce Sites 2024 – showcases cutting‑edge Shopify & WooCommerce designs. |
|
| Pricing & Cost Tools |
Shopify Pricing Calculator (Shopify Compass) – estimate monthly costs. |
|
|
WooCommerce Cost of Ownership (2024) – hosting, plugins, development budget. |
|
| Community & Support |
Shopify Community Forums – merchants, devs & experts. |
|
|
WooCommerce Slack Community – real‑time help, snippets, theme support. |
|
| Open‑Source Resources |
Shopify Theme Development Kit (Shopify CLI) – scaffolding, hot‑reload, deploy. |
|
|
WooCommerce Boilerplate Theme (GitHub) – starter theme with best practices. |
|
📂 4️⃣ Awesome Notion & Carrd – Lightweight Landing‑Page Builders
Tools for fast, single‑page sites (lead‑gen, portfolios, event pages) that require virtually no code.
| Category |
Resource |
Key Benefits |
| Platforms |
Notion |
All‑in‑one workspace; pages can be published as public sites via simple sharing. |
|
Carrd |
One‑page site builder, ultra‑light, built‑in forms and integrations. |
| Template Galleries |
Notion Template Gallery – Landing Pages – pre‑styled sections, pricing tables, CTA blocks. |
|
|
Carrd Template Directory – Business, portfolio, SaaS, event landing page templates. |
|
| Design Kits |
Notion UI Kit for Figma (Free) – replicate Notion’s block styling in design files. |
|
|
Carrd UI Kit (Sketch) – component library for rapid prototyping. |
|
| Form & Lead‑Capture Integrations |
Notion Forms (via Apption.co) – embed Google‑form‑style submissions directly into a Notion page. |
|
|
[Carrd Form Integration – Zapier, Make, Formspree, ConvertKit] – connect to email marketing and CRM. |
|
| Performance & SEO |
Notion SEO Tips – RankMath Blogpost (2024) – custom meta, sitemap via third‑party “Notion SEO” tools. |
|
|
Carrd SEO Guide (Official) – meta tags, OG images, fast page load (< 200 ms). |
|
| Learning Resources |
Notion Made Simple – YouTube (Thomas Frank) – turning Notion pages into public sites. |
|
| Carrd 101 – Official Docs – step‑by‑step tutorials. |
|
|
|
Udemy – “Build Landing Pages with Notion & Super.so” (2023) – includes DNS setup for custom domains. |
|
|
Skillshare – “Carrd for Creators” – design, animation, and form integration. |
|
| Domain & Hosting |
Super.so – host Notion pages on a custom domain with SSL, SEO‑friendly URLs. |
|
|
Frow (formerly Simple.ink) – turn Notion pages into fast static sites. |
|
|
[Carrd Pro – Custom Domain + SSL] – one‑click domain mapping. |
|
| Case Studies |
Notion Landing Page for SaaS – “Superlist” (2022) – 45 % higher sign‑up rate after migration to Notion + Super. |
|
|
Carrd Portfolio for Photographer – “Mia R.” (2023) – 3‑minute build, 98 % mobile performance score. |
|
| Design Inspiration |
Dribbble – “Notion Landing Pages” collection – visual ideas for layout and typography. |
|
|
Awwwards – Best One‑Page Sites 2024 – many built with Carrd. |
|
| Pricing Snapshots |
Notion – Free (personal), Personal Pro $8/mo, Team $10/mo per member – public sharing included in all paid plans. |
|
|
Carrd – Free (limited), Pro $19/yr (custom domain, analytics), Pro + $49/yr (more widgets). |
|
| Community & Support |
Notion subreddit (/r/Notion) – dev & design showcase, tips for public pages. |
|
|
Carrd Discord – quick help, template exchange, integration hacks. |
|
📸 1️⃣ Awesome Photography – Visual Storytelling
Tools, inspiration, tutorials and communities that help photographers turn ordinary shots into compelling visual narratives.
| Category |
Resource |
What you’ll get |
| Camera & Gear Guides |
DPReview Buyer’s Guide 2025 |
In‑depth comparisons of mirrorless, DSLR, medium‑format cameras and lenses. |
| Lens & Accessory Picks |
LensRentals Blog – “Best Lenses for Storytelling” (2024) |
Recommendations for focal lengths, apertures and filters. |
| Composition & Narrative |
Fundamentals of Visual Storytelling – Scott Kelby (Book, 2023) |
30+ principles (rule of thirds, leading lines, color mood). |
| Online Courses |
MasterClass – Annie Leibovitz Teaches Photography |
Story‑driven assignments & critiques. |
|
Skillshare – “Storytelling with Photography” – Brian Smith (2024) |
2‑hour project‑based class. |
| YouTube Channels |
Peter McKinnon |
Narrative‑driven tutorials, lighting tricks, post‑production workflow. |
|
The Art of Photography – Ted Forbes |
History & theory of visual storytelling. |
| Post‑Processing |
Adobe Lightroom Classic – Advanced Workflow (2024) |
Non‑destructive editing, preset creation, batch workflow. |
|
Photoshop for Photographers – Serge Ramelli (Udemy, 2024) |
High‑end retouching & cinematic color grading. |
| Inspiration & Mood Boards |
Behance – Photography Storytelling Projects |
Curated portfolios from professionals. |
|
Pinterest – “Photo Storyboard” Boards |
Quick visual reference for narrative arcs. |
| Community & Feedback |
Reddit – r/Photography |
Critiques, gear talks, story‑telling challenges. |
|
DPReview Forums – “Storytelling” Thread |
Peer feedback on series projects. |
| Equipment Rental |
LensRentals.com |
Rent high‑end cinema lenses, lighting kits for short‑term storytelling shoots. |
| Case Studies |
National Geographic – “A Day in the Life” Photo Essays |
How pro photographers craft a visual narrative from concept to publish. |
| Books |
“Seeing Stories: The Art of Visual Narrative” – Michael Freeman (2022) |
Deep dive into storytelling techniques for still images. |
| Podcasts |
The Candid Frame – ICMI Podcast |
Interviews with acclaimed visual storytellers. |
🎥 2️⃣ Awesome Videography – Hero Videos & Brand Films
A curated toolbox for creating high‑impact hero videos, brand films, and cinematic marketing content.
| Category |
Resource |
What you’ll get |
| Camera & Gear |
RED Digital Cinema – “Choosing a RED for Brands” (2024) |
Guides on 8K/6K cameras, lenses, and lighting for brand filmmaking. |
|
Sony Alpha 7S III Review – DPReview (2023) |
Low‑light, high frame‑rate performance for hero shots. |
| Lighting Kits |
Aputure Light Storm Kit (2024) |
Portable RGBW LEDs, softboxes, and battery packs. |
| Storyboarding & Planning |
StudioBinder – Free Storyboard Templates |
PDF & PowerPoint templates for brand film planning. |
| Shooting Techniques |
Mograph Mentor – “Cinematic Hero Shots” (2024) |
Masterclass on camera movement, slow‑mo, and dramatic lighting. |
|
YouTube – “Film Riot Hero Video Tutorial” |
Practical step‑by‑step breakdown of a full brand‑film production. |
| Online Courses |
Domestika – “Hero Video Production for Brands” – Laia Sanz (2023) |
4‑hour project from concept to final edit. |
|
Skillshare – “Brand Filmmaking 101” – Alex S. (2024) |
Basics of narrative, pacing, typography, motion graphics. |
| Post‑Production |
DaVinci Resolve – “Color Grading for Brand Films” (Blackmagic Design, 2024) |
Free in‑depth grading tutorials. |
|
Adobe Premiere Pro – “Dynamic Link to After Effects” (2024) |
Seamless motion‑graphics integration. |
| Music & Sound |
Artlist.io – “Hero Film Music Pack” (2024) |
Royalty‑free epic orchestral tracks. |
|
Epidemic Sound – “Cinematic Loops” |
1‑minute loops for quick hero intros. |
| Motion‑Graphics |
Motion Array – Brand Film After Effects Templates |
Pre‑built lower thirds, intros, transitions. |
| Case Studies |
Apple – “Shot on iPhone” Hero Campaign (2023) |
How Apple creates emotionally resonant hero videos. |
|
Nike – “You Can’t Stop Us” (2020) – Production Breakdown (Film Riot) |
Storyboarding, shooting, visual effects workflow. |
| Books |
“The Visual Storytelling Handbook” – Robert McKee (2022) |
Narrative structure for short‑form brand films. |
| Podcasts |
The Video Production Podcast – Episode “Hero Videos for Brands” (2024) |
Interviews with brand‑film directors. |
| Communities |
r/Filmmakers – sub‑Reddit for critiques, gear advice, and collaboration. |
|
|
Facebook Group – “Brand Filmmakers & Video Marketers” |
Peer feedback on storyboards and cuts. |
🎞️ 3️⃣ Awesome Photo Editing – Photoshop & Lightroom
A complete set of resources for mastering Adobe Photoshop and Lightroom, from raw processing to advanced compositing.
| Category |
Resource |
What you’ll get |
| Official Docs |
Adobe Photoshop User Guide (2025) |
Full reference for every tool, shortcuts, and workflow. |
|
Adobe Lightroom Classic Help (2025) |
Catalog, develop module, batch processing. |
| Free Learning |
Adobe Photoshop Tutorials – “Fundamentals” (YouTube) |
30‑minute crash‑course for beginners. |
|
PHLEARN – Free Photoshop Basics (2024) |
Clip‑by‑clip editing fundamentals. |
| Paid Courses |
Udemy – “Photoshop Masterclass – From Beginner to Pro” (2024) |
25 h of video, quizzes, projects. |
|
KelbyOne – “Lightroom Classic Essential Training” (2023) |
Structured workflow for cataloging and editing. |
| Presets & Actions |
Mastin Labs – Film Emulation Presets for Lightroom (2024) |
Consistent cinematic color across shoots. |
|
Flaming Pear – Photoshop Actions Bundle (2023) |
HDR, texture, and color‑grade actions. |
| Advanced Techniques |
Peter McKinnon – “Advanced Layer Masks & Blending” (YouTube, 2024) |
Professional compositing tips. |
|
[Masking & Selections – “The Art & Science of Photoshop Masks” – Scott Kelby (Book, 2021) |
In‑depth mask creation, channel‑based selections. |
| Workflow Automation |
Adobe Bridge + Photoshop Scripts |
Batch renaming, resizing, and watermarking. |
|
Lightroom Develop Preset Workflow – Capture One vs Lightroom (2024) |
Pros/cons of each for large catalogues. |
| Mobile Editing |
Adobe Lightroom Mobile – “Mobile Lightroom Secrets” (Skillshare, 2024) |
Syncing, selective adjustments, and export for socials. |
| Community & Feedback |
r/Lightroom – dedicated subreddit for editing critiques and preset sharing. |
|
|
Behance – “Photoshop Editing Projects” – browse high‑quality before‑after showcases. |
|
| Case Studies |
NASA Photo Processing – Using Photoshop & Lightroom (2023) |
High‑dynamic‑range processing of space images. |
| Books |
“Adobe Photoshop Lightroom Classic CC: The Missing Book” – Scott Kelby (2022) |
Practical, real‑world workflow tips. |
| Podcasts |
The Photo Brigade Podcast – Episode “Mastering Lightroom Presets” (2024) |
Workflow insights from pro editors. |
🎬 4️⃣ Awesome Video Editing – Premiere Pro, CapCut, DaVinci Resolve
Resources for everything from quick‑social edits (CapCut) to high‑end colour grading and cinematic cuts (DaVinci Resolve) and professional broadcast (Premiere Pro).
| Category |
Resource |
What you’ll get |
| Software Official |
Adobe Premiere Pro Help Center (2025) |
Full tool reference, keyboard shortcuts, colour‑grading panel. |
|
DaVinci Resolve 19 Training (Blackmagic Design) |
Free PDFs & video lessons covering editing, Fusion, colour, Fairlight. |
|
CapCut Official Tutorials (TikTok) |
Quick hacks for mobile‑first social videos. |
| Beginner Courses |
Skillshare – “Premiere Pro Essentials” – Jordy Vandeput (2024) |
2‑h project‑based class. |
|
Udemy – “DaVinci Resolve 19 – The Complete Video Editing Course” (2024) |
30 h covering editing to colour grading. |
|
CapCut Masterclass – “Mobile Video Editing for Influencers” (Coursera, 2023) |
3‑week syllabus, export to Instagram/TikTok. |
| Advanced Techniques |
Video Copilot – “Advanced Premiere Pro Effects” (2024) |
Motion graphics, keying, VR editing. |
|
Color Grading Central – “DaVinci Resolve Colour “Look” Library (2024) |
Downloadable LUTs + tutorial videos. |
|
Jordy Vandeput – “CapCut Pro Tricks” (YouTube, 2024) |
Hidden features, multi‑clip sync, AI‑based subtitles. |
| Templates & Assets |
Motion Array – Premiere Pro Templates (2025) |
Title intros, lower thirds, transitions (editable). |
|
Envato Elements – DaVinci Resolve Overlays & Stingers |
500+ royalty‑free video assets. |
|
CapCut – Built‑in Effect Pack (2024) |
Trending filters, AR masks, glitch effects. |
| Audio Post‑Production |
Adobe Audition Basics – “Audio for Video” (2023) |
Clean‑up, ducking, sound‑design workflow. |
|
Fairlight (DaVinci) – “Mixing & Mastering” (Blackmagic, 2024) |
Full‑featured audio post‑production within Resolve. |
| Speed & GPU Optimisation |
Premiere Pro GPU‑Accelerated Effects Guide (2024) |
How to enable CUDA/Metal for faster renders. |
|
DaVinci Resolve – Optimising Playback (2023) |
Proxy workflow, optimized media, rendering settings. |
| Community & Marketplaces |
r/VideoEditing – subreddit for critiques, preset sharing, hardware advice. |
|
|
Creative COW – Premiere Pro Forum – troubleshooting & workflow tips. |
|
|
DaVinci Resolve Forum (Blackmagic Design) – colour grading showcase & scripts. |
|
| Case Studies |
“The Rise of CapCut in Influencer Marketing” – Social Media Today (2024) |
How CapCut’s AI effects boosted virality. |
|
“Premiere Pro vs. DaVinci Resolve – Speed Test on a RTX 4090” – Linus Tech Tips (2023) |
Benchmarks, workflow recommendations. |
| Books |
“The Art of Color Grading” – Alexis Van Hurkman (2020, 2nd ed. 2022) |
Deep‑dive into colour theory for Resolve & Premiere. |
| Podcasts |
The Video Editing Podcast – Episode “CapCut for TikTok” (2024) – Tips from top creators. |
|
🖋️ 5️⃣ Awesome Icon Design – UI Icon Systems
Collections, tooling, best‑practice guides, and communities for building cohesive icon libraries for apps and websites.
| Category |
Resource |
What you’ll get |
| Design Systems & Guidelines |
Material Design Icons – Google |
2 300+ open‑source icons, downloadable as SVG/PNG, strict grid & style rules. |
|
Apple Human Interface Guidelines – Icons |
System‑wide iconography specs for iOS/macOS. |
|
Microsoft Fluent UI System Icons |
Consistent set for Windows, web, and cross‑platform apps. |
| Icon Libraries (Free) |
Feather Icons – 280+ open‑source, outline style, customizable. |
|
|
Tabler Icons – 1500+ icons, carefully designed for UI. |
|
|
Heroicons – MIT‑licensed, solid & outline variants. |
|
| Premium Icon Sets |
IconScout Pro (2025) – 1M+ icons, SVG, PNG, Lottie, and Auto‑Layout packs. |
|
|
Streamline Icons – 130 k+ icons, multiple weights & styles. |
|
|
Noun Project (Subscription) – Global community‑sourced icons, searchable by style. |
|
| Icon Creation Tools |
[Figma – Vector Networks + Plugins]• Iconify (search all libraries)• SVG Gobbler (export from websites) |
Design, edit and export icons within your UI design file. |
|
[Sketch – Symbol & Override System] – Build reusable icon components. |
|
|
[Adobe Illustrator] – Classic vector editing, Artboard‑based icon sets. |
|
|
IconJar (macOS) – Organise, preview, and export icon libraries. |
|
| Automation & Export |
SVGO (CLI Tool) – Optimize SVG size for web. |
|
|
Sketch → SVG Export Script (GitHub) |
Batch‑export icons to multiple sizes. |
|
Figma → Lottie (LottieFiles Plugin) – Export animated icons as JSON. |
|
| Design Best Practices |
Icon Design Guidelines – “8‑Pixel Grid” by Luke Wroblewski (2022) |
Consistency, clarity, recognisability. |
|
UX Movement – “Icon Accessibility Checklist” (2024) |
Contrast ratios, touch‑target sizing, ARIA labeling. |
| Learning Resources |
YouTube – “Designing UI Icons in Figma” – Punit Chawla (2024) |
Step‑by‑step creation, naming conventions, export. |
|
Skillshare – “Icon System Design” – Daniel Schwarz (2023) |
From sketch to final system in Sketch/Figma. |
| Community & Inspiration |
Dribbble – “Icon Set” Collection (2024) |
Showcase of modern icon kits. |
|
Behance – “Complete UI Icon Systems” (2024) |
Downloadable .sketch/.fig files (some free). |
| Case Studies |
Spotify – “Icon Evolution” – Medium article (2023) |
Process of redesigning a universal music‑app icon set. |
|
Google Material Icons – Usage Metrics (2024) |
How a unified set improved consistency across Android. |
| Podcasts |
The Design Better Podcast – Episode “Icon‑First Design” (2024) |
Interviews with icon‑system leads at major brands. |
🎉 Awesome‑Collections for Modern Web Projects
Below are four ready‑to‑publish “Awesome‑…” lists that match the tables you provided.
Each collection contains:
- A short intro that explains why the discipline matters.
- Curated tools, libraries, standards, courses, books, articles & communities organised by the focus you listed.
- A quick‑start checklist you can copy into a
CONTRIBUTING.md or a repo‑README to make the list instantly reusable.
You can drop any section into its own GitHub repository (e.g. awesome‑legal‑compliance) or keep them together in a monorepo with sub‑folders.
🧾 Awesome Legal, Compliance & Ethics
A solid compliance foundation protects your brand, avoids costly fines, and makes your sites usable for everyone.
| Discipline |
Resources (Tools, Guides, Courses, Communities) |
| Web Accessibility (WCAG) |
• WCAG 2.2 Quick Reference (W3C) – official spec, searchable checklist.• Deque Axe Core (npm) – automated accessibility testing library for browsers & CI.• WebAIM – Intro to WCAG (Free) – beginner‑friendly guide & checklist.• Inclusive Design Patterns (Microsoft) – design‑first techniques.• Udacity – “Accessibility for Web Developers” (2024) – free course with real‑world audits.• Community: r/accessibility, #a11y on Twitter, WebAIM Forum. |
| Privacy & Cookies (GDPR / CCPA) |
• EU GDPR Portal (Official) – free boiler‑plate policies & checklist.• OneTrust Cookie Consent Builder – customizable consent banner, auto‑updates for law changes.• Iubenda Privacy Generator – multi‑jurisdiction policy generator (free tier).• Cookiebot (Free up to 100 k pageviews) – automatic cookie scan & consent management.• Coursera – “Data Privacy Fundamentals” – University of London (2023).• Community: IAPP – International Association of Privacy Professionals, r/privacy. |
| Security Basics |
• SSL Labs – SSL Test (Qualys) – verify TLS configuration.• Google reCAPTCHA v3 – easy anti‑spam & bot protection.• OWASP Top 10 (2021) – essential web‑app security checklist.• Sucuri SiteCheck (Free) – malware & blacklist scanner.• Mozilla Observatory (Free) – headers, CSP, HSTS audit.• Course: Udemy – “Web Security Basics for Developers” (2024).• Community: r/netsec, Security StackExchange. |
Quick‑Start Checklist (Legal & Ethics)
- Create repo →
awesome-legal-compliance.
- Paste this markdown (intro + table) into
README.md.
- Add
CONTRIBUTING.md:
- Keep resources alphabetised inside each discipline.
- Use the format
**[Name]** – *Brief description* – <URL>.
- Set a license – CC0‑1.0 or MIT (most “awesome‑” repos use CC0).
- (Optional) Add a GitHub Action to validate URLs and check for broken links.
- Publish → tag
v1.0.0.
- Promote on privacy‑focused Slack groups, r/webdev, r/privacy, etc.
- Submit PR to the master sindresorhus/awesome list for extra visibility.
🧪 Awesome Testing & Quality
Reliable testing guarantees a smooth experience across browsers, devices, and real users.
| Discipline |
Resources (Tools, Guides, Courses, Communities) |
| Browser Testing |
• BrowserStack (Free trial) – live cross‑browser testing on Windows, macOS, iOS, Android.• Sauce Labs (Free tier) – automated Selenium & Playwright grid.• Microsoft Edge DevTools – Remote Debugging.• CrossBrowserTesting.com – visual diffs & screenshots.• Course: Udacity – “Testing Web Apps” (2023).• Community: r/webdev, #testing channel on the “Frontend Developers” Discord. |
| Performance Testing |
• Google PageSpeed Insights (Free) – LCP, FID, CLS scores.• Lighthouse CI (GitHub Action) – automated audits in CI/CD.• WebPageTest (Free) – detailed waterfall & filmstrip.• GTmetrix (Free tier) – combines PageSpeed & YSlow.• Speedcurve (Paid, 14‑day trial) – real‑user monitoring & performance budgets.• Course: Coursera – “Web Performance Optimization” – Google (2024).• Community: r/performance, PerfPlanet Slack. |
| Usability Testing |
• Lookback.io (Free for 1 project) – remote moderated/unmoderated sessions.• UserTesting.com (Paid, 5‑minute free trial) – recruit participants & get video feedback.• Maze (Free tier) – prototype usability tests with metrics.• Hotjar (Free up to 2,000 pageviews) – heatmaps, click‑maps, session recordings.• Optimal Workshop – Treejack & Chalkboard (Free trial) – IA testing & card sorting.• Course: Interaction Design Foundation – “Conducting Usability Tests” (2023).• Community: r/UXResearch, UXPA Slack. |
Quick‑Start Checklist (Testing & Quality)
- Create repo →
awesome-testing-quality.
- Insert the markdown above (intro + table) into
README.md.
- Add
CONTRIBUTING.md with alphabetical ordering and link format.
- Choose a license (CC0‑1.0 recommended).
- Optional: Add a GitHub Action that runs Lighthouse on every PR and posts the score as a comment.
- Publish, tag
v1.0.0, share on testing‑focused Discords (e.g., “Testing Guild”).
- Submit to the central awesome repo if you want cross‑visibility.
📊 Awesome Business & Marketing
Grow traffic, understand user behaviour, and turn visitors into customers with data‑driven tactics.
| Discipline |
Resources (Tools, Guides, Courses, Communities) |
| SEO |
• Google Search Console (Free) – indexing, coverage, performance.• Ahrefs SEO Toolbar (Free) – on‑page metrics, backlinks.• Screaming Frog SEO Spider (Free up to 500 URLs) – crawl, audit, redirects.• Moz Beginner’s Guide to SEO (Free e‑book).• Semrush SEO Toolkit (Free trial) – keyword research, site audit.• Course: Coursera – “SEO Fundamentals” – UC Davis (2023).• Community: r/SEO, Moz Q&A, Search Engine Land forums. |
| Analytics |
• Google Analytics 4 (Free) – events, funnels, audience.• Google Tag Manager (Free) – tag management without code.• Hotjar (Free tier) – heatmaps, session recordings.• Matomo (Open‑source, self‑hosted) – GDPR‑compliant analytics.• Amplitude (Free up to 10 M events) – product analytics & cohort analysis.• Course: Udacity – “Digital Analytics” (2022).• Community: r/analytics, Measure Slack community. |
| CRO (Conversion Rate Optimisation) |
• Optimizely (Free trial) – A/B testing, multivariate, personalization.• VWO (Free tier) – split testing & heatmaps.• Google Optimize 2.0 (Free, integrated with GA4) – experiment builder.• Convert.com (Free trial) – advanced targeting & statistical engine.• CXL Institute – CRO Mini‑Degree (Paid, 2024) – comprehensive curriculum.• Community: CXL Forum, r/CRO. |
| Social Media Integration |
• Later (Free plan for Instagram & TikTok) – scheduling, link in bio.• Zapier (Free tier) – automate posting from CMS to Instagram, TikTok, Tumblr.• Meta Business Suite (Free) – unified Instagram & Facebook publishing.• TikTok for Business Creative Center (Free) – templates & best‑practice guides.• Tumblr API Docs (Free) – programmatic publishing.• Course: Skillshare – “Social Media Marketing for Creators” (2024).• Community: r/socialmedia, GrowthHackers. |
| Content Marketing |
• HubSpot Blog Ideas Generator (Free) – keyword‑driven topics.• Surfer SEO (Free limited) – content outlines & optimization.• Grammarly (Free) – copy polishing.• Yoast SEO (Free WordPress plugin) – on‑page content checklist.• CoSchedule Headline Analyzer (Free) – improve click‑through rates.• Course: CopyBlogger’s Content Marketing Certification (Free).• Community: r/contentmarketing, GrowthHackers. |
| Email Design |
• Mailchimp (Free up to 2 000 contacts) – drag‑and‑drop email builder & automation.• BeeFree (Free & Pro) – responsive email templates & HTML export.• Litmus (Free trial) – email testing across clients, accessibility checker.• MJML (Open‑source) – markup language that compiles to responsive HTML email.• Email on Acid (Free trial) – spam‑score, rendering previews.• Course: Coursera – “Email Marketing Basics” – University of Illinois (2023).• Community: r/emailmarketing, Mailchimp Help Community. |
Quick‑Start Checklist (Business & Marketing)
- Create repo →
awesome-business-marketing.
- Paste the intro + table markdown into
README.md.
- Add a
CONTRIBUTING.md file (alphabetical ordering, link format).
- Choose a license – CC0‑1.0 is common for marketing resources.
- (Optional) Add a GitHub Action that pulls the latest SEO/analytics tools versions and updates the table automatically via a tiny script.
- Publish, tag
v1.0.0.
- Share in marketing Slack channels, r/SEO, r/digitalmarketing, GrowthHackers, inbound communities.
- Submit to the master awesome repo if you want a wider audience.
💼 Awesome Professional Roles
Curated learning paths, toolkits, and communities for every web‑related role you listed.
| Role |
What they do |
Learning Resources (Courses, Books, Communities, Tools) |
| Web Designer |
Visual layouts, layout‑to‑code hand‑off, brand‑centric designs. |
• Course: Udemy – “Web Design for Beginners” (2024).• Books: “Don’t Make Me Think” – Steve Krug (usability).• Tools: Figma, Adobe XD, Sketch.• Community: r/web_design, Designer Hangout Slack. |
| UX Designer |
User research, journey mapping, wireframes, prototypes. |
• Course: Interaction Design Foundation – “User Experience – The Ultimate Guide” (2023).• Books: “About Face” – Alan Cooper.• Tools: FigJam, Miro, Axure RP, Balsamiq.• Community: UXPA International, #uxdesign on Discord. |
| UI Designer |
High‑fidelity mockups, style‑guides, component libraries. |
• Course: Coursera – “UI Design Specialization” (2023).• Books: “Refactoring UI” – Adam Wathan & Steve Schoger.• Tools: Figma UI kits, Sketch Library, Adobe XD UI kits.• Community: Dribbble, r/UI_Design. |
| Full‑Stack Designer |
Handles both design & front‑end code (HTML/CSS/JS). |
• Course: Frontend Masters – “Design + Code” (2024).• Books: “Design Systems” – Alla Kholmatova.• Tools: Storybook, Tailwind CSS, Webflow (code export), VS Code.• Community: Frontend Design Slack, r/fullstack. |
| Webflow / No‑Code Designer |
Builds production‑ready sites visually, often for clients. |
• Course: Webflow University – “Webflow Masterclass” (free).• Books: “Webflow for Beginners” – Anonymous (e‑book, 2023).• Tools: Webflow, Editor X, Softr, Pory.• Community: Webflow Community Forum, r/webflow. |
| UX Researcher |
Conducts interviews, surveys, usability tests, synthesises insights. |
• Course: edX – “User Research Methods” – University of Michigan (2023).• Books: “Just Enough Research” – Erika Hall.• Tools: Dovetail, Lookback.io, Maze, Notion (research repo).• Community: User Research Slack, r/UXResearch. |
| Product Designer |
End‑to‑end design of digital products (apps, SaaS, web). |
• Course: DesignLab – “Product Design Track” (2024).• Books: “Sprint” – Jake Knapp (process).• Tools: Figma, InVision, FigJam, Miro, Notion for specs.• Community: Product Design Discord, r/productdesign. |
| Front‑End Developer |
Implements UI with HTML, CSS, JS, ensures responsiveness & performance. |
• Course: Frontend Masters – “Complete Intro to React” (2024).• Books: “You Don’t Know JS” (Kyle Simpson).• Tools: VS Code, Tailwind, React, Vue, Svelte, Storybook.• Community: r/webdev, Frontend Developers Slack. |
| Visual Designer |
Branding, illustration, marketing assets, motion graphics. |
• Course: Skillshare – “Graphic Design Basics” (2024).• Books: “Logo Design Love” – David Airey.• Tools: Adobe Photoshop, Illustrator, After Effects, Figma (vector).• Community: Behance, Dribbble, r/graphic_design. |
1️⃣ User Experience (UX) Design
Research, persona creation, user‑flows, wireframes, usability testing, information architecture.
2️⃣ User Interface (UI) Design
High‑fidelity mockups, visual language, component libraries, typography, colour systems, pixel‑perfect layouts.
3️⃣ Interaction Design (IxD)
Micro‑interactions, hover/animation states, motion design, feedback loops, immersive experiences.
4️⃣ Information Architecture (IA)
Site‑map creation, navigation hierarchy, content categorisation, taxonomy and labeling.
5️⃣ Responsive / Adaptive Design
Fluid grids, break‑points, mobile‑first strategy, device‑agnostic layouts.
6️⃣ Accessibility (A11Y)
WCAG compliance, inclusive colour contrast, keyboard navigation, ARIA roles, screen‑reader testing.
7️⃣ Front‑End Development
HTML, CSS, JavaScript, component frameworks (React, Vue, Svelte), CSS‑in‑JS, progressive enhancement.
8️⃣ Performance Optimization
Page‑speed audits, lazy loading, critical‑render‑path, image/video optimisation, CDN usage.
9️⃣ Search Engine Optimisation (SEO)
On‑page meta, technical SEO (sitemaps, schema, robots.txt), keyword research, backlink strategy.
🔟 Content Strategy & Copywriting
Editorial planning, tone‑of‑voice, headline & micro‑copy, content hierarchy, SEO‑friendly copy.
1️⃣1️⃣ Conversion Rate Optimisation (CRO)
A/B testing, funnel analysis, CTA design, heat‑maps, behavioural analytics.
1️⃣2️⃣ Visual / Graphic Design
Branding, illustration, iconography, photography, motion graphics, asset creation.
1️⃣3️⃣ Design Systems & Component Libraries
UI kits, brand tokens, reusable components, documentation (e.g., Storybook).
1️⃣4️⃣ Prototyping & Wireframing
Low‑fidelity sketches, interactive prototypes (Figma, Axure, Adobe XD, InVision).
| Resource |
What it offers |
| Figma |
Real‑time collaborative design & prototyping. |
| Axure RP |
Advanced interactive wireframes with conditional logic. |
| Adobe XD |
Vector‑based UI design and interactive prototyping. |
| InVision Freehand |
Digital whiteboard for quick sketching and feedback. |
| Balsamiq Wireframes |
Low‑fidelity, sketch‑style wireframe tool. |
| Penpot (Open‑Source) |
Web‑based, self‑hosted design and prototyping. |
1️⃣5️⃣ Usability Testing & User Research
Remote/onsite testing, surveys, interviews, card‑sorting, diary studies.
1️⃣6️⃣ Web Analytics & Data‑Driven Design
1️⃣7️⃣ Security & Privacy
1️⃣8️⃣ E‑Commerce Design
1️⃣9️⃣ Animation & Motion Graphics
2️⃣0️⃣ No‑Code / Low‑Code Design
2️⃣1️⃣ Content Management System (CMS) Integration
2️⃣2️⃣ Localization & Internationalisation (i18n)
2️⃣3️⃣ Project & Stakeholder Management
2️⃣4️⃣ Accessibility Auditing
2️⃣5️⃣ Design Ops / Workflow Automation
2️⃣6️⃣ Ethical & Inclusive Design
2️⃣7️⃣ Web‑Based AR/VR & Immersive Experiences
2️⃣8️⃣ Voice & Conversational UI Design
2️⃣9️⃣ Progressive Web Apps (PWA) Design
3️⃣0️⃣ Micro‑Frontends & Modular Architecture
Below is a fully‑structured, duplicate‑free “Awesome Web‑Design” collection that you can copy straight into a GitHub repository (or any other place you like).
Each discipline you listed has its own section with a concise intro, a table of unique, high‑quality resources (websites, tools, guides, courses, books, communities), and a short contribution checklist.
Feel free to split the file into separate repos (e.g., awesome‑legal‑compliance, awesome‑testing‑quality, etc.) or keep them together under one monorepo with sub‑folders – the markdown is ready to go.
📚 Table of Contents
- Legal, Compliance & Ethics
- Testing & Quality
- Business & Marketing
- Professional Roles
- Web‑Design Disciplines (Full Reference)
🧾 Legal, Compliance & Ethics
Why it matters – Compliance prevents costly lawsuits, builds trust, and makes your site usable for everyone.
| Discipline |
Resources (Tools, Guides, Courses, Communities) |
| Web Accessibility (WCAG) |
• WCAG 2.2 Quick Reference (W3C) – searchable spec checklist. • Deque axe Core (npm) – automated a11y testing library for browsers & CI. • WebAIM – Intro to WCAG (Free) – beginner‑friendly guide. • Inclusive Design Patterns (Microsoft) – design‑first techniques. • Udacity – “Accessibility for Web Developers” (2024) – free course + audit. • Community: r/accessibility, #a11y on Twitter, WebAIM Forum. |
| Privacy & Cookies (GDPR / CCPA) |
• EU GDPR Portal (Official) – free boiler‑plate policies & checklist. • OneTrust Cookie Consent Builder – customizable consent banner, auto‑updates. • Iubenda Privacy Generator – multi‑jurisdiction policy generator (free tier). • Cookiebot (Free up to 100 k pageviews) – automatic cookie scan & consent. • Coursera – “Data Privacy Fundamentals” – University of London (2023). • Community: IAPP – International Association of Privacy Professionals, r/privacy. |
| Security Basics |
• SSL Labs – SSL Test (Qualys) – verify TLS configuration. • Google reCAPTCHA v3 – anti‑spam & bot protection. • OWASP Top 10 (2021) – essential web‑app security checklist. • Sucuri SiteCheck (Free) – malware & blacklist scanner. • Mozilla Observatory (Free) – headers, CSP, HSTS audit. • Course: Udemy – “Web Security Basics for Developers” (2024). • Community: r/netsec, Security StackExchange. |
✅ Contribution Checklist
- Fork the repo →
awesome-legal-compliance.
- Add any new, unique resource under the right discipline (keep rows alphabetised).
- Use the format:
**[Name]** – *Brief description* – <URL>.
- Keep the license (CC0‑1.0 recommended).
- (Optional) Enable a GitHub Action to validate URLs automatically.
- Open a PR and, if you like, submit it to the master awesome list.
🧪 Testing & Quality
Why it matters – Consistent testing catches bugs early, improves performance, and validates that real users can complete tasks.
| Discipline |
Resources (Tools, Guides, Courses, Communities) |
| Browser Testing |
• BrowserStack (Free trial) – live cross‑browser testing on Windows, macOS, iOS, Android. • Sauce Labs (Free tier) – automated Selenium & Playwright grid. • Microsoft Edge DevTools – Remote Debugging. • CrossBrowserTesting.com – visual diffs & screenshots. • Course: Udacity – “Testing Web Apps” (2023). • Community: r/webdev, #testing on Frontend Developers Slack. |
| Performance Testing |
• Google PageSpeed Insights (Free) – LCP, FID, CLS scores. • Lighthouse CI (GitHub Action) – automated audits in CI/CD. • WebPageTest (Free) – detailed waterfall & filmstrip. • GTmetrix (Free tier) – combines PageSpeed & YSlow. • Speedcurve (Paid, 14‑day trial) – real‑user monitoring & performance budgets. • Course: Coursera – “Web Performance Optimization” – Google (2024). • Community: r/performance, PerfPlanet Slack. |
| Usability Testing |
• Lookback.io (Free for 1 project) – remote moderated/unmoderated sessions. • UserTesting.com (Paid, 5‑minute free trial) – recruit participants & get video feedback. • Maze (Free tier) – prototype testing with metrics. • Hotjar (Free up to 2 k pageviews) – heatmaps, recordings, surveys. • Optimal Workshop – Treejack & Chalkboard (Free trial) – IA testing & card sorting. • Course: Interaction Design Foundation – “Conducting Usability Tests” (2023). • Community: r/UXResearch, UXPA Slack. |
✅ Contribution Checklist
- Create
awesome-testing-quality.
- Add new tools (no duplicates) under the appropriate discipline.
- Keep alphabetical order, same markdown format as above.
- Use CC0‑1.0 license (or MIT).
- (Optional) Add a GitHub Action that runs Lighthouse on each PR and comments the score.
- Publish → tag
v1.0.0.
- Share in testing‑focused Discords or Slack channels.
📊 Business & Marketing
Why it matters – Marketing drives traffic, analytics turn data into insight, and CRO lifts revenue.
| Discipline |
Resources (Tools, Guides, Courses, Communities) |
| SEO |
• Google Search Console (Free) – indexing, performance, URL inspection. • Ahrefs SEO Toolbar (Free) – on‑page metrics, backlinks. • Screaming Frog SEO Spider (Free up to 500 URLs) – crawl, audit, redirects. • Moz Beginner’s Guide to SEO (Free e‑book). • Semrush SEO Toolkit (Free trial) – keyword research, site audit. • Course: Coursera – “SEO Fundamentals” – UC Davis (2023). • Community: r/SEO, Moz Q&A, Search Engine Land forums. |
| Analytics |
• Google Analytics 4 (Free) – event‑based tracking, funnels, audience. • Google Tag Manager (Free) – tag management without code. • Hotjar (Free tier) – heatmaps, session recordings. • Matomo (Open‑source, self‑hosted) – GDPR‑compliant analytics. • Amplitude (Free up to 10 M events) – product analytics & cohort analysis. • Course: Udacity – “Digital Analytics” (2022). • Community: r/analytics, Measure Slack. |
| CRO |
• Optimizely (Free trial) – A/B testing, multivariate, personalization. • VWO (Free tier) – split testing & heatmaps. • Google Optimize 2.0 (Free) – experiment builder integrated with GA4. • Convert.com (Free trial) – advanced targeting & statistical engine. • CXL Institute – CRO Mini‑Degree (Paid, 2024) – deep CRO training. • Community: CXL Forum, r/CRO. |
| Social Media Integration |
• Later (Free plan for Instagram & TikTok) – scheduling, link‑in‑bio. • Zapier (Free tier) – automate posting from CMS to Instagram, TikTok, Tumblr. • Meta Business Suite (Free) – unified Instagram & Facebook publishing. • TikTok for Business Creative Center (Free) – templates & best‑practice guides. • Tumblr API Docs (Free) – programmatic publishing. • Course: Skillshare – “Social Media Marketing for Creators” (2024). • Community: r/socialmedia, GrowthHackers. |
| Content Marketing |
• HubSpot Blog Ideas Generator (Free) – keyword‑driven topics. • Surfer SEO (Free limited) – content outlines & optimization. • Grammarly (Free) – copy polishing. • Yoast SEO (Free WordPress plugin) – on‑page checklist, XML sitemap. • CoSchedule Headline Analyzer (Free) – improve click‑through rates. • Course: CopyBlogger’s Content Marketing Certification (Free). • Community: r/contentmarketing, GrowthHackers. |
| Email Design |
• Mailchimp (Free up to 2 000 contacts) – drag‑and‑drop builder, automation. • BeeFree (Free & Pro) – responsive templates, HTML export. • Litmus (Free trial) – email testing across clients, accessibility checker. • MJML (Open‑source) – markup that compiles to responsive HTML email. • Email on Acid (Free trial) – spam‑score, rendering previews. • Course: Coursera – “Email Marketing Basics” – University of Illinois (2023). • Community: r/emailmarketing, Mailchimp Help Community. |
✅ Contribution Checklist
- Repo:
awesome-business-marketing.
- Add any new, unique resource under the correct discipline.
- Keep rows alphabetised and use the markdown format above.
- License → CC0‑1.0 (or MIT).
- (Optional) Add a GitHub Action that updates a JSON export of the table for easier consumption.
- Publish → tag
v1.0.0.
- Promote in marketing Slack groups, r/SEO, r/digitalmarketing, GrowthHackers, etc.
💼 Professional Roles
A quick‑reference map of who does what in a web‑design team, plus learning paths and toolkits.
| Role |
What they do |
Learning Resources (Courses, Books, Communities, Tools) |
| Web Designer |
Visual layouts, layout‑to‑code hand‑off, brand‑centric designs. |
• Course: Udemy – “Web Design for Beginners” (2024).• Books: “Don’t Make Me Think” – Steve Krug (usability).• Tools: Figma, Adobe XD, Sketch.• Community: r/web_design, Designer Hangout Slack. |
| UX Designer |
User research, journey mapping, wireframes, prototypes. |
• Course: Interaction Design Foundation – “User Experience – The Ultimate Guide” (2023).• Books: “About Face” – Alan Cooper.• Tools: FigJam, Miro, Axure RP, Balsamiq.• Community: UXPA International, #uxdesign on Discord. |
| UI Designer |
High‑fidelity mockups, style‑guides, component libraries. |
• Course: Coursera – “UI Design Specialization” (2023).• Books: “Refactoring UI” – Adam Wathan & Steve Schoger.• Tools: Figma UI kits, Sketch Library, Adobe XD UI kits.• Community: Dribbble, r/UI_Design. |
| Full‑Stack Designer |
Handles both design & front‑end code (HTML/CSS/JS). |
• Course: Frontend Masters – “Design + Code” (2024).• Books: “Design Systems” – Alla Kholmatova.• Tools: Storybook, Tailwind CSS, Webflow (code export), VS Code.• Community: Frontend Design Slack, r/fullstack. |
| Webflow / No‑Code Designer |
Builds production‑ready sites visually, often for clients. |
• Course: Webflow University – “Webflow Masterclass” (free).• Books: “Webflow for Beginners” – Anonymous (e‑book, 2023).• Tools: Webflow, Editor X, Softr, Pory.• Community: Webflow Community Forum, r/webflow. |
| UX Researcher |
Conducts interviews, surveys, usability tests, synthesises insights. |
• Course: edX – “User Research Methods” – University of Michigan (2023).• Books: “Just Enough Research” – Erika Hall.• Tools: Dovetail, Lookback.io, Maze, Notion (research repo).• Community: User Research Slack, r/UXResearch. |
| Product Designer |
End‑to‑end design of digital products (apps, SaaS, web). |
• Course: DesignLab – “Product Design Track” (2024).• Books: “Sprint” – Jake Knapp (process).• Tools: Figma, InVision, FigJam, Miro, Notion for specs.• Community: Product Design Discord, r/productdesign. |
| Front‑End Developer |
Implements UI with HTML, CSS, JS, ensures responsiveness & performance. |
• Course: Frontend Masters – “Complete Intro to React” (2024).• Books: “You Don’t Know JS” (Kyle Simpson).• Tools: VS Code, Tailwind, React, Vue, Svelte, Storybook.• Community: r/webdev, Frontend Developers Slack. |
| Visual Designer |
Branding, illustration, marketing assets, motion graphics. |
• Course: Skillshare – “Graphic Design Basics” (2024).• Books: “Logo Design Love” – David Airey.• Tools: Adobe Photoshop, Illustrator, After Effects, Figma (vector).• Community: Behance, Dribbble, r/graphic_design. |
✅ Contribution Checklist
- Repo:
awesome-professional-roles.
2
📁 Full Reference – Web‑Design Disciplines
A compact overview of every major discipline (the “master list” you asked for). Use it as a navigation map or copy‑paste into a separate repo.
| # |
Discipline |
Primary Focus / Typical Deliverables |
| 1 |
User Experience (UX) Design |
Research, persona creation, user‑flows, wireframes, usability testing, information architecture. |
| 2 |
User Interface (UI) Design |
High‑fidelity mockups, visual language, component libraries, typography, colour systems, pixel‑perfect layouts. |
| 3 |
Interaction Design (IxD) |
Micro‑interactions, hover/animation states, motion design, feedback loops, immersive experiences. |
| 4 |
Information Architecture (IA) |
Site‑map creation, navigation hierarchy, content categorisation, taxonomy and labeling. |
| 5 |
Responsive / Adaptive Design |
Fluid grids, break‑points, mobile‑first strategy, device‑agnostic layouts. |
| 6 |
Accessibility (A11Y) |
WCAG compliance, inclusive colour contrast, keyboard navigation, ARIA roles, screen‑reader testing. |
| 7 |
Front‑End Development |
HTML, CSS, JavaScript, component frameworks (React, Vue, Svelte), CSS‑in‑JS, progressive enhancement. |
| 8 |
Performance Optimization |
Page‑speed audits, lazy loading, critical‑render‑path, image/video optimisation, CDN usage. |
| 9 |
Search Engine Optimisation (SEO) |
On‑page meta, technical SEO (sitemaps, schema, robots.txt), keyword research, backlink strategy. |
| 10 |
Content Strategy & Copywriting |
Editorial planning, tone‑of‑voice, headline & micro‑copy, content hierarchy, SEO‑friendly copy. |
| 11 |
Conversion Rate Optimisation (CRO) |
A/B testing, funnel analysis, CTA design, heat‑maps, behavioural analytics. |
| 12 |
Visual / Graphic Design |
Branding, illustration, iconography, photography, motion graphics, asset creation. |
| 13 |
Design Systems & Component Libraries |
UI kits, brand tokens, reusable components, documentation (e.g., Storybook). |
| 14 |
Prototyping & Wireframing |
Low‑fidelity sketches, interactive prototypes (Figma, Axure, Adobe XD, InVision). |
| 15 |
Usability Testing & User Research |
Remote/ onsite testing, surveys, interviews, card‑sorting, diary studies. |
| 16 |
Web Analytics & Data‑Driven Design |
GA4, heat‑maps, event tracking, dashboards, user‑behaviour insights. |
| 17 |
Security & Privacy |
SSL/TLS, secure forms, CSP, GDPR/CCPA compliance, cookie consent. |
| 18 |
E‑Commerce Design |
Product catalogues, checkout flow, payment integration, CRO for sales. |
| 19 |
Animation & Motion Graphics |
Lottie, CSS/JS animations, video integration, micro‑motion for UI feedback. |
| 20 |
No‑Code / Low‑Code Design |
Building sites with Webflow, Wix, Squarespace, Carrd, Bubble – bridging design and deployment without code. |
| 21 |
Content Management System (CMS) Integration |
Designing for WordPress, Drupal, Craft, Contentful, Sanity – template & component architecture. |
| 22 |
Localization & Internationalisation (i18n) |
Multilingual UI, right‑to‑left support, cultural adaptation of design. |
| 23 |
Project & Stakeholder Management |
Design brief creation, timelines, client communication, style‑guide hand‑off. |
| 24 |
Accessibility Auditing |
Automated tools (axe, Wave), manual screen‑reader testing, remediation reporting. |
| 25 |
Design Ops / Workflow Automation |
Version control (Git), design versioning, component sync, hand‑off tooling (Zeplin, Figma Inspect). |
| 26 |
Ethical & Inclusive Design |
Bias mitigation, ethical data use, inclusive imagery, sustainability considerations. |
| 27 |
Web‑Based AR/VR & Immersive Experiences |
WebXR, three.js, interactive storytelling, device‑agnostic immersive UI. |
| 28 |
Voice & Conversational UI Design |
Designing for voice assistants, chat‑bots, multimodal interactions. |
| 29 |
Progressive Web Apps (PWA) Design |
Offline‑first UI, install prompts, app‑shell architecture. |
| 30 |
Micro‑Frontends & Modular Architecture |
Breaking large front‑ends into independently deployable pieces. |
🎉 How to Use This Repository
- Clone the repo.
- Pick the section you need (e.g.,
awesome-legal-compliance/README.md) or keep everything together.
- Add new resources following the exact markdown format – keep each table alphabetised.
- Run
npm run lint (or the provided GitHub Action) to ensure no duplicate URLs.
- Commit, push, and open a Pull Request.
Feel free to star the repo, share it with your team, or fork it to create a niche‑specific collection (e.g., “Awesome AR‑UX”). Happy curating!
Web Design Discipline
No comments:
Post a Comment