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

Interactive prototyping

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for jaideepsingh jaideepsingh
August 24, 2013
Design
2
110

Interactive prototyping

A workshop on interactive prototyping using Indigo Studio - BA Conf, 2013

Avatar for jaideepsingh

jaideepsingh

August 24, 2013
Tweet

More Decks by jaideepsingh

See All by jaideepsingh
Mobile app analytics
Avatar for jaideepsingh jaideepsingh
0
140
Measuring the in-broswer experience
Avatar for jaideepsingh jaideepsingh
0
89
HTML5
Avatar for jaideepsingh jaideepsingh
1
220
Memory profile your JavaScript application
Avatar for jaideepsingh jaideepsingh
0
850
The mechanics of iconography
Avatar for jaideepsingh jaideepsingh
0
170
AngularJS
Avatar for jaideepsingh jaideepsingh
1
360
Tools and techniques to validate visual design
Avatar for jaideepsingh jaideepsingh
0
200

Other Decks in Design

See All in Design
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
200
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
470
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
300
デザインするために「多様性」について考える
Avatar for なつ iflection
0
180
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
2.7k
mount_company_profile
Avatar for mount inc. mount_inc
0
4.9k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
3.1k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
380
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.2k
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
220
Liquid GlassとApp Intents
Avatar for touyou touyou
0
800

Featured

See All Featured
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
120
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
410
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
73
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
130

Transcript

  1. Interactive Prototypes Jaideep Singh

  2. Tools TIME FIDELITY Storyboards Prototypes Digital mockups HTML/CSS pages Dynamic

    pages (DB etc)

  3. What is a prototype Picture credits: Wikipedia

  4. Why prototype Quick visual representation All stakeholders on the same

    page Validate information architecture Early feedback

  5. What is not a prototype Color & graphics Typography Detailed

    interactions Working application

  6. Paper vs digital

  7. You can draw A straight line Circle Rectangle Triangle Shade

  8. Paper prototype Create a todo app List of tasks Option

    to mark tasks done Option to delete tasks Group tasks as completed and incomplete

  9. General guidelines Straight lines Spacing between elements Post-Its for components

    and for states Time limit the activity

  10. Lifealytics demo http://www.youtube.com/watch?v=J- bVzUahNIg

  11. Prototyping tools Solidify (Analytics) Invision (Collaboration) Antetype (Responsive) Balsamiq (Quick,

    minimal) Wires (In-browser) Proto.io (Animations)

  12. Indigo Studio Storyboards Interactive wireframes Import paper wireframes Animated transitions

    Share FREE (v1.x)

  13. The prototype Ecommerce app for a camera store Key categories

    Screens Product listing Product details

  14. List Detail

  15. Thank you! @_jaideep