'

Wireframing, Mockups, and Prototyping Made Easy

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





Слайд 0

Wireframing, mockups, and prototyping made easy J O H N C O L L I N S • S R T E C H W R I T E R • AT L A S S I A N • @J R C _ C O L L I N S


Слайд 1

Agenda GETTING TO KNOW YOU THE BASICS TERMINOLOGY & TOOLS WORKSHOP @ J R C _ C O L L I N S • # L AVA C O N


Слайд 2

About you @ J R C _ C O L L I N S • # L AVA C O N


Слайд 3

The basics @ J R C _ C O L L I N S • # L AVA C O N


Слайд 4

http://www.leonardoda-vinci.org/fly.html • 
 https://creativecommons.org/licenses/by-nc-nd/3.0/ @JRC_COLLINS
 # L AVA C O N


Слайд 5

@ J R C _ C O L L I N S • # L AVA C O N http://www.leonardoda-vinci.org/Drawing-Of-A-Flying-Machine-large.html • https://creativecommons.org/licenses/by-nc-nd/3.0/


Слайд 6

http://www.wright-brothers.org/Information_Desk/Help_with_Homework/Wright_Photos/Wright_Photos_images/1903_Flyer_Plan.jpg @ J R C _ C O L L I N S • # L AVA C O N


Слайд 7

“Who should sketch?
 Everyone.” DAVID MANNHEIM @ J R C _ C O L L I N S • # L AVA C O N


Слайд 8

“A sketch can look bad and still work wonderfully.” UXMOVEMENT @ J R C _ C O L L I N S • # L AVA C O N


Слайд 9

Why do these things? To understand Grasp difficult concepts by breaking into sketches or visualizations. To explain People may be more likely to understand and remember. @ J R C _ C O L L I N S • # L AVA C O N


Слайд 10

Why do these things? To improve Suggest improvements to user experience. To create Be the first to explore some visual ideas for a new feature. @ J R C _ C O L L I N S • # L AVA C O N


Слайд 11

Terminology @ J R C _ C O L L I N S • # L AVA C O N


Слайд 12

Sketch @ J R C _ C O L L I N S • # L AVA C O N Wireframe Mockup


Слайд 13

Sketch Fidelity @ J R C _ C O L L I N S • # L AVA C O N Wireframe Mockup


Слайд 14

Sketch
 Prototype Fidelity @ J R C _ C O L L I N S • # L AVA C O N Wireframe
 Mockup


Слайд 15

Sketch
 Prototype Fidelity @ J R C _ C O L L I N S • # L AVA C O N Wireframe
 Prototype Mockup



Слайд 16

Sketch
 Prototype Fidelity @ J R C _ C O L L I N S • # L AVA C O N Wireframe
 Prototype Mockup
 Prototype


Слайд 17

Tools? @ J R C _ C O L L I N S • # L AVA C O N


Слайд 18

Tools Pens/pencils & paper @ J R C _ C O L L I N S • # L AVA C O N Markers & whiteboard Presentation software


Слайд 19

Tools Balsamiq Mockups @ J R C _ C O L L I N S • # L AVA C O N Sketch Invision


Слайд 20

Sketching @ J R C _ C O L L I N S • # L AVA C O N


Слайд 21

• Big cool statistic • • 2,56 9 Add-Ons in Marketplace @ J R C _ C O L L I N S • # L AVA C O N


Слайд 22

Balsamiq Mockups @ J R C _ C O L L I N S • # L AVA C O N


Слайд 23

@JRC_COLLINS
 # L AVA C O N


Слайд 24

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 25

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 26

POP
 (Prototyping On Paper) @ J R C _ C O L L I N S • # L AVA C O N


Слайд 27

• Big cool statistic • • 2,56 9 Add-Ons in Marketplace @ J R C _ C O L L I N S • # L AVA C O N


Слайд 28

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 29

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 30

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 31

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 32

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 33

Workshop @ J R C _ C O L L I N S • # L AVA C O N


Слайд 34

Scenario •Redesign home screen of LinkedIn app for mobile •Make 8 sketches •You have 5 minutes (37 seconds each) •Explore various ideas @ J R C _ C O L L I N S • # L AVA C O N


Слайд 35

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 36

Sketch @ J R C _ C O L L I N S • # L AVA C O N


Слайд 37

5 minutes @ J R C _ C O L L I N S • # L AVA C O N


Слайд 38

Seek feedback @ J R C _ C O L L I N S • # L AVA C O N


Слайд 39

5 minutes @ J R C _ C O L L I N S • # L AVA C O N


Слайд 40

Refine @ J R C _ C O L L I N S • # L AVA C O N


Слайд 41

5 minutes @ J R C _ C O L L I N S • # L AVA C O N


Слайд 42

Results @ J R C _ C O L L I N S • # L AVA C O N


Слайд 43

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 44

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 45

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 46

@ J R C _ C O L L I N S • # L AVA C O N


Слайд 47

@JRC_COLLINS
 # L AVA C O N


Слайд 48

@JRC_COLLINS
 # L AVA C O N


Слайд 49

@JRC_COLLINS
 # L AVA C O N


Слайд 50

@JRC_COLLINS
 # L AVA C O N


Слайд 51

Thank you! J O H N C O L L I N S • S R T E C H W R I T E R • AT L A S S I A N • @J R C _ C O L L I N S


Слайд 52


×

HTML:





Ссылка: