Design 101 For Developers

Stephen about his session: Design, like many things, is a skill that can be cultivated and learned. Too many times the excuse “I can’t do design” is used to hide a painful user experiences. In this talk, we’ll outline practical solutions for the most popular mobile platforms that you can use to make sure your design and user experience is a delight for users.

Transcript

1. Design'101'for'Developers Stephen'Barnes','@smbarne mdevcon(2015 1
2. Who$is$this$guy? Hello,&I'm&Stephen.& ! !smbarne engineeringart.io 2
3. WHY 3
7. O.K.$Really,$Though... • Interdiciplinary.teams • Small.teams • Closer.user.interac5on.than.desktop.so8ware • Compe55ve.marketplace 7
8. "I#can't#do#design." 8
9. Not$True I"can't"do"design. 9
10. A"Designer"Is"A"Problem"Solver 10
11. What%we%need,%are%TOOLS 11
12. Color%•%Space%•%Shape%•%Composi0on%•% Alignment%•%Dominance%•%Similarity%•%Rhythm% •%Texture%•%Direc0on%•%Contrast%•%Typography% •%Whitespace%•%Balance 12
13. Factory(Pa*ern(•(Singleton(•(Command( Pa*ern(•(Dynamic(Programming(•(Responder( Chain(•(Itera;on(•(Recursive(•(Mutex(•( Mul;threading(•(Encapsula;on 13
14. Tools%help%us%solve%problems 14
15. What%is%Design? 15
16. de#sign((\di%ˈzīn) To#plan#and#make#(something)#for#a#specific# use#or#purpose 16
17. Design'is'thinking'made'visual.' 2'Saul'Bass 17
18. There%are%many%types%of%design Today,'we'll'primarily'discuss'user'interface' design'and'user'experience'design 18
19. User%interface%design!or!user% interface%engineering!is!the!design! of!user!interfaces!for!machines!and! so1ware,!such!as!computers,!home! appliances,!mobile!devices,!and! other!electronic!devices,!with!the! focus!on!maximizing%the%user% experience. 19
20. User%Exerience%Design!is!Systems%Design 20
21. Fundamentals+of+Design Vitruvius()(De#Architectura((1st(century(BC) 21
22. FIRMITAS Strength(and(Durability 22
23. u"litas 23
24. UTILITAS Usefulness(And(Suitability(For(The(Intended( User 24
25. VENUSTAS Beauty 25
26. Aesthe&c(Usability/Effect The$aesthe(c*usability$effect$describes$a$phenomenon$in$which$ people$perceive$more*aesthe(c$designs$as$easier$to$use$than$less* aesthe(c$designs—$whether$they$are$or$not.1 1"Lidwell,"William;"Holden,"Kri3na;"Butler,"Jill"(2010;01;01)."Universal"Principles"of"Design."Crea3ve"Publishing" Interna3onal. 26
27. Design'='Art Art$!=$Design 27
29. TOOLS 29
30. EMPHASIS 30
31. iOS$7$shook$up$the$market$and,$by$ pure$luck,$shi8ed$high:end$iOS$ design$away$from$fashions$I$could$ never$compete$in$—$heavy$use$of$ textures$and$complex$graphical$ widgets$—$into$what$I$could$actually$ do:$simplicity,*space,*and* typography.$:$Marco$Arment 31
32. Emphasis Also%known%as%dominance%in%graphic%design. • The%first%thing%the%eye%sees • O/ent%the%central%part%of%the%design,%from%which%all%other%parts% radiate 32
33. Design'Is'To'Manipulate'The'Viewer Dominance)is)where)the)viewer)is)to)start) looking There%is%an%order%in%a%design.%You%want%the% viewer%to%follow%the%correct%direc6on,%ge8ng% informa6on%in%the%correct%order. 33
36. "Elements)that)are)close)together) are)perceived)to)be)more related)than)elements)that)are) farther)apart."5 5"William"Lidwell,"Kri/na"Holden"&"Jill"Butler."“Universal"Principles"of"Design.” 36
37. Gestalt'Principles'And'Visual'Hierarchy 37
38. COLOR 38
39. Lets%define%some%jargon 39
40. hue$((h)yo ͞ o) The$a&ribute$of$a$color$by$virtue$of$which$it$is$ discernible$as$red,$green,$etc.,$and$which$is$ dependent$on$its$dominant$wavelength,$and$ independent$of$intensity$or$lightness. 40
41. Hue$is$what$we$refer$to$when$we$ give$a$descrip4on$for$a$color "Blue"&•&"Orange"&•&"Purple" 41
42. Monochroma)c*means*of*the*same*color*(the* same*hue) 42
45. Complementary,Colors • Highest)contrast)from)one)of)another • Opposite)on)color)wheel 45
46. Triad&Colors • Good%for%a%color%pale-e • 3%colors%of%equal%distance 46
47. Picking'a'Pale+e Start%from%a%set%of%colors%which%live%in%the% same%neighborhood%on%the%5nts,%shades,%and% tones%scale 47
52. Complimentary-Colors-Work-As-Well 52
56. Color%Pale)es%don't% have%to%be%hard 56
58. Color%Resources • Google'Material'Colors'/'google.com/design/spec/style/ color.html • Color'Lovers'/'colourlovers.com/ • I'Want'Hue'/'tools.medialab.sciences/po.fr/iwanthue • Adobe'Kuler'/'hDps:/ /color.adobe.com/create/color/wheel/ 58
59. TYPOGRAPHY (Windows)Phone)Devs)Take)Note) 59
61. But$I$really$Want$A$Custom$Font. • Proxima)Nova • Gotham • Avenir • Futura • Open)Sans • Bariol 61
62. Side%Note%For%iOS iosfonts.com 62
63. Text%Should%Always%Be%Legible 63
64. TEXT$SHOULD ALWAYS BE$LEGIBLE 64
65. Contrast!in!type!sizes!can!go!a!long! way!to!create!ordered,! understandable!layouts...!too!many! can!be!messy.3 3"Google"Android"Typography"Guidelines 65
66. TEXT$SHOULD$BE$CONSISTENT 66
67. iOS static const CGFloat kSBTextVerySmall = 8.0f; static const CGFloat kSBTextSmall = 10.0f; static const CGFloat kSBTextStandard = 14.0f; static const CGFloat kSBTextLarge = 18.0f; static const CGFloat kSBTextVeryLarge = 22.0f; static const CGFloat kSBTextGigantic = 26.0f; 67
68. Android <dimen name="TextSize.VerySmall">10sp</dimen> <dimen name="TextSize.Small">12sp</dimen> <dimen name="TextSize.Standard">14sp</dimen> <dimen name="TextSize.Large">16sp</dimen> <dimen name="TextSize.VeryLarge">18sp</dimen> <dimen name="TextSize.Gigantic">20sp</dimen> 68
69. Aesthe&cly*pleasing. Less*Usable. 69
70. Aesthe&cly*Pleasing.* More*Usable. • Add$dark$shade$to$background • Increases$font$size • Increases$contrast • Centers$text 70
71. Font%Weight%+%Size%+%Color Is#Visual#Heirarchy 71
77. COMPOSITION)TECHNIQUES 77
78. Propor%on!is!key!in!making!things! look!beau1ful.2 2"David"Kadavy."“Design"for"Hackers.” 78
79. The$Golden$Ra,o 79
80. Rule%of%Space • Used&to&illustrate&depth • We&don't&want&ambiguous&space • Atmospheric&Perspec:ve 80
81. Illustra(on+of+ Depth 81
82. Atmospheric, Perspec.ve 82
83. Whitespace Let$the$informa-on$breath 83
84. You$already$know$about$whitespace... #pragma mark - UITextFieldDelegate methods - (BOOL) textFieldShouldReturn:(UITextField *)textField { [self.flickr searchFlickrForTerm:textField.text completionBlock:^(NSString *searchTerm, NSArray *results, NSError *error) { if(results && [results count] > 0) { if(![self.searches containsObject:searchTerm]) { [self.searches insertObject:searchTerm atIndex:0]; self.searchResults[searchTerm] = results; } dispatch_async(dispatch_get_main_queue(), ^{ }); } else { NSLog(@"Error searching Flickr: %@", error.localizedDescription);} }]; [textField resignFirstResponder]; return YES; } 84
85. Simplicity)is)not)the)goal,)it's)the)by4 product)of)a)good)idea)and)modest) expecta:ons.)4)Paul)Rand 85
87. Contrast(and(Balance If#you#make#everything#bold,!nothing!is!bold. 87
88. Balance People&like&balance;&we&are&creatures&of&symmetry&and&appreciate&it& in&everything.&A&design&is&like&a&real&world&building:&it&needs&to&be& balanced&or&it&doesn’t&work.4 4"NHS"Designs 88
89. Achieving)Balance • Color"Colors"have"weight"(More"Satura4on"="Heavier) • Shape"Squares"can"be"heavier"than"circles • Lines"Thin"vs."thick • Size"larger=heavier 89
90. INFORMATION)DENSITY 90
91. How$About$A$More$Prac/cal$ Example 91
92. FOURSQUARE)REDESIGNED 92
93. FOURSQUARE 93
94. FOURSQUARE)REDESIGNED 94
95. Alternate(composi/ons 95
97. ANIMATIONS 97
98. Good$Anima*ons • Provide(Context • Instruct • Interact 98
99. Provide(Context 99
100. Instruct 100
101. Interact 101
102. Anima&ons)can)be)subtle 102
103. Or#(occasionally)#not 103
104. Implementa)on+Details 104
105. reloadData)Is)The)Enemy! 105
106. I'm$looking$at$you$as$ well,$other$pla6orms 106
107. Add#Some#Delight! 107
108. TRANSITIONS github.com/Raizlabs/ RZTransi5ons 108
110. Your%App%Will%Be%Remembered By%The%Expierences%It%Provides 110
111. Recap&'&Anima,ons • Provide(Context • Instruct • Interact 111
112. Design'Review (Like&Code&Reviews&For&Your&Designs) 112
114. • Who%is%this%design%for? • Is%this%design%Effec4ve? • Is%this%design%visually%appealing?% 114
115. Product "Is$this$valuable" • Value • Useful • Makes,Sense • Vision 115
116. Interac(on "Does&it&make&sense" • Intu&ve • Naviga&on • Transi&ons1&1Anima&ons • Touch1States 116
119. Visual "Does&it&look&good" • Typography • Colors • Graphics • Cohesive2Look2and2Feel 119
120. RECAP 120
121. DURABLE(•(USABLE(•(BEAUTIFUL 121
122. TOOLS • Color • Typography • Composi/on • Anima/on • Design4Review 122
123. This%is%nice%and%all... But$how$about$some$reference 123
124. Slides Speakerdeck)*)h,ps:/ /speakerdeck.com/smbarne 124
125. Reading Google&Design&Guidelines&-&developer.android.com/design Apple&HIG&-&developer.apple.com/library/ios/documenta<on/ UserExperience/Conceptual/MobileHIG 125
126. UI#Inspira*on#and#Reference Dribbble'•'dribbble.com p/rns'•'p/rns.com inspired2ui'•'inspired2ui.com capp5vate.co'•'capp5vate.co mobile2pa/erns'•'mobile2pa/erns.com Android'Nice5es'•'androidnice5es.tumblr.com MaterialUp'•'materialup.com 126
127. Typography iOS iosfonts.com HIG-.-Color-and-Typography Android Roboto Windows(Phone 127
128. Color Colour&Lovers&•&colourlovers.com iWantHue&•&tools.medialab.sciences7po.fr/iwanthue 128
129. Books Universal*Principles*of*Design Design*for*Hackers:*Reverse*Engineering*Beauty 129
130. Thanks'Everyone! Let's&go&build& something&awesome ! !smbarne engineeringart.io 130