<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">
Skip to content

By David Wierbiki


Designers are often required to produce stunning screen concepts of mockups as well as screen wireframes on short notice, with an expectation of seeing results within hours and, if we’re lucky, we’re given a day or two. This is stressful, but a good designer has a toolkit available to them that they’ve put together over time.

What is in a kit?user experience

What should be in the designer’s toolkit? Anything and everything they find useful for their tasks. Icons, buttons, form fields, tabs, navigation, breadcrumbs and the list goes on. The file formats for these is either going to be raster (transparent png or psd) or vector (ai, eps or svg). File types can vary depending on situation and need. Always do your wireframes or mockups with the forward thinking idea that you’ll be using them for the site or application in question to save yourself some time by building with vector objects and generated layer effects if using Photoshop.
No matter what, keep it organized. I keep mine in Dropbox so I have access to it no matter what machine I’m on or where I am. I also tend to lean towards a predominantly Illustrator based kit to work from. I find this gives me the most versatility and can easily be used in Photoshop for mockups.

Wireframe All-In-Ones

All-in-ones are all the rage right now. At Isos we use Confluence for all of our wiki documentation. Gliffy is an add-on with great integration. It has completely opened up providing visuals for our projects giving the developers and project managers a simple tool to get across their ideas. In the hands of a designer, these tools supercharge our wireframe output.
Some popular wireframing tools:

  • Gliffy: Use either Gliffy online or as a plugin for Confluence
  • Balsamiq: Desktop application, web app or as a plugin for Google Drive, Confluence or Jira
  • Visio: PC only
  • Omnigrafle: Mac only


I keep a number of Illustrator and Photoshop templates in my kit. I add to these as I discover something worthwhile or something that I am searching for specifically for a given project. Here are two to get you started and to act as gateway drugs for your toolkit as they don’t cover everything.  But they will give you insight as to what goes into a toolkit and the ease of making and adding your own templates to your toolkit as you progress in your career.

  • User Interface Design Framework: Comes with CS2 ai files, Illustrator panels and Omnigrafle stencils
  • Yahoo Design Pattern Library: Comes in every flavor you might need.

Other considerations are framework specific psd or ai templates (Bootstrap, jQuery UI, etc). A quick Google search will reveal enough results to keep you in template and pattern bliss for quite some time.

Extending the Toolkit Further

Let’s say you are also tasked with doing HTML prototypes. Then your toolkit expands to include code snippets for HTML, CSS, JavaScript and probably a bit of PHP.
You’ll want to delve into a CSS and JavaScript framework to come up with a decent prototyping toolkit. Bootstrap is a well maintained and basic enough framework to meet your needs, but explore the others before settling on any given framework. Ideally, use a framework that would be used for the development of the application or website being designed so you’ll have a good chunk of it already accomplished, saving a good deal of time overall.

See More From These Topics