Mar 19 2013

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

wireframe-darkblue
Wireframe iOS Dark Blue

wireframe-blueprint
Wireframe iOS Blueprint

wireframe-beige
Wireframe iOS Beige

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.

Colors

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.

wireframe-linked

If you respect the color structure, changing to the hues that suit your taste will be effortless.

Icons

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

Real Dimensions

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.

Fonts

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.

wireframe-blokk

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.

wireframe-pdf

More Wireframe Resources For Sketch

There’s a great Wireframe UI Kit with a different approach by Anthony Aubertin.

minimal-iphone

You can find the flat version of the Minimal iPhone I shared on Dribbble.

Big thanks to Marcelo Marfill for his iOS UI Kit.

Final Thought

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.

0 tweets

123 Responses to “How To Wireframe An iPhone App In Sketch”

  1. How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/8e89E4FzIG <- Looking for something like this yesterday!

  2. How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/ggHKt9zjv6

  3. Thomas says:

    Thanks, I did not know about the linked styles feature and the Blokk font. BTW, I bet that the numbers of download will be the following: Dark Blue > Blueprint > Beige and *not* because your posted them in that order.

  4. Should give it a try… RT @sketchapp: How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/kCsRi2tbTm

  5. @KirkBoller says:

    Nice option for wireframing iPhone app…How To Wireframe An iPhone App In Sketch http://t.co/04Eu1zXxUp via @zite

  6. David Omoyele says:

    Really love what you’re doing for sketch community, great work and in the future I will like to contribute too. I have one exception.

    I’m starting to form the opinion that if we have the option, we should not show the clients wireframes.

    “Design isn’t about how it looks but it works” but, and a big but, how it looks is also how it works. The implication is
    every design element affects the user experience. For a long time I was designing a lot of my apps with the color red, red is my favorite color and I also wanted to be different. But red is problematic, red is loud, you have turn down the decibel with texture i.e. Path. But even on Path the Navigation bar stands out more than it does on apps like tweetbot & Instagram. Color is so crucial to the experience and it sets the tone. We can use color in a superficial way or we can use it to design an experience that solves a problem. Production color must be addressed and utilized early in the user experience design & discussion.

    Still wireframes are great for getting ideas down fast, for dealing with constraint and working out initial mapping (spatial relationships )

  7. @marsbergen http://t.co/bpROhonUbD Onderste paragraaf

  8. @hismamaz says:

    How To Wireframe An iPhone App In Sketch http://t.co/SCgIbFb2Cf via @zite @pinonyuu

  9. Naomi says:

    Thanks for sharing! Really enjoying your posts about Sketch (as a recent convert per Laura Kalbag’s advice). Love the design of your site too – makes for a blissful read.

  10. How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/CyzxsDNinu

  11. How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/6CdBTKDH9F

  12. @vkord says:

    How To Wireframe An iPhone App In Sketch http://t.co/gXu5JgFd6y via @prismatic

  13. @amzain83 says:

    “@HazemKhaled: How To Wireframe An #iPhone App In Sketch http://t.co/vHaECY2aJJ” Cool ya Man :)

  14. @patrickhaug says:

    How To Wireframe An iPhone App In Sketch | Meng To|UI/UX Designer http://t.co/oDhhYjOoFj

  15. @GGoodhall says:

    How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/uMSKVQsJ0J

  16. How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/7xblihJUAw

  17. @adambellow says:

    How To Wireframe An iPhone App In Sketch http://t.co/wx5V5WESfo

  18. @_scotty23 says:

    How To Wireframe An iPhone App In Sketch | Meng To – UI/UX Designer http://t.co/sXef2LPSsg via @kippt

  19. @VlaPy says:

    Прототипирование в #sketchapp: http://t.co/gZ5bVWP9W5

  20. #How To Wireframe An #iPhone App In Sketch | Meng To – UI/UX Designer http://t.co/s8P4MLgOZp via @pryourblog

  21. @miraculove says:

    A detailed& thoughtful post on “How To Wireframe An iPhone App In Sketch” by @MengTo: http://t.co/ILzHcuCV7T

  22. @RoSNR says:

    Good article. How To Wireframe An iPhone App In Sketch http://t.co/mmqDH4XUPh

  23. How To Wireframe An iPhone App In Sketch by Meng To http://t.co/1ru5kQvPOJ #design #sketchapp #wirefames

  24. How To Wireframe An iPhone App In Sketch http://t.co/FMWKA45PZa via @zite

  25. @Pausrr says:

    How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/OgQS87hacA

  26. @ijeunes says:

    How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/yPX0cqiTC5

  27. How To Wireframe An iPhone App In Sketch http://t.co/LSsvpzSgIQ by @mengto

  28. How To Wireframe An iPhone App In Sketch http://t.co/myS4ETdMWS

  29. How To Wireframe An iPhone App In Sketch by Meng To http://t.co/1ru5kQvPOJ #sketchapp #design #ux

  30. How To Wireframe An iPhone App In Sketch http://t.co/riMsoH821i

  31. Cómo hacer un sencillo Wireframe en Sketch para una aplicación de iPhone: The iPhone Wireframe UI Kit http://t.co/FlsOnIZUkI

  32. How To Wireframe An iPhone App In Sketch http://t.co/IX4ZMQJWAm I started using this a couple months ago. Love it for wire framing.

  33. @loyals says:

    How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/xgaCDNkM40

  34. @cschwan says:

    How To Wireframe An iPhone App In Sketch | Meng To|UI/UX Designer http://t.co/NHupFTFvoS

  35. @fethica says:

    How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/0KZWlghcDt

  36. @andru08 says:

    How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/h06bqGSHl8

  37. @shart291 says:

    How To Wireframe An iPhone App In Sketch | Meng To – UI/UX Designer http://t.co/rKxfdR5Jwd

  38. @sillyleo says:

    Amazing iPhone Wireframe Resources for Sketch users!! http://t.co/C30KKTkyqN

  39. #Непроебать ”
    How To Wireframe An iPhone App In Sketch
    http://t.co/TP7RMl6qCp

  40. @andyngo says:

    @flisterz Not quite. I’m looking for a wireframe kit specifically for iPad. Much like this I suppose: http://t.co/DiyO3ZArFw

  41. How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/cBHWRoDJUU

  42. Vicki says:

    This is great, thanks for sharing! I can’t wait for that prototyping post. I love hearing how other designers work, always something new to learn.

  43. @ggatore says:

    How to wireframe an iPhone app > http://t.co/grUkK6esiQ cc @fiorentino_raph

  44. How To Wireframe An iPhone App In Sketch http://t.co/PExGKF2AzF

  45. @mdwod says:

    iOS Wireframing template (another one, this one is also neat!) Look at the other sources mentioned in here

    http://t.co/d0DoV8MXBT

  46. @TheHedgehog says:

    Egyre szimpatikusabb nekem ez a Sketch. Ő lesz az új Fireworks? – How To Wireframe An iPhone App In Sketch: http://t.co/YAjWwLa7Hw #sketch

  47. How To Wireframe An iPhone App In Sketch http://t.co/BXyDlFsqfo

  48. Jikku Jose says:

    Never knew about the Linked Styles feature; I bumped into this exactly when I was about suggest a feature I was calling: “Smart Style” ;) .. It seems its already there! Anyways, thanks for all the effort that you are spending to help the Sketch community, your resources have helped me a lot.

    Keep up the good work!

  49. [...] Wireframing with Sketch [...]

  50. iPhone App In Sketch: http://t.co/Pn0i9a7Fqu #iPhone #sketch #wireframe

  51. [...] iPhone Wireframe UI Kit (Sketch) [...]

  52. How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/e6wJgj0rCW
    @sketchsources @Madewithsketch @sketchapp @SketchGems

  53. [...] iPhone Wireframe UI Kit (Sketch) [...]

  54. @nanth09 says:

    How To Wireframe An iPhone App In Sketch | Meng To|UI/UX Designer http://t.co/dviVIVkvdU

  55. [...] Meng To’s Wireframing Guide + Resources [...]

  56. @danielscow says:

    Nice set of duo-tone #iPhone #Wireframe sheets by Meng To http://t.co/yG768CffuW

  57. @wid0ki says:

    How To Wireframe An iPhone App In Sketch http://t.co/TTrwasd9Dv

  58. [...] Meng To’s Wireframing Guide + Resources [...]

  59. @cbusquets says:

    How To Wireframe An iPhone App In Sketch by @MengTo: http://t.co/xFUGKq1lgX

  60. [...] How To Wireframe An iPhone App In Sketch [...]

  61. [...] How To Wireframe An iPhone App In Sketch [...]

  62. [...] How To Wireframe An iPhone App In Sketch [...]

  63. [...] How To Wireframe An iPhone App In Sketch [...]

  64. Rob says:

    This is awesome, really enjoying Sketch lately. Has anyone seen a good WEB UI kit for Sketch? I’ve only been able to find kits for Mobile.

  65. [...] How To Wireframe An iPhone App In Sketch [...]

  66. shanjianjian says:

    nice!!!

  67. Spencer says:

    You’re really going above and beyond for us designers. Appreciate your stuff, man!

  68. Fred says:

    Hey Meng, thanks for the freebies.
    Do you know why when I open the files in Sketch they haven’t any Linked Style?

    That’s a shame because if they had been I could change the colors of the entire wireframe as you stated in the post!

    Thanks anyway!

  69. [...] How To Wireframe An iPhone App In Sketch [...]

  70. Simon says:

    Why Sketch for Wire-framing? I had a quick go with it. You can’t double click a box to add text you have to add text as a separate object. Wireframes are not supposed to be perfect they describe functionality. Sketch to me doesn’t feel like a Wire-framing App. It feels like a light vector app. I like it and want to be persuaded… I find Omnigraffle clunky but it has some useful features like Masters. Thanks!

  71. [...] Meng To’s Wireframing Guide + Resources [...]

  72. [...] How To Wireframe An iPhone App In Sketch [...]

  73. Rob says:

    Does anyone know of a good Web Wireframe kit for Sketch?

  74. Peter Kilsby says:

    Hi,

    Am I missing something? This article says that elements like buttons are already at the correct sizes (e.g. 44pt). But when I look in the wireframe document, everything is doubled (e.g. 88pt). This is fine if you’re talking about pixels, but iOS deals in points.

    Help appreciated.

  75. Jeremy Haile says:

    Meng – I’m a recent convert to Sketch (from Omnigraffle although I still use Omnigraffle for site flows and conceptual diagrams)

    I’d like to hear more about how you organize your pages. I’m trying to decide between multiple pages within Sketch vs multiple artboards where you can visualize flows on a single canvas.

    It seems like the former (multiple pages) is more how Sketch is designed to be used. Any advice?

  76. castle Clash says:

    Hopefully, at least one of these games will prove enjoyable enough to save you both time and money.
    If you merely size up the opponent, then you are only half
    way there. Face it, there is nothing better than riding your ATV over cars, traffic lights and other seemingly untouchable things you would never clash against in real-life.

    My site – castle Clash

  77. [...] 如何线框一个iPhone应用程序在素描 [...]

  78. [...] to wireframing assets: iPhone wireframe kit How to wireframe an iPhone app using [...]

  79. [...] Design­ing with Sketch .Sketch App Medium Col­lec­tion Design with Sketch Medium Col­lec­tion How To Wire­frame An iPhone App In Sketch List of Sketch Plu­g­ins Sketch [...]

  80. Hello my family member! I wish to say that this article is amazing, nice written and
    include approximately all important infos. I’d like to peer more posts like this
    .

    Feel free to visit my web site; teeth whitening opalescence

  81. It’s very simple to find out any matter on net as compared to books,
    as I found this paragraph at this website.

  82. If some one desires to be updated with most up-to-date technologies afterward he must be visit this website
    and be up to date daily.

    Also visit my weblog: Vietnam War Movies

  83. [...] How To Wireframe An iPhone App In Sketch [...]

  84. [...] iPhone App Wireframe → [...]

  85. [...] iPhone Wireframe UI Kit [...]

  86. [...] iPhone Wireframe UI Kit [...]

  87. [...] iPhone Wireframe UI Kit [...]

  88. [...] iPhone Wireframe UI Kit [...]

  89. [...] The iPhone Wireframe UI Kit [...]

  90. [...] iPhone Wireframe UI Kit [...]

  91. [...] iPhone App Wireframe (Sketch) [...]

  92. DesignWayOut says:

    Great articles. now i can make better wireframe. Thanks for sharing this great post.

  93. [...] How To Wireframe An iPhone App In Sketch | Meng To – UI/UX Designer [...]

  94. Nik says:

    Hi!

    First of all, thank you very much for such a great set of templates!

    When I open the templates in Sketch 3.0.3, most of the text items (like button labels) are far off of where they should be.

    Is there a quick fix for that?

    Thanks in advance!

    - Nik

  95. Gerry says:

    Is there a forum/community where Sketch users can post questions etc (like a stack exchange)?

  96. [...] Meng To’s Wireframing Guide + Resources [...]

  97. [...] APP设计资源9、How To Wireframe An iPhone App In Sketch [...]

  98. [...] How To Wireframe An iPhone App In Sketch [...]

  99. Rob B says:

    I think the shared color pallet feature has been removed. I don’t see it anywhere in the inspector with the latest Sketch, and when I add a color to the pallet but then later change the color, that swatch item in the pallet remains the same. I use shared styles for certain objects (like buttons), but haven’t found anything as generic as a shared color pallet. Dang that would be handy!

Leave a Reply