When you live and breathe web design and development like we do, it’s easy to forget that everyone has to start somewhere.
So we’ve collected eight of our favourite web design tools that can help web designers who are just starting out, small businesses who are looking to build their own site, or just the amateur enthusiast who’s looking to up their design chops.
For new web designers, shelling out $70 a month for the Adobe Creative Suite can seem a little steep. Especially if you’re not sure how often you’re going to use those incredibly powerful programs.
That’s where Pixlr comes in.
There’s no doubt that it’s not as powerful as Photoshop. However, it will get you most of the way there, and it’s completely free to use.
Its web-based app is one of the most popular photo editors in the world, and with a layout-based system, you can easily transfer your skills to Photoshop when you’re ready.
Affinity is another Photoshop alternative.
While it does cost $70 or so, it’s only a one-off cost and then yours forever – no recurring payments.
So if you’ve been designing for a while, it might be a good option before you upgrade to Creative Cloud.
For most beginner web designers, there’s little that they might want to do that Affinity can’t help them with.
Coverr is a completely free source of stock hero image videos. Amazingly beautiful and completely free, it’s a great way for you to make your designs really pop off the screen with an asset that traditionally, cost thousands to buy or build.
One of the most challenging things for a designer is knowing whether an idea is worth pursuing before they invest the money (and time!) to develop it.
Back in the day, designers simply accepted these limitations, working with wireframes and then handing off and hoping for the best.
Fortunately, those dark days are behind us, in part because of how good (and inexpensive, and fast) prototyping has become.
Enter Proto.io. It's an app that lets designers quickly build and test prototypes and ideas with absolutely no coding requirement.
You can even design and build in Proto if you want, or import directly from Photoshop, before pushing it to UserTesting (more on that in a minute) to validate.
The result is that you can validate ideas quickly so you’re putting effort into ones that have legs, without having to guess what your users will like.
CodePen might be more familiar to developers than designers, but the line blurs enough that it can be considered a great tool for everyone to have in their back pocket.
The tool is a sandbox where you can write (or copy-paste) code and code snippets to see how it’s going to look.
For designers, this is great when you’re starting to incorporate multimedia fields and images through your site and you want to quickly get an idea of what it’s going to look like.
Plus, with a huge community of designers and developers, it’s a great place to grab animations for your site that you can use for free.
Once you’ve built a great design or prototype, you need to test it. That’s where UserTesting comes in.
Priced on a per-test basis and offering a huge range of deliverables, UserTesting gives you incredible insights into what’s working on your site or Proto.io prototype (the tools integrate really well).
With a giant panel of users, video recordings of the testing, and robust metrics on what’s happening during the sessions, you can pinpoint where your site or app is breaking for your specific users and hone your design accordingly.
You know when you see an incredible website where you love the colour scheme, but you can’t figure exactly what shade it is?
Wonder no more.
ColorZilla is a Chrome extension you can use to quickly get the exact colours, then and there. There are other features as well, like Advanced Colour Picker (like Photoshop’s), and colour palette analyzer, plus it copies the colours directly to your clipboard, so you can see, identify, and copy in seconds.
WhatFont is like ColorZilla, but for fonts.
See a font you love but you’re not sure what it is? WhatFont lets you identify what font is being used on any site, so you can use it on your own designs.
It doesn’t work with every font, but it will help you identify all the basic web fonts and a good chunk of the more unusual ones too.
Wrap-Up
There you have it. Eight tools you can use to drive your budding web design career and get your deliverables (or even your own site) looking awesome.
