'

Managing Responsive Design Projects

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





Слайд 1

Managing Responsive Design Projects FITC WebUnleashed 2014 @andrewsmyk


Слайд 2


Слайд 3

www.andrewsmyk.com/webunleashed


Слайд 4

Tweet using hashtags: #WebU14 #managingRWD


Слайд 5


Слайд 6

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


Слайд 7


Слайд 8

@andrewsmyk 1.5” to 50”


Слайд 9

@andrewsmyk


Слайд 10


Слайд 11

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


Слайд 12


Слайд 13

1-2-3-4 @andrewsmyk


Слайд 14

Content Strategy Agile Prototyping Art Direction @andrewsmyk


Слайд 15

Content Strategy Agile Prototyping Art Direction @andrewsmyk


Слайд 16


Слайд 17


Слайд 18

Edit content ruthlessly


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

Stakeholders


Слайд 23

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


Слайд 24

Avoid coding or selecting frameworks before content modeling


Слайд 25

Avoid coding or selecting frameworks before content modeling


Слайд 26

@andrewsmyk


Слайд 27

@andrewsmyk Dynamic Wireframe


Слайд 28

@andrewsmyk


Слайд 29

@andrewsmyk ?????


Слайд 30

@andrewsmyk RUN!!! Zombie Apocalypse!!


Слайд 31


Слайд 32


Слайд 33

@andrewsmyk


Слайд 34

@andrewsmyk


Слайд 35

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


Слайд 36

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


Слайд 37


Слайд 38

Content Strategy Agile Prototyping Art Direction @andrewsmyk


Слайд 39

@andrewsmyk


Слайд 40

@andrewsmyk


Слайд 41

@andrewsmyk


Слайд 42

@andrewsmyk


Слайд 43


Слайд 44


Слайд 45

@andrewsmyk


Слайд 46

@andrewsmyk


Слайд 47

via Michelle Cryan - @sporkles


Слайд 48

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


Слайд 49

@andrewsmyk


Слайд 50

Content Strategy Waterfall vs. Agile Prototyping Art Direction @andrewsmyk


Слайд 51

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


Слайд 52


Слайд 53

@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


Слайд 54

Logo needs to be “bluer”


Слайд 55

desktop + + variants? DAYS?


Слайд 56

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


Слайд 57

Logo needs to be “bluer”


Слайд 58

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


Слайд 59

How blue is our logo?


Слайд 60

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


Слайд 61

We need to see another design


Слайд 62

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


Слайд 63

@andrewsmyk Stop Wrestling with Static Mockups


Слайд 64

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


Слайд 65

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


Слайд 66

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


Слайд 67

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


Слайд 68

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


Слайд 69

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


Слайд 70

@andrewsmyk “Design consistency is not about pixels.”


Слайд 71

@andrewsmyk


Слайд 72

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


Слайд 73

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


Слайд 74

Pro Tip: A Working Prototype can Help Make Decisions Faster


Слайд 75

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


Слайд 76

@andrewsmyk


Слайд 77

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


Слайд 78

@andrewsmyk Use the right tools & technologies


Слайд 79

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


Слайд 80

Content Strategy Waterfall vs. Agile Prototyping Art Direction @andrewsmyk


Слайд 81

Logo needs to be “bluer”


Слайд 82


Слайд 83


Слайд 84


Слайд 85


Слайд 86

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


Слайд 87


Слайд 88

catalog of assumptions


Слайд 89


Слайд 90


Слайд 91


Слайд 92


Слайд 93

@andrewsmyk Responsive Style Tile


Слайд 94

User Testing, Tools and TPS Cover Sheets


Слайд 95

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


Слайд 96

@andrewsmyk Pro Tip: Build a Device Library


Слайд 97

Plan for gestures and taps.


Слайд 98

Help users with error and miss taps


Слайд 99

Plan for the “Fat Finger”


Слайд 100

Design for the thumb


Слайд 101

Pro Tip: A Touch Template helps design Interactions


Слайд 102

@andrewsmyk


Слайд 103

@andrewsmyk


Слайд 104

@andrewsmyk


Слайд 105

u @andrewsmyk


Слайд 106

@andrewsmyk


Слайд 107

#ffly #rwd


Слайд 108

i


Слайд 109

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


Слайд 110

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


Слайд 111

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


Слайд 112

@andrewsmyk


Слайд 113

1-2-3-4 @andrewsmyk


Слайд 114

Content Strategy Agile Prototyping Art Direction @andrewsmyk


Слайд 115

@andrewsmyk Questions?


Слайд 116

Thank you!


Слайд 117

@andrewsmyk www.andrewsmyk.com/webunleashed


Слайд 118

Tweet using hashtags: #WebU14 #managingRWD


Слайд 119


Слайд 120

@andrewsmyk Questions?


×

HTML:





Ссылка: