How To Speak Unicorn: Understanding the Language of Web Design

How To Speak Unicorn: Understanding the Language of Web Design

Gain insight into the “secret language” of Web Design Unicorns as we dive into the details of what makes up the design process, including vocabulary, problem solving methods, and workflow.

In this webinar, Michelle Schulp will explain how to have a better conversation about design and apply that knowledge to your own site. She will also outline some simple methods to avoid “fail points” along the way.

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

March 07, 2019
Tweet

Transcript

  1. how to speak unicorn understanding the language of web design

  2. @marktimemedia I Design & Build DIGITAL INTERFACES Rockstar at saying

    stuff. Carefully curated spontaneity. Adorable badass. Master suitcase packer & marshmallow roaster. Accidental fitness buff. HI, I’M MICHELLE.
  3. @marktimemedia SOME PEOPLE CALL THAT A UNICORN

  4. @marktimemedia MYTHICAL CREATURE WITH EQUAL TALENT IN MULTIPLE DISCIPLINES

  5. @marktimemedia WHY ARE WE SO ENAMORED WITH UNICORNS?

  6. @marktimemedia OVERLAP BETWEEN DISCIPLINES

  7. @marktimemedia TIME BUDGET RESOURCE CONSTRAINTS

  8. @marktimemedia IF I’M NOT A DESIGNER WHY SHOULD I LEARN

    THIS?
  9. @marktimemedia BE A UNICORN SPEAK UNICORN

  10. @marktimemedia BETTER COMMUNICATION

  11. @marktimemedia SO WHAT DO DESIGNERS DO?

  12. @marktimemedia SEE THE BIGGER PICTURE…

  13. @marktimemedia …AND THE DETAILS

  14. @marktimemedia CONSISTENCY OF EXPERIENCE

  15. @marktimemedia BE PREDICTABLE

  16. @marktimemedia YOUR UNICORN VOCABULARY LESSON

  17. @marktimemedia 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
  18. @marktimemedia VOCABULARY Identity: the entire visual representation of your brand,

    can include logo, color, typography, imagery, voice, etc. Lettermark/Wordmark/Logotype: logo made with stylized letters (IBM) or words (Coca-Cola) Brandmark: logo made with a graphical representation (Apple, Target) Icon: a simplified rendering of an object or concept
  19. @marktimemedia VOCABULARY Design System: a repository of reusable digital components

    that combine to form a website Brand Guide: a visual and philosophical reference for a brand’s color, personality, and voice
  20. @marktimemedia USER EXPERIENCE HOW PEOPLE INTERACT AND ENGAGE WITH THE

    SITE User Journey, Persona, User Testing, Research KEY TAKEAWAY: Make functionality decisions with the end user in mind, not your own preference or the tools you are using
  21. @marktimemedia VOCABULARY Persona: fictional character that represents a primary user

    of your site/product Wireframe: low-fidelity layout of a site, representation of general block-level content and interactive elements Mockup: high-fidelity layout of a site, representation of final color, typography, imagery, etc. Prototype: interactive version of a site, may not be built with final code
  22. @marktimemedia VOCABULARY CTA: call to action, usually paired with a

    button Conversion: when a user takes a specific desired action Landing Page: single page optimized for a specific audience or search engine result Usability: how real users actually interact with your site, usually tested by observing a series of guided tasks
  23. @marktimemedia USER INTERFACE THE ELEMENTS ON THE PAGE WITH WHICH

    THE USER INTERACTS Information Architecture, GUI, Interaction Design KEY TAKEAWAY: Don’t make your users think; Design an intuitive interface that takes advantage of modern patterns
  24. @marktimemedia VOCABULARY Breadcrumb: hierarchical content links Menu: primary navigation area,

    sometimes with a dropdown or flyout of sub-menu items Filter: pre-defined elements that allow narrowing down of visible content by various taxonomies (categories) Search: open ended input that queries content and returns a list of results Slider: a trendy, animated way of displaying information that you probably shouldn’t use J
  25. @marktimemedia 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
  26. @marktimemedia VOCABULARY Balance: using similar or complementary design elements to

    make the composition feel equal Repetition: using recurring elements to reinforce patterns or serve as familiar visual cues Whitespace: how much “breathing room” does each element have?
  27. @marktimemedia VOCABULARY Grid: underlying structure to a design that determines

    how everything lays out Rule of Thirds: the most pleasing focal points are at the intersection of three rows and columns Padding: the space inside a block level element Margin: The space outside a block level element Rule of Thirds
  28. @marktimemedia 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
  29. @marktimemedia VOCABULARY Scale: how large or small are the elements

    on the page relative to each other? Proximity/Alignment: which elements on the page are associated with each other? Focal Point: the place on the page to which we are directing the user’s attention Semantic Markup: using HTML elements correctly to imply hierarchy and usage within the content
  30. @marktimemedia 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
  31. @marktimemedia VOCABULARY font (typeface) : collection of letters & glyphs/symbols

    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 (leading): how much space between lines?
  32. @marktimemedia VOCABULARY letter-spacing (tracking): adjusting the spacing between groups of

    letters/blocks of text kerning: adjusting the spacing between individual letters font-weight: how heavy/light is it? Serif Sans-Serif
  33. @marktimemedia COLOR AESTHETIC DECISIONS ABOUT THE USE OF COLOR IN

    A COMPOSITION Hue, Value, Shade, Tint, Saturation, Palette KEY TAKEAWAY: Color choices should be deliberate and used consistently across the entire site
  34. @marktimemedia VOCABULARY HEX: hexadecimal color, six digit number used to

    represent color in HTML/CSS RGB: additive color model used for screens, red/green/blue light values combining to form colors CMYK: subtractive color model used for ink, cyan/magenta/yellow/black ink combining to form colors Pantone/spot color: specific custom inks of a certain color
  35. @marktimemedia 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?
  36. @marktimemedia IMAGERY VISUAL AND GRAPHICAL ELEMENTS OF A SITE Stock

    photo, illustration, graphic, icon KEY TAKEAWAY: Use imagery to support your messaging; Use the right image format for the content
  37. @marktimemedia VOCABULARY Vector: images that are made out of math

    (SVG, EPS) Raster: images that are made out of pixels (JPG, TIFF, PNG, GIF) Resolution: how many pixels a raster images has (e.g. 800x600 or 2400x1200). a higher resolution will typically be a larger size, but higher detail Compression: optimization (large/small file size)
  38. @marktimemedia VOCABULARY JPG/JPEG: best for photography and detailed images PNG:

    best for graphics, simple color, and images with transparency GIF: best for low detail graphics or animations TIFF: best for print quality, not suited for screen display SVG: a vector image format suitable for display on the web, best for graphics & logos
  39. @marktimemedia WEB TERMINOLOGY GENERAL VOCABULARY WHEN DESIGNING FOR THE WEB

    Front-End, Back End, Theme, CMS KEY TAKEAWAY: Web designers don’t just know about design, they also understand the technology they’re designing for
  40. @marktimemedia VOCABULARY Heading : titles and subtitles, written semantically with

    H1-H6 tags Body Copy/Body Text: the primary written content, usually paragraphs, lists, quotes, etc. Hero: the main image/graphic on a homepage or landing page, usually with a primary call to action Single-Scroll: a website where a majority of content is contained within a single page
  41. @marktimemedia VOCABULARY Responsive Design: a design that is not fixed,

    but adapts to the user’s screen size and/or device Breakpoint: a specific point (e.g. width) where a website’s content/layout will change to fit a different interface Accessible: ability of a website to be used by all audiences, including impaired vision, hearing, or motor function, through assistive technology or standard navigation
  42. @marktimemedia VOCABULARY Front-End: in general, dealing with code that runs

    in a browser and controls what is seen and interacted with Back-End: in general, dealing with code that runs on a server and controls the content and logic CMS: content management system (like WordPress)
  43. @marktimemedia Now What?

  44. @marktimemedia EVALUATE EXISTING EXAMPLES

  45. @marktimemedia TALK TO DESIGNERS!

  46. @marktimemedia RESOURCES Article: Web Design Basics Guide https://99designs.com/blog/tips/web-design-basics-guide/ Article: Descriptive

    Design Words You Should Know https://99designs.com/blog/tips/15-descriptive-design-words-you-should-know/
  47. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp

    michelle@marktimemedia.com @marktimemedia bit.ly/XXXXXX ITHEMES WEBINAR SERIES: When to DIY Design and When to Hire (Free!) – March 20 Web Design Bootcamp – March 26 & 27 WHERE TO FIND ME NEXT: