When I first got started designing websites, it seemed like there were endless possibilities. I could do anything I wanted to. Which was both amazing and terrifying! It seemed like designing the coolest stuff and making things look just the way I wanted was taking me forever.
Then I discovered that there were all these really neat tools and resources available that could seriously speed up my web design process and let me create amazing looking designs without having to start completely from scratch. Mind. Blown.
This summer, Randle Browning brought you an awesome list of 63 free website-building tools and resources. She had all sorts of amazingly cool stuff on the list. But now I’m adding my favorites to it here, to bring the total number of awesome free resources to 99!
Design Resources
1. Creative Market
Before you do anything else, go get on the Creative Market newsletter list. Once a week, you’ll get an email packed with 5 free downloads, including everything from patterns and fonts to templates and themes.
Before you do anything else, go get on the Creative Market newsletter list. Once a week, you’ll get an email packed with 5 free downloads, including everything from patterns and fonts to templates and themes.
SOFTWARE + APPS
2. CoffeeCup Software
They offer up all sorts of free apps for web designers, including an HTML editor, web form builder, shopping cart designer, and many others.
They offer up all sorts of free apps for web designers, including an HTML editor, web form builder, shopping cart designer, and many others.
3. InVision app
Powerful prototyping and collaboration tools. You can get high-fidelity mockups and prototypes in just minutes.
Powerful prototyping and collaboration tools. You can get high-fidelity mockups and prototypes in just minutes.
4. Pixlr
Edit images right in your browser.
Edit images right in your browser.
5. Canva
Amazingly easy graphic design software that anyone can use. The search and drag function is so simple and helpful!
Amazingly easy graphic design software that anyone can use. The search and drag function is so simple and helpful!
6. Easel.ly
Awesome free infographic templates.
Awesome free infographic templates.
PHOTOS
7. Unsplash
Some of the most gorgeous free stock photos out there, and with tons of variety. New images are added every day.
Some of the most gorgeous free stock photos out there, and with tons of variety. New images are added every day.
8. PicJumbo
Get free photos delivered to your inbox that are totally free for personal and commercial use.
Get free photos delivered to your inbox that are totally free for personal and commercial use.
9. Gratisography
Free high-resolution images that you can use in personal and commercial projects. They have easy-to-browse categories: animals, nature, objects, whimsical, and more.
Free high-resolution images that you can use in personal and commercial projects. They have easy-to-browse categories: animals, nature, objects, whimsical, and more.
10. Compfight
Search tons of images licensed for personal and/or commercial use, mostly from Flickr.
Search tons of images licensed for personal and/or commercial use, mostly from Flickr.
11. IM Free
Curated web design resources, including a ton of categorized photos, plus icons and templates.
Curated web design resources, including a ton of categorized photos, plus icons and templates.
12. Stock Up
Search over 9,000 photos from 26 different websites, all in one place.
Search over 9,000 photos from 26 different websites, all in one place.
13. Death to the Stock Photo
Get on their email list and get their free photo packs in your inbox once a month.
Get on their email list and get their free photo packs in your inbox once a month.
14. Little Visuals
If you join their list, you’ll get 7 free high-res photos emailed to you once a week.
If you join their list, you’ll get 7 free high-res photos emailed to you once a week.
15. New Old Stock
Get free, vintage photos from public archives.
Get free, vintage photos from public archives.
16. Cupcake
Free, high-res photos by Jonas Nilsson Lee.
Free, high-res photos by Jonas Nilsson Lee.
17. Pexels
10 new free stock photos every day.
10 new free stock photos every day.
18. Magdeleine
1 free high-res photo per day.
1 free high-res photo per day.
19. SplitShire
Free, high quality stock photos by an Italian photographer.
Free, high quality stock photos by an Italian photographer.
20. ISO Republic
High quality stock photos marketed to creatives.
High quality stock photos marketed to creatives.
21. Paul Jarvis
Sign up to get 20 of Paul Jarvis’s top photos for free.
Sign up to get 20 of Paul Jarvis’s top photos for free.
SYMBOLS + ICONS
22. Pixeden
Tons of free icon sets, including weather icons, social icons, line icons, and many others.
Tons of free icon sets, including weather icons, social icons, line icons, and many others.
23. Iconmonstr
More than 2800 boldly graphic icons in a few different styles.
More than 2800 boldly graphic icons in a few different styles.
24. Captain Icon
Over 350 free vector icons for mobile and web designs.
Over 350 free vector icons for mobile and web designs.
25. Linear Icons
An icon font with 170 different icons to choose from.
An icon font with 170 different icons to choose from.
26. Font Awesome
A symbol font that allows you to add symbols to your websites.
A symbol font that allows you to add symbols to your websites.
27. Fontello
Generates icon font packs.
Generates icon font packs.
28. flaticon
Download vector icons or include icons as webfonts.
Download vector icons or include icons as webfonts.
29. The Noun Project
Search a noun, get a free symbol or icon.
Search a noun, get a free symbol or icon.
30. Endless Icons
Free icon library.
Free icon library.
31. Perfect Icons
Customize and optimize social media icons for your site.
Customize and optimize social media icons for your site.
32. iconSweets
60 free vector Photoshop icons.
60 free vector Photoshop icons.
33. Round Icons
Free quirky and professional icon bundles.
Free quirky and professional icon bundles.
FONTS
34. Google Webfonts
Add fonts to your website in just a few clicks.
Add fonts to your website in just a few clicks.
35. typegenius
Font pairing generator.
Font pairing generator.
36. Font Squirrel
Hundreds of totally free fonts.
Hundreds of totally free fonts.
37. Beautiful Web Type
Check out a curated collection of the most beautiful Google Webfonts.
Check out a curated collection of the most beautiful Google Webfonts.
38. Lost Type
Gorgeous pay-what-you-can fonts.
Gorgeous pay-what-you-can fonts.
COLORS
39. Material UI
A gallery of Material Design and flat design colors to use in your designs.
A gallery of Material Design and flat design colors to use in your designs.
40. Paletton
Start with any color and get a palette (with 5 shades per color) based on a few different color scheme patterns: monochromatic, adjacent, triad, tetrad, or custom.
Start with any color and get a palette (with 5 shades per color) based on a few different color scheme patterns: monochromatic, adjacent, triad, tetrad, or custom.
41. Design Seeds
Tons of great color palettes taken from photographs. You can search by keyword or for similar colors.
Tons of great color palettes taken from photographs. You can search by keyword or for similar colors.
42. Adobe Color Wheel
Choose from different types of color pairings and save your color palettes.
Choose from different types of color pairings and save your color palettes.
43. Material Palette
Generate a color palette based on 2 colors.
Generate a color palette based on 2 colors.
44. Flat UI Color Picker
The name says it all.
The name says it all.
45. Flat UI Colors
Ditto.
Ditto.
46. Bootflat
Flat color picker.
Flat color picker.
47. Coolors
Color palette generator.
Color palette generator.
48. Skala Color
Free color picker download.
Free color picker download.
49. BrandColors
Check out the exact colors that major brands use.
Check out the exact colors that major brands use.
50. 0 to 255
Find the perfect color variation you’re looking for.
Find the perfect color variation you’re looking for.
51. Colour Lovers
Browse user color palettes and add your own to the community.
Browse user color palettes and add your own to the community.
52. Palette for Chrome
Generates color palettes based on images.
Generates color palettes based on images.
BACKGROUNDS + TEXTURES
53. Pattern8
Tons of funky, bold, and bright repeating patterns to choose from.
Tons of funky, bold, and bright repeating patterns to choose from.
54. Repeat-X Repeat-Y
Amazing repeating patterns from around the world.
Amazing repeating patterns from around the world.
55. Texture King
All the textures you could ever want: grunge, rust, plaster, concrete, dirt, and many more.
All the textures you could ever want: grunge, rust, plaster, concrete, dirt, and many more.
56. Patternico
Create your own patterns using Font Awesome icons. Customize the background color, canvas size, and shape transparency.
Create your own patterns using Font Awesome icons. Customize the background color, canvas size, and shape transparency.
57. Subtle Patterns
Free downloadable patterns.
Free downloadable patterns.
58. Lost and Taken
Free textures in a ton of categories, including cardboard, stone, metal, bubbles, seamless, and more.
Free textures in a ton of categories, including cardboard, stone, metal, bubbles, seamless, and more.
59. BG Patterns
Create seamless patterns with customizable colors, shapes, and more.
Create seamless patterns with customizable colors, shapes, and more.
UI KITS/GUIDES
60. 55+ Elements Free UI Kit
A clean, modern UI kit. Be sure to search around on the Behance website for tons of great resources from other designers!
A clean, modern UI kit. Be sure to search around on the Behance website for tons of great resources from other designers!
61. Oh no, not another UI Kit
A simple, flat, open source mobile and web UI kit that comes as a PSD file.
A simple, flat, open source mobile and web UI kit that comes as a PSD file.
62. PSD Booster Freebies
Tons of great Photoshop freebies, including UI kits, themes, and more.
Tons of great Photoshop freebies, including UI kits, themes, and more.
63. Material Design Guidelines
The official guide to Google’s Material Design standards.
The official guide to Google’s Material Design standards.
Development
DOMAIN NAME SEARCH ENGINES
64. Namemesh
A powerful domain name search engine that helps you find domains that are short, fun, common, similar, and various other qualifiers.
A powerful domain name search engine that helps you find domains that are short, fun, common, similar, and various other qualifiers.
65. Nameboy
Enter a keyword or two and get a list of available domains that incorporate them.
Enter a keyword or two and get a list of available domains that incorporate them.
66. Panabee
Describe what you want in two words and Panabee will generate a list of potential domain names.
Describe what you want in two words and Panabee will generate a list of potential domain names.
67. Impossibility
Generate random domain names based on one word.
Generate random domain names based on one word.
68. LeanDomainSearch
Search for a domain name by keyword.
Search for a domain name by keyword.
FRAMEWORKS, TEMPLATES, CODE PACKS, + THEMES
69. WP-Flex
A blank, responsive WordPress theme boilerplate that follows the official WordPress Codex best practices and requirements.
A blank, responsive WordPress theme boilerplate that follows the official WordPress Codex best practices and requirements.
70. Foundation
An advanced responsive framework that’s one of the most popular out there.
An advanced responsive framework that’s one of the most popular out there.
71. Ionic
Create mobile apps using the web technologies you know and love.
Create mobile apps using the web technologies you know and love.
72. Initializr
Quickly generate a template based on HTML5 Boilerplate.
Quickly generate a template based on HTML5 Boilerplate.
73. Materialize
A modern, responsive framework based on Google’s Material Design specifications.
A modern, responsive framework based on Google’s Material Design specifications.
74. WordPress Plugin Boilerplate
If you want to create WordPress plugins, the Plugin Boilerplate is a standardized, object-oriented starting point.
If you want to create WordPress plugins, the Plugin Boilerplate is a standardized, object-oriented starting point.
75. Front-end Boilerplate
A basic starting point for creating your websites so you don’t have to recreate everything from scratch each time.
A basic starting point for creating your websites so you don’t have to recreate everything from scratch each time.
76. HTML5 Boilerplate
The first and the best. Free HTML5 boilerplate code.
The first and the best. Free HTML5 boilerplate code.
77. HTML5 UP
Free fully responsive HTML5 template.
Free fully responsive HTML5 template.
78. 1 Line CSS Grid Framework
A framework for CSS that’s only 1 line long!
A framework for CSS that’s only 1 line long!
79. 960 Grid System
A Skillcrush favorite.
A Skillcrush favorite.
80. Starkers for WordPress
A basic template for developing your first WordPress theme.
A basic template for developing your first WordPress theme.
81. Barebones for WordPress
Free WordPress template for developers.
Free WordPress template for developers.
82. Underscores
WordPress template for building out a brand new theme.
WordPress template for building out a brand new theme.
83. Sage for WordPress
A WordPress starter theme based on HTML5 boilerplate and Bootstrap.
A WordPress starter theme based on HTML5 boilerplate and Bootstrap.
84. Whiteboard for WordPress
A clean, basic WordPress theme for developers.
A clean, basic WordPress theme for developers.
85. Bootstrap
A responsive HTML, CSS, and JS framework.
A responsive HTML, CSS, and JS framework.
86. Bootswatch
Free themes for Bootstrap.
Free themes for Bootstrap.
CODE STYLE GUIDES
87. Web Field Manual
A collection of resources, best practices, inspiration, and reference materials for modern coding. There are also sections filled with tools and additional resources and language-specific information.
A collection of resources, best practices, inspiration, and reference materials for modern coding. There are also sections filled with tools and additional resources and language-specific information.
88. Google Developers Web Fundamentals
A comprehensive resource for web development best practices, right from Google. Perfect for both new developers and those who want to make their projects better.
A comprehensive resource for web development best practices, right from Google. Perfect for both new developers and those who want to make their projects better.
89. Deployments Best Practices
Before you deploy a website or app, be sure to check out these best practices to make sure everything goes smoothly.
Before you deploy a website or app, be sure to check out these best practices to make sure everything goes smoothly.
90. GitHub
GitHub’s very own code style guide.
GitHub’s very own code style guide.
91. Google
Google’s code style guide.
Google’s code style guide.
92. Mozilla
A code style guide from the pros at Mozilla.
A code style guide from the pros at Mozilla.
CODE VALIDATION
Wrap up loose ends in your code by checking to see that it meets standards of accessibility, style, and industry best practices.
93. w3schools.com
94. Web Design Group HTML Validator
95. Validome
96. Validator.nu
97. Code Beautify
98. JSLint
99. Free Formatter
94. Web Design Group HTML Validator
95. Validome
96. Validator.nu
97. Code Beautify
98. JSLint
99. Free Formatter
0 Comments