작품 자체에서 써 내려간 디자인 양식 사전.
순수한 HTML이다.어떤 브라우저에서도 어떤 기기에서도앱이나 계정 없이 열리고,기계도 같은 페이지를 그대로 읽는다.
| 항목 | 776 |
|---|
스타일 이름이나 만들고 싶은 것을 검색하세요. 이름 일치를 우선하고 용도, 인상, 매체로 가까운 대안을 더합니다.
이렇게 해석했습니다Trust금융
582
GNOME Clearlooks / 2005–2011 / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Calm본문 일치
옅은 회색 창, 파란색 선택, 절제된 광택 및 단단한 경계를 통해 GNOME 2.12의 기본 테마를 GTK 애플리케이션을 친근하고 간단하게 만듭니다.
파란색 선택 막이 있는 밝은 회색 표면 / 버튼 상단에만 나타나는 조용한 강조 표시 / 절제된 둥근 모양의 탭 및 필드 / 작은 GNOME 아이콘 및 간결한 두 레벨 계층 구조
485
オープンルック / 1988–1990s / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique본문 일치
Sun Microsystems가 규격서로 펴낸 UNIX 워크스테이션용 화면 언어다. 흑백 표시용 판과 입체 표시용 판을 동시에 정하고, 공통 요소는 모두 한 종류의 산세리프로 짜며, 색은 절제해서 쓴다고 정했다. 팝업 창의 왼쪽 어깨에는 압정이 있어서 꽂으면 창이 작업 면에 남는다.
팝업 창 머리말 왼쪽 끝에 있는 압정. 꽂은 창은 닫히지 않고 작업 면에 남는다 / 레이블 뒤에 이어지는 점 세 개는 다른 창을, 윤곽만 있는 삼각형은 메뉴를 예고한다 / 스크롤 막대는 엘리베이터와 케이블과 위아래 케이블 앵커로 나뉘고, 케이블의 짙은 부분이 보이는 비율을 나타낸다 / 작업 면은 50퍼센트, 메뉴의 그림자는 75퍼센트 망점으로 만들어진다
491
ワンUI / 2018– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Calm본문 일치
삼성이 Galaxy를 위해 정한 설계 언어다. 엄지가 가장 쉽게 닿는 높이에서 화면을 갈라 위쪽을 보기만 하는 영역, 아래쪽을 만지는 영역으로 삼고, 제목은 위에 두고 버튼과 탭과 대화 상자는 아래로 모은다. 내용은 모서리를 크게 굴린 상자에 담고, 바탕은 흰색 아니면 순수한 검정, 강조는 파랑 하나로 좁힌다.
화면 위쪽은 제목과 여백만으로 채워지고 만질 수 있는 부품이 하나도 놓이지 않는다 / 모서리를 크게 굴린 카드 모양 상자에 글과 이미지가 한 덩어리씩 담긴다 / 위쪽 제목은 펼친 상태와 접힌 상태 둘만 가지며 중간 높이에서 멈추지 않는다 / 어두운 주제에서는 바탕이 순수한 검정이 되고 그 위에 파란 강조만 얹힌다
532
ゼロックス・スター・インターフェース / 1981–1990s / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique본문 일치
1981년 Xerox 8010의 화면이 정한 설계 언어다. 폴더, 수발신 바구니, 파일 서랍 같은 사무용품을 이름표가 붙은 그림으로 늘어놓았고, 당시 안내 책자는 그것을 전자 책상 위라고 불렀다. 화면 속 물건은 마우스로 자유롭게 옮기고 복제하고 버릴 수 있다.
화면의 그림에는 반드시 글자 이름표가 붙어 그림 하나에만 의미를 맡기지 않는다 / 그림은 폴더, 수발신 바구니, 파일 서랍처럼 사무 책상 위에 있는 물건을 옮겨 놓은 것이다 / 물건을 마우스로 집어 옮길 수 있고 이동과 복제와 삭제가 같은 조작의 계열을 이룬다 / 표 계산은 행과 열의 격자로 나타나고 격자를 다루는 명령이 메뉴에 모인다
561
Elastic UI / 2017– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Elastic의 인터페이스 시스템은 운영 밀도를 잃지 않고 대규모 데이터셋을 검색하고 필터링하고 진단하도록 만들어졌다.
고정 헤더와 왼쪽 탐색 / 항상 보이는 쿼리, 필터, 시간 조작 / 공유 패널 안의 표와 시계열 차트 / 밝은 계열색은 데이터에만 사용
545
Atlassian Design System / 2012– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Jira와 Confluence의 복잡함을 공통 토큰, 콘텐츠 규칙, 간격, 그리드, 컴포넌트로 옮기는 시스템이다. 일관성이 신뢰를 만들고 많은 이슈, 문서, 상태를 계속 탐색할 수 있게 한다.
흰색과 옅은 회색 층, 파란색 주요 행동 / 둥근 카드와 캡슐 모양 상태 이름표 / 사이드바, 표, 상세 패널 사이의 뚜렷한 구분 / 토큰이 색, 간격, 모서리와 높이를 통제한다
32
フラットデザイン / ベクターミニマリズム / 2010s– / 양식 / UI 스타일
가까운 이유Trust금융본문 일치
정보를 평평한 면과 색으로 환원해 화면과 매체를 넘나들 수 있게 한다.
균일한 면 / 단순한 형태 / 적은 그림자 / 명료한 색
7
%201%E2%80%935%20(1987)%2C%20Tate%20Modern%2C%20London%2C%20UK.jpg)
ミニマリズム / 1960s– / 양식 / 기능주의
가까운 이유Trust금융Calm
요소를 덜어내어 남은 것의 의미와 긴장을 극대화한다.
광활한 여백 / 적은 요소 / 고요한 색 / 정밀한 간격
230
案内用ピクトグラム / 1964– / 양식 / 정보 디자인
가까운 이유Trust금융Technique
언어 없이 시설과 행위를 지시하는 통일된 기호 체계. 1964년 도쿄가 경기와 안내 기호를 체계화했고, AIGA/DOT의 교통 기호 세트는 퍼블릭 도메인의 세계 표준이 되었다.
기하학화된 인체 / 일정한 획 굵기 / 시스템으로서의 일관성 / 언어로부터의 독립
490
メタル（Java ルック＆フィール） / 1998– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Sun이 Swing의 기본 외관으로 만든 설계 언어로, 어떤 운영체제 위에서도 프로그램이 똑같이 보이도록 하는 것을 노렸다. Metal은 Sun 내부의 프로젝트 이름이 그대로 공식 명칭이 된 것이다. 푸른 보라의 면과 1픽셀의 곧은 테두리를 지니며, 바탕이 되는 플랫폼의 양식을 전혀 물려받지 않는다.
옅은 푸른 보라 바탕 위에 짙은 푸른 보라 띠로 놓인 내부 창의 제목 표시줄 / 제목 표시줄과 구분선에 새겨진 잔 점과 빗금의 질감 / 모서리를 굴리지 않은 사각형 버튼과 그 둘레를 두른 1픽셀의 짙은 푸른 보라 선 / 바깥 창틀은 운영체제가 그리는데 그 안쪽만 다른 양식으로 그려진 이중 구조
547
Shopify Polaris / 2017– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Shopify의 UI 프레임워크는 상품, 주문, 결제, 고객을 하나의 상거래 언어로 통일한다. 카드와 섹션이 판단을 나누고, 짧은 상태 및 행동 문구가 상점 운영의 다음 단계를 분명히 한다.
옅은 바탕 위에 쌓인 흰색 카드 / 성공이나 전진을 알리는 신호로 쓰이는 초록색 / 제목, 상태, 주요 행동을 페이지 위쪽에 모은 구성 / 상품, 주문, 결제 상태를 나타내는 작은 배지
558
NHSデザインシステム / 2016– / 양식 / 공공 디자인
가까운 이유Trust금융Calm
NHS 시스템은 쉬운 말, 강한 초점 상태, 검증된 임상 패턴을 통해 긴급한 건강 정보와 서비스를 차분하고 직접적이며 일관되게 만든다.
NHS 파랑과 넉넉한 흰 여백 / 큰 제목과 짧은 문단 / 경고와 돌봄 조언을 위한 강조 상자 / 잘 보이는 초점과 단순한 폼
559
BBC GEL / 2010– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
BBC의 글로벌 경험 언어는 읽기 쉬운 위계, 접근 가능한 미디어 조작, 재사용 가능한 편집 컴포넌트로 뉴스, 영상, 오디오, 어린이 제품을 통합한다.
흰 콘텐츠 위의 검은 헤더 / 짧고 굵은 헤드라인 / 일관된 이미지 비율의 뉴스 카드 / 매우 잘 보이는 초점, 자막, 재생 조작
580
CDEインターフェース / 1993–2000s / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
모티프 기반의 입체 효과, 지속적인 프론트 패널, 작업 공간 전환 및 저색상 아이콘을 통해 UNIX 워크스테이션을 통합하여 다양한 하드웨어를 하나의 업무 환경처럼 보이게 합니다.
하단 가장자리에 위치한 상자 형태의 프론트 패널 / 밝은 색과 어두운 색의 테두리를 사용하여 제작된 버튼 및 홈 / 어두운 윤곽선을 가진 저색상 픽셀 아이콘 / 작업 공간 간 전환을 위한 지속적인 버튼
560
Mozilla Protocol / 2017– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Mozilla의 유연한 웹 시스템은 장식보다 콘텐츠와 전 세계 접근성을 앞세우면서도 열린 웹의 생생한 개성을 유지한다.
굵은 검은 제목과 넓은 흰 여백 / 넓게 쓰는 선명한 색 / 유연한 빌보드와 카드 / 짧은 문구와 명시적인 행동 요청
570
Ubuntu Yaru / 2018– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Ubuntu의 커뮤니티 기본 테마는 Adwaita 기반 GTK와 GNOME Shell에 Ubuntu 주황, 어두운 헤더 바, Suru 계열 아이콘을 더하고 창·셸·아이콘·커서·소리를 한 묶음으로 배포한다.
밝은 창 본문과 어두운 헤더 바의 대비 / 선택과 초점에 쓰는 Ubuntu 주황 / 원·사각형·세로 또는 가로 타원에 기반한 Suru 계열 아이콘 / 1픽셀 가장자리, 절제된 그라데이션, 아래 그림자
599
Palm OSインターフェース / 1996–2009 / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Palm OS는 제목, 카테고리 메뉴, 명령 막대, 하드웨어 버튼 및 그래피티 쓰기 영역을 통해 작은 모노크롬 화면, 스타일러스 및 엄격한 메모 제한을 일관된 휴대용 작업 도구로 만들었습니다.
약 160x160 저해상도 모노크롬 화면 / 제목이 왼쪽 상단에 있고 카테고리 팝업이 오른쪽 상단에 있음 / 아래쪽에서 올라오는 명령 막대와 네 개의 애플리케이션 버튼 / 얇은 단일 비트 아이콘, 규칙 및 그래피티 입력 영역
600
OS/2 Workplace Shell / 1992–2001 / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
OS/2는 폴더, 프린터, 드라이브 및 설정을 작동 가능한 객체로 취급하여 아이콘이 아닌 방식으로 처리했습니다. 차원별 경계, 쉐이딩된 아이콘, 노트북 설정 및 직접 드래그 앤 드롭을 통해 전체 데스크탑이 하나의 객체 지향적인 작업 공간이 되었습니다.
두 배의 밝고 어두운 차원별 경계를 가진 회색 표면 / 경사진 뷰에서 그린 낮은 색상 아이콘 / 겹쳐진 가장자리 탭을 가진 노트북 설정 / 폴더, 셔터 및 드라이브 간에 직접 드래그 앤 드롭
58
WPAポスター / 1935–1943 / 양식 / 공공 디자인
가까운 이유Trust금융
단순한 이미지와 적은 인쇄 색으로 공공의 목적을 널리, 그리고 힘 있게 전한다.
단순화한 풍경 / 굵은 산세리프 / 실크스크린 색 / 분명한 행동 촉구
8
ウェブ・ブルータリズム / 2014– / 양식 / UI 스타일
가까운 이유Trust금융
브라우저의 기본 표시를 그대로 내보내며 다듬어진 템플릿의 외양을 거부한다.
기본 제목과 링크 / 밑줄 친 파란 링크 / 극단적인 크기 차이 / 장식 없는 선과 여백
31
ニューブルータリズム / 2010s– / 양식 / UI 스타일
가까운 이유Trust금융
두꺼운 테두리와 투박한 색으로 지나치게 매끈해진 웹에 따뜻하게 반기를 든다.
두꺼운 검은 테두리 / 딱딱한 그림자 / 선명한 색 / 납작한 컴포넌트
2
24
スキューモーフィズム / 2000s–2010s / 양식 / UI 스타일
가까운 이유Trust금융
실제 재료와 도구의 단서를 빌려 낯선 상호작용을 이해할 수 있게 만든다. 원리를 가리키는 이름이므로 아쿠아도 브러시드 메탈도 이 원리가 특정 제품에서 구현된 모습에 해당한다.
가죽·금속·종이 / 입체적인 그림자 / 현실 세계의 은유 / 섬세한 질감
55
IndexStyle은 디자인 주변의 모든 용어를 싣지 않습니다. 독립 항목은 알아볼 수 있고 재현할 수 있으며 이웃 양식과 구별되는 시각 언어여야 합니다. 수록 기준