How To Wireframe An iPhone App In Sketch
Working on a large project often requires you to design wireframes to communicate complex ideas before spending countless hours polishing. There are many tools for wireframing ranging from the simplistic Balsamiq to the highly collaborative Axure, which costs a fortune. Personally, I use Sketch, a powerful vector-based design tool. With features like Artboard, Linked Styles and Export Slices to PDF, Sketch is the perfect wireframing tool for designers obsessed with pixel perfection.
Download The iPhone Wireframe UI Kit
Focus on User Experience
Wireframes should be as bare as possible. That is because you want your client to judge the user experience rather than the look. Using real dimensions and grids can be good, do it only if you have confidence. Knowing realistically how much content can fit in a single screen can make or break a concept. From my experience, within the constraint of time, the closer you can get to the real product the better. That is because being in front of a high-fidelity mockup can largely influence important product decisions such as navigation complexity, content fit, usability, overall value, etc. I try to look at all my designs from my phone’s screen simply because the experience can be dramatically different from looking at mockups in low resolution from a computer screen.
In this .sketch file that I provided, you will get all the iOS essential elements in the exact dimensions that respect the iOS guidelines.
The most efficient wireframes I’ve seen use subtle tones of gray or blue. Ideally, the shades should be neutral and consistent so that you can focus on the structure and not be distracted by strong colors. Since colors can be hard to master, use real colors at your own risk.
In Sketch, the linked styles feature is convenient for wireframing. I placed 4 colors on the palette from dark to white to structure design. By changing them, the whole wireframe will be updated.
If you respect the color structure, changing to the hues that suit your taste will be effortless.
Since user interface design can often make use of icons, don’t be shy to pick standard icons to represent key actions. It can help make the decisions of either going text only, icon only or text with icon. By now, you should have gathered a nice collection of icon sets that will help you brush through this process with ease. If you’re a long time Photoshop users looking to learn how to get started in Sketch with a good library of icons, I recommend reading my previous article Photoshop Users: How To Switch To Sketch
The iOS Human Interface Guidelines is a good read for any mobile designer. While designing, you should have a good notion of the optimal dimensions for your buttons (22 pt minimum, 44 pt optimal), readable text (24 pt minimum, 30 pt optimal), header (44 pt) and footer (49 pt). Thankfully, on the wireframe document, you will have access to all the assets tailored to the correct sizes.
Deciding on the font can be part of the wireframing process. On iOS, Helvetica Neue is the font of choice and is readily available by default on the Mac (if you’d like more history about that font, I strongly suggest watching the documentary called “Helvetica”).
On Android, I would suggest Roboto. (I will write a Wireframe blog specifically for Android later).
But if you don’t want to worry about typography, the Blokk font may come in handy. Text will be represented by irregular blocks. Make sure to set the perfect font size (32 px) and line-height or it will look strange.
Export to PDF in pages
PDF is an effective format to send to your client. They will love being able to view your wireframes on their phones or desktop, and since it’s all vector, it will look great. Sketch has a neat feature that lets you export all your slices to separate pages in a single PDF file. Since it’s all vector-based, the document will be very small and will look crisp on any resolution.
More Wireframe Resources For Sketch
There’s a great Wireframe UI Kit with a different approach by Anthony Aubertin.
You can find the flat version of the Minimal iPhone I shared on Dribbble.
Wireframing should be quick, two hours at most. It’s a good practice for any designer to get comfortable with the guidelines and best practices of a platform. I was tempted to add a prototyping process section but I figured that I wanted to give quite a bit of details so I’ll write another blog instead with tips and techniques.