Prototyping Tools Jenna Choo, Kristina Wagner, Alex Wang TAs for: - - PowerPoint PPT Presentation

▶
prototyping tools
SMART_READER_LITE
LIVE PREVIEW

Prototyping Tools Jenna Choo, Kristina Wagner, Alex Wang TAs for: - - PowerPoint PPT Presentation

Mar 21, 2024 318 likes •1.21k views

Prototyping Tools Jenna Choo, Kristina Wagner, Alex Wang TAs for: 05-863 / 45-888: Introduction to Human Computer Interaction for Technology Executives, Fall, 2017, Mini 2 Adobe Photoshop Best feature: image manipulation Easy to duplicate UI

slide-1
SLIDE 1

Prototyping Tools

Jenna Choo, Kristina Wagner, Alex Wang TAs for:

05-863 / 45-888: Introduction to Human Computer Interaction for Technology Executives, Fall, 2017, Mini 2

slide-2
SLIDE 2

Adobe Photoshop

slide-3
SLIDE 3

Best feature: image manipulation

slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13

Easy to duplicate UI elements

slide-14
SLIDE 14
slide-15
SLIDE 15

PS now has artboards

slide-16
SLIDE 16

MANY options for exporting

slide-17
SLIDE 17

Time: About 8 minutes

slide-18
SLIDE 18

Adobe XD

slide-19
SLIDE 19
slide-20
SLIDE 20

Open App, select device

slide-21
SLIDE 21
slide-22
SLIDE 22

Share the prototype with your team members:

https://xd.adobe.com/view/a d036d9e-54c8-4678-844f-95 c078fea4c2

slide-23
SLIDE 23

Best feature: drag ‘n’ drop linking

slide-24
SLIDE 24

Good places to find help helpx.adobe.com/xd.html

slide-25
SLIDE 25

Time: 7:56 minutes

slide-26
SLIDE 26
slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36

HTML/CSS

slide-37
SLIDE 37

CSS Javascript HTML

slide-38
SLIDE 38

HTML 101

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>I am a heading!</h1> <p>I am a paragraph.</p> </body> </html>

slide-39
SLIDE 39

HTML 101 - Tags

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>I am a heading!</h1> <p>I am a paragraph.</p> </body> </html> <tag>content goes here</tag>

  • <div>
  • <h1><h2>...<h6>
  • <p>
  • <img>
  • <input>
  • <a>
slide-40
SLIDE 40

HTML 101 - CSS

<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href=“theme.css"> </head> <body> <h1>I am a heading!</h1> <p>I am a paragraph.</p> </body> </html>

slide-41
SLIDE 41

HTML 101 - CSS Demo

body { background-color: yellow; } h1 { color: blue; } p { color: red; }

slide-42
SLIDE 42

HTML 101 - CSS Selectors

  • Use generic html tag names to address all applicable
  • .class_name
  • Use the class names and ids to address specific items
  • #id_name
slide-43
SLIDE 43

HTML 101 - CSS Selectors

  • height
  • width
  • font (type, size, color, weight)
  • color
  • padding
  • margins
  • background-images
  • vertical/horizontal spacing
  • positioning (item, text)
  • shadowing
  • display properties
  • layering of objects
  • pacity
  • floating/arranging objects
  • responsive design

and much much more …

slide-44
SLIDE 44

More CSS Example

#id_name { height: 100px; width: 100px; padding: 10px; background-color: red; text-align: center; }

slide-45
SLIDE 45

Text Editors

  • Sublime Text
  • Brackets
  • Adobe Dreamweaver
  • Terminal - Vim, Emacs
slide-46
SLIDE 46
slide-47
SLIDE 47

What is Balsamiq?

  • Purposely simple wire framing

○ Art style is hand drawn ○ Makes designers think only about the UX, not about color, animation, etc ○ Makes testers think only about the UX as well

  • Alright at making clickable prototypes

○ It has the functionality, but it’s not amazing ○ Can use weird presentation mode or export as interactable PDF

  • If you need higher fidelity, you’ll have to change software

○ Transitioning from lo-fi to higher fidelity may be a lot of duplicated work

slide-48
SLIDE 48
slide-49
SLIDE 49
slide-50
SLIDE 50
slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53
slide-54
SLIDE 54
slide-55
SLIDE 55
slide-56
SLIDE 56
slide-57
SLIDE 57
slide-58
SLIDE 58
slide-59
SLIDE 59
slide-60
SLIDE 60
slide-61
SLIDE 61
slide-62
SLIDE 62
slide-63
SLIDE 63

You can export as a PDF and maintain the links

slide-64
SLIDE 64
slide-65
SLIDE 65

What is InVision?

  • Online website that lets you create clickable prototypes by linking images you

upload

○ Free to get started ○ Extremely fast, super simple ○ Easy to share

  • You need to create your own screens first in another software

○ Sketch ○ Photoshop/Illustrator ○ Balsamiq ○ InVision Freehand, InVision Studio

  • Pretty limited if you need more advanced features (like animation)
slide-66
SLIDE 66
slide-67
SLIDE 67
slide-68
SLIDE 68
slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71
slide-72
SLIDE 72
slide-73
SLIDE 73
slide-74
SLIDE 74
slide-75
SLIDE 75
slide-76
SLIDE 76
slide-77
SLIDE 77
slide-78
SLIDE 78
slide-79
SLIDE 79
slide-80
SLIDE 80
slide-81
SLIDE 81
slide-82
SLIDE 82
slide-83
SLIDE 83
slide-84
SLIDE 84
slide-85
SLIDE 85

Example: tinyurl.com/alex-invision

slide-86
SLIDE 86

Reasons to use Reasons not to use Recommended Powerpoint Most people have access, are familiar with tools 7/10 Adobe XD (Experience Design) Drag ‘n’ drop linking (no coding required!) Can export still screens. Part of Adobe CC, which is expensive after the trial runs out 9/10 Adobe Photoshop (Adobe Ps) Great for complex visuals and hi-fi mockups Can’t link screens to each other, must export to Invision/XD 4/10 Axure Good for prototyping complex interactions, Generates HTML file Expensive after 30 day trial, Steep learning curve compared to other tools 7/10 HTML Can be faster if you’re used to coding Animations challenging if unfamiliar with JavaScript 4/10 Balsamiq Super simple by design. Great for lo-fi mockups. Linking screens is pretty basic. You have to recreate hi-fi screens with another program 8/10 InVision Industry standard, used by all of us

  • regularly. Commenting tools.

Can’t create screens in InVision, must import from Ps/Sketch 9/10

slide-87
SLIDE 87

Additional resources