Design is in the Details

Type & Design Concepts for Developers

Transcript

1. hi. @juliajamieson // juliajamieson.com
2. hi. i’m a designer. @juliajamieson // juliajamieson.com
3. Type & Design Concepts for Developers Design is in the Details.
4. But first, Design is in the Details.
5. But first it’s in the concept, collaboration, and having empathy for the user. Design is in the Details.
6. design & designers working together type & layout 1 2 3
7. design & designers working together type & layout 1 2 3
8. Design is: type grids colors images visual design system
9. testing setting expectations transitions feedback readability validation & errors Design is also: load times workflows sense of place data & integration servers url structure mantic ode
10. testing setting expectations transitions feedback readability validation & errors Design is also: load times workflows sense of place data & integration servers url structure mantic ode product design
11. is responsible for the design of the product.
12. Your team is responsible for the design of the product.
13. Photo Credit: Rasmus Andersson via https://medium.com/the-year-of-the-looking-glass/6c975dede146 Designers.
14. What do designers care about?
15. Designers care about: users
16. Designers care about: users expectations
17. Designers care about: users expectations communication
18. Designers care about: users expectations communication the end experience
19. design & designers working together type & layout 1 2 3
20. What can developers do to be better design teammates?
21. Detour: Ninjas, Unicorns & Mutants. Photo Credit: http://mcphee.com/shop/inflatable-unicorn-horn.html
22. Instead of thinking about designers who code or developers who design, think about it as becoming an irreplaceable teammate.
23. Master your own craft. Then, work adding the right skills as you improve.
24. ux design print ia html/css/js strategy user interface pm design [ Master your own craft. Then, work adding the right skills as you improve.
25. fe dev type ia native back end PM ux computer science [ Master your own craft. Then, work adding the right skills as you improve.
26. Designers + Developers. The new copywriter & art director duo. Photo Credit: https://www.facebook.com/cwversusad
27. What can developers do to be better design teammates?
28. Collaborate Early and often.
29. Everyone can sketch.
30. Take notes.
31. Critique:
32. Critique: Frequently 1
33. Critique: Frequently With a Developer 1 2
34. Critique: Frequently With a Developer Start Positively 1 2 3
35. Critique: Frequently With a Developer Start Positively 1 2 3 Be specific 4
36. Critique: Frequently With a Developer Start Positively 1 2 3 Be specific Be Objective 4 5
37. Critique: Frequently With a Developer Start Positively 1 2 3 Be specific Be Objective Ask Questions 4 5 6
38. Don’t assume the designer is right.
39. Let’s talk about how this will work responsively.
40. Let’s talk about how this will work responsively. Have you thought about how you’d like this to transition?
41. Let’s talk about how this will work responsively. Have you thought about how you’d like this to transition? Why did you break the grid here, and no where else?
42. Let’s talk about how this will work responsively. Have you thought about how you’d like this to transition? Why did you break the grid here, and no where else? Did you purposely make this type bigger, or is it a mistake?
43. designers working together type & layout 1 2 3
44. Why typography? Good typographic choices can mean the difference between a highly usable, beautiful product & a mediocre product.
45. Photo Credit: Claudio Guglieri http://www.skillshare.com/profile/Claudio-G/8617225
46. Type: Anatomy Photo Credit: http://typeanatomy.com/
47. Type: Basic Anatomy cap height x-height baseline Skgefa counter eye bowl
48. Skgefa Skgefa
49. cap height x-height baseline Skgefa counter eye bowl cap height x-height baseline counter eye bowl aperture Skgefa aperture
50. Skgefa Skgefa
51. cap height x-height baseline counter eye bowl cap height x-height baseline counter eye bowl aperture Skgefa aperture Skgefa
52. cap height x-height baseline counter eye bowl cap height x-height baseline counter eye bowl cap height x-height baseline counter eye bowl cap height x-height baseline counter eye bowl aperture aperture aperture Skgefa Skgefa Skgefa aperture Skgefa
53. Article Title Article Title Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Type: Tone of Voice & Texture
54. Article Title Article Title Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Type: Readability & Texture
55. Type: Hierarchy Article Title Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. October 20, 2013
56. trentwalton.com
57. npr.org
58. disqus.com
59. designweekportland.com
61. Type: Readability & Heirarchy, In Practice
62. ARTICLE TITLE Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Type: In Practice (and breaking)
63. Layout, Rhythm & Balance Your design teammate will love you if you can...
65. 1. The idea of responsive web design is that the experience of a site always look and feel the same regardless of the media query. Layout & Responsive Web Design
66. 1. The idea of responsive web design is that the experience of a site always look and feel the same regardless of the media query. 2. The further away your object (particularly body text) is from the reader, the larger it needs to be. This is why it works to have larger body text on a desktop, smaller on a tablet, and smallest on a phone. Layout & Responsive Web Design
67. 1. The idea of responsive web design is that the experience of a site always look and feel the same regardless of the media query. 2. The further away your object (particularly body text) is from the reader, the larger it needs to be. This is why it works to have larger body text on a desktop, smaller on a tablet, and smallest on a phone. 3. Readability is more important than having a layout that is always as wide as the viewport. Layout & Responsive Web Design
68. Layout & Responsive Web Design: Proportions
69. Layout & Responsive Web Design: Proportions
70. Layout & Responsive Web Design: Proportions
71. Layout & Responsive Web Design: Proportions
72. Before
73. After
74. Mobile, Tablet & Desktop
76. Photo credit: http://mediaqueri.es/
77. Photo credit: http://mediaqueri.es/
78. Details: Line Length
79. Details: Line Length
80. Details: Type Size & Alignment
81. Details: Type Size & Alignment
82. Ultimately, better collaboration comes through a shared understanding of the different competencies required to build a website. Instead of viewing ourselves in terms of discrete roles, we should instead look to emphasize our range of abilities, and work with others whose skills are complementary. –Paul Robert Lloyd working together.
83. thanks for listening. @juliajamieson // juliajamieson.com
84. attributions + resources Code School, Fundamentals of Design http://design.codeschool.com/levels/1 Design by Numbers - https://medium.com/p/2e5fd2f262e4 Learning to See, information Architects http://ia.net/blog/learning-to-see/ Logo, Bullshit and Co., http://ia.net/blog/logo-bullshit-co-inc/ How to Work with Designers https://medium.com/the-year-of-the-looking-glass/6c975dede146 The Anatomy of Type http://typeanatomy.com/ Thinking with Type http://www.thinkingwithtype.com/ Claudio Guglieri http://www.skillshare.com/classes/design/Create-Typographic-Layouts-for-Content-Heavy-Web- sites-and-Apps/1397042906/