Free Tools for Web Designers
Something struck me as quite amazing while I built this site. Web development is one of the few skills that’s in high demand, and at the same time it’s accessible to anyone with a computer, an internet connection and enough free time on their hands.
Here's a list of free stuff to tackle your own web design project. Tools that let you write, design and code your project. Resources for different creative assets, from photos to fonts and icons. And helpful guides that help you understand the basics of code, design and copy. This list is by no means complete, but it may help you get your project off the ground.
Figma is quickly becoming the standard for wireframing, designing, prototyping and collaborating.
It's easy to use, runs in your browser and it's free for small projects.
Start designing with Figma
A free, browser-based Photoshop alternative.
While I used Figma for all SVG-related work, Photopea helped me resize and edit actual photos.
Check out Photopea
My go-to resource for web fonts. Google Fonts has a great library, it's easy to use, and of course, free.
(And if you want to self-host your Google fonts, whether for performance or privacy reasons,
this tool gives you the right font formats
and the matching CSS.)
Find fonts on Google Fonts
Helps you create colour schemes. I learned on this project that a handsome yet practical colour scheme can be hard to compose.
Coolors lets you quickly skip through colour schemes. When you like a colour, “lock" it and continue your search based on your “locked" colours.
Create colour schemes on Coolors
Find existing colour schemes. If you don’t want to create your own colour scheme, just go to Color Hunt and pick one you like.
Find colour schemes on Color Hunt
I'm not a fan of stock photography, but I'm also not a photographer. So taking my own photos is quite a hassle.
That's where Unsplash comes in: with free-to-use, high-quality photos from independent photographers.
Find photos on Unsplash
Easily add scalable vector icons and social logos to your website.
Well-designed and free, although a bunch of icons are only accessible with a paid-for “Pro" license.
Browse Font Awesome icons
If you’re not sure which font sizes to use, then this tool can be a great help.
It lets you calculate font sizes based on different ratios (I used the “golden section", more on that below).
Size your fonts with Modularscale
The golden ratio
The “golden ratio" is one of the world’s oldest design principles.
It’s originally found in nature and can be expressed as a simple number: 1.618.
Read more on the Prototypr blog
Visual Studio Code
OK, I don’t know much about code editors. VS Code is a free, open-source code editor developed by Microsoft.
It seems to be the current standard for code editors and I always found it easy to work with.
Start coding with VS Code
Store your code, keep track of changes, and collaborate on coding projects. Github is the world’s leading development platform and offers a free basic plan.
Even if you’re working solo on your first coding project, set up an account and familiarise yourself with it, because you might encounter it in your day job.
Check out Github
Flexbox helps you create clean, responsive layouts by aligning multiple items on a single axis.
Especially if you’re just starting out with CSS (and you're still trying to figure out how to center a div), Flexbox can save you hours of headache.
Read more about Flexbox
What Flexbox does for one dimension (either horizontal or vertical), Grid does for two dimensions (both horizontal and vertical).
It lets you create responsive grid layouts with very few lines of code.
Learn the basics of CSS Grid
Got a lot of images on your website? Lazy loading allows you to load images (and other assets) only when they enter the viewport – in other words, when the user is about to see them.
This can significantly improve your website’s speed.
Start lazy loading now
Web development terms explained
Damir Kotorić explains a ton of web development terms and acronyms in this highly entertaining web developer’s lexicon.
Read the whole article on Medium
Web Dev Simplified on Youtube
The Web Dev simplifies a ton of coding topics on his Youtube channel.
Some are quite sophisticated, but there are many videos that are aimed at complete beginners.
Watch Web Dev Simplified
The usual suspects
W3Schools and the Mozilla web docs are two of the most comprehensive web development resources. And if you can’t solve some specific coding problem, just visit Stackoverflow and find the answer (or at least some heated discussions by people who can’t figure it out either):
I’ve tried many different text editors, but I think Google Docs is still the best out there.
It has many powerful features under the hood, but it doesn’t constantly demand your attention like Word or other bloated text editors.
Visit Google Docs
Like it says in the name. A super-simple note-taking app. It comes without any bells and whistles, it syncs across devices and it’s free.
I use it for taking notes on the go or whenever an idea pops into my head.
Tone of voice and style guides
You’ll find a number of tech-related writing guidelines and resources on the web. Here are some good ones to get your started: