Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

LINE DESIGN SYSTEM PARK JEA HO / LINE PRODUCT DESIGN

Slide 3

Slide 3 text

LINE PLUS Sr.LEAD DESIGNER PARK JEA HO ܭ૷

Slide 4

Slide 4 text

OVERVIEW LINE DESIGN SYSTEM Instrumentation for Launching LINE Design System Structure of LINE Design System Fundamental element of LINE Design System INDEX LDS G FOR LINE GLOBAL FAMILY SERVICE Overview of LDS G Foundation Component Basic Component + Design Theme set Relationship with FE Development LDS M FOR LINE MESSENGER Foundation Basic Component and Team Component Common UX Guideline EPILOGUE FOR USER

Slide 5

Slide 5 text

INSTRUMENTATION

Slide 6

Slide 6 text

1569 PROJECT 400 GLOBAL DESIGNERS

Slide 7

Slide 7 text

What kind of problems will you face when you run multiple projects simultaneously?

Slide 8

Slide 8 text

Designers' Confusion Button Color Icon )FBEJOH )FBEJOH )FBEJOH )FBEJOH Light Medium Bold Extra Bold Button Button Button Button Button Font

Slide 9

Slide 9 text

Developers' Confusion

Slide 10

Slide 10 text

Common Problems Same function UI was designed differently. Same design development resources are wasted and communication costs increase. Different UX Flows. No Centralized Design Management.

Slide 11

Slide 11 text

Common UX Guideline, Defined Design Libraries and Components implemented in code.

Slide 12

Slide 12 text

Common UX Guideline, Defined Design Libraries and Components implemented in code Efficiency. Good design. High Standard UX. UI reference point Provide beautiful design Saving time

Slide 13

Slide 13 text

KICK OFF WIREFRAME PROTOTYPE SPEC FIX DESIGN FIX DEV QA RELEASE PLAN DESIGN DEVELOPMENT

Slide 14

Slide 14 text

KICK OFF WIREFRAME PROTOTYPE SPEC FIX DESIGN FIX DEV QA RELEASE With LINE DESIGN SYSTEM NEXT STEP

Slide 15

Slide 15 text

STRUCTURE

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Can we apply design system to all Product with one foundation?

Slide 19

Slide 19 text

LINE DESIGN SYSTEM LDSM - Design System for LINE APP LDSG - Design System for LINE Global Family Service Feature-type service under LINE App including Messenger function Additional features included in LINE App Design System in Native App Base Family service with independent brand in LINE ’00’ form Additional features included in LINE App Design System in the Web Base

Slide 20

Slide 20 text

FUNDAMENTAL ELEMENT Design Documentation Principle Typography Color Layout Interaction Components UX Guideline Components Spec Document Code ios. Android components Web components

Slide 21

Slide 21 text

LDS.FOR MESSENGER

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Design system did not exist = Legacy

Slide 25

Slide 25 text

F0UNDATION Design Principle Common values and principles fundamental to LINE Design are provided in these guidelines as a center of truth and as assistance to align LINE services with a unified design language. LINE Voice At LINE we bring information, services, and people closer together. Color Guidelines to help create a consistent brand experience by providing standardized color and usage guides. Typography Guidelines to help clearly distinguish information based on type scale and color. Iconography LINE icons are the most efficient tool for conveying ideas and objects to users. Layout Guidelines for margin and spacing between all screens and components used in the LINE service.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Grid Grid Padding Padding Key shape Key shape Stroke Stroke Grid includes 2px padding in top, bottom, left and right. Icons are drawn inside the padding area. The grid is based on 24x24px and can be adjusted for size and purpose. Key Shape defines the basic frame of each icon. Icons with similar proportion should be consistent. Radius Radius Radius is freely used between 0 and 2px. It is used to show the motif of the icon more effectively. It does not necessarily need to be applied to all corners in a batch. Angle Angle Angles are typically used in 45 degree increments, and 15 degrees if necessary. The default Stroke is 1.3pt and can be changed depending on the size, location and purpose of the icon. It is recommended that the stroke outlines be created to fit pixel dimensions.

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

? Aa

Slide 30

Slide 30 text

Foreign people ৻Ҵੋ੄҃਋ӝઓ੄நܼఠ৬ח׮ܲ׀௏ੑ಴അҗੋ୓੄࠺ਯীର੉ܳ઱য಴അ೤פ׮ FY௏੄ӝ਎ӝܳઑ੺ _١न࠺ਯ

Slide 31

Slide 31 text

Left side Left half side Right half side Right side Front Eyebrow Eyes Mouth Left side Left half side Right half side Right side Front Eyebrow Eyes Mouth

Slide 32

Slide 32 text

1 2 3 4 5 6 7

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Color Opacity 60 55 50 90 100 85 95 80 75 70 65 40 45 35 30 25 20 15 10 LINE Black 60 55 50 90 100 85 95 80 75 70 65 40 45 35 30 25 20 15 10 Line White Dimmed Effect Dimmed Effect 1 Line Black 85% Dimmed Effect 2 Line Black 70% Dimmed Effect 3 Line Black 30% Lime #A5F2A5 Lime #82ED82 Lime #5FDE5F Lime #2CC939 Lime #2CAB33 Lime #257A2F Lime #1D571D Lime #BDD9BF Lime #91CF94 Lime #54BA57 Lime #35A13A Light green #93EDBF Light green #64E8A4 Light green #35DB80 Light green #15BD66 Light green #18A352 Light green #187A41 Light green #16592D Light green #BAD9C5 Light green #85C79B Light green #4BB875 Light green #2A9C5B Orange #FFCFBF Orange #FFA182 Orange #FF875C Orange #FF6F36 Orange #FF5E1F Orange #F24500 Orange #C43100 Orange #FAD3C5 Orange #FA9E7F Orange #F5765D Orange #E35F42 Teal #8EEDD9 Teal #5CE5C8 Teal #20D6BE Teal #19BFA1 Teal #14A37B Teal #137856 Teal #145E4E Teal #BAD9CF Teal #7CC9B0 Teal #46B897 Teal #24967C Amber #FFF9CC Amber #FFEB94 Amber #FFD86B Amber #FFC53D Amber #FCB321 Amber #FA9E1E Amber #F78411 Amber #FFE8C2 Amber #FFDD80 Amber #FFB55D Amber #F7821B Cyan #8CEDED Cyan #5BE3DE Cyan #26D1D1 Cyan #1CB8B8 Cyan #10A1A1 Cyan #107575 Cyan #155C5C Cyan #BDD9D9 Cyan #7DCDCF Cyan #41B6B9 Cyan #1F9399 Red #FCC5CB Red #FF96A3 Red #FF697A Red #FF334B Red #E5172F Red #C9162B Red #85101E Red #F2CED2 Red #F68A94 Red #EB6570 Red #D44652 Yellow #FDFFE5 Yellow #FBFFBF Yellow #FDFF78 Yellow #FFFC33 Yellow #FFF200 Yellow #FFE500 Yellow #FFD900 Yellow #FCFAD2 Yellow #FFF8AB Yellow #FFEA80 Yellow #FFDF6B Light blue #90EAFC Light blue #60DEF7 Light blue #11CDF2 Light blue #00B8E5 Light blue #0093C4 Light blue #066A91 Light blue #084F6B Light blue #C1D8DE Light blue #7FC6D6 Light blue #3FAFC9 Light blue #268CAD Sky blue #ABDCFF Sky blue #78CBFF Sky blue #40B6FF Sky blue #1A9CFF Sky blue #0279D4 Sky blue #095796 Sky blue #1C476B Sky blue #C5D6E3 Sky blue #8FBEE3 Sky blue #5BA2DB Sky blue #3F84C4 Blue #C2D2FF Blue #96B2FF Blue #638DFF Blue #4270ED Blue #2F59CC Blue #2D4796 Blue #32457A Blue #CCD3E5 Blue #9FB6EC Blue #658EE1 Blue #4E73CC Indigo #CACAFC Indigo #A2A2FC Indigo #7979F7 Indigo #5F5FED Indigo #4545D1 Indigo #3D389C Indigo #383878 Indigo #CFCFE5 Indigo #A6A6ED Indigo #7979D9 Indigo #5F5FBA Deep purple #D4C4F5 Deep purple #BD9FF5 Deep purple #A17DF5 Deep purple #8556E3 Deep purple #6B3CC9 Deep purple #532F99 Deep purple #47346B Deep purple #D3CCE5 Deep purple #B59FE8 Deep purple #9473D6 Deep purple #7956B0 Purple #EDC8F7 Purple #DD9CF7 Purple #CE7AF0 Purple #C355D9 Purple #AF36C7 Purple #762D85 Purple #562E5E Purple #DBCCE3 Purple #C89BE0 Purple #A771C9 Purple #81529E Magenta #FCCAE7 Magenta #FF9CCD Magenta #FF70B0 Magenta #F74397 Magenta #DE2C7F Magenta #BF0659 Magenta #8A0E46 Magenta #EBCCDD Magenta #ED91BC Magenta #E569A0 Magenta #C74A82 Rainbow Color Primary Color Line Green for iOS Line Blue 400 Line Navy 600 Line Navy 600 Line Navy 500 Line Navy 400 Line Navy 800 Line Navy 850 Line Navy 900 Line Red Line Green for Android Line Blue 500 Line Blue 600 Line Gray 900 Line Blue 700 Line Black Line White Line Gray 100 Line Gray 400 Line Gray 800 Line Gray 750 Line Gray 850 Line Gray 870 Line Gray 500 Line Gray 150 Line Gray 600 Line Gray 650 Line Gray 300 Line Gray 350 Line Gray 200 Line Gray 250 Line Gray 700 Primary Color Rainbow Color Color Opacity

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

LDS COLOR RAW COLOR VALUE

Slide 38

Slide 38 text

Component History Analysis Type Definition Design Test Structuring component symbols UX GUIDELINE Creation RELEASE Multi Language Test Design guide

Slide 39

Slide 39 text

Button . Checkmark. Checkbox. radio. Switch. slider. Banner. Pagination. Badge Video Player. Input. Dialogs. Progress Indicator. Spinner. Message. List header Basic Component Timeline. Openchat. Profile. Story. Avatar. Search. Call. Chatlive. Faceplay Team Component 9 99 999 9 99 999 N 9 New file New post New post To top New post New post To top New file Brand Price Color Category Mammut Vionic Creed WWWWWWWWWW… GIVENCHY WWWWWWWWWW… GIVENCHY Creed Shopping Brand Price Color Category GIVENCHY Shopping Brand Price Try again by changing No search Shopping

Slide 40

Slide 40 text

Home Timeline News Wallet Somethi… Keep Olivia Come on marrianne Olivia News 8 Timeline Explore Explore 8 Timeline Explore Explore Wallet Gold 100 Chat Chat Top - Main tab Top - Main tab Title Default Avatar Top - Sub tab Top - Sub tab Title Button Title Button Button Button Title Button Button Button Button Title Button Button Button Title Button Iphone 8 Iphone X Bottom Bottom Home 8 Chats Calls Home 8 Chats Calls Home 8 Chats Timeline Calls Home 8 Chats Timeline News Wallet Home 8 Chats Timeline Calls Home 8 Chats Timeline News Wallet Search Bar Search Bar Empty Empty Image type Close Button Back + Close Button Search Search Search Enter a maximum search text enter a Search Search Search Search Enter a maximum search text ent Search Toolbar Toolbar Iphone 8 Iphone X Your current wifi location is unknown. Please check the status and reset An unknown error has occurred Your current wifi location is unknown. Please check the status and reset Setting Your current wifi location is unknown. Please check the status and reset Button Your current wifi location is unknown. Please check the status and reset An unknown error has occurred Tab Tab Text S News All Item Item Ite Item Icon Progress Progress 100MB 0MB Loading… 100MB 25MB Downloading 100MB 25MB Download Fai Loading… Uploading Po Upload failed

Slide 41

Slide 41 text

Snackbar Top Snackbar Top Snackbar Bottom Snackbar Bottom nter a description of the tool maximum length is 3 lines. can be adjusted position. se enter a description of the tool tip. maximum length is 3 lines. Arrows be adjusted position. on Text Image Icon Icon Icon Please enter a 1 line text Description text Title text Please enter a Sub text Please enter a Title text Please enter a 1 line text Enter a text Enter a text Hey How’s it going Summer Hey How’s it going Summer Shared to Timeline Shared to Timeline Please enter 2 line text Please enter 2 line text Please enter 2 line text Please enter 2 line text Please enter 2 line text Blue Mono Capsule Button Capsule Button New post New post To top New file New post New post To top New file Large Active Medium Small Text Button Text Button Icon Button Icon Button Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Chat Report Setting Shop card Video Call Add Accept Membership Album Coupon Join Navigation Follow Delivery Call Block Friends add Location Keep Delete Join Order Note Service Join Book Following Investment Reload Button Button Button Button Single Solid Button Solid Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Double Button

Slide 42

Slide 42 text

Anatomy Anatomy 1. Backgruound Area The color that visually emphasizes the text of a tooltip is used and it includes an arrow that indicates the subject of the tooltip. 2. Text Area The content of a tooltip is displayed. 3. Button Area (Optional) If selected, an action such as redirecting to the respective page, will be executed. 4. Close Button Area (Optional) A button that closes the tooltip is located. Text Type It is used for a tooltip that has only text without a button. Text Type It is used for a tooltip that has only text without a button. Button Type Used if additional actions through a button are required. Button Type Used if additional actions through a button are required. Types Types The component type is distinguished depending on whether the action button is included. he width of tooltip and the location of the arrow can be adjusted depending on the case. However, they are not allowed to modify the margin and text between BG and the text area nor the button style. Design QA must be carried out for the modified width and the arrow location. $PNNPO(VJEFMJOF $PNNPO(VJEFMJOF Because the tooltip has no area within its components that allow for customization, do not detach the symbol for use. )PXUPVTF4LFUDITZNCPMT )PXUPVTF4LFUDITZNCPMT -BZPVU -BZPVU Tooltips should follow the common layout rules. Tooltips should be placed while maintaining at least 5pt margins on the left, right, top, and bottom, excluding the status-bar.

Slide 43

Slide 43 text

Link Buttons Cancel Share Please enter a description of popup Please enter a description of popup Popup component Title Description of Chack item 1 Image Area Contents Area Control Component Button Component Media Area Contents Area Button Component Caption Please enter a title text here enter a title text Caption Please enter a title text here enter a title text Caption Please enter a title text here enter a title text Body Body Title Label Button 1 Service

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Wallet News Timeline Chats Home Wallet News Timeline Chats Home Wallet News Timeline Chats Home Wallet News Timeline Chats Home Wallet News Timeline Chats Home Wallet News Timeline Chats Home Wallet News Timeline Chats Home Tunoha restorant

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

UX GUIDELINE Confirmation Delete Share Navigation Feedback Selection Learn about the confirmation part of ‘Delete’ Learn about hoot Provide the ‘Confirmation’ Through specific contextual examples Learn about points where the user meets ‘Share’ ‘The Share module’, and ‘Share feedback’ Learn about what type of ‘Feedback’ you should use depending on the results of user behavior Learn about how to effectively provide ‘Selection UX’ Learn about the type of ‘Navigation’ and usage patterns used in LINE

Slide 55

Slide 55 text

UX Flow UX Flow Share Icon Share Icon Share Module Share Module Share Feedback Share Feedback Use respective share icons for iOS and Android. Design to the characteristics of the platform as much as possible so that the user can quickly recognize the feature. Share is the action of sharing good things with friends. This page also covers ongoing improvements to the Share Module, so for projects that plan to implement the new share related functionality should refer to updates to this page. Share consists of the following steps: When the user clicks the Share Icon, they will be presented with a screen to select and share. This UI currently known as the “Friends picker” in the existing LINE app, will also be implemented in the ‘Share module’ Previously, inconsistent feedback was being provided when users share contents.From now on when the share process is complete in LINE, display will always remain on the current screen. Share UX Guideline

Slide 56

Slide 56 text

Modal VS Forward Modal VS Forward Share Icon Share Icon Modal top navigation Modal top navigation Use respective share icons for iOS and Android. Design to the characteristics of the platform as much as possible so that the user can quickly recognize the feature. Modal is a floating state accessible from the the main flow of the service. If ‘Modal’ is used well, it can perform major tasks whilst maintaining context without interrupting the original flow. In this guide, you will learn about the differences between general ‘Forward navigation’ and ‘Modal’, what type of ‘Modal’ is used, and how to use it. The Modal’s top navigation is often an area of confusion because it is used extensively in LINE. There are many inquiries about the location of the X button, especially for the full-screen modals. Therefore the following guide may be helpful: The priority of a modal is the completion of an action. The primary action intended for progression of task must be on the right. The close button therefore located on the left. This is also consistent with the back button in forward navigation located on the left. This is the basic configuration. Some cases are not recommended, but depending on the modal, there may be no primary action. In this case, closing the modal can be assigned as the primary action, thus the X button can come to the right. Unlike the sub-pages in LINE,the Webapp services in LINE have a long enough flow to be identified as an independent service. The button to return to the previous page must be provided on the left, so the X button is always on the right. If confirmation and exit are possible at the same time, you can omit the X button via the task button. Modal UX Guideline

Slide 57

Slide 57 text

return space 123 m n b v c x z l k j h g f d s a p o i u y t r e w q Aa return space 123 m n b v c x z l k j h g f d s a p o i u y t r e w q Aa

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

CODE snippet support for developer

Slide 60

Slide 60 text

LDS.FOR GLOBAL FAMILY SERVICE

Slide 61

Slide 61 text

GLOBAL FAMILY SERVICE

Slide 62

Slide 62 text

Designer Designer Designer Designer Designer Designer Designer Designer LDS M LDS G

Slide 63

Slide 63 text

LDS G LDS M Strick Flexible LINE Design system For messenger LINE Design system For Global family service

Slide 64

Slide 64 text

FOUNDATION

Slide 65

Slide 65 text

Colors Typography Layout Radius Border Width Shadow

Slide 66

Slide 66 text

Border Width Colors Radius Shadow Layout Typography Button

Slide 67

Slide 67 text

Button Button Ϙλϯ Border Width Colors Radius Shadow Layout Typography

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Service Title Service Title Service Title Contents Title Contents Title Enter a contents Description Button. Avatar. Controls. Tabs. Input. Overlays. Chips. Top Navigation Basic Component Universal Theme set Very long text label Very long text label Very long text label Very long text label Very long text label Chips text Chips text Chips text Layout. Page

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

Anatomy Anatomy Type Type Status Status The most important action in context is designed with Primary + Filled buttons. When the action button accompanies conditions and the conditions are not met, it is represented as Disabled. General Usage General Usage The Secondary action may be expressed with the Primary Outline or Primary Text Only button instead of the Filled Secondary button. For secondary action For secondary action It provides buttons in three patterns according to the presence of icons and text. We support three design types and variations for each button pattern. Variant Variant The variant refers to variations in style elements, such as the color, border, etc. The primary and the three variants are provided by default. You may add or change the style elements as needed. The LDS G library provides Sketch symbols with Primary as the default. Other variants can be changed and used through Override. All of variant examples are included in the Preview file. Content: The content area where the icons and text of buttons are displayed 1-1. Icon (Optional) Area where the icons that represent the use and nature of the button are displayed It may be placed on the left or right according to the button type. 1-2. Button text Indicates the use of the button and no more than two lines are entered. The center alignment is the default setting. 2. Button container Visual area that surrounds the button icons and text The design style varies according to the element pattern.

Slide 73

Slide 73 text

https://design.linecorp-dev.com/images/global/buttons/image-20200814105704362.png Contained button (Standard) Outlined button Disabled button Sizing

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

Top Header Area Neutral Body Area

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

EPILOGUE

Slide 80

Slide 80 text

Design system Not just a STYLE GUIDE Design Principle. Components implemented in code. Common UX Guideline. Brand identity.

Slide 81

Slide 81 text

What does it include? Who’s gonna use it? How do you use it?

Slide 82

Slide 82 text

QUALITY HIGH

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

LDS Story The Pop-up component has been updated to include a modular system that allows LINE Designers to freely customize the content area of the Pop-up for a variety of needs. However, remember that it is important to deliver consistent experience within LINE services. To help you, LDS provides appropriate Pop-up design guidelines. Please refer to: 209. Popup UX Guidelines If you have any suggestions or inquiries, please visit our slack feedback channel.

Slide 85

Slide 85 text

LINE APP NEW

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

Thank You