On UX prototyping, I always am hearing this pushback from developers and PMs on sharing their ideas through doodles and mockups. Years ago I would have sympathized, but thanks to the community of entrepreneurs developing tools for entrepreneurs, this doodle phobia can finally be laid to rest. 

So here’s the 5 tools that have helped doodle shy product teams clarify their design visions in the fastest most frugal path. P.S, I’m one those guys… I never took an art class but I bootstrapped my way to being a UX designer, and so can you 😉

UX prototyping: UX Stencils for Whiteboards - uxstencils.com

UX prototyping: UX Stencils for Whiteboards – uxstencils.com

UX Prototyping Tool #1 – UX Stencils for White boards

There’s an entire market out there for people like you and me :-D. If you’re a whiteboard guy like me, then you’ll love UX stencils for your white boards. Companies like our very own Bootstrap Boards, have a package for frameless power tools free white boards that come with stencils that give you a pixel perfect icons and shapes for your prototypes. What’s really exciting is the R&D going down at HQ for storyboarding stencils for the whiteboard (Yaaas!). If you have an idea of what shapes would be killer for the stencil, contact por favor!

UX prototyping: UI stencils for paper prototyping

UX prototyping: UI stencils for paper prototyping

UX Prototyping Tool #2 – UI Stencils for Paper

When you are first designing, the best practice is to get away from the computer and get on the whiteboard or paper. For paper, I highly recommend UIstencils line of pencil friendly. You can even get icon packs do you never have to struggle with your team’s commitment to Material Design or Twitter Bootstrap. They also are made in a sexy metal so you can share them around the office and encourage all the people “bad drawing” to get going and lose the fear.

UX prototyping: Lightshot Screenshot Chrome extension

UX prototyping: Lightshot Screenshot Chrome extension

UX Prototyping Tool #3 – The Power of Screenshot on your computer and phone

Who says you have to design something from the ground up? That’s not the bootstrapper’s way to design. Designing like playing Jazz — it’s all about the arrangement. Some of the most loved jazz pieces are really just collage of already existing chunks music with a twist. It’s how you arrange these parts that makes your art loved or loathed. So when it comes to showing your idea to someone. Find a chunk of it online, screenshot it with web tools like Lightshot, crop what you need and put your design collage together. This will save you at least 6 hours at the early stage of the design workflow and will make your higher fidelity examples relatable.

Screen Shot 2016-10-20 at 3.15.59 PM

UX Prototyping Tool #4 –  Keynote and Powerpoint, the “Sketch” for people who “Can’t draw”

When I started my career, I was on the business side, and was always using powerpoint for my slides. Then when I couldn’t afford a designer under me, I had to come up with product flows, but I wasn’t about to learn photoshop or sketch. I started playing around with Powerpoint and then when I moved to my mac, keynote. My passion for design has taken me into the world of UX and still with all my knowledge of other tools, I fall back to these basic tools. You know why? Because they do exactly what you need for explaining your UX flows, your brand vision, and even your interactive prototypes to your clients, and technical team. You can make your slides in custom dimensions and you can color match and even with a click of a button, key out the background of a figure in a jpeg image.. crazy stuff for your old presenter tool. So If you ask me what I’ve made on them, just contact me or comment I will upload some stuff 😉

Screen Shot 2016-10-20 at 3.16.20 PM

UX Prototyping Tool #5  –  Invision, Powerpoint and Keynote for interactive prototypes

Once you used your whiteboard stencils, to clarify your vision, and then screenshot and hack together high fidelity ideas you’ve found, it’s time to connect them all into an interactive prototype. Technically you can make a super easy click model on Keynote and powerpoint and save it as a pdf. Pretty straight forward… but if you’re like me and you are on different devices all the time and want to just keep things separate yet easy for updating, then Invision should be your number one choice for prototypes. Take your slides and simply just drag and drop them all into your Invision, on your browser. From there, the super simple interface will guide you step by step on how to make the top nav bar of your website mockup hover like the real thing. If you want to make information just by hovering your mouse over a button, they made that action a super straight forward process.

In Conclusion:

Design workflows for “People who can’t draw” (me) is as follows:

  1. Stop saying to people “I can’t draw”. It only hurts you in the long run and makes others question your confidence.
  2. Try The Stencil offload cognition for the UI so YOU can focus on the UX in your whiteboarding.
  3. Screenshot app pages and hack the together on Powerpoint or Keynote
  4. Make easy click models on Invision, powerpoint or Keynote