The design process is constantly changing. Although I’ve taken some time to describe the phases, methods, and tools I use when gathering requirements, analyzing content and features, planning, and executing visual design, by no means am I saying this is the definitive process for interaction design. This post was originally published on my blog December, 21, 2013. As I have recently shut down my blog, I’ve decided to republish this here for reference and it’s already starting to look historical. Looking back, my process has become less rigid and many of the tools I’ve mentioned here I don’t use any more.
I began work on a new project this week. I’ve been planning the user journey map using MindNode Pro and then producing individual artboards for points along the journey in Sketch. I create each view quickly and organically — trying to sketch multiple views in as short a time as possible to make lateral progress visualizing the application. During this phase of the project, I’m reminding myself, “Rough is good.”
To speed up layout, I use the Teehan and Lax iOS 7 GUI for Sketch and try not to get hung up on keeping my files organized. As I think of another view, I created an artboard and title it based on the nodes in my MindNode map. Numbers have no place in the titles of artboards because the output will most like get rearranged later anyway. The process is non-linear so why name files with something linear like a sequence of numbers.
To create the presentation document for the client, I use InDesign. I built a Steamclock template for laying out presentation wireframes that includes Master Pages, frames, and object and type styles that have appropriate proportions and hierarchy. When placing files into InDesign, dropping them from Finder using the thumbnail view seems to work well. When organizing 45 images into a logical sequence, it’s faster to scan artboards as thumbnails compared to reading file names. Think about organizing a deck of cards. It would be painful to organize the cards if they only had text. The colours, shapes, and images make it faster to chunk information.
As the InDesign document grows with annotations and the artwork is refined, the links in the InDesign file require updating. To do the updating, I would manually highlight all of the links in the list and click the “Update Links” icon at the bottom of the tab. After doing this a few dozen times, the process starts to feel laborious. Then I found “Update All Links” in the fly-out menu of the “Links” tab. This simple menu item automates a small step in the process but speeds up the cycles of iteration.
Disclaimer
For in-house design and clients who are familiar with design and dev processes, I’ve found this extra presentation step in InDesign to be overkill. For these types of projects, I usually compose emails with textual sitemaps, JPGs of sketches, wireframes and renderings. Of course, in-house, it’s always better to interrupt your neighbour and get immediate feedback to keep moving forward.
Email me when Justin Alm publishes or recommends stories