UI 역량 강화를 위한 비주얼 디자인 특강 2 _ 김소윤 튜터님
프로덕트 아이덴티티: 디자인컨셉 구축법
새로운 컨셉 만드는 방법, 스타일가이드 전까지
색깔만 봐도 제품을 생각나게, 각인시키려면
일관적인 톤앤매너(가스라이팅🤣)로 소통해야 함
- 프로토타입 : 아이디어를 냈을 때 구체화하는 활동
- MVP : 프로토타입을 고도화해서 출시할 수 있을 정도로, 초기 출시 단계
- 프로덕트 : 많이 고도화 되면 완전한 제품이 됨
제품의 아이텐티티 만들때
- 브랜드 디자이너 : 로고, 타이포, 비주얼, 브랜드 성격과 가치를 나타내는,
어떻게 활용할지 브랜드 가이드라인 개발
- 프로덕트 디자이너 : 어떤 사용자의 니즈, 불편함을 해소, 가치를 제공하려는지
초기 컨셉을 설계하고, 제품 내에서 일관적인 UI로 소통하기 위해
스타일 가이드를 만듬, 좀 더 시스템화 한 것은 디자인 시스템
룩앤필, 톤앤매너
왜 이렇게 디자인 했는지 논리구조에 익숙해지기 위해, 설명하기 위한 과제임
1. 브랜드 보이스 설정하기
새로운 제품의 컨셉, 브랜드 보이스 = 브랜드 성격
어떤 톤앤매너로 다가갈지 키워드로 선정
- 애플 : 심플함, 혁신,
브랜드 보이스가 잘되었으면 사람들에게 연상되는 느낌이 비슷함
사람마다 다르게 이중적인 느낌이라면 브랜드 보이스가 명확하지 않은 것
- Asana : 업무 매니지먼트 툴
" 효율적, 직관적, 명확한 "
메세지 전달도 심플하고 명확하게
- Slack : 커뮤니케이션 툴
" 장인정신, 재미있고 유쾌한, 활기찬 "
기존의 딱딱한 메신저들과 다르게 재미있는 밈과 이모지로 의사소통
브랜드 보이스 키워드 고려사항
- 타겟 사용자에게 적합한지?
엔터테인먼트 vs 파이낸셜 > 도메인 특성을 고려
2030대 지그재그 vs 4050대 퀸잇 > 타겟 사용자를 고려
코카콜라 제로(블랙) -> 다른 브랜드 음료의 제로도 블랙 사용
- 시장 경쟁력이 있는 보이스는 무엇인가?
메가,컴포즈,빽다방 > 노란색, 저가 브랜드 이미지
다른 브랜드와 다른 유니크한 점은 무엇인지
차이점을 무엇으로 표현할 것인지
- 지속가능한가?
그 당시 유행만 선택하면, 시간이 지났을 때 촌스러울 수도 있음
시장은 계속 변화하는데 계속 지속 가능한가
브랜드 보이스 매트릭스
닐슨노먼그룹 기본 속성 4가지에 따라 포지셔닝 먼저
격식있는-캐주얼, 진지한-재미있는, 공손한-장난스러운, 사무적-열정적
상반되는 키워드를 가지고 어느정도 위치에 있는지
2. 톤앤매너 무드보드 만들기
키워드를 만든 후, 그 컨셉을 시각적으로 구체화하기 위한 단계
단어를 중심으로 인스피레이션, 디자인 요소, 컬러, 텍스쳐 등
최대한 다양한 각도에서 비주얼 요소를 고려
형식에 얽이지 않고, 일관적인 디자인을 위한 아이디에이션으로 활용
3. UI 스타일 가이드 맛보기
디자인 시스템의 미니버전
컬러
- 브랜드 성격과 가치를 반영
- 어떤 도메인들이 어떤 컬러 사용하는지 유추
- 왜 이 컬러를 골랐는지 이유를 생각해보면서 논리 만들기
- 프라이머리 컬러(메인,주요색) - 세컨더리 컬러(메인을 보조하는) - 그레이스케일(11단계)
- *세컨더리 : 보색, 대비를 이루는 컬러, 같은 색상인데 채도가 낮은 컬러 사용
- 시각적 위계와 대비를 잘 활용
타이포
- 브랜드 보이스에 적절한 폰트
- 세리프 :장식적인 선, 전통적, 문학적, 패션 매거진
- 산세리프 : 장식없이 깔끔한 상태, 캐주얼, 모던한 이미지
- 시스템 폰트로 쓰기에 적합한 폰트 선택, 다양한 케이스에서 사용 가능한
- 가독성 : 다양한 모니터 사이즈, 해상도에서 사용
- 범용성 : 여러 플랫폼에서 사용 가능
- 접근성 : 가격이 비싼 것 어려움, 언어호환, 프로그램 접근성 고려
아이콘
- 선, 면, 3D으로 표현
- 한가지 색생/여러 색상으로 표현
- 일관된 Radius 값(딱딱함/캐주얼)
- view point (탑뷰, 아이소메트릭뷰)
- 질감표현(그라디언트, 글라스)
무엇이 유니크하고 일관된 톤앤매너를 만드는지
다양한 언어를 비주얼로 트랜지션 연습
ex. 캐주얼함-비주얼로 어떻게?
+
기존에 많은 브랜드가 한 것을 따라가지 않도록
경쟁력 있는, 플러스 알파가 되는 것을 찾아낼 것
기존 경쟁사도 먼저 조사해서 알고 있는건 좋음
'내일배움캠프 > 본캠프' 카테고리의 다른 글
[내일배움캠프_UX/UI] 3주차 금요일 WIL (1) | 2024.06.14 |
---|---|
[내일배움캠프_UX/UI] 3주차 목요일 TIL (1) | 2024.06.13 |
[내일배움캠프_UX/UI] 3주차 수요일 TIL (1) | 2024.06.12 |
[내일배움캠프_UX/UI] 3주차 화요일 TIL (1) | 2024.06.11 |
[내일배움캠프_UX/UI] 3주차 월요일 TIL (0) | 2024.06.10 |