How to Speak Unicorn: Design Terminology for Developers

Slide 1

Slide 1 text

DESIGN FOR DEVELOPERS or “How To Speak Unicorn”

Slide 2

Slide 2 text

I Design THINGS. USUALLY WORDPRESS. HI, I’M MICHELLE.

Slide 3

Slide 3 text

SOME PEOPLE CALL THAT A UNICORN @marktimemedia

Slide 4

Slide 4 text

MYTHICAL CREATURE WITH EQUAL TALENT IN MULTIPLE DISCIPLINES @marktimemedia

Slide 5

Slide 5 text

WHY ARE WE SO ENAMORED WITH UNICORNS? @marktimemedia

Slide 6

Slide 6 text

SILOS HAVE LED TO CHAOS @marktimemedia

Slide 7

Slide 7 text

OVERLAP BETWEEN DISCIPLINES

Slide 8

Slide 8 text

TIME BUDGET RESOURCE CONSTRAINTS @marktimemedia

Slide 9

Slide 9 text

IF I’M A SPECIALIST WHY SHOULD I GENERALIZE?

Slide 10

Slide 10 text

BE A UNICORN SPEAK UNICORN

Slide 11

Slide 11 text

FINDING A SHARED LANGUAGE

Slide 12

Slide 12 text

BETTER COMMUNICATION @marktimemedia

Slide 13

Slide 13 text

YOUR TEAMMATES ARE NOT YOUR OPPONENTS

Slide 14

Slide 14 text

HOLISTIC PROCESS

Slide 15

Slide 15 text

ADAPTING ON THE FLY @marktimemedia

Slide 16

Slide 16 text

WRITE BETTER CODE @marktimemedia

Slide 17

Slide 17 text

BETTER FINAL PRODUCT

Slide 18

Slide 18 text

AVOID DEVELOPER UI

Slide 19

Slide 19 text

SO WHAT DO DESIGNERS DO?

Slide 20

Slide 20 text

#1 VOCABULARY WORD: WHY?

Slide 21

Slide 21 text

WHY DO PEOPLE VISIT WEBSITES? @marktimemedia

Slide 22

Slide 22 text

VERB A word that represents an action or state of being @marktimemedia

Slide 23

Slide 23 text

BUY JOIN READ DOWNLOAD CONTACT DONATE SUBSCRIBE SIGN UP SHARE COMMENT LIKE

Slide 24

Slide 24 text

THE PRIMARY WIN

Slide 25

Slide 25 text

YOUR UNICORN VOCABULARY LESSON

Slide 26

Slide 26 text

CONSISTENCY OF EXPERIENCE

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

BE PREDICTABLE

Slide 31

Slide 31 text

ESTABLISHED PATTERNS

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

CLEAR RELATIONSHIPS

Slide 34

Slide 34 text

CLEAR RELATIONSHIPS

Slide 35

Slide 35 text

LESS IS MORE Fewer elements with more breathing room VS (yes, even including ads!)

Slide 36

Slide 36 text

ALIGNMENT When in doubt, Align Top & Left VS

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

BUTTONS Obviously Clickable Using Plain Language (not being cute/clever) BUY NOW SPEND YO MONEYZ! @marktimemedia

Slide 40

Slide 40 text

FORMS VS Easy To Use & Not Asking Too Much @marktimemedia

Slide 41

Slide 41 text

CONTENT VS Easily Scannable, Directed, & Precise @marktimemedia

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

WHICH IS MOST IMPORTANT?

Slide 44

Slide 44 text

WHICH IS MOST IMPORTANT?

Slide 45

Slide 45 text

WHICH IS MOST IMPORTANT?

Slide 46

Slide 46 text

WHICH IS MOST IMPORTANT?

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

LESS IS MORE Pick 2-3 Colors plus neutrals

Slide 56

Slide 56 text

CONSISTENCY (what is clickable?)

Slide 57

Slide 57 text

CONSISTENCY (what is clickable?)

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

WHERE CAN I PRACTICE?

Slide 61

Slide 61 text

EVALUATE EXISTING EXAMPLES

Slide 62

Slide 62 text

TALK TO DESIGNERS!

Slide 63

Slide 63 text

QUESTIONS? Michelle Schulp [email protected] @marktimemedia bit.ly/speak-unicorn-2017