Apple, Google 및 Starbucks와 같은 인기 있는 회사의 10가지 디지털 디자인 및 스타일 가이드 일러스트레이션

Apple의 디자이너가 iOS의 모든 사소한 측면을 구성하는 과정에서 어떻게 정의했는지 궁금하다면 적절한 위치에 있을 수 있습니다.

기술 혁신이 끊임없이 진화함에 따라 웹 디자인은 계속해서 형식화되고 있습니다. 월드 와이드 웹 디자이너와 개발자는 랩톱에서 셀 제품으로 원활하게 변환할 수 있는 코드를 만들고 사이트 탐색을 이해하기 쉽게 만들고 기타 인터넷 사이트 기능을 혁신해야 합니다. 이 모든 요소는 기업이 디지털 디자인 가이드에서 표준화하는 요소입니다.

전자 디자인 가이드는 회사 웹 디스플레이 화면에 대한 기대치와 벤치마크를 설정했기 때문에 브랜드의 일반적인 이미지와 네트워크에서의 기억력에 매우 실용적인 것으로 판명되었습니다. 그들은 최고 수준의 사용자 시련을 제공해야 하는 웹사이트와 제품에 특히 중요합니다.

이 포스팅에서는 디지털 활자 가이드가 무엇인지 자세히 알아보고 제대로 완성한 유명 기업의 인상적인 일러스트레이션을 보여드리겠습니다.

이러한 스타일의 패션 정보는 기업의 디지털 존재에 대한 스타일과 디자인 기준을 설정하는 매뉴얼로 취급되어야 합니다. 주요 의도는 브랜드 이름에 대한 보편적인 스타일 유형을 생성하고 모든 채널과 매체, 브랜드를 구축하는 장소, 색상 팔레트, 타이포그래피, 이미지 제안 등에 걸쳐 일정한 규칙성을 갖도록 하는 것입니다.

회사의 로고, 사명, 구매자의 페르소나, 목소리 톤을 담아내는 제조사 패션 가이드와 달리 웹 디자인과 스타일 가이드는 UX/UI와 같은 디지털 표현에 중점을 두고 있습니다.

그러나 나 자신도 UX 디자이너로서 일반적으로 궁금했습니다. Apple, Google, Starbucks와 같은 영향력 있는 제공업체의 디지털 패션 가이드에서 무엇을 찾을 수 있습니까?

느끼거나 말거나, 많은 공급자가 이 세부 정보를 공개적으로 얻을 수 있도록 합니다. 그들은 찾기가 쉽지 않습니다. 그래서 우연히 발견할 때마다 북마크에 추가합니다. 여기 내가 매우 중요하게 찾은 최고의 것들 중 일부가 있습니다.

브릴리언트 디지털 스타일 가이드의 예

1. 애플 iOS

Apple의 디자인 및 스타일 가이드는 완전한 기능을 갖춘 방법을 디자인하는 방법을 다루기 때문에 특히 흥미진진합니다. Apple OS X의 가장 최신 버전 중 하나인 Monterey는 이전 버전인 Yosemite보다 훨씬 간소화된 소비자 인터페이스를 제공합니다. Apple은 이 미묘하면서도 확연한 차이를 훌륭한 그래픽 비교를 통해 보여주고 계속해서 실행 중인 시스템 레이아웃의 모든 단일 측면을 뒷받침하는 근거에 대해 논의합니다. 디자이너의 마음을 들여다볼 수 있는 창을 제공합니다.

2. 구글: 머티리얼 레이아웃

구글은 스큐어모픽 디자인과 스타일(그라데이션, 텍스처, 마일드한 요소)과 플랫 스타일(단순, 컬러풀, 기하학적) 사이의 하이브리드로 존재하는 제품 구조로 식별되는 디자인 및 스타일 패션을 개척했습니다. 부정적인 요소를 피하면서도 각각의 모든 디자인과 스타일 디자인과 연결된 측면.

Google은 수십 년 동안 Product Style을 위해 노력해 왔기 때문에 이제 일상적인 기반에서 Google Calendar 앱과 상호작용하게 되었을 것입니다. 개인이 있으신가요? 이 디자인 및 스타일 매뉴얼은 Materials Design이 무엇이며 Google에서 이를 어떻게 활용하는지 정확히 설명합니다. 그리고 나는 그것이 내가 만난 가장 훌륭한 유형의 가이드 중 하나라고 말해야합니다.

3. 스타벅스

이것은 내가 본 가장 미니멀한 디자인 및 스타일 가이드 중 하나일 뿐이며, 수많은 실용적인 사실을 담고 있습니다. 그것은 코드에 상당한 강조점을 두고 있으며 당신은 그것이 빌더에 의해, 빌더를 위해 구성되었음을 설명할 수 있습니다. 브랜드 이름과 연결된 요소가 없기 때문에 웹 사이트 디자인 매뉴얼과 코드 라이브러리 사이를 오갑니다.

4. 아틀라시안

Atlassian이 모델로 삼는 상품 제품군은 거대합니다. 따라서 자연스럽게 그들은 거대한 패션 가이드를 갖게 됩니다. 기본 사항(예: 색상 팔레트 및 타이포그래피)에서 구성 요소(예: 표 및 도구 설명), 완전한 패턴 라이브러리에 이르기까지 이 가이드북에는 이 크기의 제품에서 기대할 수 있는 모든 것이 포함되어 있습니다.

아마도 무엇보다도 가장 좋은 것은 완전한 유형의 매뉴얼을 구동하는 근거가 레지던스 웹 페이지에서 믿을 수 없을 정도로 간단한 3가지 조건으로 요약된다는 것입니다.

5. 모질라

이 전자 디자인 튜토리얼은 주로 브랜딩 및 커뮤니케이션에 관한 것입니다. 그러나 최근 Mozilla가 "프라이버시 및 개방형 월드 와이드 웹" 전술을 얻으면서 디자인에서 이를 복제하는 방법을 보는 것은 놀라운 일입니다.

Mozilla의 홈페이지는 또한 시각 장애 또는 장애가 있는 남성과 여성이 UX/UI에 액세스할 수 있는 방법을 설명하는 환상적인 경력을 가지고 있습니다.

6. 버퍼

Buffer의 유형 지침은 모달을 통해 그리드에서 모두 단일 위치에 있을 가능성이 있는 작고 간결합니다. 당신의 전자 패션 튜토리얼이 모든 이상적인 요점을 전달한다면 화려할 필요가 없다는 것을 상기시켜주는 것은 즐거운 일입니다. 시작할 곳을 찾는 회사는 Buffer의 단순한 디자인 지침 요소에서 참고 사항을 고려하고 거기에서 자신의 것을 구성할 수 있습니다.

7. 옐프

인터넷 사이트 디자인 및 스타일 가이드북의 신뢰할 수 있는 인스턴스를 찾고 있다면 Yelp가 포함된 것을 얻었습니다. 완전할 뿐만 아니라 Atomic Design 절차를 요리책으로 설명하고 웹사이트 구성 요소를 요리에 기여하는 물질로 나눕니다.

이 세부 사항에는 모든 단일 조각에 대한 타이포그래피, 레이아웃, 종류, 컨테이너, 탐색 및 코드 조각이 있습니다. 그들은 거의 모든 요소가 무엇인지, 실제로 어디에 사용해야 하는지, 어떻게 실행해야 하는지 설명하는 훌륭한 작업을 수행합니다.

8. GOV.영국 제도

영국의 정부 솔루션 웹사이트는 일반적으로 우수한 품질의 UX의 주요 사례로 알려져 있습니다. 왜요? 너무 많은 양의 정보와 사실을 수용하는 복잡하지 않고 사용하기 쉬운 스타일과 디자인이 특징입니다.

확실히 깨끗하고 강력한 레이아웃을 구성할 수 있는 항목에 관심이 있다면(힌트: 일반적으로 단색 활용, 타이포그래피 및 간격으로 시작됨) GOV.UK의 유형 설명서를 한 번 살펴볼 가치가 있습니다. 인터넷 사이트와 상당히 유사하지만 매우 간단하지만 매우 계몽적입니다.

9. DeviantArt

새로운 DeviantArt 스타일 정보는 단순히 정보가 아니라 지식이기 때문에 독점적입니다. 이야기를 전하고 대담하고 전폭적인 시각 자료를 활용하여 사람을 DeviantArt 브랜드의 감정적 전문성에 몰입시킬 수 있습니다. 즉, 엄밀히 말하면 브랜딩 모델 가이드북이라 컬러, 타이포그래피 등의 제품에만 코팅이 되어 있습니다.

10. 디스쿠스

색상, 아이콘, 타이포그래피 및 로고 ... Disqus는 이 정보를 통해 더 짧고 달콤하게 유지합니다. 그러나 그것은 모두 꽤 쾌적하고 조직적인 방식으로 제공될 수 있습니다. 이 가이드북은 모든 기본 사항에 부합하므로 스타일 지침을 작성할 때 "시작할 장소"에 대한 환상적인 사례로 사용할 수 있습니다.

나만의 매뉴얼을 만드는 데 영향을 받은 경험이 있습니까?

이제 당신의 스위치가 될 수 있습니다. 기업에서 전자 형식의 튜토리얼을 활용하여 브랜드의 디자인 언어를 내부 디자이너, 조직, 마케팅 동료 및 고객에게 전달할 수 있습니다.

표준 기본 요소(음영, 타이포그래피, 로고, 이미지)로 시작하고 몇 가지 사용 권장 사항("해야 할 일과 하지 말아야 할 일")을 통합하고 필요한 경우 일부 순수 부분(모듈, 템플릿, 코드 조각)을 통합합니다. 다른 제공자의 예를 사용하여 최고로부터 배우십시오. 귀하의 인력은 곧 정기적인 패턴을 만들어낼 것입니다.