Apr 30 2013

How To Prototype In Xcode Using Storyboard

The purpose of prototyping in Xcode is to be able to create a super high fidelity flow using the exact same software that builds iOS Apps. In Xcode, there is no limit. You can embed beautiful interactions, transitions, animations and sounds to produce a true native experience. In this tutorial, I will focus on the Storyboard feature, a powerful tool in Xcode that allows you to build an App without a single line of code. You will be able to create a functional prototype in a matter of hours.


The end goal is to eventually be able to implement your own designs for iOS. Just like learning CSS for the Web, this will immensely help developers overcome their struggle with UI work and push the collaborative work between designers and developers. Design is how it works, Steve Jobs said. Designing static images is not enough, you need to bring them to life.

Get Xcode


Head to the App Store and download Xcode.

Start A New Project


Setup Up App


The Xcode UI

The user interface is overwhelming at first, so let’s focus on the crucial parts that apply to Storyboard.


Add Images

Have your App screens ready without the status bar. To add them, create a “Group”, then “Add Files To…”. You can also drag and drop images to that folder.


Make sure you have “Copy items into destination group’s folder” and “Add to targets” enabled.



First Screen

Now that we have the basic setup done and the images added, we can finally start Storyboarding. Go to Storyboard and drag and drop a Button from the Object library.



Why a button? Because it allows you to link to a second screen. It acts as a clickable image. Resize the button to fit the entire dimension of the screen.

When you select the button, you should see properties appearing in the Attributes inspector. The properties we’re interested in are Type, Title and Image. Set Type to Custom, Title to nothing and Image to your first screen (type the name of your image and it will autocomplete).


Second Screen

Screens are called “Controllers” in Xcode. To create a second screen, simply drag and drop a View Controller, then repeat the previous step.


Connecting Screens

Xcode connects screens by a link they call “segue”. To create a segue, hold the “Control” key on your keyboard with your mouse pointer on the first screen and drag and drop on the second screen. Select “modal”. This will create a transition that slides the second screen from the bottom.


You can customize the transition by clicking on the segue (circle symbol between the two screens) and set the Transition to Cover Vertical, Flip Horizontal, Cross Dissolve or Partial Curl. Or, you can uncheck “Animate” if you don’t want any animation.


The Push Segue

The Push segue doesn’t work without a Navigation Controller. To create one, select the first screen’s View Controller and go to Editor > Embed In > Navigation Controller. A header bar will appear on every screen connected.


To remove that bar, select the Navigation Controller, then set the Top Bar property to None.


Now, you can use the Push segue and it will do a horizontal sliding transition.

Testing Your App

Xcode comes with an iOS Simulator that allows you to preview your App. To do that, select iPhone 6.1 Simulator and click on the Run button in the far top left. An iPhone will appear and you will be able to interact with the App you’ve just built.


Clicking on the first screen will lead to the second screen. It’s not much, but it’s a major step in understanding how Storyboard works.

Header And Content

This is where it gets a lot more interactive. Inside a View Controller, you can have all kinds of Objects from the Object Library. A typical screen has a sticky header, multiple buttons and a scrollable content.

First, you must separate your header and content assets in Photoshop or Sketch. Let’s remove the button we created earlier and drag in an Image Object for the header. In Attributes, set the image name. For the dimensions, go to the Size tab and set the height according to your header image.


Note that Xcode uses pt and not px units (1pt = 2px). Make sure that you use pair numbers in your assets.

On top of the header, you can drag in Button and Label objects.

Scrollable Content

To create a scrollable content, drag in a Table View and set the dimension to fill the rest of the screen. Inside that Table view, drag in a button and set the size according to your image’s dimension. From that button, you can create a segue to the second screen. Make sure that you have the button selected when you do the hold Ctrl + drag and drop trick.


You will need to make sure that the Table View layer has less priority than the header. Xcode works in reverse order where the layers below take priority.

The Back Button

I’m including this function because it’s really useful. I will explain it more in a future tutorial, but for now, create a Group and drag and drop these Objective-C category files. Make sure to check “Add to Targets” during import.

Once imported, you should be able to link your back button to the Exit green icon and an option called backButton will appear. Click on it.


Views and Objects

Here’s a schema of how Views and Objects can be structured:


Once you understand how Views and Objects work, you will be able to customize your Controllers the way you want.

Previewing On Your Phone

Xcode allows you to preview your App on your iPhone. Unfortunately, it’s a complicated process and requires an iOS developer account. Once you have an account, you must follow their instructions on how to create a Certificate and a Provisioning Profile on your Mac so that your device has permission to install the App.

Download The Template

This template should help you get started:


Simply replace the images with your own, tweak the Inspector settings, add new View Controllers and connect them using segues.


Just like in Sketch, experimenting with other people’s Xcode projects is crucial part to learning. Here are some resources you may find useful:

Final Thought

As a designer, I would never have thought that I’d be writing a tutorial about Xcode. It’s traditionally an application that appeals to developers as the barrier to entry is huge because of its complex UI and Objective-C knowledge requirement. But since Xcode 4, the addition of Storyboard allows designers to overcome their fear of writing codes and directly use an intuitive interface to produce meaningful interactions.

This tutorial wouldn’t have been possible without the help of Max Tagher, our iOS developer at Heyzap who helped me through countless road blocks. If you have someone knowledgeable about iOS development, I suggest that you start getting friendly with that person and ask for help whenever you run into a problem.

This is the first tutorial of a series. In the next tutorial, I will include custom fonts, more complex flows, animations and sounds. Finding good Xcode resources is a massive endeavor, so if you have any, please do share.

0 tweets

269 Responses to “How To Prototype In Xcode Using Storyboard”

  1. @luxe says:

    How to Prototype in Xcode using Storyboard
    (via @MengTo)

  2. Paul Mederos says:

    I never considered using Xcode for prototyping until you mentioned it a few days back. Tried it out (pretty much exactly how you describe it) and found it extremely useful… and fast! Excited to see where other prototypers take this tool…

  3. How To Prototype In Xcode Using Storyboard: The purpose of prototyping in Xcode is to be able… http://t.co/CUln3AVplM

  4. @sumihiro says:

    Storyboardでプロト作るチュートリアル。「戻る」ボタンのカテゴリ実装が良いな。>How To Prototype In Xcode Using Storyboard | Meng To – UI/UX Designer http://t.co/eofxXwA0mh

  5. @superjunaid says:

    How To Prototype In Xcode Using Storyboard http://t.co/6PKoWRCUve via @zite

  6. Bob says:

    Great post – thanks for sharing. Storyboard is indeed a powerful tool, but sometimes I do find that the Storyboard file gets so big that it becomes a bit unwieldily. Do you generally break up your apps into several smaller Storyboards or just stick with one or two big ones? Thanks!

  7. @georgechen says:

    How To Prototype In Xcode Using Storyboard. http://t.co/oKWx7g2Cd9

  8. Dean Hudson says:

    This is awesome Meng—thanks for taking the time to share your knowledge. Looking forward to messing around with Xcode over the weekend!

  9. Thanks mate, this could come in handy.

  10. 蛋糕櫃 says:

    Thank you for sharing this great template

  11. @axxou says:

    How To Prototype In Xcode Using Storyboard • cc @sowenjub @solenema @macsym http://t.co/vBWGEjt2PW

  12. 用這個 Storyboard 的 Template, 你就可以輕鬆的在 Xode 裡開始prototype 你心中的 App idea http://t.co/Pkts4TYgPB

  13. Mariusz says:

    You can use multiple storyboards in your app and split huge storyboards into small modules. The problem you get is linking from one to another. Xcode doesn’t support such a feature right now. But there is a solution for that. Rob Brown has build a framework for that and it works like a charm. You can find his blog post about linking storyboard here: http://robsprogramknowledge.blogspot.de/2012/06/linking-storyboard.html

    Btw I like your article a lot about prototyping. Looking forward to the next articles :-)

  14. How To Prototype In Xcode Using Storyboard | Meng To – UI/UX Designer [ via Hacker News] http://t.co/hNZZGSfZJw

  15. Awesomesauce: “@MengTo: How To Prototype In Xcode Using Storyboard: http://t.co/0zDwaLTyAM”

  16. @Sayobs says:

    storyboardは凄いなー/ How To Prototype In Xcode Using Storyboard | Meng To – UI/UX Designer http://t.co/8wStPjBAQA

  17. Chetan says:

    Fascinating! I’ve been looking into prototyping an idea I’ve been working with and never would’ve thought to use Xcode until actually coding it out. I’ll have to try this process out to see how it goes.

  18. @emarkensten says:

    How To Prototype In Xcode Using Storyboard http://t.co/z78H9F6Is4

  19. How To Prototype In Xcode Using Storyboard.


  20. After playing around with Xcode’s storyboard mode, I’m really slapping myself for not using it for prototyping before http://t.co/2wjeAFYl5s

  21. [...] The purpose of prototyping in Xcode is to be able to create a super high fidelity flow using the exact same software that builds iOS Apps… Storyboard, a powerful tool in Xcode that allows you to build an App without a single line of code. You will be able to create a functional prototype in a matter of hours. http://blog.mengto.com/prototype-xcode-storyboard/ [...]

  22. @JohnRiordan says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/4v2g7zc6YP

  23. I had no idea you could prototype in Xcode like this. http://t.co/WG1MxL3pTm #Xcode #storyboard #UX #UI

  24. @iqonicd says:

    @michaelw90 @daveyheuser hah, you can use Xcode for that: http://t.co/1Ckfuytq0k

  25. @SteveMoser says:

    So true. Non-devs don’t need to be afraid of Storyboards “How To Prototype In Xcode Using Storyboard” by @MengTo: http://t.co/CQ4CNG1ERF

  26. @davedenis says:

    @ffrandias @alimorando interesting? http://t.co/wo1LLp5LZk

  27. @ericsnowden says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/EuJ1HEIda4

  28. @CodeSplash says:

    How To Prototype In Xcode Using Storyboard http://t.co/2QgMHzO2aN #webdesign #design

  29. @Pumpki says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/mRyh9rnJA4

  30. @KageKirin says:

    How To Prototype In Xcode Using Storyboard http://t.co/tL48qDx8n6 via @zite

  31. @HeyCameron says:

    An extensive tutorial about prototyping in Xcode for designers: http://t.co/54V6u4RIUg by @MengTo

  32. @stalewine says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/1i5UtVMTGu

  33. How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/riS0iliI5e

  34. @scheugl says:

    .@MengTo’s tutorial about #iOS prototyping in Xcode for designers: How To #Prototype In #Xcode Using Storyboard http://t.co/KkjNX7w9nE

  35. @masviken says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/kaZQ3DjVGp

  36. Manas says:

    Definitely going to give this a shot, thanks a lot for compiling it :)

  37. How To Prototype In Xcode Using Storyboard | Meng To – UI/UX Designer http://t.co/xhQAsRrpNb

  38. @ebrandi says:

    How To Prototype In Xcode Using Storyboard http://t.co/ULDCv9uuBs via @zite

  39. @MadeByElvis says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/S1d7RNllvf

  40. Dominic says:

    Thank you for this information. How great it is to see your design with initial interactivity. I’ll try this over the weekend and would love to share what I can come up.

  41. How To Prototype In Xcode Using Storyboard • http://t.co/Q3MrholHG1

  42. Ryan says:

    What a great resource. Can’t wait to try it out. Thanks!

  43. @schluete says:

    “Screens are called controllers in Xcode” As a dev this makes me cringe ;) nice tutorial for designers nonetheless http://t.co/mkhgnrO5TV

  44. Theo says:

    Thanks, I’ll give it a try.

    But do I actually need a $100/y account to preview prototypes on my iPhone?

  45. @ivankin says:

    Xcode для дизайнеров http://t.co/T98nP7oQaQ

  46. How To Prototype In Xcode Using Storyboard http://t.co/AfWOOR3C7W

  47. How To Prototype In Xcode Using Storyboard http://t.co/OZvC3vftcX via @mengto

  48. @tyrussma says:

    Great tutorial (for designers) on how to prototype designs in Xcode using storyboard ~ by @MengTo http://t.co/zwMD5FjBiu

  49. @akterpnd says:

    Прототипирование в #Xcode — очень, очень полезная статья. http://t.co/07XmsjSQ6X

  50. @francisuji says:

    “@speckyboy: How To Prototype In #Xcode Using #Storyboard http://t.co/UhTX3iCHdu” #ios

  51. @Aetles says:

    Det här är intressant, Xcode kan mer än jag kände till: ”How To Prototype In Xcode Using Storyboard”

  52. @_ll_l says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/Am8f9AU1HL

  53. Hi there, fantastic tutorial. I have tried an old version of xcode, but it was just so daunting that I placed it directly to the recycle bin…
    However once reading this I would happily give it a go again anduse it for my further development.

    How will we know when your next tutorial is ready in this series? I am looking forward to what comes next.

  54. @hartsharon says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/wOWkiuxle3

  55. @didats says:

    Ini malah nyusahin dev-nya deh. :D “@inikeren: How To Prototype In Xcode Using Storyboard http://t.co/tsRh4uSpnJ”

  56. Great articles for beginners wanting to learn iOS design: http://t.co/wNCCy22Mxx

  57. Chunyang says:

    Great Tutorials, Thanks and looking forward the next. :)

  58. Remember how we talked about prototyping apps with Xcode’s storyboards? Here’s how you do it! https://t.co/5dLwAPRNib

  59. How To #Prototype In #Xcode Using #Storyboard | Meng To – UI/UX Designer http://t.co/xysMWX279j

  60. @ghaffarian says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/gwjljfr300

  61. @burrowsdan says:

    Might have a got at this this weekend.

  62. @ldesserrey @kowitz ça c’est vraiment cool aussi http://t.co/KYy95PwylV #iphone #simulator

  63. @mage95 says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/a9SSpEtDt2

  64. @enzolivolti says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/7uKWyI56in

  65. Eski Mirza says:

    This is great! It is quite troublesome to find a tutorial for PSD -> Xcode conversion compared to all the good PSD -> HTML/CSS tutorials out there.

    After about 2 months of learning IOS development, i find that styling the uitableview is the hardest since there are many things to consider.

    Great stuff and keep it up!

  66. How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/Q5kIhAIMdU

  67. How To Prototype In Xcode Using Storyboard | Meng To – UI/UX Designer http://t.co/SRGkjuTNBX via @kippt

  68. @szpakoli says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/Luhp9JEFuV

  69. Awesome prototypes on Xcode http://t.co/KzhQIPUFjs #mobile #ux

  70. How To Prototype In Xcode Using Storyboard http://t.co/SWSo4lCkFn

  71. @ux4science says:

    How To Prototype In Xcode Using Storyboard http://t.co/XCno84xZdG via @zite

  72. Josh Caldwell says:

    Great tutorial! After downloading tons of prototyping tools and being unsatisfied with not being able to add the extra layer of interactions besides page to page clicking this is far superior. Thanks for taking the time to post. Without this xcode seemed intimidating to jump into from a visual and ux design perpective.

  73. How To Prototype In Xcode Using Storyboard http://t.co/JoDrKU7WWK

  74. @vernalkick says:

    Really good tutorial on how we, designers, can start using Xcode — http://t.co/zDZq2z1Axt

  75. How to prototype in Xcode using Storyboard — http://t.co/I7mGVBTQQs

  76. @auvalent says:

    (!) How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/yJU91lsU9l

  77. @randybrito says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/bvXOUjHtPX #first

  78. @NickMitin says:

    Я был уверен, что это возможно и правильно! http://t.co/OmFN5Jq1sM

  79. [...] How To Prototype In Xcode Using Storyboard: Start learning the efficient way of iOS prototyping, inspired by @MengTo [...]

  80. Дизайнер мобильных приложений с фотошопом! Ебать ты лох http://t.co/2uECl6Kf0T

  81. @PhilFrasty says:

    nice tutorial „How To Prototype In Xcode Using Storyboard“ http://t.co/O8QiFlPhkK by @mengto

  82. How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/06ESYLaHLk

  83. Niraj Shah says:

    If you have the artwork ready, then use the Blueprint mockup app on your iPad. A bit of a learning curve. The app has a built-in mockup of Apple’s world clock.

    You can create interactive screens with Blueprint. Don’t need Xcode. Can even email the mockup package to Clients for viewing and interacting with the mockup on their own iPhone or iPad.


  84. @marrimo says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/LJlbHc7zHE

  85. @withlinks says:

    http://t.co/x9RFBLcczU Designers can easily prototype apps in Xcode

  86. @JuanRaGD says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/UjPXyBsPFE

  87. @jonasbn says:

    How To Prototype In Xcode Using Storyboard | Meng To|UI/UX Designer http://t.co/9K4HOXK0Vn

  88. @bealmighty says:

    file under: elegant tools for non-developers (& developers) http://t.co/m0watGHrlv @mengto on prototyping in Xcode

  89. @linehaus says:

    Now reading: How to Prototype in Xcode Using Storyboard via @MengTo


  90. Stuart Morris says:

    Great resource, will you be providing any example Sketch files where these were designed too?

  91. @kulekci says:

    How To Prototype In Xcode Using Storyboard http://t.co/90Rzn4l26P via @zite

  92. @saraakn says:

    How To #Prototype In #Xcode Using Storyboard http://t.co/VlOrzVZJtV

  93. @pinyarat_s says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/QuVM6RRJ8t

  94. @welsinga says:

    How to Prototype in Xcode using storyboard http://t.co/nLVquTQyoy

  95. @bytino says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/XKggloP3oz

  96. @ZanardoAlex says:

    How to #Prototype in #Xcode using Storyboard: http://t.co/sNJXQeidZ4 via @MengTo

  97. @sidv says:

    Prototyping apps in Xcode using storyboard. Easy way to prototype what you design to be better understood by clients. http://t.co/6zywu6Dyro

  98. How To Prototype In Xcode Using Storyboard http://t.co/xjNUTWtc5K via @zite

  99. @Ruudverstraeten Kwam deze net tegen, wel aardig als je meer in xcode (storyboards) wil doen: http://t.co/uPgyPMfXXu

  100. @samoilyk88 says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/u7ziSfl1Up

  101. Stephen says:

    What I truly love about this is that it’s a gateway drug to actually learning how to develop iOS apps.

    Way back when Interface Builder was a separate app, this is what lead me on path to not only design, but actually do some development of iOS apps.

    Glad you took the time to write this – I never did!

  102. How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/mr7R4xVVo8

  103. @ydn says:

    Storyboard is a powerful tool in Xcode that allows you to build an App w/o code. Create a prototype in hours. http://t.co/gpUOaiqdxQ

  104. [...] to our work, we’re always excited when a new tool hits the market. This blog posts introduces Xcode, a new prototyping tool for iOS, and leads you through the steps to download and put it into [...]

  105. @thinkETG says:

    How To Prototype In Xcode Using Storyboard. Do you use Storyboard to help you you? http://t.co/FOUXoUx3xR #xcode

  106. @UX_Im says:

    How To Prototype In Xcode Using Storyboard | Meng To http://t.co/Vb4upFJ9Jy

  107. How To #Prototype In #Xcode: http://t.co/H2c6sLIkcR #UX #weblabor #wireframe

  108. @brianpagan says:

    Build a mobile app with Xcode, without writing a single line of code http://t.co/3DraAuRNyM great tutorial by @MengTo

  109. @marybnolan says:

    How to prototype in Xcode using Storyboard – http://t.co/vlBCAQrhhZ

  110. @htomine says:

    “How To Prototype In Xcode Using Storyboard | Meng To – UI/UX Designer” http://t.co/J4v8mqFHoh

  111. I’m gonna read this again later. Prototyping in Xcode w/Storyboard http://t.co/yhRj6XvaRL

  112. How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/XUmqbr0YbO

  113. @maxart says:

    @LukeInTH Send your designers to: http://t.co/2kxxGLgAuP It’s the holy grail right now, but that’s not for everyone.

  114. How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/qs2txDnqW7

  115. @elirousso says:

    @chancegraham @keenancummings @howells Started here: http://t.co/7BCMwoejVK

  116. @BreakTApps says:

    Fantastic tutorial on: How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/P6h9b6zRHj check it out!

  117. @garyhoff says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/oqbWdvETbK

  118. @arieare says:

    A worth to try blog post from Meng To, How To Prototype In XCode Using Storyboard http://t.co/zanW33STmj

  119. [...] was happy to read How To Prototype In Xcode Using Storyboard. It is good to see a resource on using Xcode Storyboarding from a designer’s perspective as [...]

  120. @fffabs says:

    @pmusolino ahah, da Storyboard puoi animare alcune transizioni ma forse nulla di così complicato. http://t.co/tva4ZjwFXM

  121. [...] If you need a running start with Storyboard, I recommend you take a look. [...]

  122. @eloyole says:

    How To Prototype In Xcode Using Storyboard | Meng To – UI/UX Designer http://t.co/e1jeP0ExBB

  123. How To Prototype In Xcode Using Storyboard http://t.co/MN0pam5GWn

  124. @davemark says:

    Tutorial on using Xcode and Storyboards…
    http://t.co/ssVBJORygC #xcode #ios #iosdevs

  125. @nsbuzz says:

    How To Prototype In Xcode Using Storyboard | Meng To – UI/UX Designer http://t.co/zvRYtgLZSv

  126. @flinto says:

    @tylr Have you considered xcode storyboards? @mengto wrote a nice overview. He showed an impressive sample too. http://t.co/D7jBFnGgjo

  127. @Eric_Rainey says:

    How To Prototype In Xcode Using Storyboard http://t.co/Lkbrxu2Rvl via @mengto #ios #ux #mobiledev

  128. @nunocostapt says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/5ABZoVARkw

  129. [...] There are many iOS prototyping tools out there: Briefs 2, POP, Prototypr just to name a few. The one that really struck me as the most efficient is Flinto by far. Ironically, it’s the only Web-based tool amongst them. And there is nothing better out there. It will literally take minutes to create a prototype that looks like it was made using Xcode Storyboard. [...]

  130. How To #Prototype In #Xcode Using #Storyboard » http://t.co/skLsvTrFPA #ux #ios

  131. @mbellinaso says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/Q2Cb1ZwlvG

  132. @wid0ki says:

    How To Prototype In Xcode Using Storyboard http://t.co/Qb0S9ET4Wr

  133. @timworks says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/7K3vL9XTkW

  134. @lullaloops says:

    How To Prototype In Xcode Using Storyboard by @MengTo: http://t.co/GaxTtlYEON

  135. So many iOS app prototyping tools out there and the best one is free. http://t.co/nflv8GSFLL #Apple #Storyboard #Xcode

  136. Reuben says:

    I’ve used Xcode to prototype several apps. Your post inspired me to write down some of my own thoughts as well as some additional tips and tricks:


  137. @RoyAbbink says:

    How To Prototype In Xcode Using Storyboard – http://t.co/An2HWQyKnr

  138. @DevAnywhere says:

    How to prototype in Xcode using Storyboard, by @MengTo h/t @ithinkux http://t.co/v7GYZaU8U6

  139. Pierre says:

    I would greatly appreciate learning how can I add a tab bar with 4 or 5 tabs at the bottom.


  140. Luca says:

    Hi all, can I downloader source of this project? I downloaded xcode project file but I see only images… I would like to download all sources.


  141. Meena Jethva says:

    Dear Meng,

    Thanks for taking the time to post this awesome tutorial. I really appreciate it.


  142. I got this web site from my buddy who shared
    with me about this site and at the moment this time I am browsing
    this web page and reading very informative posts here.

  143. [...] 原文链接:http://blog.mengto.com/prototype-xcode-storyboard/ [...]

  144. [...] 原文链接:http://blog.mengto.com/prototype-xcode-storyboard/ [...]

  145. [...] 原文链接:http://blog.mengto.com/prototype-xcode-storyboard/ [...]

  146. Richard says:

    Awesome! This helps me to be on track again after getting lost in XCode’s own documentation!

  147. [...] 原文链接:http://blog.mengto.com/prototype-xcode-storyboard/ [...]

  148. [...] 原文链接:http://blog.mengto.com/prototype-xcode-storyboard/ [...]

  149. [...] 接著我驚訝的聽到他在工作流程中使用 Storyboard ,許多我接觸過的 iOS 工程師都一點也不想使用 Storyboard。團隊中有一個使用 Storyboard 的工程師,等同開啟了設計師和開發者間的合作,因為 Storyboard 很簡單,設計師也可以使用。這相當於設計師在使用 HTML 和 CSS,而不是開發者。 [...]

  150. KiwiTech says:

    I use xcode for prototyping and it is pretty simple if you know what exactly you are doing.
    I pretty liked the documentation of the process you have done, will share it with my juniors when I have to explain things to them.

  151. [...] 我以前用Xcode的故事板(Storyboard)做过原型, 但我更希望自己做的不是原型,而是一个可以操作有功能的App,所以也就没有再用了。前段时间,我遇到很喜欢使用Xcode故事板的iOS Engineer,我们一起协作了一个App的开发设计,在他的帮助下,我和他一起用故事板,将设计到开发的流程流畅和简化了非常多。使得我能够全心制作像素完美的动画和界面布局,而他则可以更集中精力开发那些更高级的交互方式。当然这也得益于苹果世界级的文档。以及 Stackoverflow 这个巨大的开发者社区。这篇文章里,我会聊聊Xcode故事板的使用,但不会涉及代码。 [...]

  152. [...] Storyboard ,許多我接觸過的 iOS 工程師都一點也不想使用 [...]

  153. Kevin says:

    total xCode noob.

    Dumb question: i am following your tutorial and building off from your assets. First thing i noticed in my version is that the images ( Profile, achievements ) came up really big. I wonder if there is a setting somewhere that i missed.

    am using the latest version of Xcode 5.0.2


  154. Kevin says:

    here is a screen cap as a reference: http://i.minus.com/jEbJB4iXxZIVh.png

  155. Stephen says:

    This tutorial is absolutely amazing. Thanks a ton for writing about this! I learned a lot and was able to produce a functioning prototype within only a few hours.

    We’ve been looking for a tool with more functionality than Keynote and I find that Xcode is actually a bit easier to understand (thanks to Storyboards) when compared to Quartz Composer.

    Just wanted to say thanks. I’m one happy designer today :D

  156. [...] и выкладывает исходник проекта для примера. Его предыдущая статья на тему. Другие материалы на [...]

  157. I think the admin of this website is in fact working hard in favor of his web site, as here every
    data is quality based information.

  158. Hello, its nice post concerning media print, we all be familiar with media is a fantastic source of facts.

  159. *Matt -Within the Xcode panel. Click on your button/image. On the right hand side you will see a little “Ruler” icon. Click that and adjust your dimensions. For example if your image is 640×2200, adjust to 320×1100.-

    its not work just follow the main tutorial and everything works fine

  160. Awesome article with screen shots then users can easy to understand this app code..

  161. hongyijig says:

    Thanks for Sharing prototyping n Xcode Knowledge this is helpful for me and every one. We are provide Rapid Prototype Services In India last 6-7 years its very supportive for me

  162. lol says:

    “Screens are called “Controllers” in Xcode.” – very interesting perception of controller :)

  163. [...] How To Prototype In Xcode Using Storyboard | Meng To – UI/UX Designer [...]

  164. What i don’t understood is actually how you are not really much more well-favored
    than you may be right now. You are so intelligent.

    You realize therefore considerably in relation to this matter, made me for my part believe it from so many numerous
    angles. Its like women and men aren’t involved except it’s something to
    do with Lady gaga! Your individual stuffs great. At all times deal with it

  165. Whats up this is somewhat of off topic but I was wanting
    to know if blogs use WYSIWYG editors or if you have to manually code
    with HTML. I’m starting a blog soon but have no coding experience so I
    wanted to get guidance from someone with experience. Any help would
    be enormously appreciated!

  166. Fantastic goods from you, man. I’ve understand your stuff previous to and you are
    just extremely wonderful. I actually like what you have acquired here,
    certainly like what you’re stating and the way in which you say it.

    You make it enjoyable and you still take care of to keep it sensible.
    I can’t wait to read much more from you. This is really a wonderful

  167. Thanks for a marvelous posting! I truly enjoyed reading it, you happen to
    be a great author. I will make certain to bookmark your blog and will come back later on. I want to encourage
    you continue your great writing, have a nice weekend!

  168. I’m amazed, I must say. Seldom do I come across a blog that’s
    both educative and interesting, and without a doubt, you
    have hit the nail on the head. The issue is an issue that not enough folks are
    speaking intelligently about. I’m very happy that I found this in my search for something regarding

  169. This design is spectacular! You most certainly know how to
    keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Excellent job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

  170. [...] thanks to Max Tagher for his help on my very first Xcode tutorial and for his contribution with the Custom Font [...]

  171. Randi says:

    Pretty component of content. I just stumbled upon your website and in accession capital to assert that I acquire actually enjoyed account your
    weblog posts. Anyway I will be subscribing on your augment and even I fulfillment you get entry to
    persistently fast.

  172. It’s going to be ending of mine day, however before finish I am reading this fantastic
    article to increase my experience.

  173. Buy HCG says:

    HCG is the most effective, permanent weight loss program to
    both men and women, in particular, those who have given up hope in their journey to permanently lose weight.
    Then you certainly commence what’s referred to as the “maintenance” period where one can devour ordinarily however you
    keep clear of sugars and additionally starches.
    It aromatizes (changes) to estrogen, a molecule proven to
    increase fat storage and decreases muscle mass.

  174. Tiffani says:

    This piece of writing offers clear idea for the new viewers
    of blogging, that really how to do blogging and site-building.

  175. I’m amazed, I have to admit. Seldom do I come across a blog that’s
    both educative and engaging, and let me tell you, you’ve hit the nail on the head.
    The problem is something too few folks are speaking intelligently about.

    Now i’m very happy I found this during my search for something concerning this.

  176. Only attempt now Flowers vs. Zombies TWO Compromise

  177. Almeda says:

    That is a very smart dog will be offering certification dog training techniques training for rescue
    groups and for this special offer category to see you as the trainer to the form of torture.

    my blog; google.com, Almeda,

  178. The first is always to delete Cydia which may mean deleting some tweaks
    that were downloading from there too. This indicates your gadget is now disconnected from
    the Pc. You will use it to find gadgets when they go lacking.

  179. Hi! Do you use Twitter? I’d like to follow you
    if that would be okay. I’m absolutely enjoying your blog and look forward to new

    Feel free to visit my web blog – tee inspector review and bonus

  180. All you require is to adhere to the directions carefully.
    If you have your iPad jailbreak, you do not want
    your gadget to go once more. Action 7: At the subsequent screen, you might be prompted
    to settle on cydia and Installer.

  181. June says:

    It’s hard to find educated people in this particular topic,
    however, you seem like you know what you’re talking about!

  182. Hello, everything is going perfectly here and ofcourse every one
    is sharing information, that’s really excellent, keep up writing.

  183. Gaming is now so trendy. Among the many worlds of the Cryptids
    is one of the industry spreading their wings
    to give family guy the quest for stuff hack high quality picture formation. Resume Advice: Be certain that it’s pretty evident as the selection is
    broken down into categories. It is observed where gamer are able to download in App Store to everybody’s delight.
    With Airplay, you will love them all. Zombie Parkour RunnerThis may also raise attentiveness and focus.

    My webpage – family guy the quest for stuff cheat codes

  184. 0 or it is a moviestarplanet cheats simple graphics. It could moviestarplanet cheats be
    killed with the ability to record your favorite mobile device then the
    player moves to new technology comes along with the call, and advanced chess players.
    Today, most libraries will be the 1st game
    that has become far more advanced features often are available free of cost.

    Feel free to surf to my webpage; Moviestarplanet cheat engine youtube

  185. It’s actually a great and helpful piece of information. I’m glad that you simply shared this useful info with
    us. Please stay us informed like this. Thank you for

  186. Nice post. I’m checking out continually the following blog site exactly what amazed! Very useful data in particular the leftover step :) My spouse and i deal with similarly info a good deal. I was interested in this selected facts for a very prolonged moment. Thanks in addition to all the best ..

  187. Walk-TC says:

    If you are prone to blisters, then taping your feet in troublesome areas with zinc oxide tape is advisable.
    Also take into consideration the fact that your exercise program may not be rigorous enough, a factor that can preclude
    your body from exerting the effort that results in greater levels of energy.
    Body mass Index is a Nokia fitness calculator app that lets
    you calculate, as the title suggests, your body mass index (BMI).

  188. domain says:

    My family members every time say that I am wasting my time here at web,
    however I know I am getting know-how everyday by reading thes nice articles.

  189. As a hardcore gamer, I would like tto share my encounter in the gaming world, ranging from the 1st game that I played, the very first
    gaame that I purchased, the most touching and memorable games, and
    how they influence my life drastically. One particuloar a lot more point,
    I genuinely hope this write-up can deliver back the gorgeous memory of
    your initial video games. The initial game that I purchased was a handheld gadget known as “gamewatch.” It
    relies on two A4 batteries as an power supply.
    I bought this game in thhe mid-1990s, when I had just entered elementary
    college. This game iis a tower defense genre titled “Battle Spica,”
    exactly where you must shoot enemy soldiers before they reach your castle.

    my web page Endless legend crack

  190. For those gamers, download gang beasts just what the future as well as international.
    This action-adventure game sets the goals we received set and pitched it his employers download gang beasts at Lorel Electronics in 1951 while
    working within graphic constraints on the market currently.
    It’s just a couple of years are those Metal Man, Glider Plus and download gang beasts Tetra Madness.

    Take a look at my web-site; Gang beasts pc port

  191. German says:

    Hurrah! At last I got a weblog from where I know how to in fact take
    valuable data concerning my study and knowledge.

  192. Sarimin says:

    wow, great tutorial, nice post.

  193. you’re truly a good webmaster. The site loading speed
    is amazing. It seems that you are doing any distinctive trick.

    Moreover, The contents are masterpiece. you’ve performed a fantastic process in this topic!

  194. Esperanza says:

    Wonderful beat ! I would like to apprentice whilst you amend your website,
    how could i subscribe for a weblog web site? The account helped me a acceptable deal.
    I had been tiny bit familiar of this your broadcast
    offered vivid clear concept

  195. Jeremy says:

    Marvelous, what a website it is! This webpage presents useful facts to us,
    keep it up.

  196. gtg.co.nz says:

    I am regular visitor, how are you everybody? This article posted at
    this site is truly pleasant.

  197. Elliot says:

    Great article. I’m facing many of these issues as well..

  198. First of, it is very important figure out that you need to influence, and then understand the relationships your boss have with him or her.
    “Mister, would you give $300 to assist the Girl Scouts create a better world. Indeed, everyone goes through life each day bombarded by relentless persuasions, which oftentimes, can overwhelm someone. Most conservative individuals will choose blue because it is a calming color so it is one of many best options for a child’s room. And why don’t you consider the impact of television on our children. The consumers do feel pressure because they are the ones who chose to “like” your small business, understanding that eliminates a major problem that can come with marketing.

  199. [...] direkt mit den entsprechenden Tools zu bauen, also zum Beispiel direkt in XCode, wie in dem Artikel “How to Prototype in Xcode Using Storyboard” von Meng To beschrieben. Auch Framer.js geht in diese Richtung mit einer minimalen JavaScript [...]

  200. Amira says:

    Well explained with screen shots, so that people can easily catch entire information, i really appreciate your way of posting..I am solving many issues through your article regarding prototyupe xcode..Thanks

  201. A child who learns the habit of lying to folks will
    also deceive teachers, friends, and themselves. The appeal of
    the social websites is that it provides a new platform for people to
    reach out and engage with our customers, subscribers and also the general public informally and share our ideas while being guided by their
    suggestions and feedback. A creditable threat to psychological or physical survival, with the belief it will likely be carried out;.

  202. [...] 如何基于故事板使用XcondeHow创建原型(How To Prototype In Xcode Using Storyboard) [...]

  203. [...] Meng To:How To Prototype In Xcode Using Storyboard [...]

  204. Shalin says:

    I would like to mention the Mockup software I use. Its Creately, its platform independent software that can be accessed online.

  205. foods cooked says:

    No matter if some one searches for his essential thing,
    so he/she needs to be available that in detail, so that thing is maintained over here.

  206. hi
    thanks for providing useful information, such a help to learn iphone,I am new in iphone app development process.

  207. [...] How To Prototype In Xcode Using Storyboard | Meng To – UI … – Learn Xcode Storyboard, a powerful tool that allows you to design an iPhone App without a single line of code…. [...]

  208. You can be ready to have a unique hiking excursion within the panel regarding
    Mother Nature. Don’t forget to sign up for World
    Winner through Be – Ruby. The player must play as a wise military leader ready to conquer the world.

  209. Starting a site kind of like this one forced me to do some research and I found your post to be quite helpful. My site is centered around the idea of knowledge, fun and sharing. I wish you decent luck with your website in the future and you can be sure I’ll be following it.

  210. [...] How To Prototype In Xcode Using Storyboard | Meng To – UI … – Learn Xcode Storyboard, a powerful tool that allows you to design an iPhone App without a single line of code…. [...]

  211. In my view these are not masked off from navigating Chicago subways, paying for what
    they don’t ant in your life will never get the largest library in the federal
    death penalty against him. Don’t fret if yoou don’t neded live sport
    TV channels inn this arrangement. Once youu experience the red bloo
    cells are destroyed by the early 1800s thhe
    city began Bosto Limo (bostonlifestylelimo.com) housing morde and more.We’re committed to combining promptness, efficiency, according to Weather.

  212. unbroken pdf says:

    Arnav says, She Jenniffer will nsed to do this quickly and has kept it up on FibreWhenn unbroken pdf
    you think about whether or not you want. Shee has ever tried ssaltwater unbroken pdf bath?

  213. Iva says:

    Dr Watson is manning the moderation duties. Granted, the more valuable information for you, they
    will click on dashboar and click on” Dashboard” and choose whichever one you ever hear of in link building, and more. The popular gourmet balsamic vinegar seafch engine ratings as well and has been making to its ranking.

    Feel free tto visit my site … gourmet vinegar (Iva)

  214. [...] How To Prototype In Xcode Using Storyboard by Meng To [...]

  215. Lynell says:

    Good morning, it’s better to hope and a face mask for
    Michael Meyer in Haalloween Town revolves around the bush.
    Look, don’t books kiss me? They usse thhe rest
    of my eyes. I never had one television. That is nvironment cojing in to your father’s honour.

    Feel free tto surf too my web-site – ebook [Lynell]

  216. I find this informative article useful as it contains great stage
    on the subject of web site design in 2015.

  217. Though a document consultation schedule looks not difficult,
    it sure does have a lot of dangers.

  218. SSQ, a mutual diversified monetary establishment primarily based in Quebec City, will even narrow the industry normal, the 30-day survival interval, to 14 days.

  219. At the same time the air ionizers will help you avoid the
    effects of passive smoking.

  220. It’s because the deep tissue therapeutic
    massage is so good at removing a lot rigidity from deep muscle tissues.

  221. Click on the Dell Factory Image Restore choice and then click on Subsequent or OK whichever option you see on the screen.

  222. No doubt about it. But even with such high prices of gold,
    you may still get in the sport, and win.

  223. Opt for sites which assure on time supply of Presents to UK
    with merchandise of the best high quality.

  224. Before you hire the company or do it yourself, you might be thinking what direction to go with
    all the home you’ve today.

  225. Nonetheless you have a look at it, it’s amazing what’s happened to
    the mobile phone games market in the last few years.

  226. Breaking free from the sterile 3D animation methods our experts
    provide a wide range of beautiful kinds to create
    what a person mission calls for.

  227. Thus, that is positively an indication that newspapers will shift their funds
    to their web visibility in future.

  228. The cellphone can broadcast wirelessly through Bluetooth allowing you to stay organised and freed from a cabling nightmare.

  229. But more often than not, the musicians get cheated, resulting in lack of
    money as well as making their dreams get shattered.

  230. I will assure you that France is among the exceptional spots about the earth where that you don’t have to observe
    your back.

  231. For some motive, people who have just started with exercise plans for males tend to forget the decrease half of the

  232. An online session calendar’s efficiency certainly sounds attracting most university administrators and instructors.

  233. Little by little Croatian women are currently getting the positioning which
    they benefit and youngsters care although ladies continue to
    be focused on cleaning.

  234. There is no such thing as a saturation level in launching of stories channel, just
    booming like sky because the restrict.

  235. Este archivo lo puedes entonces utilizar en Paypal para pagar de forma masiva todas las
    comisiones, manteniendo así contentos a tus afiliados.

  236. Even if the trends are as complete as attainable.
    Every few days, perhaps, the process too avoid those situations and the breathe lets
    uus eat while suffering the interrnet marketing website judgmental
    gaze of our evolution. Michael Lacey is a quick fix. The truth is there somwthing to worry about whether or not you can do it, you cann do for your body down with a history of heart disease.

    My page Retargeting Services Los Angeles

  237. Hurrah, that’s what I was searching for, what a stuff!
    existing here at this blog, thanks admin of this web page.

  238. Entonces aprendido que es exactamente lo mismo sesion en hotmail de
    manera u otra.

  239. Lanny says:

    The perfect way to learn more about Vietnam and some of the most dynamic new product available for
    2012, this tour blends innovative touring with hotel inspections to give agents an insight knowledge about the
    destinations and become a trully luxury travel advisors.

    That use this urge itself, the full idea of luxury travel principal purpose is, which you often have everything extra, consuming the expertise of this stop by
    to a different level, altogether. ,Ldt has had over 200 valuable customers was traveling to Vietnam
    in term of Incentive, the company’s core business in the next few years is the leading in MICE
    activities for European in Vietnam, Lao, Cambodia and Thailand among their customers were some ministers,
    business man meeting and conference of Royal of
    Oman with respectful references.

  240. In case you decide on a stone n’ spin style, it is possible to design your wedding around a specific group or singer – or even a specific decade of music.

  241. Apple a Day Diet’ is out of your lifee right
    now, he calls muscle confusion. They also had lower blood pressure.
    But it doesn’t seem to final become h2o vapor disappeared, eliminatiing
    a neew era of videogames, Crecente calls Wii Fit offers an easier
    time shedding weight.Here’s the real surgery besides a slight ache or
    discomfort following your owwn home.

    Feel frwe to surf to my page – limo hire lancaster

  242. tech says:

    There’s certainly a great deal to learn about this topic.
    I love all the points you made.

  243. You are determining that you do not wish to breathe in undesirable atmosphere when you decide on an air ionizer.

  244. We turned the rising annual debt of the timeshare right into a savings
    plan with a guaranteed return on our funding.

  245. The facility tough iphone 6 cases you wish.
    If I was out with their iPhone. The mobile phone’s 5 mega pixel iSight camera in acceptable lighting.
    That is OS X and iPhone 6 to 43 per cent to 47 per cent increase.

  246. Text characteristics that deliver specific individuals
    who favor this kind of strategy text messages should even equip with session it.

  247. Infatti quello che un tempo era considerato il mito
    di avere un naso aquilino importante è oggi invece completamente snobbato dai ragazzi di

  248. Johnf8 says:

    You are a really persuasive writer. I can see this in your writeup. You’ve a way of writing compelling info that sparks significantly interest. gaggcdkfdkkd

  249. Thousand Pillar Temple You will like to get pleasure from tour
    to this country when you will have a trip by way of genuine
    India tour bundle.

  250. I blog often and I seriously appreciate your information. The
    article has really peaked my interest. I’m going
    to take a note of your website and keep checking for new information about once per
    week. I subscribed to your RSS feed too.

Leave a Reply