Latest free & paid resources for web developers & designers.

By InDesign Media | May 8, 2020 | 4889 Views

May 8, 2020

By InDesign Media

Latest free & paid resources for web developers & designers that are very useful. Increase development & design works speed.

We have been working on this fields since a long period of time and as a developer, we know it can be tough to find good resources as far as creating websites and user interfaces. Also, we know that there’s a lot of really really great developers that aren’t that good with design. And, to be sure that whatever you add is free, you can make a pull request. Put it in the right category.  

When will it come?

For sure, it is not already here. So, there are the categories we know about. Ui graphics, fonts, icons, stock videos and photos, vector, HTML, CSS, templates, frameworks, CSS frameworks, react view and angular, UI libraries design systems and style guides, online design tools, and downloadable software.

Best resources for developers

In addition, here we will be going through some of these. Additionally, UI graphics is going to be your sketch Figma, PSD files, and so on. Ui design is really one of the best. Not to mention, there are thousands of best modern looking Ui components and you can easily download the files if you want. 

But, copying the whole template is not the best idea. Rather than copying, using it as an inspiration can be better. In other words, while creating something like a login page, you can just look at the template and try to recreate it with HTML and CSS.

Infographics & Libraries 

Likewise, there are some others too and this one has the Figma uh design elements and screens stuff like infographics. Humans, which is a library of the people illustrations are seen to be the design trend in this period. Also, you can pattern the same thing and can also download this for you. 

Also, try to know about all these different software platforms. We have got uh animation.co here so that you can easily create different gif icons animations.

List of font sites

After that, we have google fonts. Google Fonts is one of the most popular fonts. Not to mention, there are some other font sites too which are worth checking out. Additionally, there are also some tools to find out what fonts are on the web page without having to go to the dev tools. 

You will get the tiff there which you can easily compare and contrast different fonts. Moreover, you can also put them on top of each other and compare them. Font Awesome is also one of the best with material icon features. Not to mention, there you can find different sets of fonts that you can easily customize. In addition, you can easily use them by downloading the package.

Design System

Moreover, we have general style guides and a design system like google’s material design. But, there are several different companies like apple. so these are the apple design resources, Thus, it tells you a lot about whatever design philosophy and stuff like that.

In addition, you can also download the files and there are a lot of codes that you can use. Not pretty sure about the apple but if you go to the audio you will get the exact resource information like the size and the exact colors. There is the GitHub repo for it.

How to use?

Not sure about the exact guidelines on how to use this stuff of the design systems from companies like that. In addition, it is absolutely free to use on whatever you want but there are generalized systems like this and design. Also, there are actually like and react view components that you can use with the system.

UI Design

Etrade Microsoft fluent UI also looks pretty cool. So, this is similar to the Microsoft framework or the design system Pluralsight Mozilla protocol. This is the design system for the Mozilla and the firefox websites. Thus, it is really good and even if you don’t use it directly, you can get some ideas fro it. In addition, we have some of the online design tools like Figma. Figma is one of the popular online design tools.

Similarly, there are free as well as paid version options. So, if you want to create the website wireframe here, you can easily do that. Some of these might be free and free as well. If you want to remove the background from the image you can simply use this tool. A lot of these are just a small tool.

Photo & Video Resources

There are a bunch of stock photos and its absolutely free. For best stock photos there are several sites like pixels and Unsplash. Also, these sites have thousands of high-quality photos.

Similarly, you can easily search for the desired quality photos on the basis of color, size, quality, etc. Like stock photos, there are several stock video websites too. Also, you can search the video you want and download and use it for free.

Stock VIdeos Websites

Additionally, we have some different stock videos websites, vectors, and clip art. If you also want stuff like icons and images, you can easily get there. Many vector sites are somehow similar but they all have different resources packs. For example, if you are creating an e-commerce website. There you will need some products and images. Thus, you can easily find the images of the categories that you are searching for in vector websites.

HTML & CSS Recources

Now, let’s have a look at HTML CSS templates. So, html5 up has a lot of different and nest templates. Template mo color lib, one of the best templates is pretty cool. Not to mention, you can find several categories like real estate, banks, hospitals, restaurants. So, when you visit the site and have a look at templates, you might want to download one of those. We are pretty sure that some of the guys know a lot about this tailwind bootstrap material.

Boostrap and some of the other popular ones tend to be heavy. Then we really have Ui and CSS components and kits. There aren’t frameworks that are lighter and also give you the best.

UI Components

Notably, there are several uh UI components, some with javascript functionality design blocks. We thought that was pretty cool. These are not the images, these are like the CSS components that you can download and use.

Here, we have stuff for the react so material UI chakra react-bootstrap. It is a pretty cool framework for building admin applications or admin interfaces. Not to mention, it directly works with APIs like any JSON API or firebase. It is too buffy based on the Bulma, the Bulma CSS framework. Some other stuff here quasar angular so we have a material angular bootstrap. In summarize, If you want to use bootstrap with angular then it can be really cool.

Conclusion

First specific things logo maker color scheme generator. So, if you want to generate the color scheme that makes sense, you can make a palette uh. If you want to build out the site map you can use it to build out database tables and the stuff as a visualization whiteboard online drawing tool.

How to make cartoon photos?

That’s why some of these might not be that useful. Similarly, if you want to make a cartoon photo of you know a real photograph and downloadable design software gimp that is very similar to photoshop. But, free blender for 3D modeling some of the other ones here pencil project and then some of the inspiration like the dribble and some of the other sites that I found. In addition, there are tons of stuff and here you can find something that is very useful.

UI & Graphics Resources​

Resources and websites with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI

Font Resource​

List of websites that offer free fonts as well as font based tools

Website	Description
Google Fonts	Library of around 1000 free licensed font families
DaFont	Archive of freely downloadable fonts
Use & Modify	Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces
1001 Free Fonts	I think the name speaks for itself
Font Squirrel	It scours the internet for high quality, legitimately free fonts
Font Fabric	A digital type foundry crafting retail fonts and custom typography for various brands
What Font	Tool for finding the fonts of a website without having to search in the devtools
Tiff	A type diff tool that visually contrasts the differences between two fonts
Font Flame	Tool for pairing fonts to see how they look together
TypeKit Practice	Learn about typography practices
Fontjoy	Generate font pairing in one click
Golden Ratio	Golden Ratio Typography Calculator
FontSpark	Discover Better Fonts
FontPair	Helps you pair Google Fonts together
Free Stock Music	Royalty-free stock music for YouTube videos, podcasts, etc
Abstract Fonts	Fonts free for personal and commercial use
Free Typography	A list of high quality fonts
Leon Sans	A geometric sans-serif typeface made with code
Lexend	Variable font empirically shown to significantly improve reading-proficiency
Fonts for Apple Platforms	Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps
SFWin	San Francisco Fonts for Windows 10 and non-Apple Platform
Font Flipper	Preview 800+ Google Fonts on top of your own designs, without having to download the fonts

Colors​

Websites and resources that help with choices related to colors

Icons​

Resources for Icons including font based, png, svg and more

Stock Photos​

Websites that offer free stock photos of all kinds for your websites and apps

Stock Videos​

Websites that offer free stock videos of all kinds for your websites and apps

Stock Music & Sound Effects​

Websites that offer free stock music and/or sound effects

Vectors & Clip Art​

Free vectors, clipart, illustrations, patterns and more

Product & Image Mockups​

Create mockups of devices and other products

HTML & CSS Templates​

Websites that offer free beautiful website templates and themes of all types

CSS Frameworks​

CSS/UI frameworks to help build great looking websites and applications

CSS Animations​

CSS animations to build awesome animations for websites and applications

UI Components & Kits​

Not quite “frameworks”, but tools for creating user interfaces with components or UI kits

React UI​

UI and component libraries for the React JavaScript framework

Vue UI​

UI and component libraries for the Vue JavaScript framework

Angular UI​

UI and component libraries for the Angular JavaScript framework

Svelte UI​

UI and component libraries for the Svelte Javascript compiler

Design Systems & Style Guides​

Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites

Online Design Tools​

All kinds of online tools for design, from photo editors to wireframing, and more

Downloadable Design Software​

Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop

Design Inspiration​

Here are some websites to get inspiration for design and UI

Share This To:

• 
• 
• 
•