글번호
806751

주목할 만한 브랜드, 디자인 시스템 및 가이드라인

작성일
2022.01.03
수정일
2022.01.03
작성자
디자인학과
조회수
487

참고로 삼을 만한 우수 브랜드, 디자인 시스템 및 가이드라인을 찾아보았습니다. 브랜드 관리 측면에서 가이드라인의 필요성을 강조하면 이것은 디자인부서뿐 아니라 모든 부서에 해당하는 일이 됩니다. 가이드라인을 만들지 않았더라면 드러나지 않았을 텐데 가이드를 만들고 공유하고 규정화하게 되면 이런 것도 관리해야 되는구나 하는 내부 인식도 생기게 되고, 이것이 디자인부서의 영향력을 키우는 데 역할을 하게 되지 않을까 생각합니다.
온라인 서비스의 사용자 편의성과 접근성을 높이기 위해 민간 및 공공영역에서 사용되고 있는 주목할만한 가이드라인들을 살펴보시죠.


1. 민간의 브랜드, 디자인 시스템 및 가이드라인  

 

애플 휴먼인터페이스가이드라인

애플OS 및 응용프로그램의 인터페이스 가이드라인. 세계적으로 가장 먼저 알려진 UI, UX 가이드라인의 고전

https://developer.apple.com/design/human-interface-guidelines/

 

마이크로소프트 플루언트 디자인 시스템(Fluent Design System)

마이크로소프트의 윈도우 및 응용프로그램의 인터페이스 가이드라인

https://www.microsoft.com/design/fluent/#/

 

구글 머터리얼 디자인 가이드라인

안드로이드 운영체계와 응용프로그램의 인터페이스 가이드라인

https://material.io/design/

 

아우디 웹 사용자 인터페이스 가이드라인

웹, 홍보, 동영상 제작, 공간 등 기업의 브랜딩과 관련된 광범위한 범위를 두루 상세하게 제시하는 브랜드 가이드라인.
일러스트의 톤앤매너, 문이 닫히는, 배기음 사운드도 다루고 있음.

https://www.audi.com/ci/en/guides/user-interface/introduction.html#

 

스코다 Skoda 브랜드 디자인 가이드라인

스코다는 폭스바겐 그룹 산하 자동차 브랜드. 디자인컨셉인 큐빅으로부터 시작해서 다양한 브랜드 요소를 총정리함

https://skoda-brand.com/explore-our-brand

 

IBM 디자인 가이드라인

짜임새있게 잘 만들어진 브랜드 가이드라인. 사진자료, 서비스 시연용으로 사용할 수 있는 다양한 데모용 사이트도 제시

https://www.ibm.com/design/language/ 

 

IBM 오픈소스 디자인 가이드라인(카본 디자인시스템 Carbon Design System)

IBM의 디자인 언어를 기반으로 시스템 코드, 디자인 툴과 각종 리소스, 휴먼 인터페이스 지침에 대한 공개용 버전

https://www.carbondesignsystem.com/

 

구글의 웹마스터가이드라인

웹서비스가 구글 검색이 잘 될 수 있게 만들기 위한 가이드라인. 개발자를 위한 것이지만 디자이너들도 알아야 할 내용들이 많음.

https://developers.google.com/search/docs/advanced/guidelines/webmaster-guidelines

 

에어비앤비 디자인 시스템

다양한 플랫폼에서 시각적 일관성을 유지하고 서비스의 사용성을 높이기 위한 가이드라인

https://airbnb.design/building-a-visual-language/

 

우버 디자인 시스템

브랜드 체계, 타이틀, 폰트, 모션그래픽에서의 텐션 등 가이드.
프리젠테이션 템플릿, 그래픽 요소, 사진 라이브러리 운영

https://brand.uber.com/kr/ko/

 

메타(페이스북) 브랜드 가이드라인

메타(기업) 및 페이스북, 인스타그램 등 서비스별 디자인 가이드라인 제시
지켜야 할 것(Do)과 하지 말아야 할 것(Don't)을 구분하여 함께 제시

https://www.facebook.com/brand/resources

 

스타벅스 브랜드 디자인 가이드

가이드라인과 다양한 활용사례를 공유

https://creative.starbucks.com/

 

SAP Fiori Design Guidelines

SAP 솔루션의 디자인 가이드라인

https://experience.sap.com/fiori-design-web/sap-fiori/

 

아틀라시안 Atlassian 디자인 시스템

Jira, Trello, Confluence, Bitbucket 등 개발 및 협업 도구를 만드는 곳으로 유명한 Atlassian의 디자인 시스템
브랜드, 경험의 기초요소, 콘텐츠, 기타 구성요소, 리소스 등 잘 구성됨

https://atlassian.design/

 

스포카 디자인가이드라인

UI디자인 소스 등 제시

http://bi.spoqa.com/

 

스포티파이 Shopify 디자인 시스템

개발자들이 참고하고 가져다 활용하게 좋게끔 제작

https://developer.spotify.com/documentation/general/design-and-branding/#attribution

 

리디 디자인가이드

전자책 플랫폼으로 유명한 국내 기업 리디. 디자인의 공통 원칙 안내

https://ridi.design/

 

넷플릭스

로고, 심볼 가이드라인

https://brand.netflix.com/en/

 

유튜브

로고, 심볼, 유튜브 파트너들이 참고해야 하는 정책 기준 등도 제시

https://www.youtube.com/howyoutubeworks/resources/brand-resources/

 

드롭박스

로고, 심볼

https://www.dropbox.com/branding

 

네이버 클로바 디자인 가이드라인

개발자를 위한 가이드라인

https://developers.naver.com/console/clova/client/Design/Brand.md

 

카카오 디자인가이드라인

로그인 버튼, QR 등 카카오 서비스에서 공통으로 사용되는 디자인요소 사용규정

https://developers.kakao.com/docs/latest/ko/reference/design-guide


2. 공공부문의 브랜드, 디자인 시스템 및 가이드라인   

 

영국 정부 디지털서비스 디자인 원칙

공공부문 가장 우수한 모델로 참조되는 사례

https://design-system.service.gov.uk/
 

https://www.gov.uk/guidance/government-design-principles

 

미국 정부 웹디자인 시스템(USWDS)

미국 정부도 2015년부터 UX, UI를 디자인하는 디지털 디자인 원칙을 만들고 운영해오고 있음

https://designsystem.digital.gov/

 

호주 정부 디자인 시스템

2016년부터 운영, 국제 웹 콘텐츠 접근성(WCAG 2.1) 지침을 따름

https://designsystem.gov.au/

 

남호주정부 UX디자인 가이드라인

정부 온라인 서비스의 접근성을 높이기 위한 가이드라인

https://www.accessibility.sa.gov.au/

 

남호주정부 인클루시브SA 미디어가이드라인

포용디자인과 관련한 홍보, 대민 커뮤니케이션에 대한 지침으로 참고할만 함

https://inclusive.sa.gov.au/resources/templates

 

이탈리아 행정 디자인 시스템

소프트웨어 개발자를 위한 가이드라인도 함께 운영

https://designers.italia.it/

 

우리나라 전자정부 웹사이트 UI·UX 가이드라인(2019)

정부, 공공기관 웹사이트 개발(분석설계시, 사업발주서 작성시, UX/UI품질점검시, 사용성 관련 만족도 조사시)에 있어 발주자와 개발자가 지켜야하고 디자이너가 참고해야 할 가이드라인

https://mois.go.kr/frt/bbs/type001/comm0nselectBoardArticle.do?bbsId=BBSMSTR_000000000045&nttId=69451

 

우리나라 행정공공기관 웹사이트 구축운영 가이드(2021.3.4.)

정부, 공공기관 웹사이트 구축 운영시 개발자, 관리자가 참고해야 할 가이드

https://www.mois.go.kr/frt/bbs/type001/comm0nselectBoardArticle.do?bbsId=BBSMSTR_000000000045&nttId=83218

 

웹콘텐츠접근성 지침 (WCAG) 2.1 번역본

시력장애, 청각장애, 운동장애, 언어장애, 학습장애, 인지장애 등의 장애인 및 비장애인을 포함한 인간이 웹에 접근할 수 있는 방법을 제시하는 지침

http://www.kwacc.or.kr/WAI/wcag21/

* 조사 : 한국디자인진흥원 데이터플랫폼실. 2021.12. 

첨부파일
첨부파일이(가) 없습니다.