'

Lean Prototyping

Понравилась презентация – покажи это...





Слайд 0

Lean Prototyping - A practical guide


Слайд 1

Rohit Agarwal I prototyped


Слайд 2

You can check it @ www.framebench.com


Слайд 3

Wireframe


Слайд 4

Prototype Wireframe


Слайд 5

Prototype Wireframe Mockup


Слайд 6

Prototype App Wireframe Mockup


Слайд 7

Prototype App Wireframe Mockup Yay!!


Слайд 8

WIREFRAME WIREFRAME WIREFRAME


Слайд 9

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


Слайд 10

Wireframe for a Conference website


Слайд 11

Wireframe for an iPhone app


Слайд 12

Wireframe : Framebench Website


Слайд 13

PROTOTYPE PROTOTYPE PROTOTYPE


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

MOCKUP MOCKUP MOCKUP


Слайд 20

MOCKUP MOCKUP MOCKUP 2 types


Слайд 21

2 types Low fidelity High fidelity MOCKUP MOCKUP MOCKUP


Слайд 22

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


Слайд 23

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP


Слайд 24

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


Слайд 25

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


Слайд 26

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP


Слайд 27

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


Слайд 28

YOU TOO CAN PROTOTYPE LEAN


Слайд 29

1. Conceptualize it


Слайд 30

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


Слайд 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


Слайд 32

2. Wireframe it


Слайд 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!


Слайд 34

I personally love Balsamiq..


Слайд 35

And Moqups.


Слайд 36

Wireframe.cc is super lightweight!


Слайд 37

3. Prototype it


Слайд 38

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


Слайд 39

1 Interactive Wireframes This is all about determining flow


Слайд 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!


Слайд 41

4. Mock it


Слайд 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.


Слайд 43

Collaborate?


Слайд 44

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


Слайд 45

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


Слайд 46

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


Слайд 47

Your cases?


Слайд 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


Слайд 49

Found useful? Share on Facebook Share on Twitter


×

HTML:





Ссылка: