Stephen | Currently designing at Yelp 1 Year in SF 2 Years remote - - PowerPoint PPT Presentation

▶
stephen currently designing at yelp 1 year in sf 2 years
SMART_READER_LITE
LIVE PREVIEW

Stephen | Currently designing at Yelp 1 Year in SF 2 Years remote - - PowerPoint PPT Presentation

Apr 10, 2024 342 likes •1.02k views

Stephen | Currently designing at Yelp 1 Year in SF 2 Years remote 2012 2 Designers 2012 300+ Developers 50+ Project managers Yoni Allison iOS Android WWW Biz site Hi there! Yoni Allison iOS Android WWW Biz site 2012 State of

slide-1
SLIDE 1

Stephen | Currently designing at Yelp

slide-2
SLIDE 2

1 Year in SF 2 Years remote

slide-3
SLIDE 3

2 Designers

2012

slide-4
SLIDE 4

300+ Developers 50+ Project managers

2012

slide-5
SLIDE 5

Android WWW Biz site iOS

Yoni Allison

slide-6
SLIDE 6

Yoni Allison

Android WWW Biz site iOS Hi there!

slide-7
SLIDE 7

State of the Biz Detail page

2012

slide-8
SLIDE 8
slide-9
SLIDE 9

Redesigned Biz Detail page

1 Year later

slide-10
SLIDE 10

Redesigning a core page that contains most of the patterns that are used across Yelp?

Let’s Build a Styleguide

slide-11
SLIDE 11
slide-12
SLIDE 12

Android WWW Biz site iOS

Styleguide

slide-13
SLIDE 13

Styleguide v1

  • From bottom and up
  • Sync with code bases
  • Lists ALL patterns (yes, also the ugly and outdated ones)
  • Fix patterns, not pages
  • Use existing patterns. If that fails, try again. If that fails, try again and If

that fails, create a new one that is scalable and document it.

  • The styleguide is never finished
slide-14
SLIDE 14

12 Designers

2016

slide-15
SLIDE 15

??? Developers ??? Project managers

2016

slide-16
SLIDE 16

Consumer Biz

Android WWW iOS Android WWW iOS

Styleguide

Feature team Feature team Feature team Feature team Feature team Core team Feature team

slide-17
SLIDE 17

Styleguide v17.0.3

  • Global Colour Palette
  • Yelpicons
  • Illustration Styleguide
  • Mobile patterns
  • Email
  • Voice and Tone (coming soon)
  • Brand (coming soon)
slide-18
SLIDE 18

Changes in role of Design

  • Referee between teams and goals
  • Deliver a good an consistent User Experience
  • Communication between designers
  • Styleguide Gatekeeper
slide-19
SLIDE 19
slide-20
SLIDE 20

4x

Scaling Visual Design

Design as a Developer

slide-21
SLIDE 21
slide-22
SLIDE 22

We need a System

slide-23
SLIDE 23

UI Icons Icons Illustrations Mascottes

slide-24
SLIDE 24

The Workhorse

UI Icons

slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27

An interchangeable icon slot

The Bounding Box

slide-28
SLIDE 28
slide-29
SLIDE 29

Square

Inner shape

slide-30
SLIDE 30

Portrait

Inner shape

slide-31
SLIDE 31

Landscape

Inner shape

slide-32
SLIDE 32

Circle

Inner shape

slide-33
SLIDE 33

Typography as context

Size & Position

ABC 123 Helvetica Neue 14px

a b

slide-34
SLIDE 34

14dp

mobile @2x iOS Android

18dp

www

24dp

www mobile iOS Android

30dp

iOS Android

slide-35
SLIDE 35

Metaphors & Styling

slide-36
SLIDE 36

And counting...

168 Metaphors

slide-37
SLIDE 37
slide-38
SLIDE 38

useful Cool Funny

slide-39
SLIDE 39

useful Tof Funny

slide-40
SLIDE 40
slide-41
SLIDE 41

In Company In Context

slide-42
SLIDE 42

Even grid Uneven grid

slide-43
SLIDE 43

Colour

slide-44
SLIDE 44
slide-45
SLIDE 45

Aa Aa Aa Aa Aa Aa Aa Aa

Black-Regular Black-Dark 4D4D4D 666666 333333 050505 0097EC 336A8B 0073BB 092D4B A5D8F5 9AB5C5 D0ECFB CDDAE2 Black-Light Black-Extra-Light 999999 Slate-Dark CCCCCC Slate-Regular E6E6E6 F5F5F5 Slate-Light Slate-Extra-Light 41A700 B6DBA6 308941 FEDD30 FEC011 F15C00 FBB044 FFEE98 FFF7CC Yellow-Regular Yellow-Dark Yellow-Light Yellow-Extra-Light FFD8A0 FFEBCF Orange-Dark Orange-Light Orange-Extra-Light DAECD2 Green-Regular Green-Light Green-Dark Green-Extra-Light D32323 F15C4F F8ADA8 FCD6D3 Red-Dark Red-Regular Red-Light Red-Extra-Light 6C3EB2 281F58 DAD1E4 B2A2CB Blue-Regular Slate-Regular Blue-Dark Slate-Dark Blue-Light Slate-Light Blue-Extra-Light Slate-Extra-Light Purple-Regular Purple-Dark Purple-Extra-Light Purple-Light

slide-46
SLIDE 46

Exporting

slide-47
SLIDE 47

Aa

SVG PNG

Update issues Line-height fFexible size Android & iOS support Flexible size Android support Seperate file for each density and color

slide-48
SLIDE 48
slide-49
SLIDE 49
slide-50
SLIDE 50
slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53

168 metaphors * 4 base sizes * 7 platform formats * 6 colours

28.224 files

slide-54
SLIDE 54
slide-55
SLIDE 55
slide-56
SLIDE 56

Sets of images for editorial purpose

Illustrations

slide-57
SLIDE 57

3 6 4 3 2 2 2 1 3 2 4 5

  • 1. Background circle in a light or medium tint
  • 2. Stroke in a darker tint of the fill color
  • 3. 3pt stroke for the outer stroke of an element
  • 4. 2pt stroke for inner details
  • 5. Subtle shading or hightlights
  • 6. 3pt Stroke as a baseline
slide-58
SLIDE 58
slide-59
SLIDE 59
slide-60
SLIDE 60

Not an Illustration, not an UI icon

Icons

slide-61
SLIDE 61
slide-62
SLIDE 62

A narrative for messaging on all platforms

Mascottes

slide-63
SLIDE 63
slide-64
SLIDE 64
slide-65
SLIDE 65
slide-66
SLIDE 66
Core Hubs:
All Converters PDF Hub Video Hub Audio Hub Image Hub File Compressor