모바일 앱 UI 디자인 프로세스
"(스타일 타일은)무드보드와 와이어프레임 사이의 갭을 이어준다. 이는 초기 단계에 디자인 피드백을 받는 데에 매우 유용하다."
개인적으로는 7.스타일 타일 부분이 흥미로웠습니다. 무드보드까지는 많이 사용하지만, 클라이언트 측의 피드백 수렴을 위해 커뮤니케이션 보드를 하나 더 추가하는 것도 효율성 측면에서 큰 도움이 될 것 같습니다.
-REASIGN 운영진 공지
목차
1.미션
2.앱 컨셉
3.유저 페르소나
4.와이어 프레임
5.시각 언어
6.무드 보드
7.스타일 타일
8.UI & 프로토타입
9.스타일 가이드
10.반영
11.참고 문헌
본 글에서는 6번까지만 제공합니다. 뉴스레터를 구독하시면 '지난 아티클'목록에서 전문을 바로 확인하실 수 있습니다.
영어가 부담스러워 고급 정보들을 놓치는 디자이너들을 위해, 주 2회 최신 영어 아티클을 번역하여 보내주는 뉴스레터 >> http://bit.ly/2MKOeXF
1.미션
모바일 앱 UI 라이브러리를 제작하면서, 비주얼 디자인 스킬을 향상 시키고 그 과정을 배울 좋을 기회를 얻었다. 비주얼 스타일 혹은 테마로 알려져 있기도 한 UI 라이브러리는 유저에게 좋은 경험을 주기 위해, 특정 앱 혹은 웹사이트에 적용된 커스터마이징 그래픽 인터페이스 요소 패키지이다.
다음은 필자의 디자인 프로세스이다.:
앱 컨셉 -> 유저 페르소나 -> 와이어 프레임 -> 시각 언어 -> 무드보드 -> 스타일 타일 -> 프로토타입 -> 스타일 가이드
기억해야 할 것은 이 프로젝트는 UX 디자인을 포함하지 않은 UI/비주얼 디자인(예를 들면 유저 리서치, 경쟁사 리서치, 유저 여정 지도, 정보 설계 등등)에 초점을 맞췄다는 점이다.
2.앱 컨셉
문제 정의
내 앱의 문제점은 강의와 워크샵을 찾기 어려운 데에서 출발했다. 나 같이 새로운 것을 배우기를 원하는 사람들에게, 본인에게 적절한 강의를 찾는 일은 꽤나 고역이었다.
가치 제안
일반적으로, 가치 제안은 서술의 형태를 띠며 주로 제일 먼저 말하는 문장이 된다. 그것의 제 1 목적은 당신의 제안에서 고객이 얻을 수 있는 기대 효과에 대해 이야기하는 것이다.
비슷한 사례로는 엘리베이터 피치가 있다. 당신이 앱 컨셉을 기억하기 쉽게 만들고 싶을 때, 너무나도 흥미로워서 눈을 뗄 수 없고, 반복적인 문구를 사용해야 한다. 나는 Jamie Levy의 책 <UX Strategy> 의 가치 제안 양식을 따랐다.
BetterMe는 토론토에 있는 사람들이 간편하게 강의와 워크샵을 찾도록 도와주는 강의 리스트 업 어플리케이션이다.
3.유저 페르소나
4.와이어 프레임
유저의 목적과 행동을 이해한 후에, 공수를 덜 들인 와이어프레임을 만들기 위해 하단의 앱의 주요 특성(key feature) 리스트를 작성했다.
1.강의 리스트(인기순, 거리순, 개설순, 추천순 구분)
2.검색(카테고리, 유형, 가격 범위, 위치, 순위 등)
3.인스턴트 메시지(문의)
4.유저 프로필(게이미피케이션, 리스트를 학습하기 위해)
스케치
Mid-fi(중간 단계) 와이어 프레임5.시각 언어
다른 형태들로 이루어진 문장들은 하나로 모여 같은 메시지를 전달할 수 있는 언어로 가공되어야 한다. 시각 언어는 다른 언어와 똑같다. 시각 언어의 문장은 컬러, 여백, 형태 및 이동으로 묶일 수 있다.
나는 니즈를 파악하기 위해 몇몇 유저를 인터뷰하고 좀 더 정확하게 시각 언어를 정의하기 위해 앱의 무드들을 서치했다.
인터뷰 질문:
1.이 앱을 왜 사용하겠습니까?
2.이러한 니즈가 충족되기 위해서는 어떤 무드가 필요하겠습니까?
3.이러한 무드를 어떻게 시각 언어로 구현하겠습니까?(컬러, 여백, 형태 및 이동)
디자인 초안 워크 시트(Design Inception Worksheet)6.무드 보드
디자이너로서, 우리는 과정의 속도를 올리고 최적화하는 데에 초점을 맞춘다. Atomic Design에서 얻은 아이디어는 UX 디자이너, UI 디자이너, 그리고 프론트 엔드 개발자가 수직적이 아닌 수평적으로 일하기에 좋은 개념이다.
클라이언트에게 초기에 프레젠테이션 할 때, 무언가를 어떤 방식으로 시각 디자인해야 할까? 디자인 프로세스에서, 무드보드는 시각 전달자 중 하나다. 우리가 페이지의 실제 레이아웃에서 벗어나 디지털 제품을 통해 우리가 얻는 느낌을 기술하는 이미지, 텍스트, 오브젝트로 구성된 콜라주이다.
나는 다른 유저 그룹을 타겟팅한 느낌을 프레젠테이션하기 위해 두 가지 구분되는 무드보드를 만들었다. 첫 번째 것은 학습과 연구에 어울리는 조용하고, 깨끗하며 미니멀한 느낌이다. 두 번째 것은 좀 더 역동적이다. 열정과 긍정적인 무드를 전달하는 생기 넘치고, 빠른 속도감의 느낌을 지녔다.
무드 보드(좌-V1, 우-V2)그러나, 무드보드는 많은 사람들에게 지나치게 추상적이다. 왜냐하면 프로젝트에 무드보드가 명백하게 인지 가능한 시각 디자인 요소로써 어떻게 적용될지 알기 어렵기 때문이다.
저자 : Renee Lin
원문 링크: https://link.medium.com/zSCGnMaoiS
번역: REASIGN
문의: reasign.newsletter@gmail.com
*무단 전재 및 재배포 금지(링크 공유는 가능)
