Apr 03 2013

The Ultimate Roundup of Design Tools

featureImage2

They say a poor craftsman blames his tools, but what they don’t tell you is that a great craftsman chooses his tools wisely – so with that in mind, we rounded up our design team, and extracted their top picks for awesome hardware, software and sources of everyday inspiration that are worthy of a place in any designer’s bat-utility belt.

The Gear

Sure, you’re pushing pixels around all day, but that doesn’t mean you should skimp on the real-world objects with which you’re surrounded, right?

Big mousepad
mousepad

Having 2 screens and a tiny mousepad is like hang gliding indoors – why wouldn’t you give yourself room to soar! You’ll find your ability to handle pixel-perfect precision work is greatly improved, when your movements are less restricted.

Wacom Tablet
wacom

Speaking of precision, nothing beats a good mouse – but for creating smooth, flowing and organic lines in illustrations, the Wacom family of tablets is our go-to choice. Being able to vary the pressure and thickness of lines on the fly saves tons of time normally spent going back and tweaking thicknesses, brush shapes and other things that can be easily adjusted with the literal flick of the wrist.

Nice Headphones

headphones

3D Headphones via Shutterstock

Now, you’re probably thinking “I don’t care too much about expensive headphones – I’m not that much of an audiophile” – and you’d have a point (besides, as some of our team might point out, what’s the point of amazing headphones if you’re streaming 128kbps compressed MP3s?), however the main advantages good-quality headphones have over your $14 Radioshack earbuds are comfort and focus. If you’re going to wear something over your head for several hours a day, they’d better stay snug and comfy, allowing you to focus on what’s in front of you.

Dual monitor setup

If you’ve used a 2-screen rig, you already know why we’re recommending this. If you haven’t, once you’ve tried it you’ll likely never go back. Designers often need to reference things online while in their creative flow, or compare multiple documents at the same time. Sometimes you’ll be building vector assets in Illustrator, for incorporation in to a Photoshop document. Whatever your multitasking needs, it’s hard to think of a reason why having double the screen real-estate wouldn’t benefit your workflow.

The Software

Now that you’re well taken-care of in the real world, it’s time to turn our attention to the virtual tools you’ll be making dance at your fingertips.

Photoshop and Illustrator
Photoshop

The trusty sword and shield for every pixel-crafting wizard. Nuff said.

Axure
axure

This indispensable wireframing tool has been a mainstay among our team for a while, and with good reason. Web design is increasingly dynamic and reactive to user input these days, making it difficult to accurately convey what it’ll be like to interact with a website simply from a static comp. Axure gives our design team the ability to rapidly prototype pages and interactions with an impressive degree of detail – to the point where our clients can confidently sign off on proposed layouts and interactions before we invest the time actually designing and developing the interfaces.

Droplr or Cloud App
Droplr

It’s quickest way for storing and sharing screenshots, videos, and code snipppets on the cloud. Both Droplr and Cloud App are equipped with incredibly convenient shortcuts, an awesome desktop app, and a variety of ways for sharing stuff with your coworkers.

DropboxDropbox
It’s the premier cloud-file-syncing whatchamacallit – and with good reason. Putting all our files on Dropbox frees us to work from just about anywhere and collaborate on anything with fast, seamless syncing and a newly-redesigned Web interface that’s actually bordering on pleasant to use. It’s great for folks flying solo and teams alike. Plus, you get 2Gb free, so go sign up!

Chrome
chrome

The Web raised a collective eyebrow when word went around that Google was actually building it’s own browser. The snake eating its own tail, indeed. Now, over 25 releases later, a quick poll of our team confirmed that Chrome is by far the dominant primary browser among people who love the Web (highly scientific approach, we know). It’s fast, extensible, and integrates beautifully with Google’s myriad services, which only furthers the advantages since we live, work and play within the Googlesphere as a company.

The Plugins

Even the best craftsmen need a shim, and in Web design, we’re no different – our favorite tools sometimes need a little nudge from 3rd-party developers to get them singing harmoniously with our workflow. These are the plugins that should come with our favorite tools, out-of-the-box.

Adobe Kuler extension
Adobe Kuler

If you’re in need of a little color palette inspiration, then Kuler should definitely be your first stop. Save palettes, edit existing palettes, or create your own… Kuler lets you dabble and play to your hearts content. Oh, and don’t forget to pick up the Photoshop plugin for easy palette picking!

Frank De Loupe
Frank DeLoupe

This is the ultimate eyedropper tool for your color needs. Whether it’s in an application, like Photoshop, or just on the web, this little widget has a color history, and easy clipboard action to help you extract juuust the right pixel color!

PSD script for adjusting rounded corners
PSD Script for Rounded Corners

Waiting for the next creative suite to come out with an easy rounded rectangle radius editor for Photoshop? Well, until it happens, you can use this simple little Photoshop script for the time being. Just install and adjust your rectangle radius to whatever you’d like! You have the flexibility to change each corner to be whatever different radius size you’d like!

The Inspiration

Remember how we were just saying that multi-tasking with 2+ screens is so much easier? Well here’s a list of resources you’ll want to have up on that second screen…

Pictos, Fontello, or Entypo
Pictos icon font

Icon fonts are your best friend. Not only are the great for the different screen resolutions and device types out there, they also save you quite a bit of time in having to create the icons yourself! Take your pick between icon fonts hosted on the cloud, downloaded as an EPS file, or referenced as a library.

Arrrows
Arrrows

Ok, ok, all biases aside, this is probably the best icon font out there for pixel-perfect, crafted arrows on the Web. If you spend any time at all designing interfaces, you know how annoying it can be to have to create vector-shape arrows. Well we’ve simplified this time-consuming process down to a single keystroke for virtually any kind of arrow you can think of. Even though it cost us some acceleration in the receding of our collective hairlines, you’re welcome.

Better Google Fonts
Better Google Fonts

Browsing through one weight for a font is never enough. If you want to see the whole family of every Google Web Font out there, check out this site. It does a nice job of showing you your options plus it renders it right in the browser you’re using so you get a better idea of what it might look like live.

Fonts In Use
fontsinuse

Consider it the Dribbble of typography – user submitted examples of different fonts in actual use, whether in movie posters, book covers, interfaces, what-have-you. Excellent resource to peruse for inspiration along certain genres, or just to reference to see just what the heck you can actually do with that free font pack you just scored on Appsumo.

Subtle Patterns
subtlepatterns

Skeuomorphism is dead, and flat colors are so 1990’s. If current chatter is to be believed, today belongs to the ‘almost flat’ aesthetic. But just where are you supposed to find background patterns that are just textured enough to be discernable to the naked eye? Subtle Patterns has you covered.

The Toolbox
The Toolbox

A website after the very heart of this post – The Toolbox contains a neatly-filterable and categorized roundup of useful apps, snippets, extensions and plugins for the time-strapped designer, developer and unicorns among you.

Freethroww
freethrow

Dribbble is awesome for on-demand inspiration, but when it comes to searching on the platform for free PSD templates and resources, it strays into needle/haystack territory. Enter Freethroww, which simply aggregates all these delicious free files together for your download-binging pleasure.

PlaceIt
placeit

Ripples from Square’s iconic homepage design continue to spread among the design community – with the latest trend being placing an app interface in real-world situations. But what if you don’t know anyone who has A) a fancy camera, B) access to a quaint farmers’ market or C) the type of perfectly-manicured fingernails you’d be comfortable accompanying your beloved app as you present it to the world? PlaceIt is the answer – a library of beautifully-shot stock photographs showing the iPhone and iPad in use – with neatly-outlined spaces for you to drop in your curated app screenshots. Don’t thank us, we just found (and love) it.

0to255
0to255

Pick a color, any color. Then quickly and easily find the perfect hover state color for it. 0to255 makes finding color variations a breeze. Sure, many have offered this kind of thing before, but compared to the zen minimalism of this little app, they feel unnecessarily clunky and bloated. You pick your color, get your variation, then get out, without breaking your flow. Aaaaahhh!

Mediaqueri.es
Mediaqueri.es

This is quickly becoming the go-to repository for showcasing responsive website designs in each of their variations. A great place to see just how much variability is being introduced to the Web with the connection of each new device category and screen resolution.

Lorem Ipsum Generators
Lorem Ipsum Generators

In the dream world, projects would come packaged with the final-polished-never-changing copy for every single area of content on a web page. Fantasies aside, however, more times than not you’ll be needing to lean on a little filler copy support to flesh out the rest of your design work. Good old lorem ipsum is a reliable one to start with but don’t forget to check out the other lipsum flavors out there including Slipsum, Cupcake Ipsum, Hipster ipsum, and Fillerati! 

Conclusion

That’s it, these are all the tools you’ll need as a designer, no if’s and’s or buts. I mean, c’mon, didn’t you read the title of this post? We’re confident that we’ve overlooked absolutely no tools or resources that could possibly be better than what we’ve compiled here – so whatever you do, you’d better not leave your suggestions in the comments…

About the Author:

Marketing strategist, designer, WordPress-er, fascinated singulatarian, sci-fi lover & improv comedian, with a dash of UK panache. Thinker/doer. Friend to startups. Enemy of bananas. I'm also the Director of Products at digital-telepathy. Join/find me on Google+ and Twitter.

Leave a Response

10 Responses

  1. Apr 03 2013
    Jordan J. Caron

    Thanks for all of this Jason. Subtle Patterns and Fonts in Use are going to be heavily used in the coming months.

    Cheers

  2. Apr 04 2013
    Kuhandoas

    Guys, Its Awesome and Really Useful…
    Thanks for this wonderful Article.
    Jason, Thank U Man…

  3. Apr 04 2013
    Philip

    wow… what a great collection. thx for nice tips

  4. Apr 05 2013
    Maegan Anderson

    Thanks for sharing these tips Jason!I agree with you, in order to become a good designer, you must choose the right tools. I’m not familiar with some of the tools listed above but I will probably going to try it very soon.

  5. Apr 11 2013
    Tag Team Design

    Wow!! Its awesome. Nice collection you have shared here. I am so impressed. And ofcourse your ideas are also so worthy for me. Thanks a lot. Keep sharing!

  6. Apr 11 2013
    Brian Augsburger

    Nice list Jason, thanks.

    I was just checking out Axure. To me it felt like you’re almost designing the “real” site (quite time consuming), do you guys find value in adding this step?

  7. May 15 2013
    alex

    amazing! so helpful! thank you.