I picked up Paper App yesterday after not having used it for awhile. I was very happy to see the (new to me) updates, mainly the ability to draw straighter lines and shapes with a specific pen in the app.
This is a huge step forward when it comes to sketching out interfaces or wireframes that you can show to clients or colleagues. There’s nothing wrong with paper sketches but this style of sketching is just a little nicer to present to someone and the rule of thumb goes: the higher fidelity artifact will yield the best, most realistic and valuable feedback. I got very excited and started sketching out my simple interface. My plan was to sketch out the interface and add some text to it in Sketch App (as opposed to trying to sketch out letters) to really spruce up the sketch and make it readable and understandable.
To my surprise I learned that Paper App only allows you to export a PNG or PDF and the PDF exports as an image (as opposed to vector artwork that you can manipulate) so you cannot edit the exported artwork in Illustrator or Sketch. This was going to be a big roadblock for me; not being able to edit the artwork was a deal breaker but I was already hooked on those straight lines!
Not willing to give Paper App up I came up with a very straightforward hack that will allow you to have the best of both worlds, using the inherently raster artwork as SVG/vector. The steps go as follows:
1. Sketch Your Interface & Email it to Yourself
The photo above is where I started with my interface and you can see that I sketched out some basic shapes to use. I wanted to add some nicer text to the interface so at this point I emailed myself the PNG file.
2. Use Online-Convert to Convert the PNG to Vector Artwork
This is where things get really fun. Using this site, you can easily and reliably convert your raster artwork to an SVG format allowing you to use it and modify it in Illustrator or Sketch App.
3. Edit to Your Heart’s Content
My design tool of choice is Sketch App. I took my new SVG artwork and started to add some marker font text (you can buy this font on MyFonts.com) to it in Sketch App, which really helped me round out the interface. This process creates a high-fidelity sketch or low-fidelity wireframe, whatever you choose to call it. It’s a great starting point for getting feedback on flows and initial layouts and allows you to use all sketching power of Paper App but with an added layer of functionality.
The final result allows me to show a user’s flow with real information while still maintaining the type of fidelity that is appropriate for the early stages of a design process. I hope you enjoyed this post – if you did, please let me know!