All in one web design list to level up your designing skills
When I began researching for this list, I was surprised by the amount of free web design resources online. It showed me that the web design community is tight-knit and very supportive. With helpful individuals who put out free resources to help other developers, I knew I wanted to be a part of this community.
I've spent the last few days pouring over hundreds of free resources. This list sums up the best ones I could find. I hope you'll find this information as valuable and inspiring as I did. If you do, sharing this inspiration on social media may even inspire your friends to dive in, and will definitely inspire me to continue writing.
Screely is a tool designed for those who are tired of sharing boring screenshots of websites or designs. This tool is designed keeping two basic tenets in mind- simplicity and speed. Users don't need to know have knowledge of advanced design tools and principles to use this tool. The best feature of this tool has to be the speed.
It takes virtually no time to process the uploads and create beautiful mockups! Users don't have to worry about privacy, because Screely doesn't store any images!
WhatFontIs helps designers identify the fonts used in pictures and provides them with a download source. With a library of over 600K fonts (both for commercial or free use), This can quickly identify the fonts used in images, thanks to its advanced AI.
All you have to do is upload a clean image, let the tool separate the letters, and confirm the letters identified by filling the empty spaces shown. Once you've finished this process, WhatFontIs will show you over 60 lookalike fonts.
Figma is a tool that promises to revolutionize the way that design tools are used. This futuristic tool is designed to tackle some of the problems which designers face while using other tools. This tool claims to be the only platform which offers powerful design features along with functions to improve workflow.
A cutting edge vector tool which allows users to draw in any direction is just one of the many features. What's more, as it is device agnostic, FIgma will work on any platform!
PicMonkey is a web-based photo editing and graphic design tool. It comes with an impressive library of design assets, like fonts, graphics, and textures, over 2,400 customizable templates, photo enhancement tools, and also allows you to save your changes as you work.
With PicMonkey, you can create killer designs for your startup in no time. It's a great tool for creatives to use!
WebFlow is a great free web design resource for someone who wants to learn more. It has many design courses and tutorials for beginners and experienced designers.
Inspiration is so important for creating well-designed landing pages. You can scroll though Good Web Design for hours just looking at well-designed web pages.
This is a great web design resource for people who like creating art with CSS. A Single Div is a collection of CSS drawings by Lynn Fischer.
The CSS Design Awards is the go-to destination for understanding what’s trendy and appreciated. An amazing web design resource for someone who wants to see what’s popular.
In Pieces is a beautiful CSS wildlife exhibition. If you like funky web design, this resource is for you.
If you use email for your marketing, then you should look into this web design resource. Email Love has many beautiful email templates for inspiration.
Uijar has handpicked design inspiration for all your web design projects. It also has more design resources other than just web design resources.
The creator of Webframe, Calum, posts one new web design resource on this site every week. It’s a resource that keeps getting bigger.
An underrated aspect of web design is icons. Heroicons is a great web design resource for clean and simple SVG icons for UI.
Colors & Fonts is a web design resource with a curated collection of colors and fonts for effective communication design.
Laws of UX is a web design resource that helps you understand the dos and don’ts of UX design.
If you like discovering new color schemes in a fun way, colors.lol is a brilliant web design resource that describes colors in depth for your design needs.
You can use colouris to convert your color’s hex code to other formats for your web design.
Animations are valuable web design resources. Css effects lets you simply copy the CSS code for your desired animation from their site.
Single page websites have unique dividers. This site lets you customize your site’s shape dividers, making it a valuable web design resource.
OverAPI is a masterlist of API links for popular services. This is an essential web design resource.
This is a web design resource for 300+ CSS properties that you can use for your web applications.
Happy Hues is a curated color palatte library. Finding the right colors is very important, so this web design resource is a must-use.
This is a list of the best 50 fonts that you can’t go wrong with. Fonts are valuable web design resources.
This is a good minimal web design resource; you can find very sleek 1px icons for your project.
Blush is an easy way to make well-designed illustrations for your website. These are good for narratives or demonstrations.
Lapa Ninja is a great web design resource for landing page inspiration - they are very modern and up-to-date.
Stock images are a brilliant web design resource, and AllTheFreeStock has not only images but also music and videos.
You can use MagicPattern for super modern CSS backgrounds. Good backgrounds can substantially ameliorate a website.
You can use this web design resource to find icons in multiple formats like SVG, TSK, JSON, and more.
This is another CSS section separator generator for you to create unique sections for your web design.
If you’ve ever been intimated by CSS grids, this web design resources makes it simple for you to integrate this feature. Just set the numbers and copy the generated code.
This article teaches you how to build practical and well-designed CSS3 buttons for your web page.
This article compiles 40+ UI web design resources.
Use this article to learn how to work dynamically with SVG icons for good web design.
Take a look at 10 principles of good website design by Smashing Magazine - these will be valuable when you build your site.
Looking for a basic web design resource? This article will tell you exactly how to get started with HTML & CSS.
There’s more to web apps than development. Check out this guide to design for developers - an invaluable web design resource for developers.
Documentation is an important part of any development. Use this web design resource to keep your CSS documentation immaculate.
The most valuable web design resource is one that can make your website more accessible. Using this article to make your site disability-friendly.
This out-of-the-box resource can help you rethink your website labels. Take a look for yourself.
Smooth gradients are beautiful in web design. Use this resource to understand CSS gradients and how to optimize them for your site.
Diagonal boxed look super modern. Go through this web design resource to implement them for your site.
Buttons are supremely important for any website. This resource is everything you need to optimize your buttons.
Go through this web design resource to build seamless and well-designed forms for your site.
Disney is well-known for its animation. This resource applies Disney’s principles to UI design, making it a valuable web design resource.
Keep up with the times using this web design resource and rethink your text field design.
This is the ultimate web design resource for someone dipping their toes into CSS.
1 line can make a huge different in your web design. Use this resource to see how to modernize your site quickly.
Dark mode has become super popular for users and browsers. This web design resources tells you how to adapt to this new standard.
CSS can be tricky sometimes. The web design resource shows you some uncommon CSS properties that you can integrate into your website.
Make your website dynamic with CSS animations — this resources covers what you need to know to get started.
Prepare for the worst using this web design guide that teaches you how to modify your CSS code to adapt to any situation.
CSS drop shadows can be fun to play around with. The web design resource shows you how to optimize its utility and aesthetic.
Psychology is a huge part of UI/UX design. Use this psychological web design guide to create a great experience.
Responsive images can be really cool. This guide shows you how to adapt to this trend easily.
Explore hundreds of relevant resources to enhance your knowledge and skills.