DEV Community

Cover image for 111 amazing resources you're gonna love 💖
Savio Martin
Savio Martin

Posted on • Originally published at savio.xyz

111 amazing resources you're gonna love 💖

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

3 tools every UX/UI designer should know

  • 📒 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

3 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

3 3D libraries for UX/UI Designers ⁣

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 ⁣

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


👀 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?

🌎 Lets connect

Top comments (11)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Tons of great resources here. Shout out to Notion and Figma for being so incredibly useful. I use Notion for managing my entire life. And at the moment Figma is my tool of choice for creating banners for article posts. Sorry Photoshop 😅

Collapse
 
shivraj97 profile image
Shivraj97

Thanks

Collapse
 
saviomartin profile image
Savio Martin

You're welcome!

Collapse
 
rmfranciacastillo profile image
Renato Francia Castillo

You are going to go far with this. Excited to see what you'll build with all these resources :)

Collapse
 
iftekhs profile image
iFTekhar

Nice list.😉

Collapse
 
saviomartin profile image
Savio Martin

Thank you!

Collapse
 
ronaldohoch profile image
Ronaldo Hoch

Nice list!

You put Miro twice... Maybe can change for Whimsical (whimsical.com/a)

Collapse
 
venkateshaj profile image
venkatesh-aj

Hi there, I've created a color palette website called colorsui.com. It's a free color tool.

Collapse
 
josemunoz profile image
José Muñoz

I wanted to add this other design system, I thought I could use storybook until I saw this one: planetary.hopin.com

Collapse
 
timhuang profile image
Timothy Huang

Cool, thanks for sharing!

Collapse
 
rumendimov profile image
Rumen Dimov

Awesome post