How to Cook Wireframes Sketches
And not burn your journal trying
Designing wireframes is like cooking, when you’re practiced in the craft you no longer need to follow an exact recipe in order to prepare something tasty, but you still need the right ingredients (tools).
The Ingredients (Tools)
You will need,
- Something to sketch on, a sheet of paper or a whiteboard will work
- Pencil, pens, markers (or crayons, whatever gets your sketching on)
- Your notes
- Post-its! (because #designers)
- A hand (your hand)
Instructions
There is no specific process or setting up of steps to wireframe, but since this is a “wireframe recipe,” the word “process” needs to be somewhere in this blog. So, there you go.
Building a wireframe not only requires creativity, to add quick but functional flavor, but you’ll need to sprinkle it up with many different methods and the help of some post-its which are a staple in the design pantry for,
- Lightning Talks
- Affinity Mapping
- User Testings
Now that you’re aware of this tip, let’s start designing what you want to show!
1.- Preheat your design muscles and prepare your idea sketching bowl.
2.- Gather your features, buttons, CTAs and modals with the help of your pens or markers.
3.- Mix them all together in your sketching bowl to start Rapid Prototyping, a method for people who design and build things. When you prototype, you flex your design muscles even more!
4.- Add some flavor with the ideas you had written on your post-its before preparing your ideal solutions.
5.- Divide your mixture into your prepared sketching pan screens (your sheet of paper or whatever you grabbed to sketch on), and pour some creativity with the help of your pens or markers until you are satisfied with the results.
6.- Now you are ready to enjoy some visually delicious wireframes!
“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
Notes
Remember that it’s easy to come up with an idea. The hard part is to understand how to shape the idea into a user interface. Before preheating the design oven you should take into account some pros and cons you may face while cooking wireframes:
Pros
- Rapid iteration
- Low cost
- Better for avoiding rework
- Iterate your idea
- No pixels to polish
- Open possibilities to view
- Avoid creating constant lo-fi mockups
Cons
- Not well defined (colors, forms, animation, font, etc.)
- Needs lots of imagination
- Hard to test on paper
- Needs to be converted to a digital prototype
- Several people may sketch the same idea
Finally…
You don’t need to be a professional wireframe sketcher to make people understand the way you look at possible solutions. Make your designer version of Gordon Ramsay proud. Sketching amazing wireframes isn’t enough, you will need to be able to present them in a way your clients or team can understand them.
Serve your sketches in a way that communicates your brainstorm solutions, journey ideas, and concept visualization. Remember that it’s a concrete way to convert your ideas into a new design concept.
Share your thoughts! You can reach me at dunzueta@nearsoft.com.
I invite you to read more about our work. You can find related UX material here.
All drawings were created by the author ( me).
Originally published at https://ux.nearsoft.com on May 10, 2019.
