SlideShare una empresa de Scribd logo
1 de 51
Descargar para leer sin conexión
DESIGN SYSTEM
UILAB 20180506 서연주
001 디자인 시스템이란?
002 필요성 및 이점
003 디자인 시스템 구축
004 디자인 시스템 사례
Contents
001 디자인 시스템이란?
스타일가이드 VS 디자인 시스템
디자인 시스템 4요소
Atomic design
시각적 구성 요소
A Design System
디자인 시스템은 프로젝트가 아닙니다. 그것은 서비스 제품입니다.



스타일 가이드는 디자인 프로세스의 결과물입니다.
디자인 시스템은 살아있으며, 로드맵 및 백로그가 있는 자금 지원 제품으로
생태계를 제공합니다.
A Design System isn’t a Project. It’s a Product, Serving Products.
A style guide is an artifact of design process.
A design system is a living, funded product with a roadmap & backlog,
serving an ecosystem.
- Nathan Curtis -
001 디자인시스템이란?
001 디자인시스템이란?
여러가지 응용 프로그램을 구성하기 위해 결합할 수 있는 

명확한 표준에 따라 재사용 가능한 구성 요소의 모음

타이포, 색상, 모양, 아이콘 등과 같은 스타일 가이드를 포함하는 

모든 포괄적인 UI 구성 요소 집합

비주얼 언어는 디자인 표준의 핵심으로 브랜드 개성을 표현하고
일관된 사용자 경험을 창출하는데 필수적인 역할
디자인 시스템
스타일가이드VS 디자인 시스템
스타일 가이드

디자인 시스템의 스타일, 패턴, 실습 및 원리를 나타내는 물리적 또는 디지털 표현

색상, 타이포그래피, 브랜드, 아이콘 등 기본을 정의하는 일련의 규칙



[패턴 라이브러리] 회사 전체에서 사용하기 위한 디자인 패턴 집합으로 

코드 예제, 디자인 지침 및 사용 사례가 포함되어있는 재사용 가능한 관련 구성 요소 세트.
스타일 가이드를 구성 할 수 있는 일부 

디자인 시스템 

디자인 및 개발을 위한 더 나은 방법 및 프로세스 

“살아 있는 것” 지속적인 업데이트 최신 구성 요소 업데이트 유지 되는 문서
스타일 가이드와 패턴 라이브러리는 훨씬 견고한 디자인 시스템의 일부
001 디자인시스템이란?
Design System
Brand
Guidelines
Voice & Tone
Design
Language
StyleGuide
Visual
Language
Pattern Library
Design systems—Zero to one
001 디자인시스템이란?
Design System
Brand
Guidelines
Voice & Tone
Design
Language
StyleGuide
Visual
Language
Pattern Library
product-unicorn.com
001 디자인시스템이란?
UI Components 구성요소 

패턴 라이브러리, 재사용 가능한 UI 요소 및 웹
사이트의 일관성을 유지하는 코드
Design Principles 디자인 원리
조직에서 온라인 경험을 설계하는 방법을 정의하
는 일련의 지침. 의사 결정을위한 프레임 워크
Content Guide 콘텐츠 가이드
웹 사이트에서 일관된 목소리를 유지하는데 

도움이되는 콘텐츠 제작자를 위한 가이드 라인
Service Manual 서비스 매뉴얼 

디지털 거버넌스 및 디지털 프로젝트 관리 방법을
다루는 문서
디자인시스템4요소
001 디자인시스템이란?
우리는 페이지를 디자인하지 않고, 구성요소의 시스템을 설계하고 있습니다.
We’re not designing pages, we’re designing systems of components.
—Stephen Hay
Brad Frost
디자인 시스템을 생성하기 위한 방법론

웹 사이트 레이아웃을 기본 구성 요소로 분해하여 사이트 전체에서 재사용
견고한 디자인 시스템을 만들고 유지 관리하는 데 필요한 모든 것을
상세하게 설명하여 이전보다 더 높은 품질의 일관성있는 UI를 신속하게 출시
Atomic Design
001 디자인시스템이란?
제품의 모든 화면을 디자인 한 다음 작은 구성 요소로 잘라서
UI 키트를 만드는 방법
Atomic design: how to design systems of components
001 디자인시스템이란?
Atomic design: how to design systems of components
Atomic 시작으로 나머지를 만드는 방법
001 디자인시스템이란?
Atomic Design
001 디자인시스템이란?
Atoms 원자

화학 원자는 모든 물질의 기본 구성 요소 / 더이상 분해할 수 없는 UI 요소

입력, 레이블 및 버튼과 같은 기본 HTML 태그 (인터페이스를 구성하는 기본 구성 요소)

패턴 라이브러리의 컨텍스트 참조용으로 유용

색상 팔레트, 글꼴 및 애니메이션과 같은 인터페이스의 더 눈에 보이지 않는 측면과 같은 추상 요소도 포함
Atomic Design
001 디자인시스템이란?
Molecules 분자 

화합물의 가장 작은 기본 단위
새로운 특성을 취하거나 기능을 완성하기 위해 결합된 원자의 단순한 조합
Form 결합하여 기능적 요소를 형성 / 검색 양식
Atomic Design
001 디자인시스템이란?
Organisms 유기체 

분자들이 결합하여 유기체 형성
비교적 복잡하고 구분 된 인터페이스 영역을 형성하는 분자 그룹
유사하거나 상이한 분자 유형으로 구성

헤더 : 로고, 탐색, 검색 형태 소셜 미디어 채널의 목록과 같은 다양한 요소로 구성 

반복적 그리드 : 쇼핑 상품리스트
Atomic Design
001 디자인시스템이란?
Template 템플릿

페이지를 구성하기 위한 유기체 그룹으로 구성 / 페이지의 기본 콘텐츠 구조에 집중
레이아웃 적용하여 구성 요소 배치, 디자인 컨텐츠 구조 보여줌
구체적, 추상적인 분자와 유기체에 대한 문맥 제공
html 와이어 프레임으로 시작 궁극적인 최종 산출물
Atomic Design
001 디자인시스템이란?
Pages 페이지 

템플릿의 특정 인스턴스
실제 컨텐츠들이 어떻게 비쥬얼적으로 보여질지 페이지를 통해 구현
기본 설계 시스템의 효과를 테스트하는 데 필수적
실제 디자인 컨텍스트를 보다 효과적으로 대처
Atomic Design
001 디자인시스템이란?
001 디자인시스템이란?
시각적구성요소
동일하게 유지되는 구성요소
• typeface
• base unit
구별할 수 있는 구성 요소
• font size
• measure (line length)
• leading (line height)
Typography
Colour
Shape or form
Grids and layouts
Interface
Animation
001 디자인시스템이란?
001 디자인 시스템이란?
Patternlab
002 필요성 및 이점
002 필요성및 이점
더 똑똑하고 빠른 디자인

디자인 시스템을 활용함으로써 전략적 설계와 솔루션 중점
디자인 프로세스 간소화. 더 많은 작업 수행


디자인 시스템 

일관성 없는 스타일, 상호작용, 디자인 원리와 연결이 끊어진 인터페이스
디자인시스템은 단기 설계 결정을 제거, 설계 및 개발 오버헤드를 줄임 

팀이 유지보수가 아닌 혁신에 집중 디자인 및 기술 부채를 점검하는 데 도움


혼란과 불일치 감소 (일관성) 

혼란스러운 사용자가 발생 표준화 된 구성 요소 및 워크플로우를 만들어
예측 가능하고 이해하기 쉬운 경험 제공
일관성은 사용자의 성공과 만족도를 높여줌
빠른 프로토타입

디자인 시스템에서 컴포넌트를 가져와 새로운 기능을 신혹하게 생성 및 테스트
Fail faster. Succeed sooner - David Kelley, IDEO


더 빠른 반복 

디자인 구성 요소에 쉽게 액세스. 더 빨리 이동하여 단순한 반복과 실험
A good idea is worthless without impeccable execution and a commitment to iterate.

– Zach Klien, Co-founder, VIMEO



사용 편의성 향상

일관된 경험으로 사용성 향상. 복잡한 애플리케이션을 사용할 때 문제, 마찰 지점 및 인식 과부하 줄임
일련의 테스트 및 검증 된 구성 요소를 사용하여 일관성 있는 경험을 얻게 되면
복잡성이 줄어들고 개발 프로세스가 진행되는 동안 문제가 줄어듬
002 필요성및 이점
일관성
사용자
경험증대
효율성
002 필요성및 이점
003 디자인 시스템 구축
003 디자인시스템구축
UI 인벤토리 작성 



시각적 디자인 언어 만들기
Color
Typography
Sizing and spacing
Image
UI 패턴 라이브러리 생성



각 구성 요소의 용도와 사용시기
UI 인벤토리 작성
"An interface inventory is similar to a content inventory, only instead of sifting through
and categorizing content, you’re taking stock and categorizing the components making up
your website [or product]. An interface inventory is a comprehensive collection of the bits
and pieces that make up your interface."
— Interface Inventory, Brad Frost
인터페이스 인벤토리는 콘텐츠 인벤토리와 비슷하지만 콘텐츠를 탐색하고 분류하는
대신 재고를 확보하고 웹 사이트 [또는 제품]를 구성하는 구성 요소를 분류합니다.
인터페이스 인벤토리는 종합적인 비트 조각으로 당신의 인터페이스를 구성합니다.
설계한 모든 것을 스크린 샷으로 가져와 인터페이스에 사용 된 모든 디자인 패턴을
나열하고 설명하고, 불일치 사항 기록
003 디자인시스템구축
UI 인벤토리 작성
1. 인터페이스와 코드를 검토하고 찾을 수 있는 모든 색상과 텍스트 스타일을 나열
2. UI 패턴의 스크린 샷을 찍거나 프로젝트의 패턴 복사. 모든 스크린 샷을 한 곳에 담음
3. 목적 (예 : 단추, 양식 필드, 탐색 등)을 기준으로 패턴 분류
4. 패턴 간의 불일치를 표시하고 팀을 위한 프리젠테이션 작성
003 디자인시스템구축
UI 인벤토리 작성
그라디언트, 화살표, 테두리 등의 불일치 재사용되는 버튼 스타일이 적은 인터페이스
003 디자인시스템구축
UI 인벤토리 작성
시각적 디자인 언어 만들기
시각적 디자인 언어는 디자인 시스템의 핵심
네 가지 주요 카테고리로 구성
각 디자인 요소가 화면의 모든 구성 요소에서 수행하는 역할 고려
Color 
Typography
Sizing and spacing
Image
003 디자인시스템구축
Color 

브랜드를 나타내는 1-3 원색이 포함

색상에 흰색과 섞인 색상 (검정색과 혼합 된 색상)을 추가
그런 다음 색상에 대해 다른 음영 생성
시각적 디자인 언어 만들기


angular color generator

003 디자인시스템구축
Typography
표제와 본문 복사를위한 1개의 글꼴과 코드의 고정 폭 글꼴이 포함

기본 제목, 보조 제목, 레이블, 카드 제목, 본문 내용 및 버튼 같은
용도별 입력 체계 스타일 나열

시각적 디자인 언어 만들기
003 디자인시스템구축
Sizing and spacing 

각 요소와 레이아웃이 일정하게 유지
크기조정, 폼 및 기타 유사한 구성 요소에 대해 재사용 할 수 있는
폭, 높이 및 선 높이 세트 정의
시각적 디자인 언어 만들기
003 디자인시스템구축
Image 
일러스트레이션과 아이콘에 대한 지침을 설정하고 상황에 맞는 최상의 이미지 형식을 사용
Oracle Alta UI는 원근감, 획 및 색상과 같은
스타일 지침을 설명합니다.
시각적 디자인 언어 만들기
003 디자인시스템구축
UI 패턴 라이브러리 생성

이미 수행 한 시각적 감사 (디자인 요소의 시각적 품질을 고려함)와 달리 

이 단계는 UI의 실제 구성 요소를 살펴봄. 현재 생산중인 UI의 모든 부분과 조각을 모으기

모든 버튼, 양식, 모달 및 이미지를 의미함. 필요없는 것을 병합하고 제거
미리 정의된 스타일을 구성요소에 매핑 / 스타일 팔레트에 정의된 것으로 사용
각 구성 요소의 용도와 사용시기

문서 라이브러리와 표준은 패턴 라이브러리와 디자인 시스템과 구별 / 문서화 단계 중요
003 디자인시스템구축
004 디자인 시스템 사례
004 디자인시스템사례
Google <Material Design>
Apple <Human Interface Guidelines>
004 디자인시스템사례
Shopify <Polaris> 디자인 시스템
004 디자인시스템사례
IBM <Design Language>
004 디자인시스템사례
Airbnb 시각적 언어 구축
004 디자인시스템사례
Saleforce <LIGHTNING Design System>
004 디자인시스템사례
Atlassian <Design System>
004 디자인시스템사례
Yelp Styleguide
004 디자인시스템사례
Website Style Guide Resources
004 디자인시스템사례
Wework <Plasma Design System>
004 디자인시스템사례
Wework <Plasma Design System>
004 디자인시스템사례
미국 정부를 위한 대규모 설계 시스템 구축
004 디자인시스템사례
참고자료
http://atomicdesign.bradfrost.com/chapter-2
http://bradfrost.com/blog/post/atomic-web-design
https://medium.muz.li/what-is-a-design-system-1e43d19e7696?gi=3d119dbed8a1
https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117
https://medium.com/uxcollections/design-system-resources-d8985ae689b4
https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference
https://www.designbetter.co/design-systems-handbook/introducing-design-systems
https://uxdesign.cc/how-to-get-a-head-start-on-design-system-8a217676c1f9
https://www.atlassian.com/blog/apps/what-is-design-system-how-to-build-one
https://uxdesign.cc/resources-links-references-and-articles-on-design-systems-e8ab898e0ab5
https://www.invisionapp.com/blog/guide-to-design-systems
https://medium.com/qstream-design/creating-a-design-system-158a2d832551
https://medium.com/owl-studios/plasma-design-system-4d63fb6c1afc
Thank You!
서연주 

uxflower@gmail.com
From designer
UI LAB
https://www.facebook.com/from.designer
https://www.facebook.com/groups/uidesignLab

Más contenido relacionado

La actualidad más candente

UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스Hyun-june Kwon
 
Better. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC DesignBetter. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC Designjennifer gergen
 
BPL(Banksalad Product Language) 무야호
BPL(Banksalad Product Language) 무야호BPL(Banksalad Product Language) 무야호
BPL(Banksalad Product Language) 무야호NAVER Engineering
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션Bryan Woo
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0Osamu Ohkubo
 
What is UX Design?
What is UX Design?What is UX Design?
What is UX Design?Baris Erkol
 
ゲーム開発とMVC
ゲーム開発とMVCゲーム開発とMVC
ゲーム開発とMVCTakashi Komada
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
ゲームの仕様書を書こうまとめ
ゲームの仕様書を書こうまとめゲームの仕様書を書こうまとめ
ゲームの仕様書を書こうまとめSugimoto Chizuru
 
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発日本マイクロソフト株式会社
 
정종필 팀장이됐어요(더저용량)
정종필 팀장이됐어요(더저용량)정종필 팀장이됐어요(더저용량)
정종필 팀장이됐어요(더저용량)JP Jung
 
Unityでオニオンアーキテクチャ
UnityでオニオンアーキテクチャUnityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャtorisoup
 
ゲーム開発とデザインパターン
ゲーム開発とデザインパターンゲーム開発とデザインパターン
ゲーム開発とデザインパターンTakashi Komada
 
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」Kazuki Yamashita
 
NDC 2015 이은석 - pay-to-skip: 온라인 게임 속 로봇 경제와 내몰리는 인간
NDC 2015 이은석 - pay-to-skip: 온라인 게임 속 로봇 경제와 내몰리는 인간NDC 2015 이은석 - pay-to-skip: 온라인 게임 속 로봇 경제와 내몰리는 인간
NDC 2015 이은석 - pay-to-skip: 온라인 게임 속 로봇 경제와 내몰리는 인간Eunseok Yi
 

La actualidad más candente (20)

UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스
 
Better. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC DesignBetter. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC Design
 
BPL(Banksalad Product Language) 무야호
BPL(Banksalad Product Language) 무야호BPL(Banksalad Product Language) 무야호
BPL(Banksalad Product Language) 무야호
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
What is UX Design?
What is UX Design?What is UX Design?
What is UX Design?
 
ゲーム開発とMVC
ゲーム開発とMVCゲーム開発とMVC
ゲーム開発とMVC
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
ゲームの仕様書を書こうまとめ
ゲームの仕様書を書こうまとめゲームの仕様書を書こうまとめ
ゲームの仕様書を書こうまとめ
 
Ux design process
Ux design processUx design process
Ux design process
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
 
多機能ボイチャを簡単に導入する方法
多機能ボイチャを簡単に導入する方法多機能ボイチャを簡単に導入する方法
多機能ボイチャを簡単に導入する方法
 
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
 
정종필 팀장이됐어요(더저용량)
정종필 팀장이됐어요(더저용량)정종필 팀장이됐어요(더저용량)
정종필 팀장이됐어요(더저용량)
 
Unityでオニオンアーキテクチャ
UnityでオニオンアーキテクチャUnityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャ
 
ゲーム開発とデザインパターン
ゲーム開発とデザインパターンゲーム開発とデザインパターン
ゲーム開発とデザインパターン
 
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
 
NDC 2015 이은석 - pay-to-skip: 온라인 게임 속 로봇 경제와 내몰리는 인간
NDC 2015 이은석 - pay-to-skip: 온라인 게임 속 로봇 경제와 내몰리는 인간NDC 2015 이은석 - pay-to-skip: 온라인 게임 속 로봇 경제와 내몰리는 인간
NDC 2015 이은석 - pay-to-skip: 온라인 게임 속 로봇 경제와 내몰리는 인간
 

Similar a Design system

[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표ChangGyum Kim
 
SW 아키텍처 분석방법
SW 아키텍처 분석방법 SW 아키텍처 분석방법
SW 아키텍처 분석방법 YoungSu Son
 
Ux디자인 프로젝트 디자인
Ux디자인 프로젝트 디자인Ux디자인 프로젝트 디자인
Ux디자인 프로젝트 디자인wonmin lee
 
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER Engineering
 
Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'ssuser4e0be8
 
StarUML NS Guide - Architectural design
StarUML NS Guide - Architectural designStarUML NS Guide - Architectural design
StarUML NS Guide - Architectural design태욱 양
 
2015 SINVAS USER CONFERENCE - SPL/SSPL을 통한 임베디드 소프트웨어 개발방안
2015 SINVAS USER CONFERENCE - SPL/SSPL을 통한 임베디드 소프트웨어 개발방안2015 SINVAS USER CONFERENCE - SPL/SSPL을 통한 임베디드 소프트웨어 개발방안
2015 SINVAS USER CONFERENCE - SPL/SSPL을 통한 임베디드 소프트웨어 개발방안Suji Lee
 
05. it정보화전략-어플리케이션 프레임워크
05. it정보화전략-어플리케이션 프레임워크05. it정보화전략-어플리케이션 프레임워크
05. it정보화전략-어플리케이션 프레임워크InGuen Hwang
 
How to build Design System?
How to build Design System?How to build Design System?
How to build Design System?John Kim
 
5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdfJeongeun Kwon
 
Bootstrap 살펴보기
Bootstrap 살펴보기Bootstrap 살펴보기
Bootstrap 살펴보기영배 현
 
[AIS 2018] [Team Tools_Advanced] Altassian 기능 확장과 구축사례 - 한국정보컨설팅
[AIS 2018] [Team Tools_Advanced] Altassian 기능 확장과 구축사례 - 한국정보컨설팅[AIS 2018] [Team Tools_Advanced] Altassian 기능 확장과 구축사례 - 한국정보컨설팅
[AIS 2018] [Team Tools_Advanced] Altassian 기능 확장과 구축사례 - 한국정보컨설팅Atlassian 대한민국
 
토종 개발자가 바라본 실리콘밸리 개발 트랜드
토종 개발자가 바라본 실리콘밸리 개발 트랜드토종 개발자가 바라본 실리콘밸리 개발 트랜드
토종 개발자가 바라본 실리콘밸리 개발 트랜드Justin Park
 
웹사이트 벤치마킹의2
웹사이트 벤치마킹의2웹사이트 벤치마킹의2
웹사이트 벤치마킹의2juhyun
 
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브Atlassian 대한민국
 
0126 패턴 랭귀지 ios 가이드라인
0126 패턴 랭귀지  ios 가이드라인0126 패턴 랭귀지  ios 가이드라인
0126 패턴 랭귀지 ios 가이드라인Hyunjeong Lee
 
팀 생산성 향상을 위한 아틀라시안 제품 소개 (2016년 4월 버전)
팀 생산성 향상을 위한 아틀라시안 제품 소개 (2016년 4월 버전)팀 생산성 향상을 위한 아틀라시안 제품 소개 (2016년 4월 버전)
팀 생산성 향상을 위한 아틀라시안 제품 소개 (2016년 4월 버전)Atlassian 대한민국
 
Atlassian Product Overview (아틀라시안 제품 소개) - 2016년 4월 버전
Atlassian Product Overview (아틀라시안 제품 소개) - 2016년 4월 버전Atlassian Product Overview (아틀라시안 제품 소개) - 2016년 4월 버전
Atlassian Product Overview (아틀라시안 제품 소개) - 2016년 4월 버전Atlassian 대한민국
 
IBM BPM ( Business Process Management ) S/W 소개
IBM BPM ( Business Process Management ) S/W 소개IBM BPM ( Business Process Management ) S/W 소개
IBM BPM ( Business Process Management ) S/W 소개Shaun LEE
 
Operation Logic Manager
Operation Logic ManagerOperation Logic Manager
Operation Logic ManagerLee Seungki
 

Similar a Design system (20)

[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
 
SW 아키텍처 분석방법
SW 아키텍처 분석방법 SW 아키텍처 분석방법
SW 아키텍처 분석방법
 
Ux디자인 프로젝트 디자인
Ux디자인 프로젝트 디자인Ux디자인 프로젝트 디자인
Ux디자인 프로젝트 디자인
 
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
 
Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'
 
StarUML NS Guide - Architectural design
StarUML NS Guide - Architectural designStarUML NS Guide - Architectural design
StarUML NS Guide - Architectural design
 
2015 SINVAS USER CONFERENCE - SPL/SSPL을 통한 임베디드 소프트웨어 개발방안
2015 SINVAS USER CONFERENCE - SPL/SSPL을 통한 임베디드 소프트웨어 개발방안2015 SINVAS USER CONFERENCE - SPL/SSPL을 통한 임베디드 소프트웨어 개발방안
2015 SINVAS USER CONFERENCE - SPL/SSPL을 통한 임베디드 소프트웨어 개발방안
 
05. it정보화전략-어플리케이션 프레임워크
05. it정보화전략-어플리케이션 프레임워크05. it정보화전략-어플리케이션 프레임워크
05. it정보화전략-어플리케이션 프레임워크
 
How to build Design System?
How to build Design System?How to build Design System?
How to build Design System?
 
5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf
 
Bootstrap 살펴보기
Bootstrap 살펴보기Bootstrap 살펴보기
Bootstrap 살펴보기
 
[AIS 2018] [Team Tools_Advanced] Altassian 기능 확장과 구축사례 - 한국정보컨설팅
[AIS 2018] [Team Tools_Advanced] Altassian 기능 확장과 구축사례 - 한국정보컨설팅[AIS 2018] [Team Tools_Advanced] Altassian 기능 확장과 구축사례 - 한국정보컨설팅
[AIS 2018] [Team Tools_Advanced] Altassian 기능 확장과 구축사례 - 한국정보컨설팅
 
토종 개발자가 바라본 실리콘밸리 개발 트랜드
토종 개발자가 바라본 실리콘밸리 개발 트랜드토종 개발자가 바라본 실리콘밸리 개발 트랜드
토종 개발자가 바라본 실리콘밸리 개발 트랜드
 
웹사이트 벤치마킹의2
웹사이트 벤치마킹의2웹사이트 벤치마킹의2
웹사이트 벤치마킹의2
 
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
 
0126 패턴 랭귀지 ios 가이드라인
0126 패턴 랭귀지  ios 가이드라인0126 패턴 랭귀지  ios 가이드라인
0126 패턴 랭귀지 ios 가이드라인
 
팀 생산성 향상을 위한 아틀라시안 제품 소개 (2016년 4월 버전)
팀 생산성 향상을 위한 아틀라시안 제품 소개 (2016년 4월 버전)팀 생산성 향상을 위한 아틀라시안 제품 소개 (2016년 4월 버전)
팀 생산성 향상을 위한 아틀라시안 제품 소개 (2016년 4월 버전)
 
Atlassian Product Overview (아틀라시안 제품 소개) - 2016년 4월 버전
Atlassian Product Overview (아틀라시안 제품 소개) - 2016년 4월 버전Atlassian Product Overview (아틀라시안 제품 소개) - 2016년 4월 버전
Atlassian Product Overview (아틀라시안 제품 소개) - 2016년 4월 버전
 
IBM BPM ( Business Process Management ) S/W 소개
IBM BPM ( Business Process Management ) S/W 소개IBM BPM ( Business Process Management ) S/W 소개
IBM BPM ( Business Process Management ) S/W 소개
 
Operation Logic Manager
Operation Logic ManagerOperation Logic Manager
Operation Logic Manager
 

Design system

  • 2. 001 디자인 시스템이란? 002 필요성 및 이점 003 디자인 시스템 구축 004 디자인 시스템 사례 Contents
  • 3. 001 디자인 시스템이란? 스타일가이드 VS 디자인 시스템 디자인 시스템 4요소 Atomic design 시각적 구성 요소
  • 4. A Design System 디자인 시스템은 프로젝트가 아닙니다. 그것은 서비스 제품입니다.
 
 스타일 가이드는 디자인 프로세스의 결과물입니다. 디자인 시스템은 살아있으며, 로드맵 및 백로그가 있는 자금 지원 제품으로 생태계를 제공합니다. A Design System isn’t a Project. It’s a Product, Serving Products. A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. - Nathan Curtis - 001 디자인시스템이란?
  • 5. 001 디자인시스템이란? 여러가지 응용 프로그램을 구성하기 위해 결합할 수 있는 
 명확한 표준에 따라 재사용 가능한 구성 요소의 모음
 타이포, 색상, 모양, 아이콘 등과 같은 스타일 가이드를 포함하는 
 모든 포괄적인 UI 구성 요소 집합
 비주얼 언어는 디자인 표준의 핵심으로 브랜드 개성을 표현하고 일관된 사용자 경험을 창출하는데 필수적인 역할 디자인 시스템
  • 6. 스타일가이드VS 디자인 시스템 스타일 가이드
 디자인 시스템의 스타일, 패턴, 실습 및 원리를 나타내는 물리적 또는 디지털 표현
 색상, 타이포그래피, 브랜드, 아이콘 등 기본을 정의하는 일련의 규칙
 
 [패턴 라이브러리] 회사 전체에서 사용하기 위한 디자인 패턴 집합으로 
 코드 예제, 디자인 지침 및 사용 사례가 포함되어있는 재사용 가능한 관련 구성 요소 세트. 스타일 가이드를 구성 할 수 있는 일부 
 디자인 시스템 
 디자인 및 개발을 위한 더 나은 방법 및 프로세스 
 “살아 있는 것” 지속적인 업데이트 최신 구성 요소 업데이트 유지 되는 문서 스타일 가이드와 패턴 라이브러리는 훨씬 견고한 디자인 시스템의 일부 001 디자인시스템이란?
  • 7. Design System Brand Guidelines Voice & Tone Design Language StyleGuide Visual Language Pattern Library Design systems—Zero to one 001 디자인시스템이란?
  • 8. Design System Brand Guidelines Voice & Tone Design Language StyleGuide Visual Language Pattern Library product-unicorn.com 001 디자인시스템이란?
  • 9. UI Components 구성요소 
 패턴 라이브러리, 재사용 가능한 UI 요소 및 웹 사이트의 일관성을 유지하는 코드 Design Principles 디자인 원리 조직에서 온라인 경험을 설계하는 방법을 정의하 는 일련의 지침. 의사 결정을위한 프레임 워크 Content Guide 콘텐츠 가이드 웹 사이트에서 일관된 목소리를 유지하는데 
 도움이되는 콘텐츠 제작자를 위한 가이드 라인 Service Manual 서비스 매뉴얼 
 디지털 거버넌스 및 디지털 프로젝트 관리 방법을 다루는 문서 디자인시스템4요소 001 디자인시스템이란?
  • 10. 우리는 페이지를 디자인하지 않고, 구성요소의 시스템을 설계하고 있습니다. We’re not designing pages, we’re designing systems of components. —Stephen Hay Brad Frost 디자인 시스템을 생성하기 위한 방법론
 웹 사이트 레이아웃을 기본 구성 요소로 분해하여 사이트 전체에서 재사용 견고한 디자인 시스템을 만들고 유지 관리하는 데 필요한 모든 것을 상세하게 설명하여 이전보다 더 높은 품질의 일관성있는 UI를 신속하게 출시 Atomic Design 001 디자인시스템이란?
  • 11. 제품의 모든 화면을 디자인 한 다음 작은 구성 요소로 잘라서 UI 키트를 만드는 방법 Atomic design: how to design systems of components 001 디자인시스템이란?
  • 12. Atomic design: how to design systems of components Atomic 시작으로 나머지를 만드는 방법 001 디자인시스템이란?
  • 14. Atoms 원자
 화학 원자는 모든 물질의 기본 구성 요소 / 더이상 분해할 수 없는 UI 요소
 입력, 레이블 및 버튼과 같은 기본 HTML 태그 (인터페이스를 구성하는 기본 구성 요소)
 패턴 라이브러리의 컨텍스트 참조용으로 유용
 색상 팔레트, 글꼴 및 애니메이션과 같은 인터페이스의 더 눈에 보이지 않는 측면과 같은 추상 요소도 포함 Atomic Design 001 디자인시스템이란?
  • 15. Molecules 분자 
 화합물의 가장 작은 기본 단위 새로운 특성을 취하거나 기능을 완성하기 위해 결합된 원자의 단순한 조합 Form 결합하여 기능적 요소를 형성 / 검색 양식 Atomic Design 001 디자인시스템이란?
  • 16. Organisms 유기체 
 분자들이 결합하여 유기체 형성 비교적 복잡하고 구분 된 인터페이스 영역을 형성하는 분자 그룹 유사하거나 상이한 분자 유형으로 구성
 헤더 : 로고, 탐색, 검색 형태 소셜 미디어 채널의 목록과 같은 다양한 요소로 구성 
 반복적 그리드 : 쇼핑 상품리스트 Atomic Design 001 디자인시스템이란?
  • 17. Template 템플릿
 페이지를 구성하기 위한 유기체 그룹으로 구성 / 페이지의 기본 콘텐츠 구조에 집중 레이아웃 적용하여 구성 요소 배치, 디자인 컨텐츠 구조 보여줌 구체적, 추상적인 분자와 유기체에 대한 문맥 제공 html 와이어 프레임으로 시작 궁극적인 최종 산출물 Atomic Design 001 디자인시스템이란?
  • 18. Pages 페이지 
 템플릿의 특정 인스턴스 실제 컨텐츠들이 어떻게 비쥬얼적으로 보여질지 페이지를 통해 구현 기본 설계 시스템의 효과를 테스트하는 데 필수적 실제 디자인 컨텍스트를 보다 효과적으로 대처 Atomic Design 001 디자인시스템이란?
  • 20. 시각적구성요소 동일하게 유지되는 구성요소 • typeface • base unit 구별할 수 있는 구성 요소 • font size • measure (line length) • leading (line height) Typography Colour Shape or form Grids and layouts Interface Animation 001 디자인시스템이란?
  • 23. 002 필요성및 이점 더 똑똑하고 빠른 디자인
 디자인 시스템을 활용함으로써 전략적 설계와 솔루션 중점 디자인 프로세스 간소화. 더 많은 작업 수행 
 디자인 시스템 
 일관성 없는 스타일, 상호작용, 디자인 원리와 연결이 끊어진 인터페이스 디자인시스템은 단기 설계 결정을 제거, 설계 및 개발 오버헤드를 줄임 
 팀이 유지보수가 아닌 혁신에 집중 디자인 및 기술 부채를 점검하는 데 도움 
 혼란과 불일치 감소 (일관성) 
 혼란스러운 사용자가 발생 표준화 된 구성 요소 및 워크플로우를 만들어 예측 가능하고 이해하기 쉬운 경험 제공 일관성은 사용자의 성공과 만족도를 높여줌
  • 24. 빠른 프로토타입
 디자인 시스템에서 컴포넌트를 가져와 새로운 기능을 신혹하게 생성 및 테스트 Fail faster. Succeed sooner - David Kelley, IDEO 
 더 빠른 반복 
 디자인 구성 요소에 쉽게 액세스. 더 빨리 이동하여 단순한 반복과 실험 A good idea is worthless without impeccable execution and a commitment to iterate.
 – Zach Klien, Co-founder, VIMEO
 
 사용 편의성 향상
 일관된 경험으로 사용성 향상. 복잡한 애플리케이션을 사용할 때 문제, 마찰 지점 및 인식 과부하 줄임 일련의 테스트 및 검증 된 구성 요소를 사용하여 일관성 있는 경험을 얻게 되면 복잡성이 줄어들고 개발 프로세스가 진행되는 동안 문제가 줄어듬 002 필요성및 이점
  • 27. 003 디자인시스템구축 UI 인벤토리 작성 
 
 시각적 디자인 언어 만들기 Color Typography Sizing and spacing Image UI 패턴 라이브러리 생성
 
 각 구성 요소의 용도와 사용시기
  • 28. UI 인벤토리 작성 "An interface inventory is similar to a content inventory, only instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up your website [or product]. An interface inventory is a comprehensive collection of the bits and pieces that make up your interface." — Interface Inventory, Brad Frost 인터페이스 인벤토리는 콘텐츠 인벤토리와 비슷하지만 콘텐츠를 탐색하고 분류하는 대신 재고를 확보하고 웹 사이트 [또는 제품]를 구성하는 구성 요소를 분류합니다. 인터페이스 인벤토리는 종합적인 비트 조각으로 당신의 인터페이스를 구성합니다. 설계한 모든 것을 스크린 샷으로 가져와 인터페이스에 사용 된 모든 디자인 패턴을 나열하고 설명하고, 불일치 사항 기록 003 디자인시스템구축
  • 29. UI 인벤토리 작성 1. 인터페이스와 코드를 검토하고 찾을 수 있는 모든 색상과 텍스트 스타일을 나열 2. UI 패턴의 스크린 샷을 찍거나 프로젝트의 패턴 복사. 모든 스크린 샷을 한 곳에 담음 3. 목적 (예 : 단추, 양식 필드, 탐색 등)을 기준으로 패턴 분류 4. 패턴 간의 불일치를 표시하고 팀을 위한 프리젠테이션 작성 003 디자인시스템구축
  • 30. UI 인벤토리 작성 그라디언트, 화살표, 테두리 등의 불일치 재사용되는 버튼 스타일이 적은 인터페이스 003 디자인시스템구축
  • 31. UI 인벤토리 작성 시각적 디자인 언어 만들기 시각적 디자인 언어는 디자인 시스템의 핵심 네 가지 주요 카테고리로 구성 각 디자인 요소가 화면의 모든 구성 요소에서 수행하는 역할 고려 Color  Typography Sizing and spacing Image 003 디자인시스템구축
  • 32. Color 
 브랜드를 나타내는 1-3 원색이 포함
 색상에 흰색과 섞인 색상 (검정색과 혼합 된 색상)을 추가 그런 다음 색상에 대해 다른 음영 생성 시각적 디자인 언어 만들기 
 angular color generator 003 디자인시스템구축
  • 33. Typography 표제와 본문 복사를위한 1개의 글꼴과 코드의 고정 폭 글꼴이 포함
 기본 제목, 보조 제목, 레이블, 카드 제목, 본문 내용 및 버튼 같은 용도별 입력 체계 스타일 나열
 시각적 디자인 언어 만들기 003 디자인시스템구축
  • 34. Sizing and spacing 
 각 요소와 레이아웃이 일정하게 유지 크기조정, 폼 및 기타 유사한 구성 요소에 대해 재사용 할 수 있는 폭, 높이 및 선 높이 세트 정의 시각적 디자인 언어 만들기 003 디자인시스템구축
  • 35. Image  일러스트레이션과 아이콘에 대한 지침을 설정하고 상황에 맞는 최상의 이미지 형식을 사용 Oracle Alta UI는 원근감, 획 및 색상과 같은 스타일 지침을 설명합니다. 시각적 디자인 언어 만들기 003 디자인시스템구축
  • 36. UI 패턴 라이브러리 생성
 이미 수행 한 시각적 감사 (디자인 요소의 시각적 품질을 고려함)와 달리 
 이 단계는 UI의 실제 구성 요소를 살펴봄. 현재 생산중인 UI의 모든 부분과 조각을 모으기
 모든 버튼, 양식, 모달 및 이미지를 의미함. 필요없는 것을 병합하고 제거 미리 정의된 스타일을 구성요소에 매핑 / 스타일 팔레트에 정의된 것으로 사용 각 구성 요소의 용도와 사용시기
 문서 라이브러리와 표준은 패턴 라이브러리와 디자인 시스템과 구별 / 문서화 단계 중요 003 디자인시스템구축
  • 39. Apple <Human Interface Guidelines> 004 디자인시스템사례
  • 40. Shopify <Polaris> 디자인 시스템 004 디자인시스템사례
  • 41. IBM <Design Language> 004 디자인시스템사례
  • 42. Airbnb 시각적 언어 구축 004 디자인시스템사례
  • 43. Saleforce <LIGHTNING Design System> 004 디자인시스템사례
  • 44. Atlassian <Design System> 004 디자인시스템사례
  • 46. Website Style Guide Resources 004 디자인시스템사례
  • 47. Wework <Plasma Design System> 004 디자인시스템사례
  • 48. Wework <Plasma Design System> 004 디자인시스템사례
  • 49. 미국 정부를 위한 대규모 설계 시스템 구축 004 디자인시스템사례
  • 50. 참고자료 http://atomicdesign.bradfrost.com/chapter-2 http://bradfrost.com/blog/post/atomic-web-design https://medium.muz.li/what-is-a-design-system-1e43d19e7696?gi=3d119dbed8a1 https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117 https://medium.com/uxcollections/design-system-resources-d8985ae689b4 https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference https://www.designbetter.co/design-systems-handbook/introducing-design-systems https://uxdesign.cc/how-to-get-a-head-start-on-design-system-8a217676c1f9 https://www.atlassian.com/blog/apps/what-is-design-system-how-to-build-one https://uxdesign.cc/resources-links-references-and-articles-on-design-systems-e8ab898e0ab5 https://www.invisionapp.com/blog/guide-to-design-systems https://medium.com/qstream-design/creating-a-design-system-158a2d832551 https://medium.com/owl-studios/plasma-design-system-4d63fb6c1afc
  • 51. Thank You! 서연주 uxflower@gmail.com From designer UI LAB https://www.facebook.com/from.designer https://www.facebook.com/groups/uidesignLab