As a web developer who enjoys making personal projects, trying to make my creations look nice (without a designer) is often the most difficult task.
I’m new to design. I have to try really hard to make things look like they don’t belong in the Internet Archives, or worse, as one of those April Fools Day 90s throwbacks. (Well done, Stack Overflow!)
And I’m not afraid of hard work, but I’m certainly a fan of anything that lightens the load.
So, below is a list of five (free!) design tools that I use pretty often for personal web development projects.
1. Pinterest
That’s right, Pinterest isn’t just for soccer (helicopter, lawnmower, snowplow, whatever…) moms anymore. It’s a great resource for finding simple layout ideas, quickly.
I can search for things like “mobile form layout” or “desktop gallery layout food”.
Sites like Dribble are great, but Pinterest has the added benefit of allowing users to save content from external sites. So if I see a page or an idea that I like and want to “Pin” to an existing project board, I can do it easily with the Chrome Extension.
2. Coolors
I don’t have a “knack” for colour matching. That’s probably why my wardrobe consists mostly of blue jeans and black tops. I don’t do it because I want to pay homage to Steve Jobs (or, ugh, Elizabeth Holmes). I do it because it’s easy and makes me look like I know what I’m doing.
But because I’m pretty sure the denim and black method doesn’t translate well to web design, I just use Coolors.
Coolors shows me palettes until I find one that I like, or even better, one that matches a design I’ve already selected on Pinterest. It provides hex codes, exports SCSS files, and will even match colours I already have in mind. I wrote an article a while back that explains how to use the colour match feature.
I can’t give this web app enough praise.
3. Google Fonts
So I know most web developers are familiar with Google Fonts. But I didn’t know about the font pairing feature until someone told me about it.
Here’s how it works… I find a Google Font I’m using and go to its main page. I’ll pick Baloo Bhai for this example because it looks silly and the name is fun. I scroll down and there’s a handy section called “Popular Pairings”. It shows a list of potential fonts that pair well with the one I’ve selected. It also allows me to swap out which is the title font and which is the body font in the text sample by clicking the arrow.
If I’m worried about matching the font to my Pinterest design, then I don’t get too crazy. I try to pick something that looks close enough (or something really plain if I’m not sure), and it usually works out.
4. Pixlr
I don’t find Photoshop particularly intuitive, and it’s REALLY expensive if you aren’t using it regularly for business. (Sorry, Adobe!) But sometimes, images still need a little TLC. That’s why I use Pixlr.
It’s free. It’s quick to get started. And it’s easy.
I’m not well versed in Photoshop at all, but I can navigate my way around Pixlr just fine. It’s UI is user-friendly and painless. Whether I need to re-size, crop, or tweak some colouring, it has everything I need to do basic image editing.
5. Vectr
I learned about this one recently. I was mentoring at a workshop and a learner asked me how to easily generate a logo, and get an SVG version of it. After a quick Google search, I found Vectr. Within 5 minutes, I had mocked up a logo with some initials and colours.
Out of all the tools above, this one requires the most creativity. But when in doubt, I just make a logo with some initials and match them to my colour palette (it accepts hex codes) and it’s usually decent. I also always use a square shape so it can be used as a favicon, a social media icon, etc.
And that’s it.
These tools have made a huge impact on my (non-designer) design toolbox. I really hope they do the same for you. Good luck, and have fun!