작품 자체에서 써 내려간 디자인 양식 사전.
순수한 HTML이다.어떤 브라우저에서도 어떤 기기에서도앱이나 계정 없이 열리고,기계도 같은 페이지를 그대로 읽는다.
| 항목 | 776 |
|---|
스타일 이름이나 만들고 싶은 것을 검색하세요. 이름 일치를 우선하고 용도, 인상, 매체로 가까운 대안을 더합니다.
이렇게 해석했습니다Trust금융
494
.png)
GOV.UK デザインシステム / 2012– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
영국 정부의 Government Digital Service가 공공 서비스를 위해 공개하고 유지하는 설계 언어다. 모든 것을 장식 없는 왼쪽 정렬 한 단으로 GDS Transport에 짜고, 모서리를 굴리지 않은 초록 버튼은 아래 변의 짙은 초록 띠로 두께를 얻어 누르면 그만큼 가라앉는다. 키보드 초점이 놓인 요소는 노란 바탕과 검은 밑줄로 나타낸다.
장식이 없는 한 단의 왼쪽 정렬이고 테두리도 그림자도 거의 쓰지 않는다 / 모서리를 굴리지 않은 초록 버튼의 아래 변에 짙은 초록 띠가 깔리고 누르면 그 두께만큼 가라앉는다 / 초점이 놓인 요소만 노란 바탕으로 바뀌고 그 아래에 검은 선이 그어진다 / 글자 크기는 48, 36, 24, 19, 16px이라는 성긴 단계만 있고 중간 크기가 없다
539
スケルトン・スクリーン / 2013– / 기법 / UI 스타일
가까운 이유Trust금융TechniqueCalm
읽어 들이는 동안 회전 표시를 내지 않고 내용이 들어오기 전의 빈 화면을 먼저 보여 준 뒤 거기에 정보를 조금씩 흘려 넣는 방법이다. Luke Wroblewski가 2013년에 자신이 만든 앱 Polar에서 얻은 반성으로 이 이름을 붙여 소개했다. 기다리게 하고 있다는 사실이 아니라 진행되고 있다는 것을 보여 준다.
읽어 들이는 동안 회전 표시도 진행 막대도 나오지 않는다 / 본문과 이미지가 들어갈 자리에 같은 치수의 민무늬 면이 먼저 놓여 있다 / 내용이 오기 전에 배치가 확정되어 있어 도착해도 요소가 움직이지 않는다 / 정보가 한꺼번에 나오지 않고 영역별로 차례차례 채워진다
538
.png)
ソラライズド / 2011– / 양식 / UI 스타일
가까운 이유Trust금융TechniqueCalm
Ethan Schoonover가 값까지 함께 공개한, 터미널과 편집기를 위한 16색이다. 여덟 개의 바탕색과 여덟 개의 강조색으로 이루어지고 바탕색의 CIELAB 명도 차를 대칭으로 잡아 두어 밝은 바탕과 어두운 바탕을 바꿔도 읽는 결이 달라지지 않는다. 밝기 차이를 낮추고 색상의 차이로 낱말을 구별한다.
바탕색이 순수한 검정도 흰색도 아니어서 하나는 청록으로, 하나는 노랑 쪽으로 기운다 / 본문과 바탕의 명도 차가 작아 흰 바탕에 검정보다 약한 힘으로 읽게 한다 / 여덟 강조색의 밝기가 거의 고르고 색상의 차이만으로 구별된다 / 밝은 바탕과 어두운 바탕을 바꿔도 같은 강조색이 같은 역할로 나온다
1
42
ベントーグリッド / 2020s / 레이아웃 / 정보 디자인
가까운 이유Trust금융Technique
성격이 다른 정보를 독립된 상자로 나누어, 전체를 한눈에 보여 준다.
크고 작은 카드 / 정렬된 간격 / 한 화면 요약 / 모듈
326
紙幣のギヨシェ / 18th century– / 기법 / 공공 디자인
가까운 이유Trust금융Technique
선반으로 깎아낸 기요셰 곡선과 요판 초상이 위조를 거부하는 동시에 신용을 눈에 보이게 만드는 지폐 양식. 1896년 미국의 에듀케이셔널 시리즈는 지폐를 우의화의 걸작으로 끌어올렸다.
끊이지 않는 기요셰 곡선 / 요판으로 새긴 초상 / 섬세한 바탕 선반 세공 / 액면의 위계
118
フルーエント2 / 2022– / 양식 / 마이크로소프트 UI
가까운 이유Trust금융TechniqueCalm
색과 서체, 여백과 모서리와 깊이를 토큰화하고 Solid·Acrylic·Mica·Smoke 머티리얼을 역할에 따라 마이크로소프트 제품 전반에 배치한다.
Mica와 Acrylic / 중성 톤의 위계 / 부드러운 모서리 / 토큰화된 깊이
554
Carbon Design System / 2015– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
IBM의 데이터 중심 기업 제품 시스템으로, 엄격한 그리드와 IBM Plex 서체, 조밀한 컴포넌트를 결합해 복잡한 작업을 읽기 쉽게 유지한다.
IBM Plex와 강한 타이포그래피 위계 / 흰색 또는 짙은 회색 작업 면 / 조밀한 표, 필터, 측면 탐색 / 동작과 초점에만 쓰는 파랑
571
Canonical Vanilla / 2013– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
Canonical의 CSS 기반 화면 언어는 Ubuntu 서체, 분할 그리드, 선이 있는 섹션, 넉넉한 공간으로 Ubuntu, MAAS, Juju와 관련 사이트·앱을 통합하며 긴 기술 문서를 훑기 좋게 만든다.
Ubuntu 서체의 가는 큰 제목과 굵은 작은 제목 / 비대칭 25/75 및 50/50 분할 / 섹션 위의 가는 선과 넉넉한 세로 공간 / 흰 표면, 어두운 글자, 주황 또는 가지색 초점
557
米国Webデザインシステム / 2015– / 양식 / 공공 디자인
가까운 이유Trust금융Calm본문 일치
검증된 공공 서비스 패턴을 바탕으로 접근 가능하고 모바일 친화적이며 신뢰할 수 있는 미국 연방 웹 서비스를 만드는 공유 시스템이다.
흰색, 네이비, 절제된 연방 빨강 / 크고 평범한 제목과 읽기 쉬운 본문 / 공식 사이트 안내 배너 / 명확한 폼, 경고, 단계 표시
472
マテリアルデザイン / 2014– / 양식 / 구글 UI
가까운 이유Trust금융Technique
종이와 잉크라는 물리의 비유를 그림자와 겹침의 규칙으로 옮겨 놓은 설계 체계. 요소에 높이를 주고 그림자로 위계를 보이며 움직임에 물리적 인과를 담는다. 이후 UI 설계가 「체계로 배포된다」는 것의 본보기가 되었다.
높이로 나타내는 위계와 그림자 / 종이처럼 겹치는 면 / 인과를 보여 주는 모션 / 규격화된 여백의 단위
489
アドワイタ / 2011– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
GNOME이 자신의 기본 모습에 붙인 이름이며, 지침서는 밝은 판과 어두운 판과 고대비 판을 같은 부품으로 성립시킨다고 정한다. 창의 위쪽 끝을 헤더 바가 한 줄 가로지르고, 거기 놓이는 버튼은 배경도 테두리도 그리지 않는다. 아이콘은 16x16px 단색 심볼릭으로 통일된다.
창의 위쪽 끝을 가로지르는 헤더 바 한 줄. 왼쪽과 가운데와 오른쪽 세 지점에 붙이고, 가운데에 창의 제목이 앉는다 / 헤더 바의 버튼은 배경도 테두리도 없고, 기호와 글자만 면 위에 뜬다 / 16x16px로 그린 단색 심볼릭 아이콘. 주요 선은 2px 굵기이고 원근을 주지 않은 정면 형태다 / Blue 3의 #3584e4를 포함해 색상마다 다섯 단계를 갖춘 공개 팔레트
229
スキーマティック路線図 / 1933– / 레이아웃 / 정보 디자인
가까운 이유Trust금융TechniqueCalm
지리적 정확성을 버리고 수평·수직·45도의 선과 균등한 역 간격을 택한다. 1933년 벡의 런던 지하철 다이어그램이 이를 확립해 전 세계 노선도의 공용어로 만들었다.
45도로 제한된 선 / 균등한 역 간격 / 색으로 구분된 노선 / 지리로부터의 독립
543
GitHub Primer / 2017– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
GitHub의 디자인 시스템은 빽빽한 개발 흐름을 색, 글자, 아이콘, 간격, 컴포넌트의 공통 규칙으로 바꾼다. 장식보다 작업의 흐름을 앞세워 좁은 면에 많은 상태와 행동을 담으면서도 접근성과 반응형 동작을 포기하지 않는다.
중립적인 면과 파란 링크, 절제된 상태색 / 짧은 행동 이름과 함께 쓰는 Octicon / 목록, 탭, 사이드바를 나누는 가는 테두리 / 정보가 빽빽해도 일정한 글자와 간격 단계
534
ブリーズ / 2014– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
KDE가 Plasma 5와 함께 도입한 기본 시각 양식이다. 발표문은 스스로 고대비의 평면적인 테마라고 설명하며, 그림을 단순하고 단색에 가깝게 정리한다. 장식 대신 글자 짜임에 기대어 요소를 구별하게 하고, 밝은 판과 어두운 판을 처음부터 짝으로 갖춘다.
음영이 없는 평면이고 요소의 경계는 색 차이와 대비만으로 드러난다 / 아이콘과 그림이 단색에 가깝게 정리되어 쓰는 색 수가 적다 / 제목과 본문의 대비가 장식을 대신하고 글자 짜임이 화면의 뼈대가 된다 / 같은 그림 그대로 밝은 판과 어두운 판이 짝으로 존재한다
568
GitLab Pajamas / 2018– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
GitLab의 화면 언어는 GitLab Sans와 Mono, 지속 탐색, 조밀한 목록, 보랏빛 중성 팔레트로 코드·이슈·리뷰·CI/CD·보안을 하나의 DevSecOps 제품 안에 연결한다.
GitLab Sans와 코드용 GitLab Mono 조합 / 왼쪽 탐색과 애플리케이션 크롬의 층 구조 / 조밀한 이슈, 머지 리퀘스트, 파이프라인 목록 / 흰색 또는 차콜 표면과 브랜드 초점의 보라
556
566
PatternFly / 2012– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
Red Hat의 기업 제품용 오픈소스 화면 언어는 조밀한 탐색, 데이터 뷰, 엄격히 제어된 상태색으로 복잡한 인프라를 관리 가능하게 한다.
어두운 마스트헤드와 왼쪽 탐색 / 흰색 또는 옅은 회색 작업 면의 조밀한 표와 폼 / 주요 동작은 파랑, 상태는 빨강·주황·초록 / 목록, 상세, 동작을 연결된 패널로 표시
59
546
Ant Design / 2015– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique본문 일치
재사용할 수 있는 컴포넌트와 페이지 패턴으로 기업용 웹 애플리케이션의 엔트로피를 낮게 유지하는 디자인 시스템이다. 자연스러움, 확실함, 의미, 성장이라는 가치로 표, 폼, 위계, 상태를 체계화하면서 정보 밀도는 줄이지 않는다.
작은 글자와 가는 선으로 짠 빽빽한 표 / 파란색 주요 행동과 뜻이 분명한 상태색 / 일관된 폼, 페이지 나누기, 트리와 표 / 넓은 여백이 아니라 정렬과 반복으로 얻는 가독성
555
Salesforce Lightning / 2015– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique본문 일치
Salesforce가 레코드 중심 업무를 위해 만든 인터페이스 언어로, 객체·동작·상태를 반복 가능한 작업 공간 패턴으로 정리한다.
간결한 메타데이터가 있는 객체 헤더 / 탭, 카드, 활동 타임라인 / 클라우드 블루와 의미 기반 상태색 / 조밀한 폼과 레코드 표
544
Adobe Spectrum / 2013– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
Adobe의 여러 응용 프로그램을 잇는 디자인 시스템이다. 합리적, 인간적, 집중이라는 원칙 아래 데스크톱과 모바일 사이에서 밀도를 바꾸고, 도구가 많은 화면이 작품 자체의 주의를 빼앗지 않게 한다.
중립적인 면, 선택 상태에만 쓰는 선명한 색 / 아이콘, 글자, 테두리가 함께 비례해 바뀐다 / 가는 구분선으로 이어진 도구 모음과 속성 패널 / 창작물이 인터페이스보다 더 강하게 남는다
6
484
モチーフ / 1989– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique본문 일치
The Open Group이 유지하는 UNIX 워크스테이션용 화면 언어로, IEEE 1295로 규격화되어 200종이 넘는 기종에 실렸다. 공식 자료가 스스로 3D 베벨 외관이라고 부르는 그대로, 회색 면의 가장자리에 밝고 어두운 두 색을 두어 모든 부품을 밀어 올려 보여 준다.
회색 면의 위쪽과 왼쪽이 밝고 아래쪽과 오른쪽이 어두운 테두리여서 부품이 모두 떠 보인다 / 누르고 있는 동안에만 명암이 뒤바뀌어 부품이 가라앉아 보인다 / 입력을 받고 있는 부품의 바깥을 가는 사각 테두리가 빙 둘러싼다 / 스크롤 막대는 모서리가 각진 사각형이고 양 끝에 삼각형 화살표 버튼이 붙는다
IndexStyle은 디자인 주변의 모든 용어를 싣지 않습니다. 독립 항목은 알아볼 수 있고 재현할 수 있으며 이웃 양식과 구별되는 시각 언어여야 합니다. 수록 기준