작품 자체에서 써 내려간 디자인 양식 사전.
순수한 HTML이다.어떤 브라우저에서도 어떤 기기에서도앱이나 계정 없이 열리고,기계도 같은 페이지를 그대로 읽는다.
| 항목 | 738 |
|---|
스타일 이름이나 만들고 싶은 것을 검색하세요. 이름 일치를 우선하고 용도, 인상, 매체로 가까운 대안을 더합니다.
543
GitHub Primer / 2017– / 양식 / 플랫폼 화면 언어
GitHub의 디자인 시스템은 빽빽한 개발 흐름을 색, 글자, 아이콘, 간격, 컴포넌트의 공통 규칙으로 바꾼다. 장식보다 작업의 흐름을 앞세워 좁은 면에 많은 상태와 행동을 담으면서도 접근성과 반응형 동작을 포기하지 않는다.
중립적인 면과 파란 링크, 절제된 상태색 / 짧은 행동 이름과 함께 쓰는 Octicon / 목록, 탭, 사이드바를 나누는 가는 테두리 / 정보가 빽빽해도 일정한 글자와 간격 단계
544
Adobe Spectrum / 2013– / 양식 / 플랫폼 화면 언어
Adobe의 여러 응용 프로그램을 잇는 디자인 시스템이다. 합리적, 인간적, 집중이라는 원칙 아래 데스크톱과 모바일 사이에서 밀도를 바꾸고, 도구가 많은 화면이 작품 자체의 주의를 빼앗지 않게 한다.
중립적인 면, 선택 상태에만 쓰는 선명한 색 / 아이콘, 글자, 테두리가 함께 비례해 바뀐다 / 가는 구분선으로 이어진 도구 모음과 속성 패널 / 창작물이 인터페이스보다 더 강하게 남는다
545
Atlassian Design System / 2012– / 양식 / 플랫폼 화면 언어
Jira와 Confluence의 복잡함을 공통 토큰, 콘텐츠 규칙, 간격, 그리드, 컴포넌트로 옮기는 시스템이다. 일관성이 신뢰를 만들고 많은 이슈, 문서, 상태를 계속 탐색할 수 있게 한다.
흰색과 옅은 회색 층, 파란색 주요 행동 / 둥근 카드와 캡슐 모양 상태 이름표 / 사이드바, 표, 상세 패널 사이의 뚜렷한 구분 / 토큰이 색, 간격, 모서리와 높이를 통제한다
546
Ant Design / 2015– / 양식 / 플랫폼 화면 언어
재사용할 수 있는 컴포넌트와 페이지 패턴으로 기업용 웹 애플리케이션의 엔트로피를 낮게 유지하는 디자인 시스템이다. 자연스러움, 확실함, 의미, 성장이라는 가치로 표, 폼, 위계, 상태를 체계화하면서 정보 밀도는 줄이지 않는다.
작은 글자와 가는 선으로 짠 빽빽한 표 / 파란색 주요 행동과 뜻이 분명한 상태색 / 일관된 폼, 페이지 나누기, 트리와 표 / 넓은 여백이 아니라 정렬과 반복으로 얻는 가독성
547
Shopify Polaris / 2017– / 양식 / 플랫폼 화면 언어
Shopify의 UI 프레임워크는 상품, 주문, 결제, 고객을 하나의 상거래 언어로 통일한다. 카드와 섹션이 판단을 나누고, 짧은 상태 및 행동 문구가 상점 운영의 다음 단계를 분명히 한다.
옅은 바탕 위에 쌓인 흰색 카드 / 성공이나 전진을 알리는 신호로 쓰이는 초록색 / 제목, 상태, 주요 행동을 페이지 위쪽에 모은 구성 / 상품, 주문, 결제 상태를 나타내는 작은 배지
548
ブラック・ダンディズム / 18th century– / 양식 / 패션사
재단과 몸가짐으로 스스로를 빚고 인종화된 시선에 맞서 다시 편집해 온 계보이다. 장식의 한 수준을 뜻하지 않는다. 규범을 알고 세부를 옮기며 존엄, 저항, 정체성을 한꺼번에 지닌다.
몸에 맞춘 정밀한 재단 / 모자와 칼라에서 넥타이와 구두까지 이어지는 완전한 선 / 고전 남성복 규범을 움직이는 색, 무늬 또는 몸짓 / 자신감 있고 정면을 향한 자기 표현
549
パワー・ドレッシング / 1970s–1980s / 양식 / 패션사
직장에서의 권위를 눈에 보이게 하는 옷차림이다. 1980년대의 날카롭게 재단된 큰 어깨 수트는 여성과 남성의 상승 이동을 나타냈고, 실루엣을 넓고 단단하게 만들면서 규범에 맞추라는 압력도 함께 품었다.
어깨를 넓히는 패드 재킷 / 잘록한 허리와 역삼각형 실루엣 / 어두운 소모직과 핀스트라이프 / 수트, 셔츠, 넥타이 또는 펌프스를 맞춘 구성
554
Carbon Design System / 2015– / 양식 / 플랫폼 화면 언어
IBM의 데이터 중심 기업 제품 시스템으로, 엄격한 그리드와 IBM Plex 서체, 조밀한 컴포넌트를 결합해 복잡한 작업을 읽기 쉽게 유지한다.
IBM Plex와 강한 타이포그래피 위계 / 흰색 또는 짙은 회색 작업 면 / 조밀한 표, 필터, 측면 탐색 / 동작과 초점에만 쓰는 파랑
555
Salesforce Lightning / 2015– / 양식 / 플랫폼 화면 언어
Salesforce가 레코드 중심 업무를 위해 만든 인터페이스 언어로, 객체·동작·상태를 반복 가능한 작업 공간 패턴으로 정리한다.
간결한 메타데이터가 있는 객체 헤더 / 탭, 카드, 활동 타임라인 / 클라우드 블루와 의미 기반 상태색 / 조밀한 폼과 레코드 표
556
557
米国Webデザインシステム / 2015– / 양식 / 공공 디자인
검증된 공공 서비스 패턴을 바탕으로 접근 가능하고 모바일 친화적이며 신뢰할 수 있는 미국 연방 웹 서비스를 만드는 공유 시스템이다.
흰색, 네이비, 절제된 연방 빨강 / 크고 평범한 제목과 읽기 쉬운 본문 / 공식 사이트 안내 배너 / 명확한 폼, 경고, 단계 표시
558
NHSデザインシステム / 2016– / 양식 / 공공 디자인
NHS 시스템은 쉬운 말, 강한 초점 상태, 검증된 임상 패턴을 통해 긴급한 건강 정보와 서비스를 차분하고 직접적이며 일관되게 만든다.
NHS 파랑과 넉넉한 흰 여백 / 큰 제목과 짧은 문단 / 경고와 돌봄 조언을 위한 강조 상자 / 잘 보이는 초점과 단순한 폼
559
BBC GEL / 2010– / 양식 / 플랫폼 화면 언어
BBC의 글로벌 경험 언어는 읽기 쉬운 위계, 접근 가능한 미디어 조작, 재사용 가능한 편집 컴포넌트로 뉴스, 영상, 오디오, 어린이 제품을 통합한다.
흰 콘텐츠 위의 검은 헤더 / 짧고 굵은 헤드라인 / 일관된 이미지 비율의 뉴스 카드 / 매우 잘 보이는 초점, 자막, 재생 조작
560
Mozilla Protocol / 2017– / 양식 / 플랫폼 화면 언어
Mozilla의 유연한 웹 시스템은 장식보다 콘텐츠와 전 세계 접근성을 앞세우면서도 열린 웹의 생생한 개성을 유지한다.
굵은 검은 제목과 넓은 흰 여백 / 넓게 쓰는 선명한 색 / 유연한 빌보드와 카드 / 짧은 문구와 명시적인 행동 요청
561
Elastic UI / 2017– / 양식 / 플랫폼 화면 언어
Elastic의 인터페이스 시스템은 운영 밀도를 잃지 않고 대규모 데이터셋을 검색하고 필터링하고 진단하도록 만들어졌다.
고정 헤더와 왼쪽 탐색 / 항상 보이는 쿼리, 필터, 시간 조작 / 공유 패널 안의 표와 시계열 차트 / 밝은 계열색은 데이터에만 사용
566
PatternFly / 2012– / 양식 / 플랫폼 화면 언어
Red Hat의 기업 제품용 오픈소스 화면 언어는 조밀한 탐색, 데이터 뷰, 엄격히 제어된 상태색으로 복잡한 인프라를 관리 가능하게 한다.
어두운 마스트헤드와 왼쪽 탐색 / 흰색 또는 옅은 회색 작업 면의 조밀한 표와 폼 / 주요 동작은 파랑, 상태는 빨강·주황·초록 / 목록, 상세, 동작을 연결된 패널로 표시
568
GitLab Pajamas / 2018– / 양식 / 플랫폼 화면 언어
GitLab의 화면 언어는 GitLab Sans와 Mono, 지속 탐색, 조밀한 목록, 보랏빛 중성 팔레트로 코드·이슈·리뷰·CI/CD·보안을 하나의 DevSecOps 제품 안에 연결한다.
GitLab Sans와 코드용 GitLab Mono 조합 / 왼쪽 탐색과 애플리케이션 크롬의 층 구조 / 조밀한 이슈, 머지 리퀘스트, 파이프라인 목록 / 흰색 또는 차콜 표면과 브랜드 초점의 보라
570
Ubuntu Yaru / 2018– / 양식 / 플랫폼 화면 언어
Ubuntu의 커뮤니티 기본 테마는 Adwaita 기반 GTK와 GNOME Shell에 Ubuntu 주황, 어두운 헤더 바, Suru 계열 아이콘을 더하고 창·셸·아이콘·커서·소리를 한 묶음으로 배포한다.
밝은 창 본문과 어두운 헤더 바의 대비 / 선택과 초점에 쓰는 Ubuntu 주황 / 원·사각형·세로 또는 가로 타원에 기반한 Suru 계열 아이콘 / 1픽셀 가장자리, 절제된 그라데이션, 아래 그림자
571
Canonical Vanilla / 2013– / 양식 / 플랫폼 화면 언어
Canonical의 CSS 기반 화면 언어는 Ubuntu 서체, 분할 그리드, 선이 있는 섹션, 넉넉한 공간으로 Ubuntu, MAAS, Juju와 관련 사이트·앱을 통합하며 긴 기술 문서를 훑기 좋게 만든다.
Ubuntu 서체의 가는 큰 제목과 굵은 작은 제목 / 비대칭 25/75 및 50/50 분할 / 섹션 위의 가는 선과 넉넉한 세로 공간 / 흰 표면, 어두운 글자, 주황 또는 가지색 초점
580
CDEインターフェース / 1993–2000s / 양식 / 플랫폼 화면 언어
모티프 기반의 입체 효과, 지속적인 프론트 패널, 작업 공간 전환 및 저색상 아이콘을 통해 UNIX 워크스테이션을 통합하여 다양한 하드웨어를 하나의 업무 환경처럼 보이게 합니다.
하단 가장자리에 위치한 상자 형태의 프론트 패널 / 밝은 색과 어두운 색의 테두리를 사용하여 제작된 버튼 및 홈 / 어두운 윤곽선을 가진 저색상 픽셀 아이콘 / 작업 공간 간 전환을 위한 지속적인 버튼
582
GNOME Clearlooks / 2005–2011 / 양식 / 플랫폼 화면 언어
옅은 회색 창, 파란색 선택, 절제된 광택 및 단단한 경계를 통해 GNOME 2.12의 기본 테마를 GTK 애플리케이션을 친근하고 간단하게 만듭니다.
파란색 선택 막이 있는 밝은 회색 표면 / 버튼 상단에만 나타나는 조용한 강조 표시 / 절제된 둥근 모양의 탭 및 필드 / 작은 GNOME 아이콘 및 간결한 두 레벨 계층 구조
598
バイカー・スタイル / 1920s– / 양식 / 서브컬처 스타일
보호용 라이딩 재킷은 오토바이 클럽, 영화, 록 및 펑크를 통해 반항과 소속감을 나타내는 언어로 변화했으며, 비대칭 지퍼, 넓은 칼라, 벨트, 하드웨어 및 닳은 검은 가죽은 기능과 상징성을 모두 유지합니다.
전면을 가로지르는 비대칭 지퍼 / 넓은 칼라, 에파우lette 및 허리 벨트에서 나오는 견고한 윤곽 / 두꺼운 검은 가죽과 은색 하드웨어 / 배드 패치, 스터드, 닳음 및 개인적인 표시
599
Palm OSインターフェース / 1996–2009 / 양식 / 플랫폼 화면 언어
Palm OS는 제목, 카테고리 메뉴, 명령 막대, 하드웨어 버튼 및 그래피티 쓰기 영역을 통해 작은 모노크롬 화면, 스타일러스 및 엄격한 메모 제한을 일관된 휴대용 작업 도구로 만들었습니다.
약 160x160 저해상도 모노크롬 화면 / 제목이 왼쪽 상단에 있고 카테고리 팝업이 오른쪽 상단에 있음 / 아래쪽에서 올라오는 명령 막대와 네 개의 애플리케이션 버튼 / 얇은 단일 비트 아이콘, 규칙 및 그래피티 입력 영역
600
OS/2 Workplace Shell / 1992–2001 / 양식 / 플랫폼 화면 언어
OS/2는 폴더, 프린터, 드라이브 및 설정을 작동 가능한 객체로 취급하여 아이콘이 아닌 방식으로 처리했습니다. 차원별 경계, 쉐이딩된 아이콘, 노트북 설정 및 직접 드래그 앤 드롭을 통해 전체 데스크탑이 하나의 객체 지향적인 작업 공간이 되었습니다.
두 배의 밝고 어두운 차원별 경계를 가진 회색 표면 / 경사진 뷰에서 그린 낮은 색상 아이콘 / 겹쳐진 가장자리 탭을 가진 노트북 설정 / 폴더, 셔터 및 드라이브 간에 직접 드래그 앤 드롭
IndexStyle은 디자인 주변의 모든 용어를 싣지 않습니다. 독립 항목은 알아볼 수 있고 재현할 수 있으며 이웃 양식과 구별되는 시각 언어여야 합니다. 수록 기준