Tweet
Tweet

Slide 1

Slide 1 text

Mobile Design Process JASON VANLUE http://bit.ly/MobileDesignWorkshop

Slide 2

Slide 2 text

@jasonvanlue

Slide 3

Slide 3 text

WEB DESIGN where have we come? 1. Context-Specific Design desktop sites, native mobile apps 2. Universal Design

Slide 4

Slide 4 text

THE UNIVERSAL WEB "The primary design principle underlying the Web's usefulness and growth is universality.” (TIM BERNERS-LEE)

Slide 5

Slide 5 text

http://www.alistapart.com/articles/dao/

Slide 6

Slide 6 text

THE DAO OF WEB DESIGN •We should all aim for universal access as the default. •Think about what your pages do, not what they look like. •Let form follow function

Slide 7

Slide 7 text

MOBILE DESIGN what in the world is it?

Slide 8

Slide 8 text

THERE IS NO MOBILE WEB

Slide 9

Slide 9 text

Image Courtesy of Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

Slide 10

Slide 10 text

Image Courtesy of Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

Slide 11

Slide 11 text

Image Courtesy of Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

Slide 12

Slide 12 text

MOBILE DESIGN what in the world is it? 1. Native App Design platform-specific 2. Mobile Web Design

Slide 13

Slide 13 text

SO WHAT IS MOBILE WEB DESIGN?

Slide 14

Slide 14 text

MOBILE WEB DESIGN = WEB DESIGN

Slide 15

Slide 15 text

IT’S A SHIFT IN OUR THINKING ABOUT DESIGN. it’s how we should have been thinking all along.

Slide 16

Slide 16 text

THE BIGGEST SHIFT IS IN CREATING UNIVERSAL DESIGN.

Slide 17

Slide 17 text

DOES IT MATTER?

Slide 18

Slide 18 text

YES. Theodore Sturgeon Sturgeon’s Law: 90% of everything is crap.

Slide 19

Slide 19 text

PEOPLE ACTUALLY CARE ABOUT EXPERIENCE.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

SO THE QUESTION IS: Are you part of the 10%? Or part of the 90%?

Slide 22

Slide 22 text

HOW MUCH DO YOU CARE ABOUT EXPERIENCE? Clients Managers Direct Reports Users Owners Investors It all comes back to you, and how much you care.

Slide 23

Slide 23 text

MOBILE DESIGN what are we doing today? 1. Mobile Web Design Process 2. Native App Design Process

Slide 24

Slide 24 text

Frederick Law Olmstead

Slide 25

Slide 25 text

http://37signals.com/svn/posts/2919-ten- design-lessons-from-frederick-law- olmsted-the-father-of-american- landscape-architecture

Slide 26

Slide 26 text

Respect the “Genius of a Place”

Slide 27

Slide 27 text

Details Are Less than the Whole

Slide 28

Slide 28 text

The Art is to Conceal Art

Slide 29

Slide 29 text

Aim for the Unconscious

Slide 30

Slide 30 text

Avoid Fashion for Fashon’s Sake

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Form Follows Function “design without purpose is barbarous”

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

SIMPLIFY “never too much, hardly enough”

Slide 35

Slide 35 text

Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. (MARK BOULTON)

Slide 36

Slide 36 text

Start designing from the content out, rather than from the canvas in. (MARK BOULTON)

Slide 37

Slide 37 text

HOW DO WE DO THIS?

Slide 38

Slide 38 text

NOT SO MAGIC FORMULA but it’ll suffice 1. Know Your User 2. Know How They Use Your Site 3. Determine the Context(s) 4. Develop Your Content 5. Visual Design 6. Integrate & Build

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

MOBILE DESIGN PROCESS Overall: Know what you’re building what is your app, your site, your brand idea

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

MOBILE DESIGN PROCESS 1. Know Your User business owners, brand consultants 2. Know Your Users’ Use reading, purchasing

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

MOBILE DESIGN PROCESS 3. Think Through the Context(s) what device? in what environment?

Slide 46

Slide 46 text

ADAPTIVE DESIGN Design for controlled adaptation designing to meet a specific context

Slide 47

Slide 47 text

RESPONSIVE DESIGN Provides continuity between contexts portable, accessible, universal

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Start designing from the content out, rather than from the canvas in. (MARK BOULTON) yes, but helpful to know the playing field

Slide 50

Slide 50 text

ENVIRONMENTS •We can know the device •Difficult to know the environment how would your design change if you knew?

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

http://www.markboulton.co.uk/journal/ comments/a-responsive-experience

Slide 54

Slide 54 text

MOBILE DESIGN PROCESS 4. Develop Your Content ain’t nothing like the real thing...

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

APP DESIGN PROCESS Traditional App Nav Upcoming Rent Payment ATT 12:30 PM Radius MountainvieW garden apartments Kitchen Sink Leaking Yesterday by Maintenance Parking Lot Closed 2 Days ago by Management Thursday’s Group Run Posted in Runners of Mountainview Noise Complaint Tuesday, Jan 17 by Management Maintenance Community Messages Finances Literal Radius Upcoming Rent Payment Kitchen Sink Leaking Yesterday by Maintenance Parking Lot Closed 2 Days ago by Management Thursday’s Group Run Posted in Runners of Mountainview Noise Complaint Tuesday, Jan 17 by Management $850 by Feb 1 Noise Complaint Tuesday, Jan 17 by Management ATT 12:30 PM

Slide 58

Slide 58 text

APP DESIGN PROCESS Native App Design Considerations: 1. Visual Dimension 2. Tactile Dimension Gestures

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

http://www.realmacsoftware.com/clear/

Slide 61

Slide 61 text

APP DESIGN PROCESS Upcoming Rent Payment Kitchen Sink Leaking Yesterday by Maintenance Parking Lot Closed 2 Days ago by Management Thursday’s Group Run Posted in Runners of Mountainview Noise Complaint Tuesday, Jan 17 by Management $850 by Feb 1 Noise Complaint Tuesday, Jan 17 by Management ATT 12:30 PM Swipe Menu ATT 12:30 PM MAINTENANCE Home Create Ticket Kitchen Sink Leaking Water Heater Broken Create Group Runners of Mountainview Racquetball League View all groups View all tickets COMMUNITY 4 2 Send Message MESSAGES

Slide 62

Slide 62 text

APP DESIGN PROCESS Parking Lot Painting 7 Responses Comment thread: Only shows own comments & responses from management Recipients: Only goes to manager Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque Kristy Lemon 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque Manager 3:27pm by Jane Donkey Respond... BBQ SEND Message Title Cancel Message ATT 12:30 PM Send Message 1 Message Content 2 Parking Lot Painting + Send Message 3:27pm by Manager Clean up common areas 2 hours ago by Manager Guest Parking Yesterday by Manager ATT 12:30 PM Messages BBQ Yesterday by Manager Clean up common areas 2 hours ago by Manager Guest Parking Yesterday by Manager Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Parking Lot Painting « Back to Messages 3:27pm by Manager ATT 12:30 PM View Post Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque Kristy Lemon 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque Manager 3:27pm by Jane Donkey Respond... Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Parking Lot Painting « Back to Responses 3:27pm by Manager ATT 12:30 PM View Post Pellentesque habitant morbi tristique senectus et netus et Kristy Lemon 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et John Steve 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et Mark Christianson 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et Kristy Lemon 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et John Steve 3:27pm by Jane Donkey BBQ Parking Lot Painting + Send Message 3:27pm by Manager Clean up common areas 2 hours ago by Manager Guest Parking Yesterday by Manager ATT 12:30 PM Messages BBQ Yesterday by Manager Clean up common areas 2 hours ago by Manager Guest Parking Yesterday by Manager « Back to Messages ATT 12:30 PM View Responses SEND Message Title Cancel Message ATT 12:30 PM Send Message 1 Message Content 2 3 3 3 Messages: Shows both mass messages (manager » residents) and individual (resident « manager)

Slide 63

Slide 63 text

MOBILE DESIGN PROCESS 5. Visual Design use the workflow that works for you

Slide 64

Slide 64 text

iPAD

Slide 65

Slide 65 text

iPHONE

Slide 66

Slide 66 text

LARGE DISPLAY

Slide 67

Slide 67 text

APP DESIGN PROCESS 5. Visual Design experience + interface

Slide 68

Slide 68 text

http://www.youtube.com/watch?feature=player_embedded&v=sXqXpwyBI1k

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

APP DESIGN PROCESS 5. Visual Design experience + interface consistency is key

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

CONSIDER AN APP STYLE GUIDE

Slide 73

Slide 73 text

http://notebook.squaredeye.com/post/8296438548/working-the-product-align-your-design

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

http://www.starbucks.com/static/reference/styleguide/

Slide 76

Slide 76 text

MOBILE DESIGN PROCESS 6. Integration & Build get in the browser

Slide 77

Slide 77 text

MEDIA QUERIES Default Styles = Most Targeted Context OR Default Styles = Most Complex Context

Slide 78

Slide 78 text

MEDIA QUERIES Responsive Design: Content Defines Break Points where does your design break down?

Slide 79

Slide 79 text

MEDIA QUERIES 1. Build your default styles first 2. Then set your break points

Slide 80

Slide 80 text

600px

Slide 81

Slide 81 text

MEDIA QUERIES /* < 655px */ @media screen and (max-width: 655px) { }

Slide 82

Slide 82 text

MEDIA QUERIES /* > 1445px */ @media screen and (min-width: 1445px) { } }

Slide 83

Slide 83 text

700px

Slide 84

Slide 84 text

MEDIA QUERIES /* < 750px */ @media screen and (max-width: 750px) { }

Slide 85

Slide 85 text

500px

Slide 86

Slide 86 text

MEDIA QUERIES /* < 500px */ @media screen and (max-width: 500px) { } }

Slide 87

Slide 87 text

RETINA IMAGES @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* Styles */ }

Slide 88

Slide 88 text

MOBILE DESIGN PROCESS 7. Be Flexible you can’t really predict user behavior

Slide 89

Slide 89 text

Avoid Fashion for Fashon’s Sake

Slide 90

Slide 90 text

SIMPLIFY “never too much, hardly enough”

Slide 91

Slide 91 text

THANKS! http://bit.ly/MobileDesignWorkshop