A Visual Lexicon

A talk about systems, interfaces and the strenuous relationship between designers and developers.

Transcript

1. A Visual Lexicon ROBIN RENDLE 2014
2. Product Designers developers
3. engineers front-end ops UX designers visual designers IA web app website branding unicorns Designers developers Product
6. Designers developers product
7. A website is a service
8. developers Designers
9. Replace “can you build this?” with “can you maintain this without losing your minds?” ! NICHOLAS GALLAGHER @NECOLAS, JULY 24TH 2013
10. What does maintenance really mean?
11. Maintenance is more than just technology. 1 WHAT DOES MAINTENANCE REALLY MEAN?
14. Maintenance is adaptation to an ever changing environment. 2 WHAT DOES MAINTENANCE REALLY MEAN?
15. Photograph by Tobias Abel
16. Monte Testaccio Modern day Rome
17. Monte Testaccio The resting ground of 53 million olive oil amphorae
19. Where else can we find these systems?
20. Typographic Delights A lecture series by Michael Twynman – photo by Katherine Exss
23. Q Proxima Nova by Mark Simonson
24. Q Baskerville by Linotype
25. Q Bureau Grotesque Three Seven by the Font Bureau
26. FF Meta by FontFont + Ideal Sans by H&FJ
27. Looking up Woodward Avenue, 1917. Detroit Publishing Company
28. ! ! SLAB SERIF HUMANIST ! ! VENETIAN STENCIL SQUARE SANS-SQUARE GERALDE MODERN DISPLAY TEXT STENCIL DOT UNCIALS Typographic vernacular Through centuries of public debate the field of type design we’ve developed an enormous vocabulary MONOSPACED DIDONE ROUND PROPORTIONAL SANS-STENCIL TRANSITIONAL GROTESQUE GEOMETRIC NEO-HUMANIST SERIF SANS-SERIF
29. How do we describe the web?
30. Designing for the web is like visualizing a tesseract. We build experiences by manipulating their shadows. ! TIM BROWN
33. Designing for the web is like visualizing a tesseract. We build experiences by manipulating their shadows. ! TIM BROWN
34. Designing for the web is like visualizing a tesseract. We build experiences by manipulating their shadows. ! TIM BROWN
36. vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv
37. .about-box { background-color: blue; } .about-box__image { float: left; max-width: 210px; } .about-box__footer { width: 100%; }
38. vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv
39. vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv
40. vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv
41. vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I
43. Maintaining CSS components In ‘Normalising designs for better CSS’ Harry Roberts used this diagram to explain the effects of modifying components COMPONENT
44. vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv
45. vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv
46. There are only two hard things in computer science: cache invalidation and naming things. ! PHIL KARLTON
47. Naming things is a developer’s problem. 1. WHAT WE KNOW
48. Ghost lab by Vanamco
50. Developers are users, too. 2. WHAT WE KNOW 1.Naming things is a developer’s problem.
51. Atomic Framework Organising Sass modules effectively
52. Separate structure and skin. This means to define repeating visual features (like background and border styles) as separate “skins” that you can mix-and- match with your various objects. ! NICOLE SULLIVAN github.com/stubbornella/oocss/wiki
53. Pattern Lab Brad Frost and David Olsen
54. Frameworks. 2. SOLUTIONS 1.Software + hardware + tools.
55. But I was wrong.
56. vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv hello my name is vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv ! vHe didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality whenv Buy now
57. alpha beta pri sec gamma icons alert info Get a quote Get a quote Get a quote Get a quote Get a quote Warning! Information Get a quote Get a quote Get a quote Get a quote Warning!
59. WHAT WE KNOW Naming things is a developer’s problem. 1.
60. WHAT WE KNOW Naming things is a developer’s problem. 1.
61. Frameworks. 2. SOLUTIONS 1.Software + hardware + tools.
62. Frameworks. 2. SOLUTIONS 1.Software + hardware + tools.
63. How do we describe these components?
64. There are only two hard things in computer science: cache invalidation and naming things. ! PHIL KARLTON
65. There are only two hard things in computer science: cache invalidation and naming things.. –PHIL KARLTON Design is
66. Mailchimp pattern library Code, content and visual styles can be seen immediately by all members of the team.
67. developers Designers
68. Where do clients fit?
69. Responsive deliverables should look a lot like fully- functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. ! DAVE RUPERT Responsive Deliverables
70. Bootstrap Mark Otto and Fat
71. The future of x = y
72. How do we use language?
73. Designers developers vs.
74. Designers developers vs. grammar LANGUAGE linguistics expression communication writing phrasing words
75. Designing for the web is like visualising a tesseract. We build experiences by manipulating their shadows. ! TIM BROWN
76. @robinrendle THANKS!