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 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 the Biz Detail page

1 Year later Redesigned Biz Detail page

Redesigning a core page that contains most of the patterns that are used across Yelp? Let’s Build a Styleguide

Styleguide iOS Android WWW Biz site

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

2016 12 Designers

2016 ??? Developers ??? Project managers

Feature team Feature team Feature team Feature team Feature team Core team Feature team Styleguide Consumer Biz iOS Android WWW iOS Android WWW

Styleguide v17.0.3 • Global Colour Palette • Yelpicons • Illustration Styleguide • Mobile patterns • Email • Voice and Tone (coming soon) • Brand (coming soon)

Changes in role of Design • Referee between teams and goals • Deliver a good an consistent User Experience • Communication between designers • Styleguide Gatekeeper

4x Design as a Developer Scaling Visual Design

We need a System

UI Icons Icons Illustrations Mascottes

UI Icons The Workhorse

The Bounding Box An interchangeable icon slot

Inner shape Square

Inner shape Portrait

Inner shape Landscape

Inner shape Circle

a ABC 123 Helvetica Neue 14px b Size & Position Typography as context

14dp 18dp 24dp 30dp mobile @2x www www iOS iOS mobile Android Android iOS Android

Metaphors & Styling

168 Metaphors And counting...

useful Cool Funny

useful Tof Funny

In Company In Context

Even grid Uneven grid

Colour

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

Exporting

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

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

Illustrations Sets of images for editorial purpose

2 1 2 2 3 4 3 3 4 2 5 6 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

Icons Not an Illustration, not an UI icon

Mascottes A narrative for messaging on all platforms