Five tools I can’t design without, and two more I like a lot

I like to write code. A website is very much like a puzzle, and all the pieces have to fit together just so. The stakes are reasonably high, I mean no one’s gonna die (disclaimer: I don’t know that for certain) but one missing back-slash and your site goes totally blank. Erase the wrong thing and you can be looking at hours of troubleshooting. It’s challenging, but the rules are definitive. You’ve got it right (your site works) or you’ve got it wrong (404, blank screen of death, can’t connect to database, oh the horror).

Design, on the other hand, is just bananas with options, so it gets time consuming. To keep design economical (it’s still a business, even if I get to play with color), I’ve been looking for all the places I can stay efficient. That’s how I came to love these tools, and perhaps you will too.

PS. I’m leaving Photoshop off the list because duh.

Can’t Get By Without These

Inspiration has never been so condensed. When I’m having trouble envisioning the path forward, I turn to Pinterest. The trick is to avoid getting sucked down a rabbit hole that starts at “innovative website menus” and ends at “best old school Nintendo cosplay costumes”- a search that did at least yield a Halloween costume this year.

A Sketch-pad and pencil

If I’ve got a lot of ideas bouncing around, the fastest way for me to get them out is to bang out some quick sketches. I often carry a small Moleskine notebook where I can get down any on-the-go inspiration, but I more often brainstorm in my 11″ x 14″ sketchpad. It’s just about as wide as my 13″ (diagonally) computer screen, so I can draw pretty close to true pixel size. I also inevitably need an eraser.

CSS-Tricks and W3 Schools

Web design, like traditional art (for art’s sake) is limited by it’s medium. Instead of oil paints or clay, web design has to be built in keystrokes. Then those keystrokes need to be interpreted by dozens of different browsers on dozens of different devices and still result in something that looks great and is easy to use. So I frequently find myself asking “how can I make this work?”

The answer will always involve CSS – the computer language for design. These two websites are my favorite resources for CSS techniques so I can go from pencil and paper to a working website.

Google Web Fonts

I don’t always go with a Google Web Font, but they are dead simple to integrate into any website. Lato by Łukasz Dziedzic is my very favorite sans-serif font thanks to its geometric but unassuming style. You’re reading it now. Oswald (the header font on this website), Pacifico, Abril Fatface (great name, right?), and Playfair Display are also indispensable. They work in just about every browser and, oh yeah, they’re free to download onto your computer so you can use your chosen fonts in Photoshop or even a Word document. That way, your brand’s typography is consistent across all your print and web content.

Freepik.com

Free vector images for designs! If you don’t know, a vector image is rendered with math instead of hard pixels. Information about points, lines, curves and their relationships to each other are all saved within the file so the image can be resized to be as large or small as you may need it. Vector images are easy to make with Adobe Illustrator, but it’s even faster to find great free vectors on Freepik. It’s a perfect resource for small design accents like social media buttons, icon packs, ribbons, badges… okay it’s perfect for a lot.

And I like these, too

Graphics Tablet

My lovely friend Erin of Sullivan and 3rd Design Co. told me a few months ago that I should get one of these. I believe she said “it will change the whole way you design.” She’s comfortable enough with her graphics tablet to use it instead of a mouse, but I’m still pretty slow and clunky with mine. However, I have put it to some fun use creating small graphics and especially hand drawn text, like you can see on Whole Foodie Booty and Maria Marlowe. The hand script really gives the site a unique touch!

By the way, I have a Bamboo tablet, which I believe Wacom discontinued. It’s pretty good, but I wish it were easier to take on the go. I’ve ordered this gStick pen mouse thing through Kickstarter, and I’m hoping I can use this in place of the tablet. Won’t have it until at least January, though.

Kuler

Maybe given another month this one would be in the essential tools section. I find myself using it more and more to fine tune my color choices. There’s a few options for creating your color scheme:

Start with one color and choose from various proven color relationship options to fill out the rest of your scheme.
Upload a photo, pull major colors from the image, and then adjust.
Create a custom scheme from scratch using the interactive color wheel.
Browse the community of thousands of shared schemes and pick one you like!

I’m always looking for more tools to make designing a smoother process. That way I have more time for enjoying all those design bananas.