🔖 2021년 5월 2주 TOP3

🔖 2021년 5월 2주 TOP3

브랜드 북 & 가이드라인 

훌륭한 아이덴티티를 만들고 브랜드 이미지를 개선하는 방법

이들의 사업은 언젠가 완전히 사라지지 않는다면 작은 규모로 유지될 가능성이 매우 높습니다. 이 기업가는 브랜드 북이 무엇인지, 왜 유용한지 잘 모릅니다. 아마도 그들은 전략적 사고가 부족하거나 브랜드 북이 그들의 작은 회사가 한 단계 더 나아가는 데 도움이 될 것이라고 생각하지 않을 것입니다. 누군가는 브랜드 북은 대기업만 필요하다고도 말하죠.

왜 브랜드 북이 필요할까요?

브랜드 북은 기업의 주요 가치와 원칙, 그리고 브랜드 아이덴티티 가이드라인을 담은 문서입니다. 비즈니스를 개발하고 홍보하는 데 관심이 있는 사람들은 회사의 규모에 상관없이 브랜드 책이 필요합니다.

브랜드 북은 "브랜드 바이블"이라고 불리며 그 중요성을 말하고 있습니다. 여기에는 가치, 철학, 회사 포지셔닝 방법, 개발 전략에 대한 설명과 같은 브랜드에 대한 모든 중요한 정보들이 포함되어 있습니다. 이 정보들을 만드는 과정에서 정보를 구조화하고, 문제점 와 누락된 점을 식별하며, 여기서 가장 중요한 것은 브랜드와 브랜드 포지셔닝에 대한 전체적인 비전을 얻게 됩니다. 많은 기업가들이 브랜드 북을 작업할 때 문자 그대로 '눈을 뜨게 됩니다'. 그들은 새로운 아이디어에 사로잡히게 되어 사업 전망에 대한 비전을 찾습니다.

이런 멋진 발견은 여러분이 누군가에게 브랜드 책을 만들라고 지시하지만 직접 참여하지는 않는다면 일어나지 않을 것입니다. 최고의 해결책은 여러분과 연주자 사이의 좋은 피드백이 있

브랜드 북의 목표

브랜드 북은 회사 내에서만 필요하지 않습니다. 고객과 비즈니스 파트너는 물론 추가 작업을 위한 디자이너에게도 유용할 수 있습니다.

 브랜드 북의 메인 목표 :
• 브랜드 정보를 하나의 문서로 체계화합니다.
• 브랜드의 목표와 사명에 대해 직원들에게 알립니다.
• 마케팅 활동의 효율성을 증대시킵니다.
• 브랜드 이미지와 평판을 만드는 데 도움이 됩니다.
• 기업 아이덴티티 요소의 사용 프로세스를 표준화합니다.

전문적으로 제작된 아름다운 브랜드 북은 회사의 직원들이 브랜드와 철학에 너무 많이 관여하게끔 동기를 부여하여 브랜드의 사명이 개인적인 사명으로 변하게 만듭니다. 브랜드 가치를 시각적으로 구현하면 사람들이 브랜드 가치를 신뢰하게 됩니다.
.
.
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

UX/UI 디자인의 아토믹 디자인과 모듈식 애플리케이션 

1. ​​아토믹 디자인 및 모듈식 사고

아토믹 디자인의 개념은 디지털 화면을위한 간단한 모듈식 디자인 시스템 입니다. 단일 요소 (원자)를 사용하여 전체 화면(인터랙티브 화면)을 구성합니다.  
이 시스템은 화학에서 차용되었습니다.

모듈식 UI 단위 형태의 분자
왼쪽에서 우리는이 세 원자가 다양한 방식으로 배열 될 수 있음을 알 수 있습니다. 그러나 오른쪽의 UI 단위는이 배열이 사용자가 상호 작용이 의미하는 바를 이해하는 데 가장 적합한 기능적 디자인임을 보여줍니다.
 
분자에서 유기체로  
원자 (단일 요소)가 결합하여 분자 (UI 단위)를 형성 한 다음 유체 (인터페이스 패턴)로 진화합니다.

반복 패턴의 유기체  
하나의 UI 단위의 반복 패턴의 예입니다.  
이 유기체는 9개의 UI 단위로 구성된 반복 패턴으로 구성됩니다.  
사용자는 인터페이스 기능을 쉽게 이해할 수 있습니다 (숫자 터치).

패턴에서 템플릿까지   
독특한 구성 유기체가 이 화면 인터페이스의 템플릿을 형성합니다. 10자리 숫자 표시와 같은 특정 기준이 충족 될 때까지 사용자 경로 전체에서 일관성을 유지합니다. 그래서 우리는 UI 단위와 요소를 기반으로 명확한 유기체 구조의 인터랙티브 스크린을 만들었습니다.
.
. 
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

Google 머티리얼 디자인 가이드 라인의 10가지 핵심 사항

Google의 디자인 시스템 문서의 UI 및 UX 권장 사항입니다.
Google은 기술 분야에서 가장 크고 가장 영향력있는 업체 중 하나이므로. 그들의 디자인 시스템이 디지털 제품 디자인 방식에 엄청난 영향을 미치는 이유는 당연합니다.

머티리얼 디자인 가이드 라인은  모든 디자이너가 iOS 또는 Android 용으로 디자인하든 관계없이 따라야 할 가치있는 원칙을 설명합니다.

이 글에서는 머티리얼의 가이드 라인을 검토하면서 찾은 주요 내용을 공유하고
그 규칙과 방법을 가장 잘 실행하는 방법에 대해 설명하겠습니다.

머티리얼 가이드 라인에 나와있는 모범 사례를 검토하고 제품에 적용 할 때 모범 사례에 대한 저의 경험과 팁을 공유하겠습니다.

1. 제스처를 전달하기 위한 기호와 애니메이션

1-1 다른 조건이 없는 경우 아이콘은 제스처를 수행할 수 있음을 명확하게 나타냅니다.

The Design of Everyday Things에서 인간 중심 디자인의 아버지로 알려진 Don Norman은  일상 디자인에서 어떤 행동이 가능하고 어떻게 해야 하는지 나타내는 모든 것으로 기호를 정의합니다.

디지털 제품을 디자인 할 때 우리는 항상 기호를 명시 적으로 표현할 필요는 없으며  
"더 보기 위해 좌회전"과 같은 것들을 말할 필요가 없습니다.아이콘, 높은 용기 또는 색상과 같은 간단한 요소는  다양한 제스처와 동작을 지시하는 표시자 역할을 할 수 있습니다.

1-2 사용자가 제스처를 제안하기 위해 상호 작용하기 전에 요소에 애니메이션을 적용합니다.

미니멀리스트적 외모를 갖추려면  애니메이션을 사용하여 사용자가 수행할 수 있는 작업을 나타낼 수 있습니다. 빠른 애니메이션을 표시하여 요소와 상호 작용하는 방법을 보여줄 수 있습니다.  이 방법은 계산된 방식으로 사용해야 하지만  적절하게 사용하면 인터페이스를 크게 간소화하고 경험도 개선할 수 있습니다.

2. 애니메이션 아이콘

애니메이션은 아이콘이 수행하는 작업을 세련미와 즐거움을 더하는 방식으로 반영합니다.

2-1 전환은 두 가지 시각적 상태간에 애니메이션 아이콘을 연결합니다.
두 아이콘 사이의 전환은 서로 연결되어 있음을 나타냅니다.
아이콘 전환 추가는 두 작업 간의 관계를 나타냅니다.

예제 1) 재생 / 일시 중지 버튼 애니메이션입니다.

재생을 클릭하면 아이콘이 일시 중지 버튼으로 바뀌고 그 반대의 경우도 마찬가지입니다. 이 변경은 두 작업 간의 관계를 미묘하지만 직관적인 방식으로 나타냅니다.

예제 2) 장바구니에 담기 상호 작용이나 기능이 비활성화되어 있음을 표시하는 것과 같은 더 복잡한 경험에 미묘한 애니메이션을 어떻게 사용할 수 있는지 상상해보십시오.

아이콘 간에 애니메이션을 만드는 데 너무 많은 시간이 소요될 필요도 없습니다.
Adobe XD에서는 자동 애니메이트 및 페이드 아이콘의 불투명도를 안팎으로 사용하여 유사한 효과를 얻을 수 있습니다.

애니메이션 아이콘 전환은 선호하는 강조 수준에 따라 단순하거나 복잡한 모션을 사용할 수 있습니다. 눈에 띄지 않는 아이콘은 단순한 공유 모션을 사용합니다.

2-2 앱의 중요한 부분인 아이콘은 복잡한 모션으로 강조 할 수 있습니다.
요소와 아이콘이 지속적으로 애니메이션되는 경우 사용자를 압도 할 위험이 있습니다.
애니메이션 남용은 강조를 약화시키므로 복잡한 애니메이션을 조금 더 적게 사용해야 합니다.

3. 머티리얼 컬러 팔레트 생성기

머터리얼 팔레트 생성기는 입력한 모든 색상에 대한 팔레트를 생성하는 데 사용할 수 있습니다. 색조, 채도 및 밝기는 사용 가능하고 심미적으로 만족스러운 팔레트를 만드는 알고리즘에 의해 조정됩니다.

처음부터 색상 팔레트를 만드는 것은 Material 's Palette Generator (페이지 하단 근처에 위치)와 같은 도구를 사용하는 것보다 지루하고 값을 직접 계산해야하기 때문에 덜 효과적일 수 있습니다.

생성된 색상은 이미 접근성 표준을 충족하므로 WCAG 지침에 따라 팔레트를 확인해야하는 번거로움이 없습니다. 그래도 Stark와 같은 플러그인으로 디자인을 다시 확인해야 합니다.
.
.
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램