Lean Prototyping


The Presentation inside:

Slide 0

Lean Prototyping - A practical guide


Slide 1

Rohit Agarwal I prototyped


Slide 2

You can check it @ www.framebench.com


Slide 3

Wireframe


Slide 4

Prototype Wireframe


Slide 5

Prototype Wireframe Mockup


Slide 6

Prototype App Wireframe Mockup


Slide 7

Prototype App Wireframe Mockup Yay!!


Slide 8

WIREFRAME WIREFRAME WIREFRAME


Slide 9

FOCUS ON SPACING UI ELEMENTS DRAWN PLACEHOLDERS WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIR


Slide 10

Wireframe for a Conference website


Slide 11

Wireframe for an iPhone app


Slide 12

Wireframe : Framebench Website


Slide 13

PROTOTYPE PROTOTYPE PROTOTYPE


Slide 14

A plan for how it WORKS, NOT how it looks PROTOTYPE PROTOTYPE PROTOTYPE


Slide 15

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Think about MENUS and ANIMATION


Slide 16

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Think about use CASES and user FLOW


Slide 17

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Think about MOST FREQUENT actions : reduce clicks


Slide 18

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Visualize all possibilities – save redesigns and headaches later Framebench App Prototypes


Slide 19

MOCKUP MOCKUP MOCKUP


Slide 20

MOCKUP MOCKUP MOCKUP 2 types


Slide 21

2 types Low fidelity High fidelity MOCKUP MOCKUP MOCKUP


Slide 22

HIGH FIDELITY MOCK > MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP LOW FIDELITY MOCK <


Slide 23

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP


Slide 24

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP POP QUIZ LOW FIDELITY? HIGH FIDELITY? This mockup is…


Slide 25

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP POP QUIZ LOW FIDELITY!! This mockup is…


Slide 26

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP


Slide 27

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP And yes… HIGH FIDELITY! This mockup is…


Slide 28

YOU TOO CAN PROTOTYPE LEAN


Slide 29

1. Conceptualize it


Slide 30

Categorize everything you need on your application. Post-its are great for this! Create multiple drawings and placements for various elements.


Slide 31

There’s nothing better than the pen, paper and post its for this. Try out Behance’s Action sheets http://www.creativesoutfitter.com/products/100/action-method


Slide 32

2. Wireframe it


Slide 33

Now that you have a basic idea in your mind, you’re ready to put it on a digital pad. AND.. There are a variety of tools available today!


Slide 34

I personally love Balsamiq..


Slide 35

And Moqups.


Slide 36

Wireframe.cc is super lightweight!


Slide 37

3. Prototype it


Slide 38

You have various wireframes ready, its time to quickly create proof of concepts. Lean Prototyping = Test Quickly = Fail Faster


Slide 39

1 Interactive Wireframes This is all about determining flow


Slide 40

2 Prototype in the browser Today’s UI packs allow for you to get started right in the browser! Twitter Bootstrap UI Packs Chrome Developer tools!


Slide 41

4. Mock it


Slide 42

Mockups generally are medium to high fidelity prototypes made in software like There’s nothing lean about a mock and in fact should be done once you’ve tested everything else.


Slide 43

Collaborate?


Slide 44

Will your team and designer always be together? How can you collect feedback and test these wireframes & mockups?


Slide 45

Meet with anyone, anywhere GIFs Images Prototypes Wireframes Mockups Videos PDFs Have live discussions on your [ ]


Slide 46

Scribble over mockups. Track versions. Get them approved faster. Use TableTop Sync


Slide 47

Your cases?


Slide 48

You’re awesome! Thanks I’m fairly active on twitter: @jumbld & extra good karma for you if you try out www.FrameBench.com and give us feedback


Slide 49

Found useful? Share on Facebook Share on Twitter


×

HTML:





Ссылка: