How To Speak Unicorn (iThemes Webinar)

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 SILOS HAVE LED TO CHAOS
7. @marktimemedia OVERLAP BETWEEN DISCIPLINES
8. @marktimemedia TIME BUDGET RESOURCE CONSTRAINTS
9. @marktimemedia IF I’M NOT A DESIGNER WHY SHOULD I LEARN THIS?
10. @marktimemedia BE A UNICORN SPEAK UNICORN
11. @marktimemedia BETTER COMMUNICATION
12. @marktimemedia YOUR TEAMMATES ARE NOT YOUR OPPONENTS
13. @marktimemedia HOLISTIC PROCESS
14. @marktimemedia ADAPTING ON THE FLY @marktimemedia
15. @marktimemedia WRITE BETTER CODE @marktimemedia
16. @marktimemedia BETTER FINAL PRODUCT
17. @marktimemedia AVOID DEVELOPER UI
18. @marktimemedia SO WHAT DO DESIGNERS DO?
19. @marktimemedia SEE THE BIGGER PICTURE…
20. @marktimemedia …AND THE DETAILS
21. @marktimemedia CONSISTENCY OF EXPERIENCE
22. @marktimemedia BE PREDICTABLE
23. @marktimemedia YOUR UNICORN VOCABULARY LESSON
24. @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
25. @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
26. @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
27. @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
28. @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
29. @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
30. @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
31. @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
32. @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
33. @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? Grid: underlying structure to a design that determines how everything lays out
34. @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
35. @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
36. @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
37. @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
38. @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?
39. @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
40. @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
41. @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
42. @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?
43. @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
44. @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)
45. @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
46. @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
47. @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
48. @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
49. @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)
50. @marktimemedia TEAM UNICORN: JOB TITLES @marktimemedia
51. @marktimemedia WORDPRESS DESIGNER • Usually: Aesthetics, interface, experience • Sometimes: Theme development, frontend markup/styling languages and/or Javascript, other design field experience • Related: UI/UX Designer, Theme Designer Choose this person if: Your project requires a very strong visual language
52. @marktimemedia WORDPRESS DEVELOPER • Usually: Interactive/programming logic • Sometimes: Design/Styling experience, appliction/integration experience, other programming languages • Related: Frontend Developer, Backend Developer, Theme Developer, Plugin developer Choose this person if: Your project has complex functionality or integration requirements
53. @marktimemedia WORDPRESS IMPLEMENTOR • Usually: Combines existing solutions to solve problems • Sometimes: development experience, design experience, content writing experience • Related: Integrator, Consultant Choose this person if: You want to build your project out of recommended existing solutions but aren’t sure where to look
54. @marktimemedia SEO CONSULTANT • Usually: Recommending, optimizing, implementing and tracking SEO efforts • Sometimes: development experience, design experience, content writing experience, social media strategy, external campaigns • Related: SEO Strategist, Search Engine Marketer Choose this person if: You have an existing site or are in the process of redeveloping a site
55. @marktimemedia Now What?
56. @marktimemedia EVALUATE EXISTING EXAMPLES
57. @marktimemedia TALK TO DESIGNERS!
58. @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/
59. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp michelle@marktimemedia.com @marktimemedia mynameismichelle.com ITHEMES WEBINAR SERIES: Web Design Bootcamp – February 24 & 25 WHERE TO FIND ME NEXT: