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.

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: