$30 off During Our Annual Pro Sale. View Details »

How to Speak Unicorn: Design Terminology for De...

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).

Michelle Schulp Hunt

February 04, 2017
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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.
  7. 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
  8. 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
  9. 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
  10. 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.
  11. 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.
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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