복잡한 결과를
읽기 쉬운 화면으로.
요약, 성향 분포, 요인별 위치에 크기와 여백의 차이를 주어 정보의 층위를 표현했습니다.
MOBILE UI DESIGN PROPOSAL
knowtty
OVERVIEW
나를 알고,
함께할 사람을
알아보는 방법.
확정된 와이어프레임을 바탕으로 knowtty의 UI 디자인을 제안합니다. 개인의 성향과 관계 정보가 쉽고 친근하게 보이도록 타이포그래피, 색상, 카드와 아이콘의 표현을 정리했습니다.
내 Life, 공유받은 프로필, 모임 결과, 모임 정보의 네 화면에 일관된 시각 언어를 적용했습니다.
UI DESIGN DIRECTION
확정된 구조에
knowtty의 화면 언어를 입혔습니다.
정보를 담는 카드, 대상을 구분하는 시각 단서, 화면 전반에 반복되는 색과 형태를 하나의 디자인으로 정리했습니다.
읽기 쉬운 정보 표현분명한 화면별 표정일관된 비교 화면
복잡한 결과를
나, 상대, 모임을
각기 다른 표정으로.
프로필 이미지와 카드 스타일, 제목의 대비로 화면마다 보여주는 대상을 구분했습니다.
모임과 개인을
하나의 시각 언어로.
모임 성향과 멤버별 정보를 같은 컬러와 도형 체계 안에 담아 화면의 연결감을 높였습니다.
PROFILE EXPERIENCEA PROFILE, READY TO SHARE.
PersonalityLife
RelationshipProfileTogether
프로필과 관계를 표현하는 knowtty의 시각 요소.
PROFILE INTRO
BASIC SYMBOL
knowtty
knowttyUI DESIGN / PERSONAL SCREENS
개인의 성향을
가볍고 선명하게 보여줍니다.
내 Life와 공유받은 프로필에 공통된 카드와 색상 규칙을 적용하고, 각 화면의 성격에 맞춰 강조점을 달리했습니다.
01 / MY LIFE나의 성향을 보여주는
나의 성향을 보여주는
개인 결과 화면.
프로필 카드로 화면을 시작하고, 요약·성향 분포·요인별 위치를 서로 다른 크기와 밀도로 표현했습니다. 파란색 강조와 넉넉한 여백으로 핵심 정보에 시선을 모았습니다.
02 / SHARED PROFILE상대의 첫인상을 담은
상대의 첫인상을 담은
공유 프로필 화면.
프로필 이미지와 대표 문장을 크게 보여주고, 성향 키워드는 작은 컬러 카드로 정리했습니다. 상대를 소개하는 화면답게 정보량을 줄이고 인물에 집중했습니다.
PROFILE SUMMARY대표 해석과 키워드로
대표 해석과 키워드로
프로필의 첫인상을 전합니다.
컬러 카드는 성향별 정보를 가볍게 구분하는 시각 장치입니다.
UI DESIGN / GROUP SCREENS
모임의 분위기를
한눈에 볼 수 있도록.
모임 결과와 멤버 정보에 공통된 그래픽 요소를 사용했습니다.
개인 화면보다 많은 정보를 담되, 카드 단위로 나누어 읽기 쉽게 표현했습니다.
03 / GROUP RESULT여러 사람의 성향을
여러 사람의 성향을
하나의 화면에 담았습니다.
모임의 강점과 조율할 점은 간결한 문장 카드로, 성향 분포와 구성원별 위치는 그래픽으로 표현했습니다. 반복되는 파란색과 둥근 형태로 복잡한 결과를 하나의 화면처럼 묶었습니다.
04 / GROUP MEMBERS멤버의 얼굴과 정보를
멤버의 얼굴과 정보를
명료한 목록으로.
프로필 사진, 이름, 비교 정보를 같은 규칙으로 정렬했습니다. 카드 사이의 간격과 구분선을 조절해 여러 멤버를 살펴볼 때도 화면이 복잡해 보이지 않도록 했습니다.
모임과 멤버를 같은 디자인으로 표현했습니다.
비교 정보는 파란색으로 강조했습니다.
VISUAL IDENTITY
두 원의 조합을
앱 아이콘으로 확장했습니다.
채운 원과 윤곽 원을 겹친 심벌을 흰색 앱 아이콘에 적용했습니다.
아이폰 홈 화면 목업으로 실제 사용 환경에서의 형태도 함께 제안합니다.
knowtty의 심벌
ICON FAMILY
ICON TYPE
강조가 필요한 곳에는 입체형을, 작은 화면 요소에는 플랫형을 제안합니다.
3D / REPRESENTATIVE
FLAT / FUNCTIONAL
COLOR & TYPOGRAPHY
선명한 블루와
담백한 타이포그래피.
Brand Blue#2563EB
Soft Blue#E8F3FF
Ink#191F28
나를 알아가는 첫 화면
함께할 사람의 성향
나의 성향 분포
결과의 핵심을 짧고 편안한 문장으로 전합니다.
결과를 이해하는 데 필요한 보조 정보