Best design resource websites every developer should bookmark

we're going to check out some of the best design resources that every developer should bookmark and this was a really cool article i read on dev.2 by one of my favorite users theme selection in there he's compiled all of these and these are things that will make your website go from good to great if you don't know who i am i'm adrian from australia i do videos around design and development so without further ado let's just jump straight into it our first resource here is a ui library it's called 100 daily ui free and what it is 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 our next resource here is for icons and it's called icon 8. it's a website which 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 actually looks really 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 really relate to that tag and it doesn't just do illustrations it does stock photography does music it even does emojis or ai generated faces so it's another resource that really 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 our next resource here is actually brought to us by a huge company called envision app if you haven't heard of them before 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 really cool and definitely worth checking out because essentially it doesn't cost anything and you've got those resources ready to go our fourth resource here is called uplabs and they do things 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 definitely 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 ready to go this next one of mine is quite a favorite it's called undraw 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 really 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's naming conventions for all of this and you can search something like postage and if we do we get a number of icons here oh let's type in post actually we'll get a number of 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 here and download it immediately to use in our project and that's really awesome now depending on what tools you use to create your ui you might use different resources now if you're using a lot of sketch there is a resource out there that comes with lots of pre-made wireframes uis and icons called sketch app sources this is our sixth item here as a resource and we take a look at it 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 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 spelt 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 here to download or you can read a little bit more about them and what kind of stuff you get there's 22 curated patterns here that you can utilize with different shapes and colors and emotions and you can really 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 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 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 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 and ready for you to be able to use 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's 24 pages of different tags i'm going to select marketing as an example we can see that we get a number of marketing stuff here for like social media or facebook posts or emails and all of these look pretty cool i'm gonna 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 but it's 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 actually 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 actually 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 and i really like this one i'm gonna have to test it out one day for my own 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 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 then there's also free illustration which is a website that does free background images for awesome landing pages they've got a number of 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 freebie sketch is another resource here that provides free sketch designs wireframes and illustrations if you're using sketchup 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 here in through notion and it even has some stuff here for tailwind css as well so that's pretty cool 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 here 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 ira designs is an open source gradient illustration collection by tim and they come with a number of things here that work with svgs and pngs 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 actually click on any type of these i'm gonna 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 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 join 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 breadcrumbs and we're gonna 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 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 this one here for a social media banner and when i select 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 javascripts 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 uispace.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 and 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 really 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 but it'll just make your website pop out a little bit more when the client asks for it a big thanks to theme selection for this article here some really good ones that pop up on dev.2 so if you guys ever have a chance check out his website at themeselection.com and maybe have a look at some of his admin templates or freebies anyway i hope you guys enjoyed this video if you did hit like and subscribe otherwise i'll see you in the next one thank you

Channel: Adrian Twarog

Views: 186,841

Keywords: best design resource websites every developer should bookmark, css, js, code, javascript, react, website, graphics design, ui, ux, html, design resources, website design resources, web design resources, graphics design resources, ui design resources, themeselection, best design resources, icon resources, free ui kits, free icon packs, website mockups, app mockups, design templates, ui elements, vector icons, sketch ui, background patterns, ux ui, vector illustration, undraw, manypixels

Id: fAK9NxsR3es

Length: 16min 35sec (995 seconds)

Published: Tue Sep 22 2020