- 디자인 시스템이란?
- 디자인 시스템은 디자인 원칙과 중요한 UX 전략에 의해 결합된 UI 구성 요소의 모음으로 사용자 경험 내에서 각 구성 요소가 어떻게 생활하는지에 대한 지침을 제공함.
- 레고처럼 각 구성 요소를 다양한 조합으로 재사용하여 제품을 빌드하거나 업데이트.
- 디자인 시스템은 종종 스타일 가이드로 디자인 정보를 포함. 색상, 타이포그래피, 스타일 등 일관된 UI는 전체 디자인 시스템을 가치 있게 만듦.
디자인 시스템 예시
구글(Google)의 머티리얼 디자인
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
애플 디자인 리소스(Apple Design Resources)
Apple Design Resources
Design apps quickly by using Sketch and Photoshop templates, plug-ins, and preconfigured UI elements.
developer.apple.com
에어비앤비 디자인(Airbnb Design)
Creating the Airbnb Design System
Working in software development and design, we are often required to ship one-off solutions. Sometimes we’re working within time constraints and sometimes we just haven’t yet agreed upon a path forward. These one-off solutions aren’t inherently bad,
karrisaarinen.com
IBM 카본 디자인 시스템
Carbon Design System
Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contri
carbondesignsystem.com
마이크로소프트 플루언트(Microsoft Fluent) 디자인 시스템
Fluent 2 Design System
Develop Find installation guides and tooling tips Get started →
fluent2.microsoft.design
아우디(Audi) 사용자 인터페이스 가이드라인
UI Introduction
Animations Animations give a dynamic and lively character to an app. They are used to fulfil functional tasks in the interface and to improve the user experience: they guide the user through an app, help to provide visual orientation between two views, giv
www.audi.com
Base: 우버(Uber) 디자인 시스템
https://baseweb.design/components/
baseweb.design
'WWWEB > DESIGN' 카테고리의 다른 글
| 포토샵 pixel aspect ratio correction is for preview purposes only. turn it off for maximum image quality. 간단 해결법 (0) | 2024.01.01 |
|---|---|
| [Mobile.벤치] 트립닷컴 호텔 UI/UX (feat.webm) (1) | 2023.12.20 |
| Pretendard 웹폰트 적용하기 (1) | 2023.10.11 |
| [Design] 153로지틱스 (#animation #반응형) (0) | 2023.08.11 |
| 포토샵 손바닥툴 stuck버그 (0) | 2023.07.03 |
| [벤치] 네이버 활용백서 (0) | 2023.06.15 |
| 아이들과 다녀온 호크니 전시회 (0) | 2023.05.26 |
| 네이버도 실수를 한다 (0) | 2023.05.23 |
댓글