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?
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.
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