'

Managing Responsive Design Projects

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





Слайд 0

Managing Responsive Design Projects FITC WebUnleashed 2014 @andrewsmyk


Слайд 1


Слайд 2

www.andrewsmyk.com/webunleashed


Слайд 3

Tweet using hashtags: #WebU14 #managingRWD


Слайд 4


Слайд 5

@andrewsmyk 640 x 480 800 x 600 1024 x 768 1200 x 900 1920 x 1200


Слайд 6


Слайд 7

@andrewsmyk 1.5” to 50”


Слайд 8

@andrewsmyk


Слайд 9


Слайд 10

Leveraging mobile to increase student engagement Andrew Smyk HighWeb Ed – Arkansas July 27, 2012 Wrestling with a responsive projects @andrewsmyk


Слайд 11


Слайд 12

1-2-3-4 @andrewsmyk


Слайд 13

Content Strategy Agile Prototyping Art Direction @andrewsmyk


Слайд 14

Content Strategy Agile Prototyping Art Direction @andrewsmyk


Слайд 15


Слайд 16


Слайд 17

Edit content ruthlessly


Слайд 18

@andrewsmyk Pro Tip: Document all the Types & Models of Devices You Encounter


Слайд 19

@andrewsmyk Important! Note the Devices of Decision Makers in the Room


Слайд 20

http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg


Слайд 21

Stakeholders


Слайд 22

@andrewsmyk Content Modeling & Strategy Content Engagement Content Curation Rank and Prioritize Content


Слайд 23

Avoid coding or selecting frameworks before content modeling


Слайд 24

Avoid coding or selecting frameworks before content modeling


Слайд 25

@andrewsmyk


Слайд 26

@andrewsmyk Dynamic Wireframe


Слайд 27

@andrewsmyk


Слайд 28

@andrewsmyk ?????


Слайд 29

@andrewsmyk RUN!!! Zombie Apocalypse!!


Слайд 30


Слайд 31


Слайд 32

@andrewsmyk


Слайд 33

@andrewsmyk


Слайд 34

A/B Test Content Models and early lo-fi Wireframes


Слайд 35

http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg


Слайд 36


Слайд 37

Content Strategy Agile Prototyping Art Direction @andrewsmyk


Слайд 38

@andrewsmyk


Слайд 39

@andrewsmyk


Слайд 40

@andrewsmyk


Слайд 41

@andrewsmyk


Слайд 42


Слайд 43


Слайд 44

@andrewsmyk


Слайд 45

@andrewsmyk


Слайд 46

via Michelle Cryan - @sporkles


Слайд 47

@andrewsmyk Pro Tip: Avoid Designing and Developing Projects in Silos


Слайд 48

@andrewsmyk


Слайд 49

Content Strategy Waterfall vs. Agile Prototyping Art Direction @andrewsmyk


Слайд 50

@andrewsmyk Prototyping “Now we can think about users and their needs as it relates to content.”


Слайд 51


Слайд 52

@andrewsmyk “Work in Photoshop and Fireworks by all means (I do). Make static visuals as rich and as detailed as you want them to be.” Just don’t set the wrong expectations by showing them to your clients. ~ Andy Clarke


Слайд 53

Logo needs to be “bluer”


Слайд 54

desktop + + variants? DAYS?


Слайд 55

desktop + + main internal specialized tablet smart phone shiny & new variants? DAYS?


Слайд 56

Logo needs to be “bluer”


Слайд 57

desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?


Слайд 58

How blue is our logo?


Слайд 59

desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?


Слайд 60

We need to see another design


Слайд 61

desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?


Слайд 62

@andrewsmyk Stop Wrestling with Static Mockups


Слайд 63

https://www.flickr.com/photos/kitch/4286136925


Слайд 64

https://www.flickr.com/photos/kitch/4286136925 No Usability Testing


Слайд 65

https://www.flickr.com/photos/kitch/4286136925 Lack Interaction


Слайд 66

https://www.flickr.com/photos/kitch/4286136925 Don’t Show Transitions


Слайд 67

https://www.flickr.com/photos/kitch/4286136925 Lack Fluidity


Слайд 68

https://www.flickr.com/photos/kitch/4286136925 Don’t Display Web Fonts


Слайд 69

@andrewsmyk “Design consistency is not about pixels.”


Слайд 70

@andrewsmyk


Слайд 71

@andrewsmyk “A prototype is worth a thousand words” Leigh Howells - @leigh


Слайд 72

@andrewsmyk “A prototype is worth a thousand meetings” Mike Davidson - @mikeindustries


Слайд 73

Pro Tip: A Working Prototype can Help Make Decisions Faster


Слайд 74

Think about the ecosystem, not just the devices: @andrewsmyk


Слайд 75

@andrewsmyk


Слайд 76

https://twitter.com/preetbanerjee/status/509438618683727873 @andrewsmyk


Слайд 77

@andrewsmyk Use the right tools & technologies


Слайд 78

@andrewsmyk am I responsive? ish. remote preview Ghostlab (license) Edge Inspect (CC subscription)


Слайд 79

Content Strategy Waterfall vs. Agile Prototyping Art Direction @andrewsmyk


Слайд 80

Logo needs to be “bluer”


Слайд 81


Слайд 82


Слайд 83


Слайд 84


Слайд 85

@andrewsmyk Visual inventory, you say… Responsive style tiles, you say…


Слайд 86


Слайд 87

catalog of assumptions


Слайд 88


Слайд 89


Слайд 90


Слайд 91


Слайд 92

@andrewsmyk Responsive Style Tile


Слайд 93

User Testing, Tools and TPS Cover Sheets


Слайд 94

@andrewsmyk Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store


Слайд 95

@andrewsmyk Pro Tip: Build a Device Library


Слайд 96

Plan for gestures and taps.


Слайд 97

Help users with error and miss taps


Слайд 98

Plan for the “Fat Finger”


Слайд 99

Design for the thumb


Слайд 100

Pro Tip: A Touch Template helps design Interactions


Слайд 101

@andrewsmyk


Слайд 102

@andrewsmyk


Слайд 103

@andrewsmyk


Слайд 104

u @andrewsmyk


Слайд 105

@andrewsmyk


Слайд 106

#ffly #rwd


Слайд 107

i


Слайд 108

They share a common infrastructure, but mobile is NOT the traditional web @andrewsmyk


Слайд 109

l Mobile is a different environment and requires new thinking and design considerations. @andrewsmyk


Слайд 110

Harness the power of a missile throwing robot with laser beam eyes on a UNICORN. @andrewsmyk


Слайд 111

@andrewsmyk


Слайд 112

1-2-3-4 @andrewsmyk


Слайд 113

Content Strategy Agile Prototyping Art Direction @andrewsmyk


Слайд 114

@andrewsmyk Questions?


Слайд 115

Thank you!


Слайд 116

@andrewsmyk www.andrewsmyk.com/webunleashed


Слайд 117

Tweet using hashtags: #WebU14 #managingRWD


Слайд 118


Слайд 119

@andrewsmyk Questions?


×

HTML:





Ссылка: