Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/selfishprimate/curated-design-resources

Design, prototype, test, and mockup with the best design tools and resources carefully curated for everyone.
https://github.com/selfishprimate/curated-design-resources

a11y accessibility animation color curated-design-resources curated-design-tools design design-books design-inspirations design-patterns design-resources design-systems design-tools frontend mobile-design typography ui-design ux-design web-desing

Last synced: about 1 month ago
JSON representation

Design, prototype, test, and mockup with the best design tools and resources carefully curated for everyone.

Awesome Lists containing this project

README 

        
# Curated Design Resources



_The best design resources for everyone._





  

    

  




## Contribution



Please read the [contribution details](CONTRIBUTING.md) and feel free to contribute to the library.



## Table of Contents



[Accessibility](#accessibility), [Articles](#articles), [Blogs](#blogs), [Books](#books), [Color](#color), [Design News](#design-news), [Design Systems](#design-systems), [Figma Plugins](#figma-plugins), [Frontend Design](#frontend-design), [Graphic Design](#graphic-design), [Icons](#icons), [Inspiration](#inspiration), [Mockup](#mockup), [Productivity](#productivity), [Prototyping](#prototyping), [Stock Photos](#stock-photos), [Stock Videos](#stock-videos), [Tutorials](#tutorials), [Typography](#typography), [UI Animation](#ui-animation), [UI Design](#ui-design), [UX Design](#ux-design), [Wireframing](#wireframing), [Others](#others)



## Accessibility 



_The best design resources for accessibility!_



- [Accessibility Guide](https://usecontrast.com/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](https://www.who.int/en/news-room/fact-sheets/detail/blindness-and-visual-impairment): Globally, at least 2.2 billion people have a near or distance vision impairment. In at least 1 billion...

- [Colorable](https://colorable.jxnblk.com/): Color combination contrast tester.

- [Colors](https://clrs.cc/a11y/): Accessibility is important! Mix and match these color classes to create a variety of accessible themes.

- [Color Review](https://color.review/): What you need to know about colors & accessibility.

- [Contrast](https://usecontrast.com/): A macOS app for quick access to WCAG color contrast ratios.

- [Stark](https://www.getstark.co/): Make the world’s software more accessible!

- [The A11y Project](https://www.a11yproject.com/): The A11Y Project is a community-driven effort to make digital accessibility easier.

- [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/): Introducing the Web Content Accessibility Guidelines (WCAG), including WCAG 2.0 and WCAG 2.1.

- [Who Can Use](https://whocanuse.com/): It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.



## Articles



_The best articles about web design, mobile design, and user experience design!_



- [8 Brilliant Examples Of Social Proof On The Web](https://www.crazyegg.com/blog/examples-social-proof-on-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](https://www.nngroup.com/articles/ten-usability-heuristics/): 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?](https://alistapart.com/article/how-we-hold-our-gadgets/): Where do hands and fingers fall on the device?

- [Mental Models](https://www.nngroup.com/articles/mental-models/): What users believe they know about a UI strongly impacts how they use it.

- [Mobile App UX Principles](https://storage.googleapis.com/think-emea/docs/article/Mobile_App_UX_Principles.pdf): Improving user experience and optimising conversion.

- [Mobile Context Model](http://www.giantant.com/output/mobile_context_model.pdf): A heuristic guide for mobile design.

- [Task Analysis: Support Users in Achieving Their Goals](https://www.nngroup.com/articles/task-analysis/): 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](https://spencermortensen.com/articles/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](http://www.webdesignerdepot.com/2015/02/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](https://www.lukew.com/ff/entry.asp?1071): 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](https://www.nngroup.com/articles/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](https://www.nngroup.com/articles/customer-journey-mapping/): 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](https://www.nngroup.com/articles/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



_The best blog pages to learn UX design!_



- [A List Apart](https://alistapart.com/): A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

- [Brad Frost](https://bradfrost.com/): I create successful design systems and help others do the same.

- [Creative Review](https://www.creativereview.co.uk/): We deliver the sharpest opinion, analysis and advice on life in the creative industries.

- [Design Systems](https://www.designsystems.com/): A Figma publication for design systems creators, designers, developers, and managers.

- [DesignTAXI](https://designtaxi.com/): DesignTAXI is the leading online reference source for the creative world, reaching millions of industry tastemakers and influencers monthly.

- [Hey Designer](https://heydesigner.com/): Daily curated design knowledge.

- [Law of UX](https://lawsofux.com/): Laws of UX is a collection of best practices that designers can consider when building user interfaces.

- [NN/g](https://www.nngroup.com/): World leaders in research-based user experience.

- [Product Talk by Teresa Torres](https://www.producttalk.org/blog/): Make better product decisions.

- [Smashing Magazine](https://www.smashingmagazine.com/): We care about quality content.

- [The Daily Egg](https://www.crazyegg.com/blog/): Make the most of every visitor.

- [UX Magazine](https://uxmag.com/): UX Magazine has been exploring, promoting, and discussing the realm of experience design for more than two decades.

- [UX Mastery](https://uxmastery.com/): At UX Mastery, we believe that technology needs to work for humans, not the other way around.

- [UX Matters](https://www.uxmatters.com/): 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](https://uxplanet.org/): One-stop resource for everything related to user experience.



## Books



_The holy bibles of user experience design!_



- [100 Things Every Designer Needs to Know About People](https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535): 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](https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515): 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](https://www.amazon.com/GUI-Bloopers-2-0-Interactive-Technologies/dp/0123706432): 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](https://www.amazon.com/People-Arent-Robots-psychology-questionnaire/dp/1539730646): 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](https://www.amazon.com/Rocket-Surgery-Made-Easy-Yourself/dp/0321657292): 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](https://www.amazon.com/gp/product/B00E257T6C/): 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](https://www.amazon.com/Creative-Confidence-Unleashing-Potential-Within/dp/038534936X/): 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



_The best tools for creating color schemes for your designs!_



- [Adobe Color](https://color.adobe.com/tr/create/color-wheel): Create beautiful color themes!

- [BrandColors](https://brandcolors.net/): The biggest collection of official brand color codes around.

- [Branition Colors](https://branition.com/colors): Hand-curated collection of color palettes best fitted for branding.

- [Colorable](https://colorable.jxnblk.com/): Contrast is the difference in luminance or color that makes an object distinguishable.

- [ColorBox](https://colorbox.io/): A handy color creation tool from the Lyft team.

- [Color Claim](https://vanschneider.com/colors): Color Claim was created in 2012 by Tobias van Schneider with the goal to collect & combine unique colors for your future projects.

- [Colordot](https://color.hailpixel.com/): A handy color picker tool.

- [Color Hunt](https://colorhunt.co/): Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes.

- [Color Oracle](https://colororacle.org/): Color Oracle is a free color blindness simulator for Windows, Mac and Linux.

- [Colorsinspo](https://colorsinspo.com/): Thousands of beautiful color palettes you can use it directly by one click.

- [Colourco](https://colourco.de/): Pick colours based on HSL color values.

- [Coolors](https://coolors.co/): The super fast color schemes generator!

- [Colors](https://clrs.cc/a11y/): Mix and match these color classes to create a variety of accessible themes.

- [Curls](https://www.culrs.com/): Colors that work together are curated and fashioned into quality palettes that you can incorporate.

- [Duo](https://duo.alexpate.uk/): 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](https://www.flatuicolorpicker.com/): Total 199 unique colors!

- [Happy Hues](https://www.happyhues.co/): Curated colors in context.

- [Hex Colors](https://hexcolor.co/): A collection of free color tools that will help you choose the right color for your next project!

- [HTML Color Codes](https://htmlcolorcodes.com/): Get HTML color codes, Hex color codes, RGB and HSL values with our color picker...

- [UI Colors](https://uicolors.app/create): Enter a hexcode and I will create a color family for you.

- [Leonardo](https://leonardocolor.io/): Leonardo is a one-of-a-kind tool for creating, managing, and sharing accessible color systems for user interface design and data visualization.

- [Palettable](https://www.palettable.io/): Generate beautiful color palettes using the knowledge of millions of designers.

- [Picular](https://picular.co/): The color of anything! 

- [Pigment](https://pigment.shapefactory.co/): A handy tool for generating colors.

- [Pilestone](https://pilestone.com/pages/color-blindness-simulator-1): Simulate your image by using the colorblind simulator.

- [Randoma11y](https://randoma11y.com/): A handy tool for generating colors.

- [Tint & Shade Generator](https://maketintsandshades.com/): Produce tints and shades of a given hex color in 10% increments.



## Design News



_Discover new products, follow the leaders' articles about design, and stay up to date!_



- [AirBnb Design](https://airbnb.design/): Design influences everything we do at Airbnb.

- [All Design Conferences](https://www.alldesignconferences.com/): This site is just a simple collection of all design and front-end conferences for the year.

- [Beta List](https://betalist.com/): Discover tomorrow's startups, today.

- [Beta Page](https://betapage.co/): Get new startups in your inbox.

- [Design Calendar](https://www.designcalendar.io/): An online community made for creatives who believe in the power of ideas and the joy of making them happen.

- [Designer News](https://www.designernews.co/): Designer News is a large, global community of people working in design and technology or those interested in the topics.

- [Dropbox Design](https://dropbox.design/): Welcome, we are Dropbox Design.

- [Facebook Design](https://design.facebook.com/): Designing for the global diversity of human needs.

- [Google Design](https://design.google/): Supporting the future of design and technology.

- [Hey Designer](https://heydesigner.com/): Daily curated design knowledge.

- [Microsoft Design](https://www.microsoft.com/design/): Whether you want to practice new skills, develop new concepts, or create prototypes, these toolkits are your place to start.

- [Product Hunt](https://www.producthunt.com/): Product Hunt surfaces the best new products, every day.

- [Shaping Design](https://www.editorx.com/shaping-design): Operating at the intersection of design and technology, we cover a wide range of creative fields, predominantly web design and UX.

- [Sidebar](https://sidebar.io/): Sidebar has been collecting the best design links of the day since October 2012.

- [Slant](https://www.producthunt.com/): Trustworthy product rankings for all your shopping needs.

- [Steemhunt](https://steemhunt.com/): Discover cool products and get rewards.

- [The UX Collective](https://uxdesign.cc/): Curated stories on UX, Visual & Product Design.

- [UsTwo](https://www.ustwo.com/blog/): Trending design news from the UsTwo Team.

- [UX Movement](https://uxmovement.com/): 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](https://www.webdesignernews.com/): 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



_The best design systems of the universe!_



- [AirBnb](https://airbnb.design/building-a-visual-language/): Behind the scenes of our new design system.

- [Atlassian](https://atlassian.design/): Use Atlassian’s end-to-end design language to create simple, intuitive and beautiful experiences.

- [Evergreen](https://evergreen.segment.com/): Evergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment.

- [Fluent](https://www.microsoft.com/design/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](https://www.ibm.com/design/language/): 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](https://developer.apple.com/design/human-interface-guidelines/): Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms. *Apple*

- [Lightning Design System](https://www.lightningdesignsystem.com/): Salesforce Lightning Design System. Create the world’s best enterprise app experiences. *Salesforce*

- [Mailchimp](https://ux.mailchimp.com/patterns/): Mailchimp Design System

- [Material Design](https://material.io/): Material is a design system – backed by open-source code – that helps teams build high-quality digital experiences. *Google*

- [Mozilla Protocol](https://protocol.mozilla.org/index.html): 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](https://polaris.shopify.com/): Our design system helps us work together to build a great experience for all of Shopify’s merchants. *Shopify*

- [Primer](https://primer.style/): 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](https://solid.buzzfeed.com/): 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](http://styleguides.io/): Real life pattern libraries, code standards documents and content style guides.

- [Uber](https://brand.uber.com/): These guidelines cover 9 elements: logo, color, composition, iconography, illustration, motion, photography, tone of voice, and typography.

- [Cookbook](https://www.yelp.com/styleguide/): The styleguide is a resource for designers, product managers, and developers, providing a common language around Yelp’s UI patterns. *Yelp*



## Figma Plugins



_The best Figma plugins ever!_



- [A11y - Color Contrast Checker](https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker): Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards.

- [Color Blind](https://www.figma.com/community/plugin/733343906244951586/Color-Blind): Color Blind allows you to view your designs in the 8 different types of color vision deficiencies. 

- [Color Designer](https://www.figma.com/community/plugin/739475857305927370/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.

- [Figma Tokens](https://www.figmatokens.com/): Use the power of design tokens in Figma.

- [Iconify](https://www.figma.com/community/plugin/735098390272716381/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](https://www.figma.com/community/plugin/731841207668879837/Image-Palette): Extracts a colour palette of 5 different colours from the selected images.

- [Insert Big Image](https://www.figma.com/community/plugin/799646392992487942): Insert and retain the original resolution of big images.

- [Layout Grid Visualizer](https://www.figma.com/community/plugin/831003768229656707/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](https://www.figma.com/community/plugin/740272380439725040/Material-Design-Icons): Instant easy access to the entire Material Design Icons library. 35,000+ icons in PNG and SVG at your fingertips. 

- [Styler](https://www.figma.com/community/plugin/820660579767995949/Styler): Styler unlocks the ability to manage multiple styles at once by using modifying the layer properties. 

- [UI Faces](https://www.figma.com/community/plugin/769664006254845172/UI-Faces): UI Faces aggregates thousands of avatars which you can carefully filter to create your perfect personas or just generate random avatars.

- [Unsplash](https://www.figma.com/community/plugin/738454987945972471/Unsplash): Insert beautiful images from Unsplash straight into your designs.



## Frontend Design



_Suppose you're a designer. You also love to write HTML, CSS, JavaScript, and you create gorgeous user interfaces. If really so, you're going to love these tools a lot._



- [Airtable](https://www.airtable.com): Accelerate work and unlock potential with powerful apps that connect your data, workflows and teams.

- [AngularJS](https://angularjs.org/): AngularJS lets you extend HTML vocabulary for your application.

- [Bootstrap](https://getbootstrap.com/): Build fast, responsive sites with Bootstrap.

- [Codepen](https://codepen.io/): 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](https://tympanus.net/codrops/): Stay up to date with the latest web design and development news and relevant updates from Codrops.

- [CSS: Cascading Style Sheets](https://developer.mozilla.org/en-US/docs/Web/CSS): 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](https://www.11ty.dev/): 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](https://get.foundation/): The most advanced responsive front-end framework in the world.

- [Gerillass](https://gerillass.com/): 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](https://git-scm.com/): 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](https://github.com): Where the world builds software.

- [Grunt](https://gruntjs.com/): The JavaScript task runner.

- [Gulp](https://gulpjs.com/): A toolkit to automate & enhance your workflow.

- [Hugo](https://gohugo.io/): The world’s fastest framework for building websites.

- [HTML5 Boilerplate](https://html5boilerplate.com/): The web’s most popular front-end template.

- [Ionic](https://ionic.io/): Build faster, smarter, and into the future.

- [Jekyll](https://jekyllrb.com/): Transform your plain text into static websites and blogs. No more databases, comment moderation, or pesky updates to install—just your content.

- [Markdown Guide](https://www.markdownguide.org/): 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](https://validator.w3.org/): This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.

- [Material Design Lite](https://getmdl.io/): Material Design Lite lets you add a Material Design look and feel to your websites.

- [Modaal](https://humaan.com/modaal/): An accessible dialog window plugin for all humans.

- [Node.js](https://nodejs.org/en/): Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

- [Parcel](https://parceljs.org/): 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](https://reactjs.org/): A JavaScript library for building user interfaces.

- [Sass](https://sass-lang.com/): Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

- [Storybook](https://storybook.js.org/): Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

- [Tailwind CSS](https://tailwindcss.com/): Rapidly build modern websites without ever leaving your HTML.

- [Typeform](https://www.typeform.com/): 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](https://www.typescriptlang.org/): TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

- [Visual Studio Code](https://code.visualstudio.com/): An open-source code editing tool.

- [Vue.js](https://vuejs.org/): An approachable, performant and versatile framework for building web user interfaces.



## Graphic Design



_The best graphic design resources!_



- [Women of Graphic Design](https://womenofgraphicdesign.org/): 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](https://theinspirationgrid.com/): Daily design inspiration for creatives.

- [Baubauhaus](http://www.baubauhaus.com/): Baubauhaus is here to feed your daily need of design, illustration, photography, fashion and of all else art-related.



## Icons



_The best resources for Iconography!_



- [Feather](https://feathericons.com/): Simply beautiful open source icons.

- [Flaticon](https://www.flaticon.com/): Download free icons and stickers for your projects. Resources made by and for designers.

- [Font Awesome](https://fontawesome.com/): Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.

- [Fontisto](https://www.fontisto.com/): A handy icon set for designers and developers.

- [Freepik](https://www.freepik.com/popular-icons): Illustrations, photos, icons, mockups, and presentations templates.

- [Iconfinder](https://www.iconfinder.com/): Helping designers make a living doing what they love.

- [IcoMoon](https://icomoon.io/): Pixel Perfect Icon Solutions.

- [Iconmonstr](https://iconmonstr.com/): Free, monstrously big and continuously growing source of simple icons.

- [Iconsax](https://iconsax.io/): Hello welcome to iconsax the official icons of the Vuesax framework.

- [Iconshock](https://www.iconshock.com/): The biggest icon pack: 2 million professional icons library.

- [Material Icons](https://fonts.google.com/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](http://remixicon.com/): Remix Icon is a set of open-source neutral-style system symbols elaborately crafted for designers and developers.

- [Streamline](https://streamlinehq.com/): 100,000 icons, illustrations and emoji for all your projects.

- [The Noun Project](https://thenounproject.com/): Icons and Photos For Everything.

- [UI8](https://ui8.net/category/icons): 1015 vector icon sets for mobile, web & print projects.



## Inspiration



_Don't you have a new design idea? Well, steal one!_



- [Abduzeedo](https://abduzeedo.com/): Abduzeedo is a collective of individual writers sharing articles about design, photography, and UX.

- [Awwwards](https://www.awwwards.com/): The awards of design, creativity and innovation on the internet.

- [Behance](https://www.behance.net/): 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](https://bestwebsite.gallery/): The most beautiful websites handpicked for you.

- [Brutalist Websites](https://brutalistwebsites.com/): 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](https://commercecream.com/): Curating the Best of Shopify.

- [CSS Nectar](https://cssnectar.com/): CSS Nectar is a css website design showcase for web designers and developers.

- [Design Inspiration](https://www.designspiration.com/): Designspiration is committed to being the best product that it can.

- [Dribbble](https://dribbble.com/): Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals.

- [Httpster](https://httpster.net/): Httpster is an inspiration resource showcasing totally rocking websites made by people from all over the world.

- [Landingfolio](https://www.landingfolio.com/): 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](https://landings.dev/): Landings is a place to discover hundreds of landing pages from great companies based on preferences like theme and color.

- [Land-book](https://land-book.com/): We collect awesome websites to help creatives find inspiration & motivation to do rad stuff.

- [Lapa Ninja](https://www.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](https://mobbin.design/): Latest mobile design patterns.

- [Muzli](https://muz.li/): The best design inspiration - expertly curated for you.

- [Pentagram](https://www.pentagram.com/): Pentagram is a multi-disciplinary, independently-owned design studio.

- [Pinterest](https://tr.pinterest.com/): When it comes to a great idea, you know it when you see it.

- [Pttrns](https://pttrns.com/): Upgrade to Premium! No ads, unlimited access and more...

- [Saas Landing Page](https://saaslandingpage.com/): Discover the best 680 landing page examples created by top-class SaaS companies, and get ideas and inspiration for your next design project.

- [siteInspire](https://www.siteinspire.com/): SiteInspire is a showcase of the finest web and interactive design.

- [UI Garage](https://uigarage.net/): Daily handpicked UI inspiration & patterns.

- [Webdesign Inspiration](https://www.webdesign-inspiration.com/): The best website design ideas.

- [Webflow Showcases](https://webflow.com/discover/): Discover the best web design ideas from Webflow users.



## Mockup



_These mockup tools will help you make your design pieces way more bearable._



- [Angle](https://angle.sh/): 1900 Vector and 3D device mockups for Sketch, Figma and XD.

- [Apple](https://developer.apple.com/app-store/marketing/guidelines/#section-products): Photoshop files of Apple products.

- [Cleanmock](https://cleanmock.com/): Create stunning mockups that make your design standout.

- [Haikei](https://app.haikei.app/): Create wonderful background ornaments for your designs.

- [Shotsnap](https://app.shotsnapp.com/): 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.

- [Facebook Design](https://facebook.design/devices): Images and Sketch files of popular devices.



## Productivity



_Get productive with the best productivity apps._



- [Bardeen](https://www.bardeen.ai/): Bardeen saves you time by automating repetitive tasks with a shortcut. It combines a powerful workflow builder, AI-based recommendations, and contextual automations.

- [Miro](https://miro.com/): The online collaborative whiteboard platform to bring teams together, anytime, anywhere.

- [Notion](https://www.notion.so/): One tool for your whole team. Write, plan, and get organized.

- [Obsidian](https://obsidian.md/): Obsidian is a powerful knowledge base on top of a local folder of plain text Markdown files.

- [Pomofocus](https://pomofocus.io/): An online Pomodoro Timer to boost your productivity.

- [Slack](https://slack.com/): Transform the way you work with one place for everyone and everything you need to get stuff done.

- [Taskade](https://www.taskade.com/): Chat, organize, and get work done with real-time to-do lists, mind maps, org charts, and more.

- [Zapier](https://zapier.com/): Easy automation for busy people. Zapier moves info between your web apps automatically, so you can focus on your most important work.



## Prototyping



_Prototyping is one of the most critical stages of creating user-centered products._



- [Balsamiq](https://balsamiq.com/): Life's too short for bad software!

- [Flinto](https://www.flinto.com/): Flinto is a Mac app used by top designers around the world to create interactive and animated prototypes of their app designs.

- [Fluid](https://www.fluidui.com/): Create web and mobile prototypes in minutes.

- [Invision](https://www.invisionapp.com/): The digital product design platform powering the world’s best user experiences.

- [Justinmind](https://www.justinmind.com/): From wireframes to highly interactive prototypes.

- [Marvel](https://marvelapp.com/): Marvel has everything you need to bring ideas to life and transform how you create digital products with your team.

- [MockFlow](https://www.mockflow.com/): MockFlow is the UI planning platform that your team needs to kickstart software projects.

- [Mockups](https://moqups.com/): A streamlined web app that helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes.

- [OmniGraffle](https://www.omnigroup.com/omnigraffle/): You've got some explaining to do!

- [Origami Studio](https://origami.design/): Design, animate, and prototype. All-in-one.

- [Overflow](https://overflow.io/): Create interactive user flow diagrams that tell a story.

- [Picodo](https://pidoco.com/en): Pidoco is software that lets you quickly create click-through wireframes and fully interactive UX prototypes.

- [Proto.io](https://proto.io/): Prototypes that feel real.

- [UXPin](https://www.uxpin.com/): Design and manage your entire UX/UI project in one tool.

- [Visily](https://www.visily.ai): The simplest collaborative UI design software with an intuitive interface, rich UI library, and AI features.

- [Wireframe](https://www.uxpin.com/): A design tool fine-tuned for wireframing.



## Stock Photos



_The best design resources for stock photos!_



- [Burst](https://burst.shopify.com/): Free stock photos for websites and commercial use.

- [Generated Photos](https://generated.photos/): Unique, worry-free model photos.

- [Lorem Picsum](https://picsum.photos/): The Lorem Ipsum for photos.

- [Pexels](https://www.pexels.com/): The best free stock photos & videos shared by talented creators.

- [Unsplash](https://unsplash.com/): Photos for everyone.

- [UserStock](https://userstock.io/): Free photos of people's faces to use as avatars in UI mockups, prototypes and more.



## Stock Videos



_The best design resources for stock videos!_



- [Coverr](https://www.coverr.co/): Beautiful free stock video footage.

- [Mixkit](https://mixkit.co/): Free assets for your next video project.



## Tutorials



_The best tutorial platforms for UI/UX design!_



- [Checklist Design](https://www.checklist.design/): A collection of the best design practices.

- [Growth Design](https://growth.design/): Get product tips in a comic book format you’ll love to read.

- [Webflow University](https://university.webflow.com/courses): 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



_Typography is like the backbone of your design pieces. Here you can find the best tools to benefit typography!_



- [Canva](https://www.canva.com/font-combinations/): This tool make typography easy.

- [Font Squirrel](https://www.fontsquirrel.com/): Free fonts have met their match.

- [Fonts Arena](https://fontsarena.com/): FontsArena is a curated typography website with a focus on contemporary typography and high quality free fonts.

- [Fonts in Use](https://fontsinuse.com/): An independent archive of typography.

- [FontJoy](https://fontjoy.com/): Generate font combinations with deep learning.

- [FontPair](https://fontpair.co/): Font Pair is a typography site dedicated to helping creators use beautiful typography for their creative projects.

- [Google Fonts](https://fonts.google.com/): Making the web more beautiful, fast, and open through great typography.

- [Modular Scale](https://www.modularscale.com/): Build your typographic scale, create the vertical rhythm of your web site.

- [My Fonts](https://www.myfonts.com/): MyFonts offers the largest selection of professional fonts for any project.

- [Type Scale](https://type-scale.com/): A type tool by Jeremy Church.

- [Typewolf](https://www.typewolf.com/): Help designers know the trending typefaces.

- [Typewonder](http://typewonder.com/): Helps you to test web fonts on any web site on the fly!

- [Typographica](https://typographica.org/): Type Reviews, Books, Commentary.

- [Typographic Posters](https://www.typographicposters.com/): Typographic Posters is a platform for inspiration and promotion of good design through the poster culture.

- [Typography in Ten Minutes](https://practicaltypography.com/typography-in-ten-minutes.html): 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



_It's not rocket science to animate your UIs anymore!_



- [Animate.css](https://animate.style/): Just-add-water CSS animations!

- [Cubic Bezier](https://cubic-bezier.com/): A better tool for cubic-bezier() easing.

- [Easings](https://easings.co/): Test common easing curves on a range of interfaces. Or generate your own custom bezier curve.

- [LottieFiles](https://lottiefiles.com/): Lightweight, scalable animations for your website and apps!

- [Motion UI](https://legacy-zurb.netlify.app/playground/motion-ui): A Sass library for creating flexible CSS transitions and animations.



## UI Design



_The back button is one click away, and you don’t often get a second chance!_



- [Adobe XD](https://www.adobe.com/products/xd.html): Lifelike in every sense. Create stunningly real UI/UX designs and stand out from the rest.

- [Figma](https://www.figma.com/ui-design-tool/): The modern interface design tool.

- [Framer](https://www.framer.com/): Design how it works.

- [InVision](https://www.invisionapp.com/): Transformative collaboration for all the work you do.

- [Maze](https://maze.co/): Build amazing products without the guesswork.

- [Origami Studio](https://origami.design/): Design, animate, and prototype. All-in-one.

- [Sketch](https://www.sketch.com/): Everything you need to design.



## UX Design



_"The meanings of today may not be the meanings of the future." - Don Norman_



- [Filters vs. Facets: Definitions](https://www.nngroup.com/articles/filters-vs-facets/): 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](https://www.nngroup.com/articles/task-analysis/): Task analysis is the systematic study of how users complete tasks to achieve their goals.



## Wireframing



_The best design resources for wireframing!_



- [Sketchize](https://sketchize.com): The easiest way to turn your ideas into lovely sketches!

- [Sketchsheets](https://sketchsheets.com/): Ready to print sketch sheet templates for UX designers.

- [Sneakpeekit](https://sneakpeekit.com/): Printible grids for deisng wireframing.

- [Zen Wireframe](https://www.zenwireframe.com/): Create mockups of your websites and apps in just minutes.



## Others



_Some other design resources you may want to check out!_



- [10015.io](https://10015.io/): 10015.io is a “free all-in-one toolbox” solution created to ease your life by preventing bookmark mess.

- [Adjust](https://www.adjust.com/): Adjust is the mobile marketing platform for marketers around the world wanting to grow their app.

- [Adobe CC Express](https://express.adobe.com/): Create confidently, share fearlessly!

- [AppsFlyer](https://www.appsflyer.com/): 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](https://avocode.com/): Save time working with design files.

- [Components.ai](https://components.ai/): Visual editors for HTML, CSS, and SVG. Customize, curate, and publish designs faster than ever.

- [Design Sprint Kit](https://designsprintkit.withgoogle.com/): Transform the way your team works.

- [Ethical Design Resources](https://www.ethicaldesignresources.com/): Practical resources to learn about design ethics and its methodologies.

- [Grid.Guide](http://grid.guide/): A tool to help you create pixel perfect grids within your designs. Enter your requirements above and we’ll will show you all of the whole pixel combinations you can use.

- [Hotjar](https://www.hotjar.com/): Understand how users behave on your site, what they need, and how they feel, fast.

- [Lorem Ipsum](https://loremipsum.io/): A handy tool for filler contents.

- [Media Queries](https://mediaqueri.es/): A handy tool that helps designers examine the responsiveness of a variety of web sites.

- [Pattern Monster](https://pattern.monster/): Customizable SVG patterns for your projects.

- [People + AI Research](https://pair.withgoogle.com/): 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](https://pitch.com/): The new face of presentations.

- [Pixcleaner](https://pixcleaner.com/): Free background remover and image converter JPEG or PNG to Webp.

- [ProApp Design](https://proapp.design/): Courses curated by creators with industry experience & passion for design.

- [Rocket](https://matthewpalmer.net/rocket/): Rocket is a free Mac app that makes typing emoji faster and easier using Slack-style shortcuts.

- [Sharpen](https://sharpen.design/): 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](https://www.speakhuman.today/): Generate human centric microcopy for all purposes.

- [Tilt Brush by Google](https://www.tiltbrush.com/): Tilt Brush lets you paint in 3D space with virtual reality.

- [Use The Keyboard](https://usethekeyboard.com/): A collection of keyboard shortcuts for Mac apps, Windows programs, and websites.

- [UX Tools](https://uxtools.co/): We make several free tools and projects for product designers.

- [Web Desigm Museum](https://www.webdesignmuseum.org/): 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](https://zeplin.io/): Organize screens. Publish locked designs. Scale design systems. All in a workspace friendly to the entire team, including non-designers.