Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Prototyping with Xcode

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Nikkel Blaase Nikkel Blaase
November 11, 2013
Design
0
230

Mobile Prototyping with Xcode

I gave a talk about mobile prototyping with Xcode.

Avatar for Nikkel Blaase

Nikkel Blaase

November 11, 2013
Tweet

More Decks by Nikkel Blaase

See All by Nikkel Blaase
Microinteractions
Avatar for Nikkel Blaase jaf_designer
1
160
Xing Icebreaker – Google Glass app
Avatar for Nikkel Blaase jaf_designer
1
170
Die Glaubensmaschine
Avatar for Nikkel Blaase jaf_designer
2
500
Der Google-Komplex – Suche und Retrieval
Avatar for Nikkel Blaase jaf_designer
0
88
Mobile Usability
Avatar for Nikkel Blaase jaf_designer
0
120

Other Decks in Design

See All in Design
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
300
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
220
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
720
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.3k
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.9k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
160
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
910
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
3.1k
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
660
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
370
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
230

Featured

See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
130
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
180
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
160
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
430
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
180
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
140
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
210

Transcript

  1. MOBILE PROTOTYPING WITH XCODE NIKKEL BLAASE

  2. None

  3. • Xcode + iOS Simulator installed on your mac !

    • For testing on real devices: • iOS Developer Account • Registered Device (iPhone, iPad, iPod) WHAT YOU NEED TO START

  4. STORYBOARD LAYERS FILES PROPERTY INSPECTOR LIBRARY XCODE 5

  5. LOOK MOM NO CODE!

  6. STORYBOARDS

  7. STORYBOARDS • No code required • WYSIWYG • Default UI

    Element • Easy connecting the Views • Layers like PS • Gestures

  8. UNIVERSAL APP • One storyboard for each device

  9. • Navigation Controller NAVIGATION TYPES • Tab Bar Controller

  10. HOW TO PROTOTYPE

  11. HYBRID APP • Good for fancy Webtechnology, animations, interactions

  12. NATIVE APP • Good for fast prototypes with different views

  13. NATIVE UI ELEMENTS • Gestures • UI Elements • Controller

    …

  14. Websites • https://www.cocoacontrols.com • http://developer.apple.com CHECK THIS OUT

  15. HAPPY PROTOTYPING :)