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.

Intro

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

appstore

Head to the App Store and download Xcode.

Start A New Project

Start

Setup Up App

SetupApp

The Xcode UI

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

XcodeUI

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.

NewGroup

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

AddFiles

AddImages

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.

FileManager

ObjectLibrary

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).

AttributesInspector

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.

ViewController

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.

Segue

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.

Modal

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.

Embed

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

TopBarRemove

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.

Run

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.

SizeInspector

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.

Layers

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.

Backbutton

Views and Objects

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

XcodeViews

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:

XcodePrototype

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

Resources

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

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

  1. @luxe says:

    How to Prototype in Xcode using Storyboard
    http://t.co/KOOiSCdp2c
    (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.

    http://t.co/495TYl72zP

  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”
    http://t.co/TytmQRgzXl

  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.
    http://t.co/OmPsSsuP7x

  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.

    https://itunes.apple.com/us/app/blueprint-lite/id407188253?mt=8

  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

    http://t.co/EaBWgYYYEe

  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:

    http://mindsea.com/2013/06/03/mobile-prototyping-for-designers-with-xcode-storyboards/

  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.

    Merci
    Pierre

  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.

    Thanks

  141. Meena Jethva says:

    Dear Meng,

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

    Meena

  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

    thanks

  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

Leave a Reply