hohyeon99 님의 블로그

이번 과제는 디자인 핵심 원리가 잘 적용된 사례를 찾아보는 것이다찾아야 할 사례는 직관적인 디자인, 일관된 디자인, 기독성을 고려한 디자인 총 3가지 사레를 찾아야 하며 조건은 다음과 같다, 직관적인 디자인아래 요소 중 2가지를 골라 실제 사례 찾기사용자 행동 유도정보를 시각적으로 표현대비 높은 색상 조합간단한 레이아웃일관된 디자인아래 요소 중 2가지를 골라 실제 사례를 찾기다양한 디바이스 간의 일관성쉬운 사용성디자인 시스템가독성을 고려한 디자인 아래 요소 중 2가지를 골라 실제 사례를 찾기여백 활용콘텐츠 그룹화크기와 비율계층 구조우선 직관적인 디자인 사례는 쿠팡의 제품정보 화면이다 해당 화면에선 한달동안 이 제품을 몇명이 샀는지 알려주는 정보를 시각적으로 전달해주며 쿠팡의 WOW멤버쉽을 사용하도록 권장..

사은품 증정, 어느 방식이 더 눈에 잘 들어오시나요? 이유는 무엇인가요? | 디자이너스 사은품 증정, 어느 방식이 더 눈에 잘 들어오시나요? 이유는 무엇인가요? | 디자이너스사은품 증정, 어느 방식이 더 눈에 잘 들어오시나요? 이유는 무엇인가요?designus.io  오늘의 디자인카타는 두 사은품 증정 화면 중 어떤 것이 더 눈에 뜨는지 논의 하는 시간이다A는 상품 제목에 사은품 증정인 [1+1 증정] 문구를 추가하였고 B는 사진화면에 증정 사은품과 그에 관련된 아이콘(+와 증정)를 배치하였다. 나는 두 디자인을 보면서 B가 더 눈에 띈다고 생각하는데 이유는 다음과 같다.우선 아이콘이 택스트로 적는것 보다 더 눈에 띈다. A의 경우 색의 대비나 폰트 등 강조하는 요소가 적어 상대적으로 눈에 띄지 않는다 ..

사용자 중심 디자인(User-Centered Design, UCD)제품이나 서비스를 설계할 때 사용자를 공감하여 사용자의 문제를 이해하고, 이를 해결하기 위한 개선안을 제공함으로써 사용자에게 만족스러운 경험을 제공하는 접근 방식  직관적인 디자인 사용자의 행동 유도  버튼사용자 행동을 유도할 수 있는 중요한 인터페이스 요소, 배경색 혹은 콘텐츠와 대비되는 컬러를 사용하여 버튼을 강조함흐름에 맞게 필요한 위치에 배치하여 쉽게 사용할 수 있어야 함링크 일반적으로 웹에서는 파란색으로 표현함링크된 텍스트에 밑줄을 넣어 클릭이 가능함을 전달 시각적으로 표현 픽토그렘사용자가 정보를 더 쉽고 빠르게 이해하기 위해 시각적으로 디자인할 수 있음텍스트로 되어있는 정보를 픽토그램이나 아이콘을 활용하여 사용자의 이해를 돕고 ..

오늘의 과제는 총 3개 이다  과제 1어코디언 제작 과제 2당근 앱 홈 화면에 있는 글쓰기 버튼의 인터랙션을 프로토타입으로 제작 과제 3네이버 지도 앱의 바텀시트 드래그를 프로토타입으로 제작  과제의 핵심은 프로토 타입을 어떻게 설정하는가 이다 나는 각 과제의 프로토 타입 설정을 다음과 같이 했다.  과제 1 아이콘 버튼에 넘어갈 화면에 interaction trigger on click 설정, action navigate to, animation을 smart animation으로 설정    과제 2프로토 타입에서 글쓰기 버튼을 다이얼로그와 연결 후 trigger를 on click, action을 overlay로 설정하고 그overlay를 당근 화면에 설정하고 포지션을 manual로 설정하여 알맞은 위치..

오늘의 과제는 아래의 네이버 지도 앱을 클론 해 볼 것이다. 전부다 하는 것이 아닌 바텀시트를 카피 해 볼 것이다.홈 화면 기본 1장, 드래그했을 때 올라오는 바텀 시트가 담긴 홈 화면 프레임 1장 등 총 2장의 디자인이 필요하다 아래는 내가 카피한  화면이다.만들게 되면서 아직 부족한 부분을 알 수 있는 시간이었다

앱 사용법에 대한 온보딩 화면, 어떤 화면을 더 유심히 보게되나요? | 디자이너스 앱 사용법에 대한 온보딩 화면, 어떤 화면을 더 유심히 보게되나요? | 디자이너스앱 사용법에 대한 온보딩 화면, 어떤 화면을 더 유심히 보게되나요?designus.io오늘의 디자인카타는 앱사용에 대한 온보딩 하면 중, 어떤 화면을 더 유심히 보게 되는지 토론하는 시간이다왼쪽은 일러스트와 텍스트가 함께한 온보딩이며 오른쪽은 앱 ui미리보기와 텍스트가 결합된 요소이다.나는 앱 ui 미리보기 를 고르게 되었다. ui앱을 미리보기함으로서 내가 사용하는 앱의 구성이 어떻게 되는지 유추해볼 수 있기때문이다. 이번 디자이너스 유저반응은 의외로 온보딩 존재의 필요성에 대해 논의하고 있었다 현직에 종사한다는 유저분의 말씀으론 온보딩은 실제..

오늘은 어제 만든 UI킷을 통해 프로토 타입을 제작해 볼 것이다. 프로토타입에 주어진 시나리오에 맞게 제작해야 하여 우선 프로토타입 시나리오 구성을 살펴 보겠다  먼저 홈화면을 시작으로 홈화면안에 있는 유제품 카테고리를 골라 유제품 목록 화면으로 넘어가서 스파르타 우유 상품을 선택하면 해당 제품의 상세설명화면으로 넘어가야 한다 이 때 수량을 2개 고를 수 있도록 설정하고 장바구니에 담아장바구니에 바로가기 다이얼로그가 생성되고 장바구니 바로가기 선택을 하면 종료가 되도록 설정하는 것이다.글로 설명하면 어려워 이렇게 시나리오를 작성하고 프로토타입을 제작해야 제작자가 혼동없이 화면을 제작할 수 있다. 우선 가장 먼저 나오는 홈화면을 만들어 볼 것이다. 내가 만든 홈 화면은 다음과 같다 상단 앱바와 메인 배너 ..

회원가입 생년월일 입력, 키보드와 피커 중 이탈률이 더 낮은 방식은 무엇일까요? | 디자이너스 회원가입 생년월일 입력, 키보드와 피커 중 이탈률이 더 낮은 방식은 무엇일까요? | 디자이너스회원가입 생년월일 입력, 키보드와 피커 중 이탈률이 더 낮은 방식은 무엇일까요?designus.io 오늘의 디자인 카타는 회원가입 절차의 생년월일입력란 중 키보드와 피커 형식 중에 뭐가 유저 이탈률이 적을지 알아보는 시간이다. 해당 주제에 대한 내의견을 설명하겠다. A가 더 낮다고 생각한다. B의 경우 나이대가 있는 유저의 경우 피켜입력에 불편함을 겪을 수 있기 때문에 A가 더 낮다고 생각한다.A같은 경우 앱마다 생년월일을 적는 방식이 달라 예시를 알려주는 가이드 텍스트를 넣어 사용자가 확실하게 기입할 수 있도록 하면 ..

오늘은 CH 3 개인과제인 앱 UI 키트 및 프로토타입 제작를 하게 되었다.시나리오에 따른 화면 디자인이 있어야 하고, 각 화면들은 프로토타입으로 연결되어 있어야 하는게 이번 과제의 핵심이다.우선 프로토 타입을 제작하기 전 ui키트를 먼저 제작하게 되었다. 개별적인 ui를 만들고 나서 화면을 만드는 것이 편하기 때문이다. 아래는 내가 만든 화면들이다.이전에 배운 강의내용을 통해 ui kit를 제작해 봤다. 화면을 생성하면서 더 제작해야 할 부분들이 존제하지만 일단 만들 수 있는 부분 부터 만들고 더 필요한 컴포넌트는 추가로 제작하기로 했다.다음은 이 ui들을 가지고 앱화면을 만들어 보겠다.

회원가입 완료 화면 형태 A와 B는 각각 어떤 의도가 있을까요? | 디자이너스 회원가입 완료 화면 형태 A와 B는 각각 어떤 의도가 있을까요? | 디자이너스회원가입 완료 화면 형태 A와 B는 각각 어떤 의도가 있을까요?designus.io 오늘의 디자인 카타는 각 회원가입 완료 화면 형태의 의도를 파악해 보는 것이다. 각 디자인에 대한 내 견해는 아래와 같다. A 다이얼로그다이얼로그같은 경우 회원가입 완료라는 안내를 강조하기 위한 디자인으로 보이며 다이얼로그를 닫음으로써 자유롭게 앱을 사용할 수 있다는 암시를 해주고 있다.아이콘을 통해 해당 과정이 정상적으로 끝났다는 것을 알 수 있게 하며 텍스트의 사이즈를 달리하여 시각적 위계를 활용하여 디자인 원리를 여러가지로 적용한 사례 같다.하나의 절차가 끝날 때..