Hello Devs π
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Today, I'm gonna share 100+ super amazing resources every developer are gonna love for sure π I hope you'll enjoy this article.
3 UX/UI Design Systems to gain inspiration
-
π€ Polaris by Shopify - an amazing design system by shopify
-
π΅ Patterns by Mailchimp - super creative design system by mailchimp
-
πͺ Googleβs Material Design - A huge design system by Google
3 tools every UX/UI designer should know
-
π₯ UX Tweak - The only UX research platform you need
-
π Notion - is an all-in-one workspace to organise your notes, projects and tasks
-
πΈ Figma - is a multiplayer interface design tool to create mockups, design systems and prototypes β£
-
βοΈ Miro - is a real-time whiteboard to gather research and ideate with team mates β£
3D websites that will inspire every UX/UI designer β£
-
π» Protopie.com - go the extra mile with 3D video and awesome animations on scroll
-
β»οΈ Pitch.com - began the 3D movement and their characters are super friendly and feature in their website and product. β£
-
π― kukla-kit.com - is a 3D library for Figma projects
3 chrome extensions for every UX/UI Designer β£
-
β¨οΈ Font Ninja lets you inspect and bookmark fonts and any webpageβ£
-
π» Go Full Page takes full page screenshots of any webpage β£
-
π₯ Loom lets you record videos directly in chrome
3 Illustration Libraries for UX/UI Designers β£
-
π Absurd.Design have expressive illustrations for products with personality β£
-
π₯° Blush.design have a great mix of characters from artists around the world β£
-
π Ouch! - have a comprehensive library of searchable illustrations
3 Typography tools for UX/UI Designers β£
-
π Fontjoy.com generates font pairings with a contrast slider in a single click β£
-
π app.typeanything.io letβs you experiment with font pairings, sizes, spacing, and weights live i. The browser β£
-
π¨ Font Base is a free font manager with access to Googleβs fonts for Mac and windows
3 color tools for UX/UI Designers β£
-
πΉ picular.co generates colors based on keywords β£
-
π Coolhue is a gradient plugin for Figma & Sketch β£
-
π Eva uses AI to generate feedback colors based off your brand color
4 user testing tools for UX/UI Designers β£
-
π Maze.design is great for running unmoderated tests as it integrates smoothly with your existing prototyping workflow β£
-
β¨ Lookback.io is super for moderated usability tests of your product live with users β£
-
π€ Usertesting.com is an accessible tool for your whole team to test with
-
π₯ UX Tweak - The only UX research platform you need
3 3D libraries for UX/UI Designers β£
-
π Shapefest.com is a massive library of 3D shapes β£
-
π Storytale.com has a great mix of 3D characters and objects β£
-
π₯³ Toy Faces is a super fun 3D avatar library
3 Prototyping tools for UX/UI Designers β£β£
-
π« Figma lets you effortlessly create prototypes whilst you design β£
-
πΏ Framer has an extensive library of notions and tutorials to help you learn how to prototype β£
-
π€― Protopie helps you create mind blowing prototypes with native elements
3 sites to gain inspiration as a UX/UI Designer β£
-
π± mobbin.design is a hand picked collection of the latest mobile design patterns β£
-
πΌ Land-Book.com is a great place for landing page and portfolio inspiration β£
-
π Dribbble is perfect for conceptual thinking and experimental design
3 productivity tools for UX/UI Designers β£
-
πββοΈ Notion is perfect for organising your weekly tasks and design team wiki β£
-
π Tomato 2 is a super app for following the pomodoro technique and managing your time β£
-
π Calendly helps your organise meetings without the back and forth emailing.
3 accessibility tools for UX/UI Designers β£
-
π¨ colorable.jxnblk.com - Colorable is a great tools for generating an accessible color palette β£
-
π― getstark.co - Stark is a super Figma, XD, Sketch plug-in for running contrast and color blind tests live in your designs β£
-
π Wave is a wicked chrome extension for running an accessibility evaluation live on your site.
3 free image libraries for UX/UI Designers β£
-
π₯ pexels.com - Pexels is a super resource for free images and videos β£
-
π unsplash.com - Unsplash has powerful search, filters and collections from around the world β£
-
βοΈ Reshot.com - Reshot is another super image resource with handpicked, non-sticky images.
3 font resources for UX/UI Designers β£
-
β‘οΈ Google fonts has over 1k searchable fonts categorised by type. β£
-
π¦ Open Foundry is a super resource for handpicked open-source typefaces β£
-
πΊ Typewolf is super for learning about fonts and font pairings.
3 portfolio tools for UX/UI Designers β£
-
β‘οΈ Super.so is quick and easy way to convert your Notion docs into an online portfolio β£
-
π₯ Webflow.com lets you design your portfolio directly in the browser across multiple devices β£
-
π Grammarly.com fixes your grammar errors helping you write better case studies
3 no-code tools for UX/UI Designers β£
-
β‘οΈ Webflow is the best no-code website builder with awesome interactions β£
-
π¬ Bubble is a great tool for building web apps without code β£
-
π΅ MemberStack is a no-code membership tool for any website
3 UX Writing resources for UX/UI designersβ£
-
βοΈ dailyuxwriting.com have super how to guides to up your writing gameβ£
-
π€ Uxlibrary.org define the value of UX Writing with super ux writing blog links β£
-
π uxplanet.org is an awesome handbook for UX writersβ£
3 Figma plugins for UX/UI Designers β£
-
βͺοΈ Autoflow allows you to neatly draw the flows between your frames β£
-
π Color-Palettes font picker lets you view typefaces before you select them β£
-
πΈ Unsplash is super for adding awesome stock images to your designs
3 color gradient tools for UX/UI Designers β£
-
π webgradients.com have 180 awesome gradients with full screen preview β£
-
πͺ coolors.co have a super gradient maker with a neat toggle between radial and linear β£
-
β‘οΈ uigradients.com is a super resource to grab limitless gradients with a neat full screen toggle
3 user flow libraries for UX/UI Designers β£
-
π± uxarchive.com have a super library of user flows from top mobile apps β£
-
β‘οΈ Mobbin.design is the largest user flow library that you can click through on a device β£
-
πΏ pageflows.com is an awesome user flow library with web and mobile apps
3 icon libraries for UX/UI Designers β£
-
π‘ Ikonate.com is a super library of customisable icons that you can preview in dark mode β£
-
β‘οΈ Useanimations.com is an awesome library of animated icons β£
-
π Streamline.to is an icon app and plugin with over 30k icons to use
3 AI powered tools for UX/UI Designers β£
-
π¨ Khroma.co is an AI powered color palette generator based on your fave colors β£
-
βοΈ UIzard.io is an AI tool that converts your sketches into mockups β£
-
πΈ remove.bg is an AI tool that removes any background from an image
3 color palette tools for UX/UI Designers β£
-
π happyhues.co is a color palette tool that lets you view curated colors in context β£
-
π colorinspo.com letβs you generate a color palette based on color theory β£
-
β‘οΈ Colors.muz.li is a color palette generator with a live UI kit demo
3 Zoom alternatives for UX/UI Designers β£
-
π³π΄ Whereby.com is a no fluff video meeting tool made by a secure friendly team in Norwayβ£
-
π Vowel.com is a video conference tool that helps you host, plan and transcribe meetings β£
-
π Macro.io is an interface tool for Zoom that allows you to visualise meeting discussions
3 white boarding tools for UX/UI Designers β£
-
πΉ Freehand by Invision is a quick and easy to use whiteboarding toolβ£
-
β‘οΈ Miro is a super tool with loads of handy templates to kickstart your white boarding sesh β£
-
π¨ Mural is a great white boarding tool to use with your team β£
3 grid extensions for UX/UI Designers β£
-
π Page Ruler is super for defining the spacing between components β£
-
πΎ Baseliner is a super grid extension for applying a baseline to your design β£
-
πΉ Grid Overlay is a great for applying a grid system directly to any page
3 awesome AI tools for UX/UI Designers β£
-
π¨ tailwind.ink is an awesome AI color shade generator β£
-
π₯ visualeyes.design is a AI heatmap generator for your designs β£
-
βοΈ Clipdrop is a super AR copy paste tool for adding images, objects, and text to your design β£
3 massive Design Systems to inspire UX/UI Designers β£
-
β Atlassian.design have a mammoth design systems with neat accessibility checks β£
-
π buffer have a huge design systems with super guidelines on each component β£
-
π IBM whopping carbon design system works across a light and dark theme
3 super fun typography tools for UX/UI Designers β£
-
π» wordmark is a super tool that previews every font on your computer β£
-
π Prototypo is a super tool for creating your own fontβ£
-
π― kerntype is a game that helps you learn how to learn type
3 device mockup generators for UX/UI Designers β£
-
π» previewed.app is a super 2D and 3D device mockup generator across devices β£
-
π€― threed.io is an awesome 3D mockup generator directly in the browser β£
-
β‘οΈ Rotato is a super animated mockup generator
3 animated icon libraries for UX/UI Designers β£
-
π iconfinder.com/p/animated-Christmas-icons is a super festive library of animated Christmas icons β£
-
π± loading.io is a super tool for making your own custom Animated loading icon β£
-
π lottieflow.com is a super library of animated icons that you can filter by category
3 super analytics tools for UX/UI Designers β£
-
π useFathom.com is a super simple and visual analytics tool for your product β£
-
π€© Plausible.io is another awesome analytics tool with a neat UI β£
-
β‘οΈ Useberry.com is great for grabbing analytics directly on your prototype
3 super productivity tools for UX/UI Designers β£
-
π‘ meetsidekick.com is a super browser that gives your apps a home and removes the need for cluttered tabs β£
-
β getslash.co is an awesome tool that helps you complete your to do list β£
-
π§ hey.com is a super tool that makes emails fun and easy to manage
3 character illustration libraries for UX/UI Designers β£
-
π Humaaans is an awesome illustration library of characters that you can mix and match β£
-
π control.rocks is a super illustration library with loads of characters and scenes β£
-
π struct.rocks is a super fun character illustration library based on shapes
3 agency websites to inspire UX/UI Designers β£
-
π¦΅πΌ Toyfight.co use humour to demo the value of a small team β£
-
π»β Hellomonday.com use playful characters to showcase the diversity of their agency β£
-
π§βπ majortom.com use animation on scroll to showcase their iterative
3 must read books for UI/UX Designers
- π Burn Your Portfolio
- π Steal Like an Artist
- π The Design of Everyday Things
π Wrapping Up
Yeah, that's a wrap. Hope you enjoyed these amazing resources and you're satisfied with this article. Do not hesitate to share your feedback. I am on twitter @saviomartin7. Give a follow!
Do you know more? Add them in the comments?