Code Context 1

Slidedeck from Graphic Arts Year 2 lecture on designing for the web as a platform - Context 1.

Creative commons Licence - Attribution-ShareAlike 4.0 International

Transcript

1. 0.0 web1 1
2. Web - Slack graphic-arts-yr2 2
3. Pen/ Paper/ Tablet Take Notes 3
4. The Plan Weeks 3-4 code context 1 & code context 2 Primers (for everyone) Aims code context 1 - Have an understanding of the power of the web/ the poten9al for innova9ve exci9ng design solu9ons & products. code context 2 - Unlock and see how easy it is to create for the web as a pla8orm. 4
5. The Plan Week 6 Kin Workshop 5
6. The Plan Weeks 8-10 Lean UX advanced code 1 -> advanced code 3 In-depth (sign up) Aims To learn and develop best prac0ce and create rich user experiences that use the web pla6orm based on content developed during the group project. 6
7. Code Academy 7
8. 1.0 8
9. The Web is probably the most exci%ng pla1orm for communica6on design on the planet. — anyone that understands the web 9
10. Clarifica(on What is the web ? 10
11. It's not the Internet 11
12. The Internet 12
13. The Internet 13
14. The Web Is a connec)on of 'documents' via hypertext links 14
16. LISTEN h"p:/ /5by5.tv/webahead/33 16
17. WATCH BBC 2 - The Virtual Revolu3on Episodes 1-4 h"p:/ /dctr.pro/1e2 17
18. 2.0 18
19. Publishing to the web is EASY 19
20. Memes/ Twi*er/ Facebook/ Tumblr/ Medium/ Squarespace/ instagram/ Code Academy etc.. 20
21. The challenge now is to create compelling communica3on in a world where anyone can design — Russell Holmes, Crea/ve Strategy Partner, Ico 21
22. Designing for the web as a pla2orm 22
23. It is not print design The control which designers know in the print medium, and o6en desire in the web medium, is simply a func%on of the limita%on of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must accept the ebb and flow of things1. — John Allsopp, April 2000 1 h$p:/ /www.alistapart.com/ar3cles/dao/ 23
24. The Web is... 24
25. Brad Frost 20122. 2 h$p:/ /bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ 25
29. It's diverse 29
34. OH and it is not this so,ware 34
35. However in fact the web is ... 35
36. ... Content 36
37. ... Open 3 3 with standards 37
38. AND 38
39. It's all delivered4 and structured by ... 4 To all these outputs/ viewports 39
40. HTML Hypertext Markup Language 40
41. Siri Google Now 41
42. Anything that can be connected to the internet will be — Luke Wroblewski 42
43. SEARCH Jonathan Stark/ Luke Wroblewski/ Brad Frost/ Jeffery Zeldman 43
44. READ Hookway, B., 2014. Interface, MIT Press. Boulton, M., 2009. A Prac3cal Guide to Designing for the Web. 44
45. 3.0 45
46. Create Systems/ Not Pages 46
48. Experience Driven 48
51. / to take full advantage of new technologies, and cra5 every user's experience so that it's appropriate to the capabili;es of the [viewport] they're using. That will likely mean that designs will look different — some;mes very different — across [viewports]. — Andrew Clarke 51
53. Device Demo5 5 h$p:/ /mediaqueri.es 53
60. Context The interrelated condi.ons, in which something exists or occurs 60
64. Constantly Connected 64
65. Superhuman 65
66. • Personal • Always on • Always with • Usually connected • Directly Addressable 66
67. • GPS (Loca+on) • Accelerometer • Gyroscope • Magnometer • NFC 67
68. / Anything that's fixed and unresponsive isn't web design anymore, it's something else. If you don't embrace the inherent fluidity of the web, you're not a web designer, you're something else. Web design is responsive design, Responsive Web Design is web design, done right. — Andrew Clarke 68
69. READ Halvorson, K. & Rach, M., 2012. Content Strategy for the Web, New Riders. Kissane, E., 2011. The Elements of Content Strategy, 69
70. READ Robbins, J.N., 2007. Learning Web Design, O'Reilly Media, Inc. Five Simple Steps Pocket Guides 70
71. SEARCH Ethan Marco+/ Jared Spool 71
72. You cannot create a good user experience around bad content 72
73. 4.0 73
74. User Experience (UX) 74
75. Usability/accessibility/func/onality = very important But don’t underes/mate the importance of beauty — Elliot Jay Stocks6 6 h$p:/ /www.slideshare.net/elliotjaystocks/stop-worrying-get-on-with-it-wdc-bristol-2009 75
76. You've got to start with the customer experience and work backwards to the technology. — Steve Jobs, 1997 76
77. So the ques*on is not can I? But should I? 77
78. User Tes'ng7 7 Krug, S., 2009. Rocket Surgery Made Easy, New Riders. 78
79. I keep six honest serving-men they taught me all I knew; Their names are What and Why and When and How and Where and Who. — Rudyard Kipling 79
86. Frustra'on 86
90. Superhuman! 90
91. Examples 91
92. Examples 92
96. READ Norman, D.A., 2013. The Design of Everyday Things, Basic Books. Walter, A. & Spool, J.M., 2011. Designing for Emo<on 96
97. 5.0 97
98. The web is powerful 98
99. Social Change/ Transforma3ve 99
100. Democracy/ The Arab Spring/ Uprising 100
102. The Internet's Own Boy - BoB Link h"p:/ /dctr.pro/1ea 102
103. SEARCH Anonymous/ Mozilla/ The Dark Web/ Aaron Swaltz/ Lawrence Lessig/ P2P network/ Open Source/ Indietech / Indieweb/ Richard Stallman/ Cory Doctorow/ Wikipedia/ Aral Balkan 103
104. The Web is probably the most powerful pla1orm for communica6on design on the planet. — anyone that understands the web 104
105. code context 2 Next Session Unlock and see how easy it is to create for the web as a pla5orm. 105
106. p.s this whole slide deck was made using the web pla4orm 106
107. REF 1 Jeffery Zeldman/ Future Friend.ly/ Ethan Marco8/ Luke Wroblewski/ Typecast/ Monotype/ Jonathan Stark/ Aral Balkan/ Richard Stallman/ Mike Monteiro/ Aaron Walter/ Erin Kissan/ Christopher Murphy/ Jeremy Keith/ Sco8 Jehl/ Internet of Things/ Remy Sharp/ Tantek/ Open Data/ Open Web/ IndieWeb/ Open source/ Web App/ The Web is ... (conference) 107
108. REF 2 A List Apart/ An Event Apart/ A Book Apart/ Five Simple Steps/ Sarah Parmenter/ Jenn Lukas/ Eric Meyer/ Lawrence Lessig/ Aaron Swartz/ Edward Snowden/ Cory Doctorow/ Jennifer Robins/ Meagan Fisher/ Andrew Clarke/ Jon Hicks/ Andy Budd/ Mike Kus/ Tim Van Damme/ Veerle Pieters/ Simon Collison/ IndieTech / 24ways/ Jared Spool 108