Mossaique

Your design mosaic - The best curated design resources for designers and developers.

🚀 Live Site: mossaique.com

Contribution

Please read the contribution details and feel free to contribute to Mossaique.

Table of Contents

Accessibility, AI, Articles, Blogs, Books, Color, Design News, Design Systems, Figma Plugins, Frontend Design, Graphic Design, Icons, Inspiration, Mockup, Productivity, Prototyping, Stock Photos, Stock Videos, Tutorials, Typography, UI Animation, UI Design, UX Design, Wireframing, Others

Accessibility

Discover essential accessibility design tools and resources. Learn WCAG guidelines, test color contrast, and create inclusive designs that work for everyone. Make your digital products accessible with these curated accessibility tools.

• Accessibility Guide: This short guide will help you achieve the accessibility standards outlined in the WCAG 2.0, specifically with foreground and background color when it comes to text.
• Blindness and Vision Impairment: Globally, at least 2.2 billion people have a near or distance vision impairment. In at least 1 billion...
• Colorable: Test color combinations for WCAG accessibility compliance. Quickly see contrast ratios between foreground and background colors in real-time.
• Colors: Accessibility is important! Mix and match these color classes to create a variety of accessible themes.
• Color Review: What you need to know about colors & accessibility.
• Contrast: A macOS app for quick access to WCAG color contrast ratios.
• Stark: Comprehensive accessibility toolkit integrated into your design workflow. Check contrast ratios, simulate color blindness, and ensure WCAG compliance directly in Figma, Sketch, and Adobe XD.
• The A11y Project: The A11Y Project is a community-driven effort to make digital accessibility easier.
• Web Content Accessibility Guidelines: Introducing the Web Content Accessibility Guidelines (WCAG), including WCAG 2.0 and WCAG 2.1.
• Who Can Use: It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

AI

Explore cutting-edge AI tools for designers and developers. From ChatGPT and Claude to Midjourney and DALL-E, discover AI-powered tools for image generation, copywriting, video creation, and creative work. Transform your design workflow with artificial intelligence.

• ChatGPT: ChatGPT is an AI-powered conversational assistant that can help with writing, coding, brainstorming, and more. OpenAI
• Claude: Claude is an AI assistant by Anthropic that excels at complex reasoning, analysis, and creative tasks with a focus on safety and helpfulness. Anthropic
• Midjourney: Create stunning AI-generated images from text descriptions. Perfect for concept art, illustrations, and creative exploration. Midjourney
• DALL-E: Generate, edit, and create variations of images using AI. Create realistic images and art from natural language descriptions. OpenAI
• Stable Diffusion: Open-source AI model for generating detailed images from text descriptions. Stability AI
• Runway: AI-powered creative tools for video editing, image generation, and more. Make anything you can imagine. Runway
• Adobe Firefly: Generative AI integrated into Adobe Creative Cloud apps. Generate images, text effects, and more. Adobe
• Gamma: Create beautiful presentations, documents, and websites with AI. No design skills required. Gamma
• Perplexity: AI-powered search engine that provides accurate answers with sources. Get instant, reliable information on any topic. Perplexity
• Copy.ai: AI-powered copywriting tool that helps you create marketing copy, blog posts, and more. Copy.ai
• Jasper: AI content platform for businesses. Create high-quality content faster with AI. Jasper
• Synthesia: Create AI videos with avatars and voiceovers in minutes. No cameras, microphones, or actors needed. Synthesia
• ElevenLabs: Generate realistic AI voices and speech. Create natural-sounding voiceovers in multiple languages. ElevenLabs
• Poe: Explore multiple AI chatbots in one place. Chat with ChatGPT, Claude, and other AI models. Quora
• Framer AI: Generate and publish websites with AI. Start with text, customize with Framer's design tools. Framer
• v0: Generate UI components with AI. Create React components from text descriptions. Vercel
• Microsoft Copilot: AI-powered assistant integrated across Microsoft products. Get help with writing, coding, and productivity. Microsoft
• Google Gemini: Google's most capable AI model for text, code, image, and more. Multimodal AI assistant. Google
• Hugging Face: The AI community building the future. Access thousands of AI models, datasets, and apps. Hugging Face
• Ideogram: Free AI image generator that creates stunning visuals from text prompts in seconds. Excellent for generating images with text, logos, and creative designs.

Articles

Read the best design articles and thought leadership content. Expert insights on UX/UI design, usability heuristics, design thinking, and industry best practices from Nielsen Norman Group, A List Apart, and other leading sources.

• 8 Brilliant Examples Of Social Proof On The Web: Social proof is powerful stuff folks. And it’s everywhere you look on today’s social web.
• 10 Usability Heuristics for User Interface Design: Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines.
• How We Hold Our Gadgets?: Where do hands and fingers fall on the device?
• Mental Models: What users believe they know about a UI strongly impacts how they use it.
• Mobile Context Model: A heuristic guide for mobile design.
• Task Analysis: Support Users in Achieving Their Goals: Task analysis is the systematic study of how users complete tasks to achieve their goals. This knowledge ensures products and services are designed to efficiently and appropriately support those goals.
• The Typographic Scale: The typographic scale has been used for centuries as a means of creating balanced and harmonious font sizing. It is the bedrock of modern typography.
• The Ultimate Guide to Information Architecture: Whether you hire a dedicated IA professional, or just sort of let IA happen on your projects, if you’re designing things with content, you’re using IA.
• Touch Gesture Reference Guide: The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces.
• Usability 101: Introduction to Usability: How to define usability? How, when, and where to improve it? Why should you care? Overview defines key usability concepts and answers basic questions.
• When and How to Create Customer Journey Maps: Journey maps combine two powerful instruments—storytelling and visualization—in order to help teams understand and address customer needs.
• Why You Only Need to Test with 5 Users: Elaborate usability tests are a waste of resources. The best results come from testing no more than 5 users and running as many small tests as you can afford.

Blogs

Follow top design blogs and publications for daily inspiration. Get updates from Smashing Magazine, Nielsen Norman Group, UX Planet, and other leading design blogs. Stay current with design trends, tutorials, and professional insights.

• A List Apart: A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
• Brad Frost: I create successful design systems and help others do the same.
• Creative Review: We deliver the sharpest opinion, analysis and advice on life in the creative industries.
• Design Systems: A Figma publication for design systems creators, designers, developers, and managers.
• DesignTAXI: DesignTAXI is the leading online reference source for the creative world, reaching millions of industry tastemakers and influencers monthly.
• Hey Designer: Daily curated design knowledge.
• Law of UX: Laws of UX is a collection of best practices that designers can consider when building user interfaces.
• NN/g: World leaders in research-based user experience.
• Product Talk by Teresa Torres: Make better product decisions.
• Smashing Magazine: We care about quality content.
• The Daily Egg: Make the most of every visitor.
• UX Magazine: UX Magazine has been exploring, promoting, and discussing the realm of experience design for more than two decades.
• UX Mastery: At UX Mastery, we believe that technology needs to work for humans, not the other way around.
• UX Matters: UXmatters provides insights and inspiration to experienced professionals working in every aspect of User Experience, as well as those who are just beginning their journey in the field.
• UX Planet: One-stop resource for everything related to user experience.

Books

Essential design books every designer should read. Curated collection of influential books on UX design, UI design, typography, color theory, and design thinking. Learn from classics like "Don't Make Me Think" and "The Design of Everyday Things".

• 100 Things Every Designer Needs to Know About People: This book combines real science and research with practical examples to deliver a guide every designer needs.
• Don't Make Me Think: A Common Sense Approach to Web Usability: Witty, commonsensical, and eminently practical, it’s one of the best-loved and most recommended books on the subject.
• GUI Bloopers 2.0: Common User Interface Design Don'ts and Dos: GUI Bloopers 2.0, Second Edition, is the completely updated and revised version of GUI Bloopers.
• People Aren't Robots: A Practical Guide to the Psychology and Technique of Questionnaire Design: This book will help marketers, brand managers, and advertising executives who may have less experience in the research industry create great questionnaires and collect high quality data.
• Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems: Using practical advice, plenty of illustrations, and his trademark humor, Steve explains how to test any design, from a sketch on a napkin to a fully-functioning web site or application.
• The Design of Everyday Things: Design doesn't have to complicated, which is why this guide to human-centered design shows that usability is just as important as aesthetics.
• Creative Confidence: Unleashing the Creative Potential Within Us All: David and Tom Kelley identify the principles and strategies that will allow us to tap into our creative potential in our work lives, and in our personal lives.

Color

Find the perfect color palette for your design projects. Explore color generators, palette tools, gradient makers, and accessibility checkers. Create beautiful color schemes with tools like Coolors, Adobe Color, Color Hunt, and more.

• Adobe Color: Professional color wheel tool from Adobe for creating harmonious color schemes. Extract colors from images, explore trending palettes, and test accessibility ratios.
• BrandColors: The biggest collection of official brand color codes around.
• Branition Colors: Hand-curated collection of color palettes best fitted for branding.
• Colorable: Contrast is the difference in luminance or color that makes an object distinguishable.
• ColorBox: Advanced color palette generator from Lyft Design. Create multi-step color systems with custom interpolation and accessibility features built-in.
• Color Claim: Color Claim was created in 2012 by Tobias van Schneider with the goal to collect & combine unique colors for your future projects.
• Colordot: Intuitive color picker that lets you create palettes by swiping through hues. Simple, gesture-based interface for quick color selection.
• Color Hunt: Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes.
• Color Oracle: Color Oracle is a free color blindness simulator for Windows, Mac and Linux.
• Colorsinspo: Thousands of beautiful color palettes you can use it directly by one click.
• Colourco: Interactive HSL color picker with real-time adjustments. Fine-tune hue, saturation, and lightness values with intuitive sliders and visual feedback.
• Coolors: Lightning-fast color palette generator with AI assistance. Create, explore, and export beautiful color schemes with keyboard shortcuts and advanced tools.
• Colors: Mix and match these color classes to create a variety of accessible themes.
• Duo: Duo is a collection of colour combinations that I've curated from personal projects or that I've come across on the web.
• Flat UI Color Picker: Curated collection of 199 flat design colors with instant copy-paste functionality. Perfect for modern, minimalist UI designs with ready-to-use hex codes.
• Happy Hues: See color palettes in context with real UI examples. Visualize how different color combinations work in actual website layouts before committing.
• Hex Colors: A collection of free color tools that will help you choose the right color for your next project!
• HTML Color Codes: Get HTML color codes, Hex color codes, RGB and HSL values with our color picker...
• UI Colors: Generate complete color scales from a single hex color. Perfect for creating consistent color systems for Tailwind CSS and design systems.
• Leonardo: Leonardo is a one-of-a-kind tool for creating, managing, and sharing accessible color systems for user interface design and data visualization.
• Picular: Search for any keyword and get a curated color palette inspired by Google image results. Perfect for finding colors related to concepts, moods, or objects.
• Pigment: Create unique color palettes with this AI-powered tool. Generate harmonious color schemes and export them in various formats for your design projects.
• Pilestone: Test how your designs appear to people with different types of color blindness. Upload images to simulate various color vision deficiencies.
• Randoma11y: Discover random, accessible color combinations that meet WCAG accessibility standards. Get inspired with color pairs that are both beautiful and usable.
• Tint & Shade Generator: Produce tints and shades of a given hex color in 10% increments.

Design News

Stay updated with the latest design news and trends. Daily updates on design tools, industry news, new products, and design community highlights from Product Hunt, Designer News, and leading design teams at Airbnb, Google, and Microsoft.

• AirBnb Design: Design influences everything we do at Airbnb.
• All Design Conferences: This site is just a simple collection of all design and front-end conferences for the year.
• Beta List: Directory of upcoming startups and new internet products. Get early access to beta launches and discover innovative tools before they go mainstream.
• Beta Page: Daily newsletter featuring new startups and product launches. Stay informed about the latest tools, apps, and services launching each day.
• Design Calendar: An online community made for creatives who believe in the power of ideas and the joy of making them happen.
• Designer News: Designer News is a large, global community of people working in design and technology or those interested in the topics.
• Dropbox Design: Insights, stories, and resources from Dropbox's design team. Learn about their design process, research, and product thinking.
• Facebook Design: Designing for the global diversity of human needs.
• Google Design: Supporting the future of design and technology.
• Hey Designer: Daily curated design knowledge.
• Microsoft Design: Whether you want to practice new skills, develop new concepts, or create prototypes, these toolkits are your place to start.
• Product Hunt: Product Hunt surfaces the best new products, every day.
• Shaping Design: Operating at the intersection of design and technology, we cover a wide range of creative fields, predominantly web design and UX.
• Sidebar: Sidebar has been collecting the best design links of the day since October 2012.
• Slant: Trustworthy product rankings for all your shopping needs.
• Steemhunt: Community-driven product discovery platform where you can hunt and upvote cool new products. Earn cryptocurrency rewards for contributing quality finds.
• The UX Collective: Curated stories on UX, Visual & Product Design.
• UsTwo: Insights and stories from the award-winning digital product studio behind Monument Valley. Articles on design, technology, and creating impactful products.
• UX Movement: When an app, website, or interface is difficult to use, it’s not the user’s fault, but the designer’s for making it unusable.
• Web Designer News: We built WebdesignerNews.com to provide web designers and developers with a single location to discover the latest and most significant stories on the Web.

Design Systems

Explore comprehensive design systems and component libraries from industry leaders. Learn from Material Design, iOS Human Interface Guidelines, Fluent, Carbon, and other world-class design systems. Build consistent products with reusable components.

• Atlassian: Use Atlassian’s end-to-end design language to create simple, intuitive and beautiful experiences.
• Evergreen: Evergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment.
• Fluent: Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included. Microsoft
• Carbon: This is the guiding ethos behind IBM’s design philosophy and principles. This helps us distinguish every element and every experience Designed by IBM. IBM
• Human Interface Guidelines: Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms. Apple
• Lightning Design System: Salesforce Lightning Design System. Create the world’s best enterprise app experiences. Salesforce
• Material Design: Material is a design system – backed by open-source code – that helps teams build high-quality digital experiences. Google
• Mozilla Protocol: Protocol is a design system for Mozilla and Firefox websites. It establishes a common design language, provides reusable coded components, and outlines high level guidelines for content and accessibility. Mozilla
• Polaris: Our design system helps us work together to build a great experience for all of Shopify’s merchants. Shopify
• Primer: Primer was created for GitHub by GitHub. We love it so much, we chose to open-source it to allow the community to design and build their own projects with Primer. Github
• Solid: Solid is BuzzFeed's CSS style guide. Influenced by frameworks like Basscss, Solid uses immutable, atomic CSS classes to rapidly prototype and develop features, providing consistent styling options along with the flexibility to create new layouts and designs without the need to write additional CSS. BuzzFeed
• Style Guides: Real life pattern libraries, code standards documents and content style guides.
• Uber: These guidelines cover 9 elements: logo, color, composition, iconography, illustration, motion, photography, tone of voice, and typography.
• Cookbook: The styleguide is a resource for designers, product managers, and developers, providing a common language around Yelp’s UI patterns. Yelp

Figma Plugins

Boost your Figma workflow with essential plugins. Discover time-saving tools for icons, accessibility testing, color generation, image handling, and design automation. Enhance your Figma experience with plugins like Iconify, Unsplash, and Material Design Icons.

• A11y - Color Contrast Checker: Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards.
• Color Blind: Color Blind allows you to view your designs in the 8 different types of color vision deficiencies.
• Color Designer: The plugin generates shades, tints, and color harmonies based on select layers or local styles. You can also create a stepped gradient between two colors.
• Iconify: Import Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji and many other icons (more than 100 icon sets containing over 100,000 icons) to Figma document as vector shapes.
• Image Palette: Extracts a colour palette of 5 different colours from the selected images.
• Insert Big Image: Insert and retain the original resolution of big images.
• Layout Grid Visualizer: Generate layers from your layout grids so you can export images or prepare diagrams to supplement your design systems documentation.
• Material Design Icons: Instant easy access to the entire Material Design Icons library. 35,000+ icons in PNG and SVG at your fingertips.
• Styler: Styler unlocks the ability to manage multiple styles at once by using modifying the layer properties.
• UI Faces: UI Faces aggregates thousands of avatars which you can carefully filter to create your perfect personas or just generate random avatars.
• Unsplash: Insert beautiful images from Unsplash straight into your designs.

Frontend Design

Essential frontend resources for designers who code. Explore CSS frameworks like Tailwind and Bootstrap, JavaScript libraries like React and Vue, development tools, and modern frontend resources. Perfect for designers building user interfaces with HTML, CSS, and JavaScript.

• Airtable: Accelerate work and unlock potential with powerful apps that connect your data, workflows and teams.
• AngularJS: AngularJS lets you extend HTML vocabulary for your application.
• Bootstrap: Most popular HTML, CSS, and JavaScript framework for responsive web development. Comprehensive component library and grid system for rapid prototyping.
• Codepen: CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.
• Codrops: Stay up to date with the latest web design and development news and relevant updates from Codrops.
• Coolify: An open-source & self-hostable alternative to Vercel, Heroku, Netlify and Railway for easily deploying websites, databases, web applications and 280+ one-click services to your own server.
• CSS: Cascading Style Sheets: Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML).
• Eleventy: Eleventy, a simpler static site generator. It was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options.
• Foundation: The most advanced responsive front-end framework in the world.
• Gerillass: Gerillass is a website development tool built on top of Sass with a set of Sass mixins and functions for frontend developers to generate scalable CSS outputs.
• Git: Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
• Github: The world's largest code hosting platform for version control and collaboration. Share code, collaborate on projects, and discover open-source resources.
• Grunt: JavaScript task runner for automating repetitive development tasks. Minify files, run tests, compile Sass, and more with a vast plugin ecosystem.
• Gulp: Streaming build system and task runner for automating frontend workflows. Faster than Grunt with code-over-configuration approach using Node streams.
• Hugo: The world’s fastest framework for building websites.
• HTML5 Boilerplate: The web’s most popular front-end template.
• Ionic: Build faster, smarter, and into the future.
• Jekyll: Transform your plain text into static websites and blogs. No more databases, comment moderation, or pesky updates to install—just your content.
• Markdown Guide: The Markdown Guide is a free and open-source reference guide that explains how to use Markdown, the simple and easy-to-use markup language you can use to format virtually any document.
• Markup Validation Service: This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.
• Material Design Lite: Material Design Lite lets you add a Material Design look and feel to your websites.
• Modaal: An accessible dialog window plugin for all humans.
• Node.js: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
• Parcel: Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.
• React: Popular JavaScript library by Meta for building user interfaces with reusable components. Declarative, efficient, and flexible with a massive ecosystem.
• Sass: Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
• Storybook: Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
• Tailwind CSS: Rapidly build modern websites without ever leaving your HTML.
• Typeform: You don't want to make a boring form. And your audience won't answer one. Create a typeform instead—and make everyone happy.
• TypeScript: TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
• Visual Studio Code: Free, open-source code editor from Microsoft with IntelliSense, debugging, Git integration, and thousands of extensions. Supports virtually every programming language.
• Vue.js: An approachable, performant and versatile framework for building web user interfaces.

Graphic Design

Professional graphic design resources and inspiration. Discover tools, templates, and inspiration for logo design, branding, print design, and visual communication. Explore galleries showcasing the work of talented graphic designers worldwide.

• Women of Graphic Design: A project focused on exhibiting the contributions of women in graphic design and exploring issues of gender-equality in education provided by design institutions.
• InspirationGrid: Curated daily dose of creative inspiration including graphic design, architecture, photography, and art from around the world.

Icons

Free and premium icon libraries for your projects. Thousands of icons in SVG, PNG, and icon fonts from Font Awesome, Feather, Material Icons, and more. Find the perfect icons for web and mobile applications.

• Feather: Collection of 287 simple, clean, and consistent open-source icons. Designed on a 24x24 grid with emphasis on simplicity and consistency.
• Flaticon: Download free icons and stickers for your projects. Resources made by and for designers.
• Font Awesome: Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.
• Freepik: Illustrations, photos, icons, mockups, and presentations templates.
• Iconfinder: Marketplace with millions of free and premium icons, illustrations, and 3D assets. Find icons in SVG, PNG, and icon font formats.
• IcoMoon: Free icon library and icon font generator. Create custom icon fonts from hundreds of vector icons or upload your own SVG files.
• Iconmonstr: Free, monstrously big and continuously growing source of simple icons.
• Iconsax: Hello welcome to iconsax the official icons of the Vuesax framework.
• Iconshock: The biggest icon pack: 2 million professional icons library.
• Material Icons: Material Icons are available in five styles and a range of downloadable sizes and densities. The icons are based on the core Material Design principles and metrics.
• Remix Icon: Remix Icon is a set of open-source neutral-style system symbols elaborately crafted for designers and developers.
• Streamline: 100,000 icons, illustrations and emoji for all your projects.
• The Noun Project: Over 5 million curated icons and photos representing every concept imaginable. Available in SVG and PNG formats with flexible licensing.
• UI8: Premium marketplace for design resources including thousands of vector icon sets. High-quality assets for mobile, web, and print projects.
• Lucide - Lucide is an open-source icon library that provides 1000+ vector files for displaying icons and symbols in digital and non-digital projects.

Inspiration

Get inspired by the best design work from around the world. Browse award-winning websites on Awwwards, design galleries on Dribbble and Behance, and creative portfolios. Discover landing page designs, mobile UI patterns, and innovative web experiences.

• Abduzeedo: Abduzeedo is a collective of individual writers sharing articles about design, photography, and UX.
• Awwwards: The awards of design, creativity and innovation on the internet.
• Behance: Behance is a platform for creative professionals around the world to showcase their own work and to discover the creative work of others.
• Best Website Gallery: Curated collection of beautiful, well-designed websites. Filter by color, type, and category to find design inspiration.
• Brutalist Websites: In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design.
• Commerce Cream: Showcase of the best-designed Shopify e-commerce stores. Get inspiration for your online shop design and user experience.
• CSS Nectar: CSS Nectar is a css website design showcase for web designers and developers.
• Design Inspiration: Designspiration is committed to being the best product that it can.
• Dribbble: Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals.
• Httpster: Httpster is an inspiration resource showcasing totally rocking websites made by people from all over the world.
• Landingfolio: Landingfolio features the best landing page designs on the web. Get inspiration from real landing page examples, curated by us to ensure the highest quality.
• Landings: Landings is a place to discover hundreds of landing pages from great companies based on preferences like theme and color.
• Land-book: We collect awesome websites to help creatives find inspiration & motivation to do rad stuff.
• Lapa Ninja: Lapa Ninja is a gallery featuring the best 4940 landing page examples, free books for designers and free UI kits from around the web.
• Mobbin: Browse thousands of mobile and web app screenshots organized by flows, screens, and UI elements. Perfect reference library for iOS and Android design patterns.
• Muzli: Browser extension and website serving daily design inspiration. Curated content from Dribbble, Behance, and top design publications all in one place.
• Pentagram: Pentagram is a multi-disciplinary, independently-owned design studio.
• Pinterest: When it comes to a great idea, you know it when you see it.
• Pttrns: Browse thousands of mobile app design patterns and screenshots. Get inspired by real UI examples from iOS and Android apps across various categories.
• Saas Landing Page: Discover the best 680 landing page examples created by top-class SaaS companies, and get ideas and inspiration for your next design project.
• siteInspire: SiteInspire is a showcase of the finest web and interactive design.
• UI Garage: Extensive collection of UI design inspiration and patterns organized by category. Search specific UI elements like forms, navigation, or cards.
• Webdesign Inspiration: Browse thousands of websites organized by category, style, and subject. Daily updated collection of web design inspiration.
• Webflow Showcases: Discover the best web design ideas from Webflow users.

Mockup

Professional mockup templates for stunning presentations. Create realistic device mockups, branding mockups, and product presentations. Use tools like Angle, Cleanmock, and Shotsnap to showcase your designs professionally.

• Angle: Premium collection of 1900+ vector and 3D device mockups for Sketch, Figma, and Adobe XD. Realistic and customizable presentation templates.
• Apple: Official marketing resources and product images from Apple. Download PSD templates for iPhone, iPad, Mac, and other Apple devices.
• Cleanmock: Free browser-based mockup generator. Create professional device mockups and screenshots with customizable backgrounds and layouts.
• Haikei: Generate unique SVG background patterns, shapes, and design assets. Customize colors, layers, and export for web and print.
• Shotsnap: All you need to do is to choose what device to show it off on, and upload your image for it to be show on the device you chose.

Productivity

Productivity tools to streamline your design workflow. Collaborate better with Notion, Miro, and Slack. Automate tasks with Zapier and Bardeen. Boost efficiency with time management and collaboration tools designed for creative teams.

• Bardeen: Bardeen saves you time by automating repetitive tasks with a shortcut. It combines a powerful workflow builder, AI-based recommendations, and contextual automations.
• Miro: The online collaborative whiteboard platform to bring teams together, anytime, anywhere.
• Notion: One tool for your whole team. Write, plan, and get organized.
• Obsidian: Obsidian is a powerful knowledge base on top of a local folder of plain text Markdown files.
• Pomofocus: An online Pomodoro Timer to boost your productivity.
• Slack: Transform the way you work with one place for everyone and everything you need to get stuff done.
• Taskade: Chat, organize, and get work done with real-time to-do lists, mind maps, org charts, and more.
• Zapier: Easy automation for busy people. Zapier moves info between your web apps automatically, so you can focus on your most important work.

Prototyping

Best prototyping tools for interactive design. Create high-fidelity prototypes with Figma, Marvel, and Framer. Test user flows and validate designs before development. Essential tools for rapid prototyping and user testing.

• Balsamiq: Rapid low-fidelity wireframing tool with hand-drawn aesthetics. Perfect for quickly sketching user interfaces and communicating design ideas without getting lost in details.
• Flinto: Flinto is a Mac app used by top designers around the world to create interactive and animated prototypes of their app designs.
• Fluid: Fast prototyping tool for creating web and mobile app mockups. Over 2000 built-in widgets and design components for rapid wireframing.
• Justinmind: From wireframes to highly interactive prototypes.
• Marvel: Marvel has everything you need to bring ideas to life and transform how you create digital products with your team.
• MockFlow: MockFlow is the UI planning platform that your team needs to kickstart software projects.
• Mockups: A streamlined web app that helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes.
• OmniGraffle: Professional diagramming and digital illustration tool for Mac. Create wireframes, diagrams, flowcharts, and complex graphics with precision.
• Origami Studio: Design, animate, and prototype. All-in-one.
• Overflow: Create interactive user flow diagrams that tell a story.
• Picodo: Pidoco is software that lets you quickly create click-through wireframes and fully interactive UX prototypes.
• Proto.io: Create fully interactive, high-fidelity prototypes for mobile, desktop, and web. Add complex animations, transitions, and user flows without coding.
• UXPin: Design and manage your entire UX/UI project in one tool.
• Visily: The simplest collaborative UI design software with an intuitive interface, rich UI library, and AI features.
• Wireframe: UXPin's wireframing mode for creating low-fidelity layouts quickly. Focus on structure and flow before visual design.

Stock Photos

Free and premium stock photos for commercial use. High-quality photography from Unsplash, Pexels, and more. Find royalty-free images for your design projects, websites, and marketing materials. Millions of photos available.

• Burst: Free stock photos for websites and commercial use.
• Generated Photos: AI-generated photos of people that don't exist. Use realistic, royalty-free human faces without privacy concerns or model releases.
• Lorem Picsum: The Lorem Ipsum for photos.
• Pexels: The best free stock photos & videos shared by talented creators.
• Unsplash: The internet's source of freely-usable images. Download millions of high-resolution photos from talented photographers worldwide, free for commercial and personal use.
• UserStock: Free photos of people's faces to use as avatars in UI mockups, prototypes and more.

Stock Videos

Free and premium stock video footage for your projects. Download HD and 4K stock videos from Coverr, Mixkit, and other sources. Royalty-free video clips for commercial use in presentations, websites, and creative work.

• Coverr: Completely free stock video footage for commercial and personal use. High-quality HD videos perfect for website backgrounds and hero sections.
• Mixkit: Free stock videos, music tracks, sound effects, and video templates. All assets are commercially licensed and ready to use.

Tutorials

Learn design with step-by-step tutorials and courses. Free design tutorials covering UI/UX design, Figma, web design, and best practices. Master design skills with resources from Checklist Design, Growth Design, and Webflow University.

• Checklist Design: A collection of the best design practices.
• Growth Design: Get product tips in a comic book format you’ll love to read.
• Webflow University: Explore our curated sets of lessons. Create something amazing and learn web design with Webflow — from HTML and CSS basics to SEO and CMS essentials.

Typography

Beautiful fonts and typography resources for designers. Explore Google Fonts, discover font pairing tools, and learn typography best practices. Find the perfect typeface for your projects with curated font libraries and typography inspiration.

• Canva: Explore curated font pairing combinations for your designs. Browse hundreds of professionally matched typeface pairs with live preview examples.
• Font Squirrel: Curated collection of high-quality, commercial-use free fonts. Includes a webfont generator for converting fonts to web-friendly formats.
• Fonts Arena: FontsArena is a curated typography website with a focus on contemporary typography and high quality free fonts.
• Fonts in Use: An independent archive of typography.
• FontJoy: Generate font combinations with deep learning.
• FontPair: Font Pair is a typography site dedicated to helping creators use beautiful typography for their creative projects.
• Google Fonts: Making the web more beautiful, fast, and open through great typography.
• Modular Scale: Build your typographic scale, create the vertical rhythm of your web site.
• My Fonts: MyFonts offers the largest selection of professional fonts for any project.
• Type Scale: Visual calculator for creating harmonious typography scales. Preview how different scale ratios affect your type system.
• Typewolf: Discover trending typefaces and see how they're used in the wild. Curated font recommendations, site reviews, and typography inspiration.
• Typewonder: Helps you to test web fonts on any web site on the fly!
• Typographica: In-depth typeface reviews, book reviews, and commentary on typography. Essential reading for type enthusiasts and designers.
• Typographic Posters: Typographic Posters is a platform for inspiration and promotion of good design through the poster culture.
• Typography in Ten Minutes: If you learn and follow these five typography rules, you will be a better typographer than nearly every writer—and even most graphic designers.

UI Animation

UI animation tools and motion design resources. Create smooth animations and micro-interactions with Animate.css, LottieFiles, and CSS animation libraries. Add life to your interfaces with beautiful, performant animations and transitions.

• Animate.css: Just-add-water CSS animations!
• Cubic Bezier: Visual tool for creating and testing CSS cubic-bezier easing functions. Compare with predefined curves and get ready-to-use code.
• Easings: Test common easing curves on a range of interfaces. Or generate your own custom bezier curve.
• LottieFiles: Lightweight, scalable animations for your website and apps!
• Motion UI: A Sass library for creating flexible CSS transitions and animations.

UI Design

Best UI design tools and resources. Create beautiful user interfaces with Figma, Adobe XD, Sketch, and Framer. Access UI kits, design patterns, and component libraries. Essential tools for professional interface design and prototyping.

• Adobe XD: Lifelike in every sense. Create stunningly real UI/UX designs and stand out from the rest.
• Figma: Browser-based collaborative design tool for creating interfaces, prototypes, and design systems. Real-time collaboration, powerful auto-layout, and extensive plugin ecosystem.
• Framer: Interactive design and prototyping tool with real React components. Create production-ready prototypes with advanced animations, interactions, and responsive layouts.
• Maze: Rapid user testing and research platform. Test prototypes, run surveys, conduct interviews, and gather actionable insights before building your product.
• Origami Studio: Design, animate, and prototype. All-in-one.
• Sketch: Vector-based design tool for Mac with powerful symbols, styles, and plugins. Industry-standard for UI/UX design with collaborative cloud features.

UX Design

UX design tools and user research resources. Learn about user testing, journey mapping, wireframing, and creating user-centered designs. Essential resources for understanding user behavior and designing better experiences. Build products users love.

• Filters vs. Facets: Definitions: The terms “filters” and “faceted navigation” are often used interchangeably; although related, these concepts have important differences.
• Task Analysis: Support Users in Achieving Their Goals: Task analysis is the systematic study of how users complete tasks to achieve their goals.

Wireframing

Wireframing tools for rapid prototyping. Create low-fidelity wireframes, sitemaps, and user flows to plan your projects. Use printable templates and digital tools to sketch ideas and communicate design concepts quickly and effectively.

• Sketchize: The easiest way to turn your ideas into lovely sketches!
• Sketchsheets: Ready to print sketch sheet templates for UX designers.
• Sneakpeekit: Printable grid paper templates for design wireframing. Free downloadable PDFs for sketching mobile, tablet, desktop, and web layouts.
• Zen Wireframe: Create mockups of your websites and apps in just minutes.

Others

More essential design resources and tools. Discover utilities for design collaboration, conversion tools, design education, analytics, and other helpful resources that enhance your design workflow. Everything you need to work smarter.

• 10015.io: 10015.io is a “free all-in-one toolbox” solution created to ease your life by preventing bookmark mess.
• Adjust: Adjust is the mobile marketing platform for marketers around the world wanting to grow their app.
• Adobe CC Express: Quick and easy design tool for creating social media graphics, videos, web pages, and more. Thousands of templates and Adobe Stock assets at your fingertips.
• AppsFlyer: The world’s top marketing and product teams turn to AppsFlyer to power predictable app growth, protect customer privacy, and deliver exceptional mobile experiences.
• Avocode: Design handoff tool that converts designs to code. Export CSS, Swift, and Android XML from Sketch, Figma, and Adobe XD files automatically.
• Components.ai: Visual editors for HTML, CSS, and SVG. Customize, curate, and publish designs faster than ever.
• Design Sprint Kit: Transform the way your team works.
• Ethical Design Resources: Practical resources to learn about design ethics and its methodologies.
• Hotjar: Understand how users behave on your site, what they need, and how they feel, fast.
• Lorem Ipsum: Generate placeholder text for your designs and mockups. Includes classic Lorem Ipsum and alternative filler text options in various languages.
• Media Queries: A handy tool that helps designers examine the responsiveness of a variety of web sites.
• Pattern Monster: Customizable SVG patterns for your projects.
• People + AI Research: People + AI Research (PAIR) is a multidisciplinary team at Google that explores the human side of AI by doing fundamental research, building tools, creating design frameworks, and working with diverse communities.
• Pitch: Modern collaborative presentation software with beautiful templates. Create, edit, and present together in real-time with your team.
• Pixcleaner: Free background remover and image converter JPEG or PNG to Webp.
• ProApp Design: Courses curated by creators with industry experience & passion for design.
• Rocket: Rocket is a free Mac app that makes typing emoji faster and easier using Slack-style shortcuts.
• Sharpen: Sharpen is a free design challenge generator used by tens of thousands of designers and educators worldwide to practice and teach graphic design, UX, branding, and more.
• Speak Human: Generate human centric microcopy for all purposes.
• Tilt Brush by Google: Tilt Brush lets you paint in 3D space with virtual reality.
• Use The Keyboard: A collection of keyboard shortcuts for Mac apps, Windows programs, and websites.
• UX Tools: We make several free tools and projects for product designers.
• Web Desigm Museum: Web Design Museum exhibits over 2,000 carefully selected and sorted web sites that show web design trends between the years 1991 and 2006.
• Zeplin: Organize screens. Publish locked designs. Scale design systems. All in a workspace friendly to the entire team, including non-designers.