I’ve had the opportunity to do some wireframing in my Information Architecture classes while in the Kent State UXD program, so the thought of sitting down and putting ideas that were on paper to pixels isn’t so foreign to me. However, I’ve decided to take the sketching I did last week and try a new program to create the wireframes… can you guess which one?
Sketch is quickly becoming the popular, go to application for wireframing and mocking up both web and mobile applications. We use it extensively at work, including on all current projects and some cool upcoming work that was extensively done using Sketch’s symbol/library features. I haven’t had any interaction with it before this week however, so I was grateful to take the time and try to figure out how to use it.
Overall, the app isn’t that dissimilar to other wireframing and image editing tools. Getting used to the idea of symbols and artboards through me for a loop at first, but playing around with these features was easy enough and let me do what I needed to. Additionally, the large library of Sketch components created/provided by Sketch themselves and the community at large was extremely helpful for sticking to iOS design guidelines and style as I put my wires to the screen.
I must say, wireframing and creating these screens was an almost zen like experience. I got so invested in pushing the elements around, making sure things looked like they were in the right place, and even used guides to make sure things were lining up the right way. I know at this stage that we’re not creating something “final,” but I couldn’t help myself as I looked at the details and pushed things pixel by pixel.
The one part that was more challenging than not during this experience? Annotation. There is no real easy way to do this in a way that is clear without taking the time to create symbols for your annotation indicators. Also, there is very little in the way of text editing tools that make it easy to manipulate lists. I haven’t had the chance to look at the different plug-ins that are available, but I am sure there is something that will make annotating things easy, as well as solve some of the usability frustrations I encountered.
Now it’s time to string these screens together!