Visually Expressing Ideas
Sketches, wireframes, prototypes and how to express ideas with visuals.
“Avoiding functional specs is a good start but don’t stop there; prevent excess paperwork everywhere. Unless a document is actually going to morph into something real, don’t produce it.
Build, don’t write. If you need to explain something, try mocking it up and prototyping it rather than writing a longwinded document. An actual interface or prototype is on its way to becoming a real product. A piece of paper, on the other hand, is only on its way to the garbage can.” — Getting Real by 37 Signals
As companies move to agile methodologies, which favor fast-paced iteration over detailed planning, it becomes important to be able to articulate ideas quickly with the aid of visuals. The workflow of taking concepts from idea through to sketching, wireframing and prototyping, is one that I continue to work on improving and the following are resources that have been useful to me in my career.
Start With Sketches
Before investing too much energy on a particular concept, it’s useful to start by exploring a wide variety of possible solutions and the easiest way I’ve found to do so is by sketching. The fidelity of the sketches is not what’s important at this stage and they could happen just as easily on a white board as they could on paper. As you dig into the problem, explore new directions, branch off from your initial set of ideas and continue on until strong potential solutions emerge.
The more ideas you can produce quickly means more time to refine your thinking and get additional perspectives. This approach guards against the sunk cost fallacy that can often come into play when we spend too much time iterating on a specific concept.
Recommendation: Drawing Ideas
“Your ability to draw is a fast, powerful means for thinking, reasoning, and visually exploring ideas — providing visual information for self-reflection and focused discussion with your colleagues, teams, and clients.” — Drawing Ideas
As someone who never attended design school I’ve always had trouble putting pen to paper and sketching ideas. Because my perception that drawing was just too hard to do well, I would tend to lean on software, and as a consequence it took longer to visualize ideas and sometimes got confusing because of the high fidelity results. Drawing Ideas is a really practical book that will help improve your drawing skills through practice and simple strategies.
The book starts with basic concepts and an overview of common tools of the trade, covering how to use different line weights and colors, to how to improve white board sketches. After the basics, you’ll dive into a chapter dedicated to practice, most likely the chapter you’ll spend a lot of time living in if you’re anything like me. The final half of the book is dedicated to using your new skills to better articulate ideas to individuals and groups, going over a variety of common cases you’ll run into day to day.
At around $40, I can’t recommend this book enough, it has continued to provide value to me and will help you improve a basic skill that will make you better at communicating ideas no matter your discipline.
Digital Wireframes
It can be a useful next step to take the most promising concepts from the sketch phase and create higher fidelity digital wireframes. There are so many tools for wireframing right now and you can bet that whichever route you go there are many resources that will speed up your workflow.
Personally I’ve gone from Adobe Fireworks to Balsamiq to Omnigaffle to Illustrator to Sketch. What I’ve found is that powerful vector-based software works best by giving you a lot of flexibility, making it easy to express ideas with simple shapes and objects while allowing you to create unique assets for those times in which the object to express your idea isn’t available.
If iterating on your wireframes feels painful, you’re spending too much time on them.
There are tons of wireframe kits out there but it can make a world of difference when you spend the extra time needed to create unique objects and visuals for your project.
Icons
It’s often useful to include basic icons in wireframes but spending too much time on selecting the right icon for the job would be a mistake. My favorite set of icons to use at this stage is Font Awesome, because it includes over 600 fonts, is free and is utilitarian in nature. Just install the font and use their cheatsheet to get an overview of everything that’s available.
Placeholder Photos / Text
Invision created a product called Craft that works with both Photoshop and Sketch and provides a set of really useful tools that can speed up your workflow including the ability to insert placeholder text and images.
Low-Fidelity Prototypes
Creating low-fidelity prototypes affords us the ability to expose rough concepts and interactions to users and colleagues so that we can discover core issues early on. Because low-fidelity prototypes don’t focus on the visual design of a product, the feedback that they generate is often more focused on functionality which can be invaluable at this early stage in the development process.
We’re lucky enough to have a wide variety of tools available to us that make generating prototypes trivial, one of the most widely used and documented being Invision.
Moving Forward
I hope you’ve realized at this point that the barrier between you and expressing your idea is pretty low. There’s no excuse for not having something that someone can put there hands on or look at when you’re explaining your idea.
