Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

High Fidelity UI Prototyping - Because JPG Attachments S*ck

Tamás Fogarasy: 20 min talk at App! Mobile Conference about how to create horizontal and vertical, high fidelity User Interface ( UI ) prototypes of mobile apps using the latest tools.
The presentation continued with a live demo session.
Demo prototype links:
Marvel prototype: http://marvl.in/7fb7de
Pixate demo with UI animations: pixt.io/p256v8tv5o4

User Interface prototyping is a great tool for interaction design tests, elevator pitches and user testing. It enables the designer to present the overall User Experience to any client.

Related Books

Free with a 30 day trial from Scribd

See all

High Fidelity UI Prototyping - Because JPG Attachments S*ck

  1. 1. High Fidelity Prototyping Because JPG Attachments Suck Thomas Fogarasy - 2014 NOV. fogarasy.com fogarasy@brandlift.eu
  2. 2. I. Hi-fi what? II. What is it for? III. Tools for mobile prototyping IV. DEMO
  3. 3. a quick definiton Hi-fi what? I.
  4. 4. • feels like a product • almost final look&feel • shows some or all features • minimal or no native code Hi-fi
  5. 5. • lotoffeatures/screensshown • fewer details • broad view of the system horizontal
  6. 6. • fewer, key features • PoC focus • more detailed interactions vertical
  7. 7. scenarios and benefits What is it for? II.
  8. 8. •   IxD validation, testing •   UI fine-tuning, animation (yay!) •   user/client testing •   seeking partners •   market/crowdfunding demo (awesome for elevator pitches)
  9. 9. Time-days(estimate) 0 7,5 15 22,5 30 Sketches Wireframes Mockups Hi-Fi Prototypes Native Dev it’s that cool
  10. 10. (mobile UI perspective) Tools? II.
  11. 11. How do they compare?
  12. 12. Pixate Proto.io Marvel, Flinto Starting with your mockup (.sketch, .psd, .ai…) Framer.js Functional Visual After Effects InVision Nothing in between??? Difficulty Medium High
  13. 13. Marvel & Pixate DEMO III.
  14. 14. UI concept for prototyping demonsration Tools: Marvel & Pixate conference networking app
  15. 15. DEMO Links http://marvl.in/7fb7de pixt.io/p256v8tv5o4 Functional Prototype for IA testing, navigation, user testing Interaction design prototype for look & feel demo, concept demo, user testing
  16. 16. Different build-up InVision, Flinto… Pixate, Framer…
  17. 17. What we really need ( there’s no such tool yet)
  18. 18. 1. Horizontal and Vertical prototypes: different goal 2. Holy grail not found yet: apps are struggling between functional and visual focus 3. Keep an eye on Pixate and Framer.js! Takeaways
  19. 19. Thomas Fogarasy @thomasfogarasy fogarasy.com fogarasy@brandlift.eu momeid.mome.hu DESIGNER UI PSD Q &A Thank you!

    Be the first to comment

    Login to see the comments

  • momelinedesignworks

    Nov. 14, 2014
  • DoraBeres

    Nov. 15, 2014
  • robtmc

    Nov. 16, 2014
  • csabavarga

    Nov. 25, 2014
  • rfreiree

    Aug. 7, 2015

Tamás Fogarasy: 20 min talk at App! Mobile Conference about how to create horizontal and vertical, high fidelity User Interface ( UI ) prototypes of mobile apps using the latest tools. The presentation continued with a live demo session. Demo prototype links: Marvel prototype: http://marvl.in/7fb7de Pixate demo with UI animations: pixt.io/p256v8tv5o4 User Interface prototyping is a great tool for interaction design tests, elevator pitches and user testing. It enables the designer to present the overall User Experience to any client.

Views

Total views

1,758

On Slideshare

0

From embeds

0

Number of embeds

47

Actions

Downloads

21

Shares

0

Comments

0

Likes

5

×