작품 자체에서 써 내려간 디자인 양식 사전.
순수한 HTML이다.어떤 브라우저에서도 어떤 기기에서도앱이나 계정 없이 열리고,기계도 같은 페이지를 그대로 읽는다.
| 항목 | 598 |
|---|
스타일 이름이나 만들고 싶은 것을 검색하세요. 이름 일치를 우선하고 용도, 인상, 매체로 가까운 대안을 더합니다.
이렇게 해석했습니다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
.jpg)
42
326
.jpg)
118
554
Carbon Design System / 2015– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible.
IBM Plex and strong type hierarchy / White or deep-gray work surfaces / Dense tables, filters and side navigation / Blue reserved for action and focus
472
489
アドワイタ / 2011– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
GNOME이 자신의 기본 모습에 붙인 이름이며, 지침서는 밝은 판과 어두운 판과 고대비 판을 같은 부품으로 성립시킨다고 정한다. 창의 위쪽 끝을 헤더 바가 한 줄 가로지르고, 거기 놓이는 버튼은 배경도 테두리도 그리지 않는다. 아이콘은 16x16px 단색 심볼릭으로 통일된다.
창의 위쪽 끝을 가로지르는 헤더 바 한 줄. 왼쪽과 가운데와 오른쪽 세 지점에 붙이고, 가운데에 창의 제목이 앉는다 / 헤더 바의 버튼은 배경도 테두리도 없고, 기호와 글자만 면 위에 뜬다 / 16x16px로 그린 단색 심볼릭 아이콘. 주요 선은 2px 굵기이고 원근을 주지 않은 정면 형태다 / Blue 3의 #3584e4를 포함해 색상마다 다섯 단계를 갖춘 공개 팔레트
229
543
GitHub Primer / 2017– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior.
Neutral surfaces with blue links and restrained status colors / Octicons paired with short action labels / Thin borders separating lists, tabs and sidebars / Consistent steps of type and spacing even at high density
534
ブリーズ / 2014– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
KDE가 Plasma 5와 함께 도입한 기본 시각 양식이다. 발표문은 스스로 고대비의 평면적인 테마라고 설명하며, 그림을 단순하고 단색에 가깝게 정리한다. 장식 대신 글자 짜임에 기대어 요소를 구별하게 하고, 밝은 판과 어두운 판을 처음부터 짝으로 갖춘다.
음영이 없는 평면이고 요소의 경계는 색 차이와 대비만으로 드러난다 / 아이콘과 그림이 단색에 가깝게 정리되어 쓰는 색 수가 적다 / 제목과 본문의 대비가 장식을 대신하고 글자 짜임이 화면의 뼈대가 된다 / 같은 그림 그대로 밝은 판과 어두운 판이 짝으로 존재한다
568
GitLab Pajamas / 2018– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
GitLab's screen language connects code, issues, review, CI/CD and security inside one DevSecOps product through GitLab Sans and Mono, persistent navigation, dense lists and a purple-inflected neutral palette.
GitLab Sans paired with GitLab Mono for code / Layered structure built from left navigation and application chrome / Dense issue, merge-request and pipeline lists / White or charcoal surfaces with purple as brand focus
556
SAP Fiori / 2013– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
SAP's role-based design language reduces enterprise processes to the information and actions each person needs, then carries them consistently across devices.
Role-based launchpad tiles / Shell bar and object pages / Compact tables and semantic status / Calm blue on pale work surfaces
566
PatternFly / 2012– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
Red Hat's open-source screen language for enterprise products keeps complex infrastructure manageable through dense navigation, data views and tightly controlled status color.
Dark masthead and left navigation / Dense tables and forms on white or pale-gray work surfaces / Blue for primary action and red, orange or green for status / List, detail and action shown in coordinated panes
571
Canonical Vanilla / 2013– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
Canonical's CSS-based screen language unifies Ubuntu, MAAS, Juju and related sites and applications through Ubuntu type, split grids, ruled sections and generous space, optimized for scanning long technical content.
Thin large headings paired with bold smaller headings in Ubuntu type / Asymmetric 25/75 and 50/50 splits / Fine rules above sections and generous vertical space / White surfaces, dark text and orange or aubergine focus
59
544
Adobe Spectrum / 2013– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융TechniqueCalm
Adobe's cross-application design system. Under the principles Rational, Human and Focused, it changes density between desktop and mobile while keeping tool-heavy interfaces from pulling attention away from the work itself.
Neutral surfaces with vivid color reserved for selection / Icons, type and borders scaling together / Toolbars and property panels joined by fine divisions / The creative work stays stronger than the interface
6
484
モチーフ / 1989– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique본문 일치
The Open Group이 유지하는 UNIX 워크스테이션용 화면 언어로, IEEE 1295로 규격화되어 200종이 넘는 기종에 실렸다. 공식 자료가 스스로 3D 베벨 외관이라고 부르는 그대로, 회색 면의 가장자리에 밝고 어두운 두 색을 두어 모든 부품을 밀어 올려 보여 준다.
회색 면의 위쪽과 왼쪽이 밝고 아래쪽과 오른쪽이 어두운 테두리여서 부품이 모두 떠 보인다 / 누르고 있는 동안에만 명암이 뒤바뀌어 부품이 가라앉아 보인다 / 입력을 받고 있는 부품의 바깥을 가는 사각 테두리가 빙 둘러싼다 / 스크롤 막대는 모서리가 각진 사각형이고 양 끝에 삼각형 화살표 버튼이 붙는다
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's interface system is made for searching, filtering and diagnosing large data sets without losing operational density.
Fixed header and left navigation / Persistent query, filter and time controls / Tables and time-series charts in shared panels / Bright series colors limited to data
545
Atlassian Design System / 2012– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
A system that translates the complexity of Jira and Confluence into shared tokens, content rules, spacing, grids and components. Consistency builds trust while keeping large sets of issues, documents and states navigable.
White and pale gray layers with blue primary actions / Rounded cards and lozenge-shaped status labels / Clear divisions among sidebar, table and detail pane / Color, spacing, radius and elevation controlled by tokens
546
Ant Design / 2015– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
A design system that keeps enterprise web applications at low entropy through reusable components and page patterns. Its values — Natural, Certain, Meaningful and Growing — systematize tables, forms, hierarchy and state without reducing information density.
Dense tables set in small type and fine rules / Blue primary actions with explicit semantic colors / Consistent forms, pagination, trees and tables / Readability achieved through alignment and repetition, not generous space
555
Salesforce Lightning / 2015– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Salesforce's interface language for record-centered business work, organizing objects, actions and status into repeatable workspace patterns.
Object headers with compact metadata / Tabs, cards and activity timelines / Cloud blue with semantic status colors / Dense forms and record tables
557
米国Webデザインシステム / 2015– / 양식 / 공공 디자인
가까운 이유Trust금융Calm
A shared system for accessible, mobile-friendly and trustworthy U.S. federal web services, built from tested public-service patterns.
White, navy and restrained federal red / Large plain headings and readable body text / Official-site banner / Clear forms, alerts and step indicators
32
7
%201%E2%80%935%20(1987)%2C%20Tate%20Modern%2C%20London%2C%20UK.jpg)
230
490
メタル（Java ルック＆フィール） / 1998– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Sun이 Swing의 기본 외관으로 만든 설계 언어로, 어떤 운영체제 위에서도 프로그램이 똑같이 보이도록 하는 것을 노렸다. Metal은 Sun 내부의 프로젝트 이름이 그대로 공식 명칭이 된 것이다. 푸른 보라의 면과 1픽셀의 곧은 테두리를 지니며, 바탕이 되는 플랫폼의 양식을 전혀 물려받지 않는다.
옅은 푸른 보라 바탕 위에 짙은 푸른 보라 띠로 놓인 내부 창의 제목 표시줄 / 제목 표시줄과 구분선에 새겨진 잔 점과 빗금의 질감 / 모서리를 굴리지 않은 사각형 버튼과 그 둘레를 두른 1픽셀의 짙은 푸른 보라 선 / 바깥 창틀은 운영체제가 그리는데 그 안쪽만 다른 양식으로 그려진 이중 구조
547
Shopify Polaris / 2017– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Shopify's UI framework for giving products, orders, payments and customers one commerce language. Cards and sections separate decisions, while short status and action language helps a merchant keep the store moving.
White cards stacked on a pale ground / Green used as success or forward motion / Title, status and primary action gathered at the top / Compact badges for product, order and payment states
558
NHSデザインシステム / 2016– / 양식 / 공공 디자인
가까운 이유Trust금융Calm
The NHS system makes urgent health information and services calm, direct and consistent through plain language, strong focus states and tested clinical patterns.
NHS blue and generous white space / Large headings and short paragraphs / Callouts for warning and care advice / Visible focus and simple forms
559
BBC GEL / 2010– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
BBC's global experience language unifies news, video, audio and children's products through readable hierarchy, accessible media controls and reusable editorial components.
Black header over white content / Short bold headlines / News cards with consistent image ratios / Highly visible focus, captions and playback controls
580
CDEインターフェース / 1993–2000s / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
The Common Desktop Environment unified UNIX workstations through Motif-derived bevels, a persistent Front Panel, workspace switching and low-color icons, making different hardware feel like one workplace.
Box-like Front Panel along the lower edge / Raised buttons and recessed fields made from paired light and dark borders / Low-color pixel icons with dark outlines / Persistent buttons for switching among workspaces
582
GNOME Clearlooks / 2005–2011 / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Calm
GNOME 2.12's standard theme made GTK applications friendly and simple through pale-gray windows, blue selection, restrained gloss and firm boundaries.
Pale-gray surfaces with blue selection bars / A quiet highlight only along button tops / Tabs and fields with restrained rounding / Small GNOME icons and a concise two-level hierarchy
560
Mozilla Protocol / 2017– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Mozilla's flexible web system puts content and global accessibility ahead of decoration while retaining a vivid open-web personality.
Bold black headings and broad white space / Large fields of vivid color / Flexible billboards and cards / Short copy and explicit calls to action
570
Ubuntu Yaru / 2018– / 양식 / 플랫폼 화면 언어
가까운 이유Trust금융Technique
Ubuntu's community-built default theme overlays Adwaita-based GTK and GNOME Shell with Ubuntu orange, dark header bars and Suru-derived icons, distributing windows, shell, icons, cursors and sound as one suite.
Light window body contrasted with a dark header bar / Ubuntu orange for selection and focus / Suru-derived icons based on circles, squares and vertical or horizontal oblongs / One-pixel icon edge, restrained gradient and lower shadow
58
8
31
2
24
55
%2C%20wood%20-%20Montreal%20Museum%20of%20Fine%20Arts%20-%20Montreal%2C%20Canada%20-%20DSC08989.jpg)
95
%2C%20RP-F-2008-51-2170-99.jpg)
381
IndexStyle은 디자인 주변의 모든 용어를 싣지 않습니다. 독립 항목은 알아볼 수 있고 재현할 수 있으며 이웃 양식과 구별되는 시각 언어여야 합니다. 수록 기준