클론디자인5 클론디자인_ 마켓컬리 (학습일지 7주차) 마켓컬리 모작디자인 이미지와 똑같이 디자인하기 + 각 UI가 필요한 이유 10가지 이상 작성 마켓컬리의 메인, 상세, 마이 페이지, 공지사항 등 9페이지 클론 디자인! 제공해 준 이미지의 크기들이 제각각이어서 직접 캡처해서 진행했다. 각 페이지마다 UI가 필요한 이유들을 위해 빨간색으로 따로 표시하여 작성하였고, 이번에는 오른쪽 끝에 있는 아이콘들을 따로 만들어 두었다. 반복되는 모듈들을 계속해서 만들다 보니 쉽게 변경하기 편한 방법들을 조금씩 잘 습득해가고 있는 것 같다 :) 2024. 1. 21. 클론디자인_ 당근마켓 (학습일지 5주차) 5주차. 당근 마켓 모작디자인 이미지와 똑같이 디자인하기 + 각 UI가 필요한 이유 10가지 이상 작성 이번주는 당근 마켓의 메인, FAB, 상세, 대화창, 동네생활 페이지 등을 클론 디자인해보는 것이다. 10가지의 페이지를 해야하는데 사진 사이즈가 다 달라서 UI들도 사이즈가 다 달랐다. 어떻게 해야할지 고민.. 사진 사이즈를 똑같이 맞춘다해도 컴포넌트 요소들의 크기는 다 달라서 의미가 없길래 주어진대로 진행해보았다. 하나하나 최대한 다 맞춰서 해보려니 만만치 않게 시간이 걸렸다..! :) 2024. 1. 6. UI분석 및 클론디자인_ 상품상세 페이지 (학습일지 4주차) 4-3 커머스 상세페이지 UI분석 및 클론 디자인 1) 각 커머스별로 뜯어서 공통화면 그룹핑하기 2) 가장 매력적인 상세화면을 클론디자인 3) 해당 클론디자인에서 다른 커머스와의 공통부분 마킹하기 4) 매력적이라고 생각한 이유 짧게 서술하기 상품상세 페이지는 상품 설명이 들어가기 전까지 포함시켰다. 이미지, 상품정보, 가격, 후기 등 공통적으로 포함하고 있는 부분을 알아보았고, 브랜드마다의 색이 담긴 부분도 확인해 볼 수 있었다. 후기나 같이 보면 좋을 상품도 있었지만 없는 곳도 더러 있어서 공통적인 정말 필요로 담고 있는 부분으로 그룹핑해보았다. 대부분 비슷한 레이아웃을 가지고 있는 것이 보였고, 어떤 부분에 공통적으로 포인트를 주고 있는지 알 수 있었다. w컨셉의 상품상세 페이지로 클론디자인을 해보았.. 2023. 12. 31. UI분석 및 클론디자인_ 카테고리 페이지 (학습일지 4주차) 4-2 커머스 카테고리 페이지 UI 분석 및 클론 디자인 1) 각 커머스별로 뜯어서 공통화면 그룹핑하기 2) 가장 매력적인 카테고리 화면을 클론디자인 3) 해당 클론디자인에서 다른 커머스와의 공통부분 마킹하기 4) 매력적이라고 생각한 이유 짧게 서술하기 사용하고 있던 커머스가 한정적이어서 이번에 클론 디자인을 하면서 여러 커머스 앱들을 다운받아 살펴보았다. 컴포넌트 별로 모아보니 이런부분은 비슷하게 디자인하고 또 저런 부분은 브랜드만의 개성을 담아서 하는구나가 눈에 더 잘 보이는 것 같다. 클론 디자인하는 건 항상 참 오래 걸리지만 하나하나 꼼꼼하게 맞추고 비슷한 화면을 만들어가는 모습을 보면 뿌듯하기도 하다. 클론디자인이란? 클론 디자인이란 프로그래밍에서의 클론코딩과 비슷한 개념으로, 실제 존재하는 앱.. 2023. 12. 30. UI분석 및 클론디자인_ 회원가입 페이지 (학습일지 4주차) 클론디자인이란?? 클론 디자인이란 프로그래밍에서의 클론코딩과 비슷한 개념으로, 실제 존재하는 앱/웹 페이지를 동일하게 따라 만들어 보는 작업을 의미한다. 기존의 잘 만들어진 앱을 가이드 삼아 모방해서 만들어 보는 UX/UI 디자인 학습법으로 좋은 레이아웃과 구성을 자연스럽게 익히고 나아가 나의 디자인 실력 향상에도 도움을 준다고 한다. 4-1 회원가입 페이지 UI분석 및 클론 디자인 1) 가장 많이 사용하는 앱의 회원가입 페이지 수집하기 (10개 이상) 2) 그중 5개의 앱을 분석하여 각 영역 간의 간격과 크기 분석하기 (5개의 앱) 3) 그중 1개의 앱을 클론디자인 현재 사용하고 있는 앱들은 회원가입이 된 것들이 많기도 하고, 요즘에는 네이버나 카카오톡 등으로 간편 회원가입하는 방법이 많아서 정말 많은.. 2023. 12. 29. 이전 1 다음
