How To Speak Unicorn: Understanding the Language of Web Design

Slide 1

Slide 1 text

how to speak unicorn understanding the language of web design

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@marktimemedia SOME PEOPLE CALL THAT A UNICORN

Slide 4

Slide 4 text

@marktimemedia MYTHICAL CREATURE WITH EQUAL TALENT IN MULTIPLE DISCIPLINES

Slide 5

Slide 5 text

@marktimemedia WHY ARE WE SO ENAMORED WITH UNICORNS?

Slide 6

Slide 6 text

@marktimemedia OVERLAP BETWEEN DISCIPLINES

Slide 7

Slide 7 text

@marktimemedia TIME BUDGET RESOURCE CONSTRAINTS

Slide 8

Slide 8 text

@marktimemedia IF I’M NOT A DESIGNER WHY SHOULD I LEARN THIS?

Slide 9

Slide 9 text

@marktimemedia BE A UNICORN SPEAK UNICORN

Slide 10

Slide 10 text

@marktimemedia BETTER COMMUNICATION

Slide 11

Slide 11 text

@marktimemedia SO WHAT DO DESIGNERS DO?

Slide 12

Slide 12 text

@marktimemedia SEE THE BIGGER PICTURE…

Slide 13

Slide 13 text

@marktimemedia …AND THE DETAILS

Slide 14

Slide 14 text

@marktimemedia CONSISTENCY OF EXPERIENCE

Slide 15

Slide 15 text

@marktimemedia BE PREDICTABLE

Slide 16

Slide 16 text

@marktimemedia YOUR UNICORN VOCABULARY LESSON

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

@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

Slide 19

Slide 19 text

@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

Slide 20

Slide 20 text

@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

Slide 21

Slide 21 text

@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

Slide 22

Slide 22 text

@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

Slide 23

Slide 23 text

@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

Slide 24

Slide 24 text

@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

Slide 25

Slide 25 text

@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

Slide 26

Slide 26 text

@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?

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

@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

Slide 29

Slide 29 text

@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

Slide 30

Slide 30 text

@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

Slide 31

Slide 31 text

@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?

Slide 32

Slide 32 text

@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

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

@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

Slide 35

Slide 35 text

@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?

Slide 36

Slide 36 text

@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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

@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

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

@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

Slide 41

Slide 41 text

@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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

@marktimemedia Now What?

Slide 44

Slide 44 text

@marktimemedia EVALUATE EXISTING EXAMPLES

Slide 45

Slide 45 text

@marktimemedia TALK TO DESIGNERS!

Slide 46

Slide 46 text

@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/

Slide 47

Slide 47 text

@marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp [email protected] @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: