7 Free Web Design Tools (That You Probably Haven't Heard Of)
Hey entrepreneur! Looking to build your own website? Getting your design ideas out of your head and onto the screen can be pretty tough. To help you, I’ve compiled this list of my favourite free web design tools that are perfect for your project!
Does this sound like you?
You're full of ideas, but keep getting stuck on how to create your designs.Don’t panic. And don’t run off and purchase Photoshop just yet.
In this post, I’m going to share some free web design tools that you can access directly from your browser.
And I’m going to walk you through exactly how and where they can help your website project.
Let’s go!
But first, let me give you a quick intro to a secret weapon in my web-design arsenal - browser extensions.
If you’re scratching your head, wondering what the hell I’m talking about, then you have certainly landed on the right blog post.
These little powerhouses will transform the way you DIY your web design.
My Favourite Free Web Design Tool - Browser Extensions
A browser extension is a tool that you download that sits on your browser bar. Like this:
They are small tools that do a simple job.
And they do that job directly in your browser.
I think they’re freaking awesome, and you need to get on board with them. Like yesterday.
OK, so let’s look at some practical applications, and an overview of what these tools are (and how they can super-charge your web design project).
Design Tip 1: Get your images web ready
Let me ask you a question. And you have to be honest here.When you upload images to your website, do you resize them down? Optimise them in any way?
Or do you let Wordpress do that for you? After all, you can see that it creates a version that is the right size for the spot that it’s sitting in.
Big mistake.
You know why?
Because that massive original image you uploaded is still sitting on your server. Right next to a different version of the same image at the size you need for your blog header.
Having big, oversized images on your site is clogging it up. And a clogged up site runs sloooooowly. Visitors hate that, and it’s bad for SEO.
So, what should you do?
- You should upload an image that is resized for the space it's going to sit.
- If your blog is 600px wide, your blog image should be 600px wide.
- Doing this doesn't have to be time-consuming. And it doesn't require Photoshop.
Step 1: Download Page Ruler (Free Web Design Tool #1)
Grab your copy of Page Ruler here.Page Ruler is a browser extension that lets you quickly check the dimensions of an image or space on a web page.
Once downloaded, you click the icon and you can then measure how big an image is on a web page.
See those red numbers up there on the image? Let’s break it down:
- This is the icon on your browser
- This is the window that opens and tells you what the dimensions are
- This is where you drag around an image to get those dimensions
Step 2: Web Resizer (Free Web Design Tool #2)
Web Resizer is definitely a site you want to bookmark. Seriously, go do it now. I'll wait.Its nothing fancy, it doesn’t have lots of bells and whistles. But what is does, it does well.
Here’s where you can quickly and easily crop, resize and optimise your images for uploading to your website. There are some simple editing tools thrown in as well.
But the reason I love it so much - and so will you - is the ease with which I can create web-ready images, with just a few clicks of my mouse
Design Tip 2: Keep your brand colours consistent
Colorzilla (Free Web Design Tool #3)
This bad boy is making my life soooo much easier these days.Before I discovered this tool, I would create colour swatches in a program like Illustrator. Then, when needing the colour value for something like a web button, or background overlay – I’d switch back and forth, to copy and paste that colour value.
Not anymore!
With this browser extension, in one click you can grab the colour value of anything on your screen, and paste it right into where it needs to go.
This tool works perfectly in conjunction with web builders such as Divi. And it dances perfectly with online graphic design tools such as Canva or Snappa (more on these below).
It’s seriously an amazing browser extension.
Grab your copy of Colorzilla here.
Design Tip 3: Picking fonts
What Font (Free Web Design Tool #4)
What Font lets you find out which fonts are being used on a web page.That’s it.
Simple. But so useful.
If you come across a site and you love their font, this is how you can find out what it is. Not only the font family, it tells you the size, colour and line spacing.
Grab your copy of What Font here.
Design Tip 4: General design tasks
Forget about spending loads of money on expensive software like Photoshop.There have been some fantastic online tools that have been developed in recent years, that allow you to take charge of your own graphic design, right in your browser window.
Canva (Free Web Design Tool #5)
The most well known of these is Canva, and it has (justifiably) taken the small business community by storm.
Canva offers:
- Correctly sized templates for social media that allow you to create your image in the perfect size for its purpose
- Free designs that you can use as a starting point for your own work
- A selection of stock image that you can use. Some are free, others start from $1
- You can upload your own images
- Cost: free
In addition to everything you get with Canva, you can:
- Collaborate - great if you have a designer helping you with overall brand guidance
- Create and save your own templates
- Upload your own colours, fonts and logos
- Cost: $10 a month
Snappa (Free Web Design Tool #6)
Along similar lines to Canva, Snappa offers you a direct, online graphic design experience.They are linked to a fabulous stock library - Stock Snap – which gives you a massive selection of free photography to use on your projects.
Features of Snappa:
- Similar to Canva
- Most features are locked unless you sign up
- But, you CAN still use it, as they give you access to some templates for free
- Linked to Stock Snap photo library, so you have easy access to all those free photographs
- Competing with Canva for Work – you need to pay to access features like saving templates
- Cost: From free to $10 a month (billed annually)
Type Genius (Free Web Design Tool #7)
Type Genius is a deceptively simple website, with just 1 purpose. To help you find and match fonts for your design project.
It’s really easy to use:
- Pick your starter font (this will be your heading)
- Click the Find Match button
- Type Genius then gives you some suggested fonts to pair with
- It also provides an example paragraph showing how the fonts look together
Why not sign up to my FREE course - Wordpress in a Day. It’s packed with all the information you need to get your website project up and running in no time (without all the tech-headaches and You Tube wormholes).
