Best design resource websites
I am going to provide some of the best design resources that every developer should bookmark and this was a really cool article I read on dev.2. In dev.2 it compiled all of these and these are things that will make your website from good to great. There is a heap of great graphics design ones here, including things for UI, UX, wireframes, mockups, and much more.
100 Daily UI free:
It’s a first resource here is a UI library and it is a compilation of Figma libraries and products and elements and screens and all sorts of cool stuff so that you get an idea for colors and components and shapes that you can use straight away it’s made by Yan here and it has a free commercial and personal use license and you can get started with it immediately you can support the creator by actually donating to him here as well but this is a really cool one because a lot of you guys can essentially be hard to create when you don’t have something in mind and this just gives you some inspiration and some ideas and gets you started for that.
 |
| image credited by Dev.to |
Free 100 Daily UI Challenge:
Our next resource here is for icons and it’s called icon 8, it’s a website that gives you a little bit more interesting options when you’re looking for maybe a vector illustration or a design if we take a look at their website it looks cool it’s got a nice little search here so we could search for say communication and we’ll get lots of different types of styles and icons that relate to that tag and it doesn’t just do illustrations it does stock photography does music it even does emoji or AI-generated faces.
 |
| image credited by Dev.to |
Invision App:
So it’s another resource that makes you create websites that are a little bit more interesting rather than just using bootstrap icons which I know that a lot of us end up using or maybe even just fun awesome they’re doing a lot of stuff when it comes to workflows and prototypes and UI but they also provide a heap of design resources and this is stuff like maybe UI kits if, for example, you wanted to build out an app say for maybe gym and exercise they’ve got you covered with a full UI kit here or for example if you’re doing food and recipes they’ve got a design for that too they even have mock-ups for things like the iPhone or maybe dashboards or if you’re using material UI or IOS 12 to create an app design you’ve got that cover too they’ve got icons and lots of other stuff they’re cool and worth checking out because essentially it doesn’t cost anything and you’ve got those resources ready.
 |
| image credited by Dev.to |
Uplabs:
Our fourth resource is a little bit different because they focus on really high-quality content this means that when they’re doing UI whether you’re trying to create a website or an application or even icons you want to do the very best job you want to get the best resources out there and this is where they come into play they both have free and paid resources that are focused for developers and designers made by developers and designers and they curate these into a group.
Where you get the best of the very best and this isn’t just maybe one screen or a couple of UI components this is everything ready to go and this is why it’s so cool you can see the difference in quality when you jump onto uplabs.com and just have a look at some of the UI kits they have available so it’s something that I’ll probably check out in the future when I’m building an app and I just need some ideas or maybe I just need a design.
 |
| image credited by Dev.to |
Undrawn:
This next one of mine is quite a favorite it’s an open-source illustration website where you get a vast majority of different varied types of illustrations that you can download directly as SVG or PNG but what’s cool is just the scope and quality of these if we take a look we get a varied amount of different situations.
Where maybe you want to open a folder or a document or you want to show an avatar or process there are naming conventions for all of this and you can search something like the post and we’ll get many icons here or essentially illustrations that represent this sort of a tag but what’s more, is that we can even change the color we can select a color of green or red or blue and all of these update accordingly and then we can simply click and download it immediately to use in our project and that’s awesome now depending on what tools you use to create your UI you might use different resources.
 |
| image credited by Dev.to |
Sketch App Sources:
Now if you’re using a lot of sketches there is a resource out there that comes with lots of pre-made wireframes UIs and icons this is our sixth item here as a resource and we take a look at it essentially comes with pre-made UIs icons wireframes stuff for the web IOS material UI all sorts of stuff and if we have a look at some of these we can probably just select one we can see how many views and downloads it has it’s got some tags we can click to download it directly we don’t have to go through any of that extra stuff like signing up our email address it just downloads the stuff immediately for us to be able to use and that’s pretty awesome as well.
 |
| image credited by Dev.to |
Paatterns:
Next up is a resource for doing maybe backgrounds or just adding a little bit of flair into your designs and this is called patterns spelled with a few extra a’s what it is is a collection of beautiful vector format sort of shapes and repeating patterns that you can utilize in your next website and they work on any platform so whether you’re on sketch or Figma adobe xd illustrator or even just a document.
You’ll be able to download a lot of these patterns and start using them if we take a look at their website we can see that you can immediately click to download or you can read a little bit more about them and what kind of stuff you get there are 22 curated patterns here that you can utilize with different shapes and colors and emotions and you can just pick and design whatever you need but it’s a good place to go if you do need a background pattern or something in that aspect that you want to apply to your website to make it look a little bit better.
 |
| image credited by Dev.to |
Drawkit:
Our next free resource here is called draw kit and there are a bunch of illustrations and icons which are hand-drawn that you can use for your next website if we take a look at their actual website currently we can see what we mean by these are quite nice looking examples of different illustration packs that you can use here’s one for transportation and we can see just that hand-drawn feel where everything looks very polished and very unique and also very high quality at the same time.
If we jump onto their icons we also get a lot of line type icons here at the top as well as other types so, for example, we could select here for education and we get a bunch here for an education that we could use we don’t just get the outlines and the solids but we also get color versions of them with a bit of gradient or maybe flat colors so there’s a lot of options in here and all of these are free.
 |
| image credited by Dev.to |
ManyPixels:
For your next website, too many pixels is another great resource while their focus is to essentially focus on businesses that maybe don’t want to hire a graphics designer so they do the designs themselves they also have a great resource here for illustrations and this resource if we take a look gives us very similar stuff to what we see in Unsplash where we can pull up royalty-free illustrations we can select a color or a theme and from that, we’ll be able to download an SVG or a PNG and these are all very high-quality examples.
There are 24 pages of different tags I’m going to select marketing as an example we can see that we get several market stuff here for like social media or Facebook posts or emails and all of these look pretty cool I’m going to select maybe a better shade of green here just so that it looks a little bit more friendly or we could even pick black and hopefully black just looks good too.
 |
| image credited by Dev.to |
Humaans:
Another example of resources like Unsplash that I already use and love our next resource here is called humans with a few extra a’s and this is a website that provides you with illustrations of people and they come in a mix and match of different say shapes and sizes and positions you can customize a lot in here you can customize what they’re wearing what colors they have where they’re standing what their hairstyle is like you can customize pretty much anything you need so that way you can fit them into your website to do whatever interaction you might want them to so that maybe you want them to promote a call to action or a phone number and pointing in a certain direction you’ll be able to do all of that and I think that’s a pretty cool resource.
 |
| image credited by Dev.to |
Avataaars:
I like this one I’m going to have to test it out one day for my website and see how I can essentially incorporate this one and if you don’t want a whole human you can just grab the face avatars is another resource that does just this it also has a few extra a’s and if we take a look at their website here we see that we get a wide variety of different options.
You can download the library and that’ll go straight into the sketch as well you can also try out their web editor and in here we’ll be able to select what type of person we want so we can grab maybe a winter hat we have glasses maybe blue as the style we can customize the shirt to be a hoodie and now it looks like an apple fan and if you’re designing a hero image.
 |
| image credited by Dev.to |
Free illustration:
Which is a website that does free background images for awesome landing pages they’ve got several high-quality backgrounds that you can start using for your next website I know that I always have trouble creating good hero images sometimes the image just doesn’t look right or I’m not getting the right style whereas here we get a vast collection of essential different styles different colors different use cases that we can start using in our next website immediately and it even gives us an example of what the content might look like if you start putting it in they’ve got a free version and a high-quality purchase version too if you want to go down that route.
 |
| image credited by Dev.to |
FreebieSketch:
This is another resource here that provides free sketch designs wireframes and illustrations if you’re using Sketch-up I’m on windows so this might not work for me but for those people who are for example on mac and are using sketch they’ll be able to jump in here and grab some of the free and premium resources that they have available and these are all sorts of stuff even like for an app kit for maybe food it’s nice and easy it’s pulled herein through notion and it even has some stuff here for tailwind CSS as well so that’s pretty cool.
 |
| image by credited by Dev.to |
Blush:
This next one is actually a collection of illustrations from all around the world from some really cool designers and it’s called blush it has free customizable illustrations with the Figma plug-in if we take a look at their website we see just how much content they have here they have the option to select different artists or different collections and you can pull out the kind of designs that you like here if we select this one for a poster we can download this one as a small PNG or if we get a premium version we can obviously get larger or SVGs but we can also customize it too and that makes it a lot more flexible depending on what you want you can also check out different artists in here and depending on the style that you like maybe you pick one that essentially has a type of maybe icon that you want to use for your website.
So if you’re doing this one here you’ve got a number of beverages and these are really cute cool little icons that you might want to use for your website or you can do a different style here like this one where you’ve got a number of different people doing different stuff we’ve got some paid content here as well as some free content now obviously I’ll be going for the free content but if you do want to go for the paid option then there is a tool here to sign up and go for a premium plan the plans do have a bit of payment here but it’s only 12 a month which isn’t too much.
 |
| image credited by Dev.to |
IRA Designs:
It is an open-source gradient illustration collection by Tim and they come with several things here that work with SVG’s and PNG’s and AI files we’ve got different characters and objects and shapes that we can use and they’ve got a cool number of positions here so we can move them about how we want we can also pick out what kind of colors they have so that way you can sort of get them to work with this style of your website and they’re ready to use so you can click on any type of these.
I’m going to grab, for example, this laptop as an SVG in the future we could use this as part of maybe a hero banner or something like that but it’s just another resource similar to Unsplash that just looks a little bit better and gives you a bit more tools when you’re designing your next website.
 |
| image credited by Dev.to |
UI Design Daily:
Our next resource here is UI design daily and there are free open source UI design resources that give you lots of little components and little things you can use for maybe drop downs or maybe landing pages or even this one here for web courses I actually like this one here this one is joining the traversing media mailing list with web courses and developments it’s got some really nice colors here you can download the file and when you do you get a nice sketch file here and it’s got tags as well so this is a really cool one even if you’re just looking for a bit of inspiration or ideas of how you might want to do a different type of component because sometimes.
When you’re stuck you just don’t know what you’re trying to do and let’s see we can also do little filters by tags here so I’m going to select breadcrumbs and we’re going to see how a few of them are designed I like this one here and this one is just nice and simple and we can download that one and that comes in as a sketch file as well I can’t open sketch files on windows so I’m just going to pretend that didn’t happen but otherwise if you do then you can jump on mac and you can use this one too.
 |
| image credited by Dev.to |
UI Space:
Is also very similar if we go to their website they have a number of different components and icons and screens the good thing about this is that you have a free and a paid version and they don’t just do sketch you can actually grab one as a PSD so we’ve got for a social media banner and when I select to download it does come as a PSD and otherwise if we have a look here they also do fonts and icons they also have illustrations they’ve got direct sketch items that you can use for your next design as well as scripts.
I guess maybe these are JavaScript let’s have a quick look this one is a CSS toolkit but this one over here is flexbox toggle and if I click download on that what does it come with let’s take a quick look so that’ll be done in just four three two one and it goes to a code pen oh that’s really cool so this is a quick resource with some HTML and some CSS that automatically updates as I click on it that’s really cool I like this one so yeah this is UI Space.net definitely worth checking out I definitely like to check out a few of these more scripted examples because I can see myself using them if I wanted to create something if you download other ones here maybe they come in as a zip with a PSD and a PNG that you can also utilize as well.
 |
| image credited by Dev.to |
Open Doodles:
Our last one here is called open doodles and it’s a free resource of illustrations of different types of people and shapes and stuff that you might want to use for your next website there is cool stuff here from illustrations to examples to even some compositions that you can use and these are very creative and unique and you can probably update the colors depending on what you want.
 |
| image credited by Dev.to |
Conclusion:
So if you guys ever have a chance check out these above websites and have a look at some of the templates or freebies anyway I hope you guys enjoyed this informative article and share this post on your social media as well. Thank you for reading.
This is one of the most comprehensive articles I’ve enjoy reading on this topic. Kudos!