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.

Photo of a laptop on a desk Photo by Domenico Loia

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.

Design

Figma

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

Photopea

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

Google Fonts

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

Coolors

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

Color Hunt

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

Unsplash

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

Font Awesome

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

Modularscale

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

Code

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

Github

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

CSS Flexbox

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

CSS Grid

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

Lazy loading

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):

A laptop and a cup of coffee Photo by Fabian Grohs

Copy

Google Docs

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

Simplenote

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.
Get Simplenote

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: