How to Speak Unicorn: Design Terminology for Developers

It seems that designers and developers speak different languages: developers are fluent in How, while designers are fluent in Why. Both are extremely important to a project, but this difference often leads to communication breakdowns. This talk will give developers insight into the design process, including vocabulary, problem solving methods, and workflow. Then, learn practical ways to apply it to create attractive sites (using good design principles and simple rules for success) and effective sites (through basic exercises that help you develop and showcase your primary call to action).

Transcript

1. DESIGN FOR DEVELOPERS or “How To Speak Unicorn”
2. I Design THINGS. USUALLY WORDPRESS. HI, I’M MICHELLE.
3. SOME PEOPLE CALL THAT A UNICORN @marktimemedia
4. MYTHICAL CREATURE WITH EQUAL TALENT IN MULTIPLE DISCIPLINES @marktimemedia
5. WHY ARE WE SO ENAMORED WITH UNICORNS? @marktimemedia
6. SILOS HAVE LED TO CHAOS @marktimemedia
7. OVERLAP BETWEEN DISCIPLINES
8. TIME BUDGET RESOURCE CONSTRAINTS @marktimemedia
9. IF I’M A SPECIALIST WHY SHOULD I GENERALIZE?
10. BE A UNICORN SPEAK UNICORN
11. FINDING A SHARED LANGUAGE
12. BETTER COMMUNICATION @marktimemedia
13. YOUR TEAMMATES ARE NOT YOUR OPPONENTS
14. HOLISTIC PROCESS
15. ADAPTING ON THE FLY @marktimemedia
16. WRITE BETTER CODE @marktimemedia
17. BETTER FINAL PRODUCT
18. AVOID DEVELOPER UI
19. SO WHAT DO DESIGNERS DO?
20. #1 VOCABULARY WORD: WHY?
21. WHY DO PEOPLE VISIT WEBSITES? @marktimemedia
22. VERB A word that represents an action or state of being @marktimemedia
23. BUY JOIN READ DOWNLOAD CONTACT DONATE SUBSCRIBE SIGN UP SHARE COMMENT LIKE
24. THE PRIMARY WIN
25. YOUR UNICORN VOCABULARY LESSON
26. CONSISTENCY OF EXPERIENCE
27. BRANDING COMMUNICATING THE ORGANIZATION’S MESSAGE, VALUES, AND EXPERIENCE Design System, Essence, Archetypes, Brand Strategy KEY TAKEAWAY: Create experiences that reinforce the company’s brand
28. COMPOSITION HOW THE CONTENT AND AESTHETICS OF THE SITE WORK TOGETHER Proximity, Harmony, Unity, Balance KEY TAKEAWAY: Each element should feel like it belongs within the site layout, not added as an afterthought
29. VOCABULARY Whitespace: how much “breathing room” does each element have? Grid: underlying structure that determines how everything lays out Padding: the space inside a block level element Margin: The space outside a block level element @marktimemedia
30. BE PREDICTABLE
31. ESTABLISHED PATTERNS
32. ESTABLISHED PATTERNS Header: navigation, logo Footer: extra navigation, contact info, terms/conditions Contact Us: page/form easily accessible Search: let people find things their way Scrolling, Swiping: behave normally, don’t hijack Clicking: affordance, knowing something is “clickable" Icons & Metaphors: map pin, social icons, mail icon, etc @marktimemedia
33. CLEAR RELATIONSHIPS
34. CLEAR RELATIONSHIPS
35. LESS IS MORE Fewer elements with more breathing room VS (yes, even including ads!)
36. ALIGNMENT When in doubt, Align Top & Left VS
37. RESOURCES Article: Why Whitespace Matters https://boagworld.com/design/why-whitespace-matters/ Article: Why Whitepsace is Crucial to UX Design http://www.fastcodesign.com/3046656/why-white-space-is- crucial-to-ux-design Article: Web Design Basics Guide https://99designs.com/blog/tips/web-design-basics-guide/ @marktimemedia
38. USER EXPERIENCE HOW PEOPLE INTERACT AND ENGAGE WITH THE SITE Information Architecture, GUI, Interaction Design KEY TAKEAWAY: Make functionality decisions with the end user in mind, not the application or development process.
39. BUTTONS Obviously Clickable Using Plain Language (not being cute/clever) BUY NOW SPEND YO MONEYZ! @marktimemedia
40. FORMS VS Easy To Use & Not Asking Too Much @marktimemedia
41. CONTENT VS Easily Scannable, Directed, & Precise @marktimemedia
42. HIERARCHY THE RELATIVE IMPORTANCE AND VISIBILITY OF PIECES OF INFORMATION Emphasis, Scale, Readability, Flow KEY TAKEAWAY: Decisions made about the styling and position of elements have a huge impact on the site experience
43. WHICH IS MOST IMPORTANT?
44. WHICH IS MOST IMPORTANT?
45. WHICH IS MOST IMPORTANT?
46. WHICH IS MOST IMPORTANT?
47. TYPOGRAPHY AESTHETIC DECISIONS ABOUT THE ARRANGEMENT OF TYPE Line Spacing, Letter Spacing, Kerning, Fonts KEY TAKEAWAY: Typographic choices should be deliberate, both reinforcing big-picture systems and being aesthetically appealing and easy to read/understand
48. VOCABULARY font-family: which typeface are you using? font-size: how big/small is it? font-weight: how heavy/light is it? font-style, text-decoration: italic, underline, strike line-height: how much space between lines? Serif Sans-Serif
49. LESS IS MORE Pick 1 Heading Font & 1 Body Font This is My Heading Font This is my body font, which needs to work well in paragraphs at smaller sizes. Remember to evaluate this for legibility when used within larger blocks of text. Body fonts are generally set at 16px with 1.6 line-height to be readable on a large variety of devices.
50. DISTINCT/COMPLEMENTARY Pick fonts that are not too similar This is My Heading Font This is my body font, for use in normal paragraphs at smaller sizes. This is My Heading Font This is my body font, for use in normal paragraphs at smaller sizes. This is My Heading Font This is my body font, for use in normal paragraphs at smaller sizes.
51. TYPOGRAPHY RULES Paragraphs – font-size: 16px, line-height 1.6 – 45-86 characters/line – small bottom margin Headings – line-height: 1.2 Sub-Headings – larger top margin than bottom margin within content
52. RESOURCES Google Font Pairing http://fontpair.co/ Typekit Font Pairing http://justmytype.co/typekit/ Article: Line Length & Font Size https://www.smashingmagazine.com/2014/09/balancing-line- length-font-size-responsive-web-design/ @marktimemedia
53. COLOR AESTHETIC DECISIONS ABOUT THE USE OF COLOR IN A COMPOSITION Hue, Value, Shade, Tint, Saturation KEY TAKEAWAY: Color choices should be deliberate and used consistantly across the entire site
54. VOCABULARY Hue: where is it on the color spectrum? Saturation: how vivid or dull is the color? Contrast: how much does it stand out? Opacity: solid or transparent? @marktimemedia
55. LESS IS MORE Pick 2-3 Colors plus neutrals
56. CONSISTENCY (what is clickable?)
57. CONSISTENCY (what is clickable?)
58. CONTRAST Make sure it’s legible Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur
59. RESOURCES Adobe Color https://color.adobe.com/ Color Safe Palettes http://colorsafe.co/ Random Accessible Color http://www.randoma11y.com/ Easy Color Classes http://clrs.cc/ Article: Psychology of Color https://www.entrepreneur.com/article/233843 @marktimemedia
60. WHERE CAN I PRACTICE?
61. EVALUATE EXISTING EXAMPLES
62. TALK TO DESIGNERS!
63. QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/speak-unicorn-2017