These are some not so popular sites or apps or extensions I found very useful, either because they make my life easier or because they push me to write more accessible code.
The list is divided into these parts :
UI Graphics
| Websites |
Description |
| Open Doodles |
It's a free set of sketchy illustrations by Pablo Stanley. |
| Humaaans |
Here you can Mix-&-Match illustrations of people with a design library. |
| Paaatterns |
It's a free collection of beautiful patterns for all vector formats. |
| Open Peeps |
A great hand-drawn illustration library. |
| avataaars |
Mix & Match avatars with a sketch library also created by Pablo Stanley. |
| DrawKit |
Hand-drawn vector illustration and icon resources, perfect for your next project. |
| illlustrations.co |
Another great Open source illustrations kit. |
Colors
| Websites |
Description |
| FlatUIColors 2 |
Beautiful set of color palettes in various flavours. |
| SchemeColor |
A great website to download color schemes. |
| Gradienta |
A pure css and jpg gradients. |
| uiGradients |
Gorgeous looking gradient generator. |
| Coolors |
Create or get inspired by thousands of beautiful color schemes. |
Icons
| Websites |
Description |
| Boxicons |
A simple vector icons set carefully crafted for designers and developers |
| FeatherIcons |
Beautiful, customizable open source icons |
| Simple Icons |
More than 1400 Free SVG icons for popular brands |
| Ionicons |
Premium designed icons for use in web, iOS, Android, and desktop apps. |
| Svg Porn |
1000+ high-quality SVG logos |
| Browser Logos |
A repo for high resolution web browser logos |
| Heroicons |
Not so large but quality set of filled and outline svg icons |
Product & Image Mockups
| Websites |
Description |
| Screely |
Generate Website Mockups Instantly Without Complicated Software |
| threed.io |
Generate 3D Mockups right in your Browser |
| ShotBot |
A screenshot builder for android and ios.(currently not accepting new accounts) |
| SmartMockups |
Generate stunning product mockups. |
Online Design Tools
| Websites |
Description |
| ShapeFactory |
One stop of design tools including Logos, Pigments, Gradient, Duotone, Illustrations. |
| AngryTools |
Another great all rounder design tool. |
| Smart upscaler |
Enlarge and enhance images automatically using AI. |
| neumorphism.io |
Generate Soft-UI CSS code. |
| Grid.malven |
A simple visual cheatsheet for css grid. |
| TinyPNG |
Website for smart PNG and JPEG compression. |
| Remove.bg |
Remove image background 100% automatically and free. |
| Online png tools |
A collection of useful PNG image utilities for working with PNG graphics files. |
| Bootswatch |
Collection of free themes for Bootstrap. |
| GraphicBurger |
Tasty design resources made with care for each pixel |
| Blobmaker |
Quickly create random, unique, and organic-looking SVG shapes. |
| Personas |
A playful avatar generator for the modern age. |
| CodingHeros |
Jonas's resources for building great websites with html, css, javascript. |
| You Don't Need jQuery! |
A great blog post stating why you don't need jquery. |
| Brumm.af |
A great online tool for easily creating layered box shadows |
Extensions
| Websites |
Description |
| Picture-in-Picture Extension (by Google) |
Watch video using Picture-in-Picture |
| Page Ruler Redux |
A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page |
| WhatFont |
What Font allows you to know the font name, its family, color, style, size, position. |
| Just Color Picker |
Сolor picker for web designers and digital artists, created by a designer and digital artist. |
| GoFullPage |
Capture a screenshot of your current page in entirety and reliably without requesting any extra permissions! |
BONUS : You made it to the bottom of the list. So here's a bonus for you.
Thanks for reading. Show some love if you like the post.
Don't forget to share your favourite tools that helps you in development in the comments.
Find me around web 🕸:
Top comments (29)
Have you checked out grayscale.design?
You can generate a color palette using luminance (aka color values). This way you could design in grayscale to nail the contrast and then easily swap in colors of those same values without messing up your contrast ratios.
Today I Learned.
Great List👍We have also prepared a list on Opensource web development tools and a series on Awesome Design Resources for every developers.
I love how organized this is.
Thanks a lot ender 😌
Thanks for sharing this, some really cool tools there.
Just Few corrections,
in the UI graphics category, column 1, typo: DwarKit -> DrawKit
Under icons : IconBros url doesnt work. 502 Error
Under mockups: You cant use ShotBot unless you have an existing account. You cant create a new account currently.
Thanks a lot for the updates. 😊
I have Changed the list accordingly.
Hope you'll like my new post : Understanding JS scope rules
A great list, thanks!
If I might, I'd also add brumm.af/shadows to the list, it's a great tool for creating shadows in pure css.
Thanks for the suggestion. Its really good. This is why I love 💛 this community so much.
Added your suggestion to the list.
Thanks for this awesome list! Would be great if you add Heroicons to the icons section.
Thanks for the suggestion.
I have seen the website. Surely gonna add that to the list!
Thanks for the amazing list. 👍
You are most welcome 🤠
Thanks
You are most welcome! 😄
Thank you for this!
You are most welcome 🤠
okay this post goes right in my bookmark toolbar, great work
Some comments may only be visible to logged-in visitors. Sign in to view all comments.