피그마 심화과정 4

[피그마 심화과정 챕터 4] 프로토타입 기능 활용

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

[피그마 심화과정 챕터 3] 네이버 지도 앱 클론 디자인

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

[피그마 심화과정 챕터 2] UXUI 역설계와 클론 디자인 실습

오늘은 피그마 심화과정 2주차 과제인  UXUI 역설계와 클론 디자인 실습을 진행해 볼 것이다.역설계는 솔드아웃 / 무신사 / 쿠팡 / 올리브영 / 아이디어스 / 오늘의집 / 마켓컬리 / 지그재그 / 크림 / 올웨이즈 / 에이블리 중 5가지를 골라 홈화면을 분석하고 각 화면의 공통점과 차이점을 서술하는 것이고 클론 디자인은 여기어때 / 당근 / 카카오페이 / 크림 / 캐치테이블 중 하나를 골라 클론 디자인해보고, 스타일가이드를 찾아 정리해보는 것이다  나는 솔드아웃 / 무신사 /  올리브영 /  크림  / 지그재그를 역설계하였고 크림을 클론디자인 하여 스카일 가드를 찾아봤다  해당 과제를 하면서 아직 화면을 세부적으로 분석하는 부분이 부족한점을 느끼게 되었고 클론 디자인을 통해 여러 컴포넌트 요소를 이용..

[피그마 심화과정 챕터 1] UI 차이점 찾아보기, 와이어프레임 그리기

오늘의 과제는 UI 차이점 찾아보기와 와이어프레임 그리기이다.UI 차이점 찾아보기는 내가 사용하는 서비스에서 UI 차이가 있는 것을 찾아 보는 과제이며 OS 별로 차이 웹과 앱를 최소 2개 이상의 앱에서 2곳 이상 찾는 것이다. 우선 앱에 대해 살펴보겠다. OS에 따른 App디자인 변화 위의 화면은 음식 배달/포장 어플인 요기요 홈이다 왼쪽은 안드로이드기종의 화면이며 오른쪽은 IOS기종 화면이다 얼핏 보면 큰 차이점이 없는 것 같지만 안드로이드기종 에 우측상단에 있는 알림 아이콘이 IOS기종에서는 보이지 않으며 빨간 섹션을 친 구간에는 카테고리 항목이 다르게 배치되어 있는것을 볼 수 있다두번째로 볼 화면 웹툰 플렛폼인 네이버웹툰의 my 화면이다. 왼쪽은 안드로이드기종의 화면이며 오른쪽은 IOS기종 화면이..