This article aims to save you a lots of time and resources searching and exploring the tools and resources online we designer’s everyday. Below are the collection of modern tools and resources we designers need in our tool belt.
“The expectations of life depend upon diligence; the mechanic that would perfect his work must first sharpen his tools.”
― Confucius
Typography:
“90 percent of design is typography. And the other 90 percent is whitespace.”
Jeffrey Zeldman
Font face Ninja: Free browser extension that let us inspect, try, buy and bookmark any fonts on any website.
WhatTheFont : Seen a font in use and want to know what it is? After uploading an image to WhatTheFont to find the closest matches in their database.
Type Hero : Free inspirational web font combinations with cool colour palettes and ready-to-use HTML/CSS code.
Type anything: Type and get your font combo.
Font Combination : Finding perfect font combination for your design.
Typewolf : See whats trending in typography.
Type Cast: Design with web-fonts in the browser.
Adobe Typekit: Thousands of beautiful font to use everyday.
Google Font : Makes product and web pages run faster by safely caching fonts without compromising users’ privacy or security.
Colours:
“Color is a power which directly influences the soul”
— Wassily Kandinsky
Colour-mind : The AI powered colour pallet generator.
Khroma : AI powered colour generator for designers.
Color Hunt : Hunt awesome colours.
Colour Theory : Learn colour theory in brief.
Grabient : Collection of awesome gradients online.
Hex Colour Generator : Generate hex colour code online.
Ambient Colours : Colours you will love to stare.
Coffee is the colours : #cOFFEE is the colour.
Design Seeds : Pallets from real photography online.
Icons:
“I believe in a visual language that should be as strong as the written word”
— David LaChapelle
Nova : Largest collection of material icons online.
The Noun Project : Search for anything.
Feather : Simply beautiful opensource icons.
Iconfinder : Search for icons with free and premium membership.
Flaticon : Largest database of icons online.
Nucleo-app : Icon organiser and icon library — desktop application.
Icons Mind : Perfect and ready icons for iOS, Android & Websites.
Ego Icons : Icons with personality.
Iconmonstr : Free simple icons.
Online Inspiration:
“The only person you should try to be better than is the person you were yesterday.”
— Anonymous
Sitesee : Curated gallery of beautiful, modern websites.
Interfaces Pro : Search for any desired inspiration online.
The Best Design : Recognising the best of web designs.
Best folios : Best folios is a gallery featuring the best portfolios from product designers, UI/UX designers and graphic designers.
CSS Winner : CSS Award Gallery for web design awards.
Flatinspire: Cool inspiration for designers.
The Inspiration Grid: All design inspiration in a single place.
Design Sphere: Everyday design Inspiration
Hey designer: Stories for designers and frontend developers.
Freebies:
UI8 : Free and premium resources.
UIChest : Chest of awesome UI assets online.
GraphicBurger: Free design assets cared in every pixels.
Vecteeezy: Free vectors for all.
Zippypixels : Free and premium design assets.
Pixeden : Pixeden is hard at work providing quality web resources.
Photography:
Unsplash :Beautiful, free photos. Gifted by the world’s most generous community of photographers.
Pexels : Best free stock photos in one place.
Pixabay : Pixabay is a vibrant community of creatives, sharing copyright free images and videos.
Tools and browser extensions:
“We become what we behold. We shape our tools, and thereafter, our tools shape us.”
― Marshall McLuhan
Muzil : Designers’ Secret Source: all the design inspiration you need. Served fresh.
Hypershoot : Hypershoot lets you capture web pages, organize it by adding tags/ratings, and discover other pages added by the community.
CSSPeeper : Inspect styles in a simple, well organised & beautiful way with our Chrome extension.
Whatfont : See what fonts are used inside your browser.
UX tools : Compare design tools online.
Visual Inspector : Designers can make temporary edit in websites without coding.
Pininterest In Chrome : Save what you find online in pininterest.
Evernote Extension: A simple extension for your web browser that lets you capture full-page articles, images, selected text, important emails, and any web page that inspires you. Save everything to Evernote and keep it forever.
CSS Shack : Allows us to create layers styles (just like you would in any other image editing software), and export them.
Red Pen : Click and comment design instantly.
Sneakpeekit : Printable sketch sheets for design wireframing.
Craft : Screen Design. Supercharged.
Zeplin : Design hand-off has never been easier.
Wake: Fastest way to share design for teams.
Sketch App : Digital design toolkit.
UX Pin : A full stack UX designer platform.
Adobe XD : Design and prototype in a same tool.
Figma : Collaborative interface design tool.
Framer : Interactive design and collaboration tool.
Principle : Principle makes it easy to design animated and interactive user interfaces.
Flinto : Flinto is a Mac app used by designers around the world to create interactive and animated prototypes of their app designs.
Blogs and readings:
Designbetter.co : The best practices, stories, and insights from the world’s top design leaders. Loaded with in-depth books, podcasts, and more.
UX in Motion : Learn animation and UX.
User Research Resources : Expand your user-research knowledge.
There are thousands more resources for us designers to explore. I have here curated some top resources, I know these resources are extremely helpful for all of us.
