Adding Good Notes to Your Design Workflow

I’ve introduced a new tool into my design workflow that I really like: Good Notes. I use it to capture wireframe mockups in a format that’s easy to review, sketch on, and mark up with notes.

My (Rough) Design Process

My design process normally begins (after doing research, of course) with sketching the UI with paper and pen. I then move to Balsamiq mockups to create clickable wireframes from the sketches. From there it’s time to review and iterate (with co-workers and clients) until we’re satisfied with the initial design enough to move to HTML/CSS.

The problem is that many of my notes and the ideas and rationales behind design decision get lost. They end up scrawled on scraps of paper that I promptly lose, or they get scattered across various email threads.

Incorporating Good Notes

Enter Good Notes. Good Notes is a note taking app for iPad. It lets you create notebooks, add pages, draw, write (by hand), insert text, insert images, cut/paste, and move objects around the page. You can create blank notebooks or create new notebooks by importing documents (like PDF, PPT, & DOC).

I’ve begun inserting Good Notes into my workflow right after creating digital mockups in Balsamiq. When I create wireframes in Balsamiq, I prepend each file name with a two digit number (“01 Home”, “02 Signup”, “03 Whatever”, etc). This lets me easily keep screens in a user workflow in order. (User interface screens are not always strictly linear, but you’ll often find that a UI consists of one or more mostly linear user workflows). After my wireframe mockups are complete, I export them from Balsamiq as either a single PDF or as multiple PDF files, (one for each user workflow). Because I’ve named the files numerically, it’s easy to export them “in order” to a PDF.

Next I import the PDF into Good Notes. In Good Notes I can write or type notes directly onto the mockups—draw boxes around elements, highlight items, mark through elements, etc. If I’m deciding on CSS classes, I can draw boxes around content and write class names right beside them. If I’m in a meeting, it’s easy to open Good Notes and make my notes directly on the mockups.

In the screenshots below you can see where I’ve added notes and potential CSS class names to parts of the mockups.

Good Notes Screenshot

When it’s time to fire up my text editor to start writing HTML/CSS, I just open up Good Notes and keep it right beside me for reference, just like I would use a traditional notebook. The nice thing about using Good Notes is that it bridges the gap between digital files and pen and paper notes. I can work from it through out the design process and then when a project is done, I have a nice, neat PDF notebook containing all of my sketches and notes from throughout the design process.

I’ve just started using Good Notes in this manner, but I have high hopes for it. If you’re using Good Notes in your design process, I’d love to hear about it.

comments powered by Disqus