Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

How To Build A Portable Design Toolkit

It’s easy to get overwhelmed by the staggering array of resources and options available to designers. In this article, we’ll explore the idea of consciously restricting yourself to a set of core tools that you know, love and trust.

Take a traditional craftsman — let’s say a carpenter. While they may have access to a wide range of tools in their workshop, they will take a bag with just a few carefully chosen tools when working away. Similarly, an artist may have a wide range of paints, brushes and accessories in their studio, but will carefully select a limited palette and a few choice brushes when painting in the field.

In the same way, as a digital designer, you should know what your most precious tools are, and keep a portable set close at hand.

Recently I’ve been doing some oil paintings outside, away from the studio (a technique called en plein air1). To facilitate this, I put together a pochade box to hold paints, brushes, palette and canvas panels. This needed to be small enough to fit in a backpack to be easily portable so that I can cycle around the countryside with it. The factors of space and weight force me to select a limited palette and a few choice brushes, and the size of the box determines the size of paintings I can make.

Working outside also forces me to work quickly — there’s no time to dally and over-think things. But, rather than being restrictions, these factors become the parameters for the work, directing me to work in a certain way, and helping me to develop a personal style and approach.

plein air2
Working outdoors forces you to set limits.

Working With A Limited Palette Link

The benefits of working with a restricted range of tools and options are that you really get to know and understand your core set and can continually refine it over time. This is the path to mastery in your chosen discipline, as opposed to being a jack-of-all-trades but the master of none.

By mastering a limited number of tools and techniques, you will develop your own personal, identifiable style and workflow. It enables you to hit the ground running with each new project, to draw on your previous experience and to get something down quickly, which you can then refine, rather than face the blank screen and not know where to start.

A Lean, Portable Toolkit Link

What should be in your toolkit? This will obviously depend on your particular area of expertise, whether you are a designer or a developer, and the software applications you use. Each person will have their own software preferences, so I am not going to talk much about particular applications in this article. Instead, the focus will be on areas where you can consciously refine your choice of tools and assets within applications. I’ll also look at how, once you have created this limited palette, you can access your carefully selected toolkit wherever you are.

Keeping It All Together Link

Keep this lean, mean toolkit in a place you can access from anywhere. My preference is Dropbox3, although any cloud-based hosting service, such as Google Drive4 or Microsoft Skydrive5, would be great. Create a folder named Design Playbook, or whatever, and add subfolders for all of the assets you want to store in there. Sync it to the cloud and you’re good to go. For text and notes, I use Evernote6 — again, allowing me to access it from anywhere.

Folder structure7
A sample folder structure of the toolkit

Graphic Resources Link

Grabbing every free resource you come across on the Web is tempting, whether it is vector art, Photoshop brushes and actions, bitmap textures and backgrounds, fonts, etc. But the downside of amassing such a huge collection is that it can become overwhelming and can lead to a lot of wasted time looking for just the right resource. If you are a download junkie, like me, then be prepared to pare down your collection, and put the ones you love and trust into a separate folder from all of the others, which you can review from time to time. Think of this separate folder as a special place where only the best assets and resources go.

Fonts are a prime cause of bloat. Over 300 fonts are in my font library, which I manage using Font Agent Pro (available for both Mac and Windows8), but I find myself using the same 10 or so for most commercial work, and many of the 300 I’ll probably never use. Sifting through all of them is a real time sink, so I have a couple of sets with all of my go-to typefaces, which I have copied in Dropbox. The same applies to Web-based type management, such as Typekit9. Find great type combinations that work for you, and use them repeatedly. It’s a part of how you establish your own recognizable style. Add new typefaces to your core collection sparingly.

Brushes (which are customizable plugins to apply paint effects in applications such as Photoshop, CorelDraw and Painter) are another resource for which too wide a choice would be overwhelming and inefficient — you’d find yourself scrolling through a huge list trying to find the one you’ve used before. Don’t be afraid to trim down the brush sets that you download, deleting the ones you have no use for. Save a consolidated set of brushes as a new set to your mobile toolkit and you’ll be good to go. The same approach can be applied to symbol libraries for Illustrator and Photoshop.

Illustration is one area in which your personal style can really shine through, so build a resource of vector elements. Having a collection of killer elements on hand is a great way to dive into a project and get inspiration. I’ve been slowly adding elements to my vector doodads Illustrator file for a couple of years now, inspired by the efforts of DesignBum10, who has made a number of his project files available for downloading.

Designbum design elements11
Great design explorations by Issara Willenskomer (aka DesignBum)

You’ll find yourself reusing certain background elements and textures; so, again, carefully select a few ones, and add them to your toolkit. Don’t worry about overusing these images — use them in comps and mockups, and then, once you have finalized the design, if you feel that you need a fresh image, go and find one. This will save you time from hunting for new images for every mockup.

Illustrator Elements12
Build your own elements file.

You may find an online repository such as LayerVault13 or Pixelapse14 to be useful for storing image and vector assets, especially if you collaborate with other designers and want to share your toolkit with them.

LayerVault is version-control software for designers.

Code Resources Link

As with graphics, you’ll inevitably find yourself wanting to use the same bits of code from one project to the next. Rather than constantly reinvent the wheel, reuse classes and functions and keep refining them.

If you work with a language such as Java or ActionScript, which support classes, then you’ll find yourself returning to the same third-party classes and libraries time and again, so keep them handy in your toolkit, and take the time to really understand them.

For other languages, such as JavaScript, group together functions that you commonly use in a self-contained .js library file. You can then keep this as part of your toolkit, or use a content delivery network such as CDN.net16, so that you can directly reference it from your project.

Add to this, of course, essential third-party libraries, such as Modernizr17 and Require.js18 — I’m sure you have your own favorites — and any add-ons, such as small JavaScript libraries. Keep them somewhere handy, to be able to quickly drop them into a project.

Another place to put code libraries and classes is on a hosted version-control website, such as GitHub19, Beanstalk20 or, my personal choice, Bitbucket21. This is especially useful if you like to tinker and refine code or if you want to share your toolkit with other developers. If you want to open-source your code and make it publicly accessible, then GitHub or Google Code22 is ideal.

Another place to store code is Snipplr23. As the name suggests, it’s great for storing little snippets of code — for example, code to retrieve the current date — that you’ll need time and again. You can make your snippets public or keep them to yourself. Snipplr is ideal for storing those little code hacks that you keep forgetting.

Snipplr is great for storing and sharing useful code snippets.

Template Resources Link

Using Web templates and frameworks will help you create prototypes more quickly and will also ensure that those prototypes bear a close resemblance to your comps and mockups. Whether you develop your own framework from scratch or use a popular one, such as Foundation24 or Bootstrap25, get to know it inside out, and keep refining it to suit your needs.

Also, build your own “boilerplate” HTML5 file, which is a minimal basic file that serves as the starting point for any Web page you create. HTML5 Boilerplate26 is a good place to start. You’ll also find it worthwhile to create a skeleton website, set up with a file structure for images, CSS and JavaScript. Build yourself a basic CSS file that you can drop into any project. Add it all to the toolkit.

Mastering Your Tools Link

It might sound like I am suggesting that you keep reusing the same look and techniques across all of your work, but that is not the case. I am suggesting that you consciously limit your toolset, and then absolutely master those tools. You can then refine them according to project briefs, client feedback and your own inclination.

Kevin Dart Colouroid27
Kevin Dart’s Colouroids are a great example of self-set limitations.

Keep experimenting with your favorite tools. This year, inspired by Kevin Dart’s Colouroids28, I set myself a challenge to create one vector image a day29, to really master Illustrator. In these self-set projects, go outside of your comfort zone and try a new approach, process or technique.

Create A Playbook Link

“Design today has reached the stage where sheer inventiveness can no longer sustain it.”

– Christopher Alexander, 1963

Seek to master not just your tools but also your techniques. Understanding and refining your design process is critical, and the way you work will determine the work you produce. I call this your “playbook,” the guide to your design process. Each technique is a “play,” a set of instructions to follow.

The playbook can exist purely in your head, or be as formal as you like. My playbook is a series of notes and sketches on an iPad, using Evernote and Paper30. Some are simple aphorisms — “Work from light to dark,” “Remove one element” — to make me think about the way I work, a kind of personal set of Oblique Strategies31, but used less to break a creative block than to reinforce a working method I trust.

Other “plays” are more practical guides, such as step-by-step instructions on how to set up event listeners, or how to optimize images, or how to change copy on a live website. Developing conscious design patterns is the key to understanding the way you work, whether in visual design, interaction design or programming.

Formalizing your creative processes, tools and techniques is a critical step in becoming a better designer or developer. Just as football teams practice their plays, practice your techniques on self-set work, ready to be deployed in client work once you have mastered them.

The playbook is also the place to refine your workflows. How do you get from a paper sketch to a working website? How do you wireframe your code? Analyzing your process is all part of the playbook.

Evolving The Playbook And The Toolkit Link

In addition to refining your playbook, you will also need to update it and evolve it gradually over time, adding some elements while removing others. Obviously, the world of Web design is changing rapidly, both aesthetically and technically, so make sure to update your playbook, too. And by using elements you know and trust, you are still bringing your own style, rather than slavishly following fashion.

The Path Towards Mastery Link

If you look at the portfolios of designers you admire, you will see common elements and ideas that unite each person’s work. This applies not only to Web designers but to graphic designers, architects, industrial designers and visual artists. While the work evolves over time, a common thread — and a conscious decision to set self-imposed limits of exploration — runs through it all. Each creator has developed and refined their own design process, which defines the resulting work, the designer’s style. Poor designers will leap from one style to another, from one way of working to another. Lacking conviction, they will follow trends and the latest fancy technique, rather than develop their own style.

Learn to limit your choices and set parameters. These are not constraints, but rather guidelines to lead you to better work. Building a toolkit and developing a playbook is a way to help you define your own style and to master the tools you need to make your work unique, personal and memorable.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31

↑ Back to top Tweet itShare on Facebook

Martin Gittins (@kosmograd) is an interactive designer from London, where he lives with a collection of children and bicycles. He is fascinated by Modernism, cycling and the design process. Find out more at Kosmograd.

  1. 1

    I’m a developer of 12 years currently looking to ‘design’ more. It is really useful to see how an established designer does things. I certainly use many of these techniques when developing.

  2. 2

    Great article. I’m afraid that I’ve too often fallen into the trend-chasing crowd without developing my own set of parameters. I’ve long intended to start blogging about my process in order to better understand it (or, rather, better define it). This is a good jumping off point.

    I typically send myself emails of links to particular articles and label them accordingly in gmail, thereby creating a virtual morgue of techniques/ideas, but the idea of culling the bits I like into easier to digest notes is a very attractive consideration.

    I also like the idea of using Creative Cloud for this purpose. Apparently (one can hope) presets will be managed through the cloud now, so brush and vector libraries will be easily accessed anywhere you have an internet connection. I wonder if this will apply to their web tools as well…

  3. 3

    “Another place to store code is Snipplr.”

    Sorry, Snipt is much better, cleaner. I left Snipplr when it got overrun with spam comments and posts.

  4. 4

    It doesn’t matter how organised my files are I still can’t find what I need. I keep all my files on Dropbox in specific folders / sub-folders and push my production code to Bitbucket.

  5. 5

    Great article. I was trying to find the best system of organising my work tools for years, and now I use many of these techniques. But I keep storing fonts and graphic resources for my daily work on a USB HDD, which I have with me everyday. And I have a copy of these resources on every computer I use. I syncronize them every month or so.
    The main problem of “mobile” working process is how to work on an old project. From time to time I need to make something for project I didn’t opened for months or even years. I store projects on my main computer and I have a backup, but I can’t take an archive of all projects with me every day! And I don’t know which cloud system could help me to store this large amount of files.

  6. 6

    Request Deletion failed

  7. 7

    I use Github to store my coding resources aka Snippets.

    But I love the proposed idea of a portable resource set as well as minimizing it to the most important tools in your arsenal.

    Great post!

  8. 8

    Would storing your Fonts on a service such as Dropbox not violate most EULAs?


↑ Back to top