Front-end in Design System

by LINE DevDay 2019

Slide 1

Slide 1 text

2019 DevDay Front-End in Design System > Akihiko Okazaki > LINE Front-end Standardization Team Front-end Engineer

Slide 2

Slide 2 text

Agenda Introduction UI Framework Design System Pattern Library for Web

Slide 3

Slide 3 text

OKAZAKI Akihiko Front-end Engineer LINE Corporation @okazou

Slide 4

Slide 4 text

Introduction What is UIT ?

Slide 5

Slide 5 text

Front-end Dev1 Front-end Dev2 Front-end Dev3 Front-end Dev4 Front-end Dev5 Front-end Dev6 Front-end Standardization Fukuoka Kyoto Front-end Development Center UIT Department 1 UIT Department 2 As of November 2019 UIT Organization

Slide 6

Slide 6 text

KOREA TAIWAN TOKYO FUKUOKA KYOTO UIT Global Branches VIETNAM

Slide 7

Slide 7 text

160+ Front-end Engineers

Slide 8

Slide 8 text

0% 7% 13% 20% 27% 33% 40% 0-1 1-2 2-5 5-10 10-15 15+ years Front-end Experience Front-end Survey 2019 in UIT

Slide 9

Slide 9 text

JS 7% 17% 33% 33% 10% CSS 7% 13% 47% 25% 7% Expert Advanced Intermediate Novice Beginner Front-end Knowledge Front-end Survey 2019 in UIT

Slide 10

Slide 10 text

Bootstrap Custom F/W Bluma Sematic UI Materialize 0% 8% 15% 23% 30% CSS Frameworks Front-end Survey 2019 in UIT

Slide 11

Slide 11 text

Vue React jQuery Lodash 0% 13% 25% 38% 50% JS Frameworks/Libraries Front-end Survey 2019 in UIT

Slide 12

Slide 12 text

Introduction UIT Works

Slide 13

Slide 13 text

Main Scope Web Apps in Browser WebView in Client-apps SDK & Tools

Slide 14

Slide 14 text

Planner Android Engineer iOS Engineer Server-side Engineer Designer QA Engineer Relations

Slide 15

Slide 15 text

Ƃ https://uit.connpass.com Front-end Community - UIT

Slide 16

Slide 16 text

Ƃ https://uit-inside.linecorp.com Front-end Podcast - UIT INSIDE

Slide 17

Slide 17 text

Ƃ https://getbootstrap.jp OSS Contribution - Bootstrap JP

Slide 18

Slide 18 text

UI Framework

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Ƃ Code assets Typography Icons Components Layouts Colors Based on Bootstrap 4 CSS Toolkit and Vue Components

Slide 21

Slide 21 text

Case Study LINE Official Account Manager

Slide 22

Slide 22 text

Ƃ https://manager.line.biz Admin Tool for LINE Official Accounts

Slide 23

Slide 23 text

LINE Official Account LINE Official Account LINE Business Connect LINE Customer Connect LINE@ Redesign

Slide 24

Slide 24 text

150+ Project Members

Slide 25

Slide 25 text

Required Functions Account List Dashboard Coupon Purchase Broadcast Rich Menu Reward Card Notification Auto Response Rich Message Gain Friends Insight Timeline Rich Video Survey Search

Slide 26

Slide 26 text

Technologies MPA SPA

Slide 27

Slide 27 text

ES6 Dependencies

Slide 28

Slide 28 text

Ƃ https://www.linebiz.com/lineat_migration Released in April 2019

Slide 29

Slide 29 text

save time -30% Design Develop QA Plan Result

Slide 30

Slide 30 text

Requires guide for using components Cons Minimize communication Accelerate decision making Reduce page design time Pros Feedbacks OK Cancel OK Cancel or

Slide 31

Slide 31 text

-30% Design Develop QA Plan Can save more ! If overcome cons ...

Slide 32

Slide 32 text

Design System

Slide 33

Slide 33 text

Phase1 LINE app Phase2 LINE Family Services Mobile Web Phase3 Desktop Web LINE Design System LDS

Slide 34

Slide 34 text

Sync with LDS Design Sync Workshop in Shinjuku

Slide 35

Slide 35 text

Design Principles Pattern Library WISH HOW HOW / WHY Style Guide Major Concepts

Slide 36

Slide 36 text

Design Principles Foundation Style Guide Pattern Library Colors Typography Iconography UX Guide ... Components Templates Icons Code assets ... Break Down

Slide 37

Slide 37 text

Design Principles Style Guide Pattern Library Colors Typography Iconography UX Guide ... Components Templates Icons Code assets ... Foundation As Is (UI Framework)

Slide 38

Slide 38 text

Design Principles Style Guide Pattern Library Colors Typography Iconography UX Guide ... Components Templates Icons Code assets Foundation ... To Be (Design System)

Slide 39

Slide 39 text

Core Design Principles Web App Style Guide CSS Vue React Android iOS Icons Pattern Library Design System Hierarchy

Slide 40

Slide 40 text

Core Web App CSS Vue React Android iOS Icons Pattern Library Style Guide Design Principles Design Principles

Slide 41

Slide 41 text

RESPECT FOR LEGACY CLEAR PRIMARY TASK CONTINOUS EXPERIENCE RELIABLE DESIGN CHAT FIRST WE ≠ USERS Design Principles

Slide 42

Slide 42 text

Core Web App CSS Vue React Android iOS Icons Pattern Library Style Guide Design Principles Style Guide

Slide 43

Slide 43 text

Colors

Slide 44

Slide 44 text

Typography

Slide 45

Slide 45 text

Iconography

Slide 46

Slide 46 text

Core Web App CSS Vue React Android iOS Icons Pattern Library Style Guide Design Principles Pattern Library for Web

Slide 47

Slide 47 text

Core Web App CSS Vue React Android iOS Icons Pattern Library Icons

Slide 48

Slide 48 text

home_icon_service_delete ke_navi_icon_close keep_icon_grid_cancel keep_icon_list_delete keep_icon_search_delete keep_popup_icon_close login_02_close pipMusicIconCloseNormal pipMusicIconClosePressed shareIconPostingDelete Close Icon

Slide 49

Slide 49 text

Food Loss

Slide 50

Slide 50 text

Design Loss home_icon_service_delete ke_navi_icon_close keep_icon_grid_cancel keep_icon_list_delete keep_icon_search_delete keep_popup_icon_close login_02_close pipMusicIconCloseNormal pipMusicIconClosePressed shareIconPostingDelete

Slide 51

Slide 51 text

Naming Single Source Flexible Icon Normalization

Slide 52

Slide 52 text

friend add friend members user user-plus users Naming Convention

Slide 53

Slide 53 text

Ƃ LAICON (LINE Atomic Icons)

Slide 54

Slide 54 text

Ƃ SVG Source

Slide 55

Slide 55 text

Various Implementations CSS Vue import CommentDots from '/laicon-vue/CommentDots'; React import CommentDots from '/laicon-react/CommentDots'; SVG ... Unicode e96e

Slide 56

Slide 56 text

Private npm CDN SVG TTF EOT WOFF WOFF2 Web CSS Vue SVG React SVG GHE SVG SVG Current Deployment Flow

Slide 57

Slide 57 text

LAICON Manager SVG SVG SVG CDN CSS Designer Designer Designer Private npm Imaging API Web WebP Custom Element Future Deployment Flow

Slide 58

Slide 58 text

format [webp] [png] [svg] Output image format color string Output image color (RGB, RGBA) height number Output image height (px) shape [square] [content] LAICON Imaging API square content

Slide 59

Slide 59 text

Available in Client-apps

Slide 60

Slide 60 text

Core Web App CSS Vue React Android iOS Icons Pattern Library CSS

Slide 61

Slide 61 text

Theming Adaptive Components Instant New Features

Slide 62

Slide 62 text

primary secondary success danger warning info Current Theme Colors

Slide 63

Slide 63 text

https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode Dark Mode

Slide 64

Slide 64 text

Service Individuality

Slide 65

Slide 65 text

Default Passion Dark Switch Theme

Slide 66

Slide 66 text

:root { --primary: #d6002a; } .btn-primary { background-color: var(--primary, #00b900); } Custom Properties

Slide 67

Slide 67 text

Color Darken RGB HSL R G B H S L #07b53b 0% 7 181 59 138 93% 37% #05842b 10% 5 127 39 138 93% 27% #034e18 20% 3 78 24 138 93% 17% RGB vs HSL

Slide 68

Slide 68 text

:root { --primary-h: 138; --primary-s: 93; --primary-l: 37; } .btn-primary { background-color: hsl( var(--primary-h), calc(var(--primary-s) * 1%), calc(var(--primary-l) * 1%) ); } .btn-ptimary:hover { background-color: hsl( var(--primary-h), calc(var(--primary-s) * 1%), calc((var(--primary-l) - 10) * 1%) ); } Default Hover Active Generate Tint Without Sass

Slide 69

Slide 69 text

https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode Color Contrast

Slide 70

Slide 70 text

:root { --btn-h: 0; --btn-s: 0; --btn-l: 71; --threshold: 70; } .btn:hover { --bg-l: calc(var(--btn-l) - 10); --fg-l: calc(var(--bg-l) - var(-- threshold) * -100%); color: hsl(0, 0%, var(--fg-l)); background-color: hsl( var(--btn-h), calc(var(--btn-s) * 1%), calc(var(--bg-l) * 1%) ); } L=71% L=61% L=51% Keep Contrast Without Sass

Slide 71

Slide 71 text

x-small small medium large x-large Max width 576 768 992 1200 1201+ Layout ○ ○ ○ ○ ○ Components Desktop Mobile Responsive and Adaptive

Slide 72

Slide 72 text

Core Web App CSS Vue React Android iOS Icons Pattern Library JS

Slide 73

Slide 73 text

57% 43% Front-end Survey 2019 in UIT Vue vs React

Slide 74

Slide 74 text

Done Done What's next ? Next ?

Slide 75

Slide 75 text

koromo-vue koromo-react koromo-angular Vue USABLE ✕ ✕ React ✕ USABLE ✕ Angular ✕ ✕ USABLE Non-reusable Components

Slide 76

Slide 76 text

Web Components

Slide 77

Slide 77 text

https://www.webcomponents.org Usable in All Evergreen Browsers

Slide 78

Slide 78 text

Can be used in Vue and React Polyfills integration Learning curve for developers Can reuse code from koromo Works on WebView Proof of Concept

Slide 79

Slide 79 text

koromo-element

Slide 80

Slide 80 text

koromo-element koromo-vue koromo-react koromo-angular Vue USABLE USABLE ✕ ✕ React USABLE ✕ USABLE ✕ Angular USABLE ✕ ✕ USABLE Reusable Components

Slide 81

Slide 81 text

Alex

DevDay!

Smart Code

Slide 82

Slide 82 text

alert avatar badge CSS JS HTML CSS JS HTML k-alert k-avatar k-badge Framework Integration

Slide 83

Slide 83 text

Multi-device Themable Reusable Web Components for koromo koromo-element

Slide 84

Slide 84 text

https://developers.line.biz/ja/docs/liff LIFF (LINE Front-end Framework)

Slide 85

Slide 85 text

LUI (LIFF UI)

Slide 86

Slide 86 text

Atoms Molecules Organisms Templates Pages Atomic Design

Slide 87

Slide 87 text

Atoms Molecules Templates Organisms LUI Component Levels

Slide 88

Slide 88 text

Summary

Slide 89

Slide 89 text

Strict vs Loose Rule Centered vs Distributed Team Module vs Integration Parts Approach Style

Slide 90

Slide 90 text

Product Manager UX Designer UI Designer Android Engineer iOS Engineer Front-end Engineer Design System Team

Slide 91

Slide 91 text

TOKYO KYOTO LIFF Icons CSS Vue Web Components Front-end Part

Slide 92

Slide 92 text

Core Web App Android iOS Design Principles Style Guide Pattern Library WebView Front-end in Design System

Slide 93

Slide 93 text

Design Principles Style Guide Pattern Library Thank You !