디자인 기록

1. 웹 서비스 선정 ▶ 밀리의 서재 홈화면 : 홈 화면의 컨텐츠 양이 많지만 복잡하게 나열되어 있어 이용에 불편함이 있었음. 이에 밀리의 선재 앱을 선정하여 홈 화면 개선을 해보기로 함. 2. 작업물 소개 밀리의 서재 홈화면 클론 디자인을 아래와 사진과 같이 작업함. 이 외에도 긴 양의 컨텐츠가 더 있지만 수정하고 싶은 컨텐츠 중심으로만 작업함. 3. 유저 플로우 4. 디자인 개선 수정 전 → 홈 화면의 내가 설정한 즐겨찾기 메뉴를 누르면 새창으로 이동된다. 수정 후 → 즐겨찾기를 바로가기로 수정하고 내가 설정한 바로가기 컨텐츠들이 홈 화면에 반영될 수 있도록 함. 또바로가기 아이콘을 클릭 하면 해당 컨텐츠로 스크롤 이동 될 수 있도록 함. 수정 전 → 처음보이는 홈화면이 큰 광고이미지와 즐겨찾기로 이..

1. 웹 서비스 선정 : 밀리의 서재 ▶ 선정 이유 종종 사용했던 앱서비스로 개선점이 보여서 선정하게 되었다. ▶ 서비스 소개 월정액으로 도서를 대여해 읽을 수 있는 전자책 서비스이다. 2023년 11월 기준 제휴 출판사 2000곳 총 16만 권 정도의 책을 보유하고 있다. 2. UI/UX 디자인 분석 ▶ 회원가입 제공 시점 - 어플 실행 시 ▶ 회원가입 프로세스 - 첫 달 무료로 시작하기 클릭 → 휴대폰 번호 기재 → 통신사선택 → 생년월일 입력 → 이름입력 → 서비스 이용 약관 동의 → 비밀번호설정 → 정기구독 종류선택 → 결제 정보 입력 → 앱 실행 안내창 → 홈 화면 ▶ 화면별 구성 → 밀리의 서재 첫 실행시 화면 → 휴대폰 기입 → 통신사 선택 창이 자동생성 → 생년월일 입력 창, 이름 입력 창..

1. 오늘 공부 아티클 : UX UI 레벨테스트 정리 UX UI 레벨테스트 정리 유저 경험을 고려한 UI/UX 기준점들을 정리해보자 velog.io - 왼쪽 맞춤된 글이 오래 읽기에 피로도가 적다. - 모든 글씨를 크고 두껍게 한다고 전부 잘 보이지 않는다. 중요 정보와 나머지에 뚜렷한 차이를 만들어라. - 줄간격을 150% 이상으로 두어라. 적어도 단어 사이 보다 글줄 사이가 더 넓어야 한다. - 상호작용을 나타내는 색상은 버튼과 링크에만 써라. 불필요한데 쓰지 말것 - 옵션이 적을 때는 라디오 버튼을 사용해라 : 사용자가 모든 옵션을 명확하게 파악할 수 있고 보다 빠르게 입력할 수 있다. - 플레이스 홀더를 레이블 대신 사용하지 말 것 (플레이스 홀더는 사라짐) - 라디오버튼은 가장 자주 선택되는 항..

▶ Facts - 2주차 강의 복습 : 오토레이아웃, 마스터와 인스턴트, 컴포넌트 베리언츠 - 3주차 강의 수강 : 유저플로우, 프로토타입 - 4주차 강의 수강 : 플러그인 활용방법, 포트폴리오 발표기능, 단축키 기능 - 선정한 웹서비스의 홈화면 UI 분석 후 수정 작업 ▶ Feelings 3주차 강의를 수강하다가 헷갈려서 2주차 강의를 복습하는 시간을 가졌다. 보는 것과 실제로 과제를 하면서 적용하는 것은 달랐다. ▶ Findings 과제를 하면서 반복 연습하는 것이 매우 중요하다. 기능을 능숙하게 다룰 수 있어야 과제를 진행하는데 차질이 없을 것 같다. ▶ futre 배웠던 피그마 대표 기능들을 복습하며 과제에 적용해보기

1. 피그마 플러그인 활용하기 - Moukup : 필요한 목업을 꺼내서 바로 적용가능 - Unsplah : 필요한 사진 적용가능 - Material Symbols : 필요한 아이콘 적용 - Product Planner : 필요한 양식 활용 가능 - Charts : 차트 활용 - Color Palettes : 최적 컬러 매칭 위한 팔레트 기능 2. 원하는 이미지 목업이미지로 보여지게 하는 법 - Prototype에 Device를 내가 원하는 디바이스(ex ipone 13, iPad mini8.3) 선택하여 재생하면 된다. 3. 저장 방법 - File → export to frame 하면 하나로 묶인 PDF로 내보내기 가능. (내가 내보낼 이미지만 새로운 Pasges에 추가하여 내보내기) - share → ..

1. 웹 서비스 선정 1) 선정 이유 : 자주 이용하는 자연드림 홈페이지이며 개선 사항이 필요해보여 선정하게 되었다. 2) 서비스 소개 : 협동조합사업체, 친환경 유기농산물 직거래 사이트 2. 작업물 소개 3. 유저 플로우 어떤 부분을 유저플로우로 만들어야 하는지 헷갈린다.? 임의로 만들어봤는데 아직 사용법에 대해 좀 더 공부해야할 듯하다. 4. 디자인 개선 1) 상단 부분 변경 장보기 화면으로 들어가는 버튼이 찾기가 어려워 혼란이 있었음. 이에 장보기 버튼에 색을 주고 과도한 중복 방지를 위해 장바구니모양과 마이아이쿱 버튼을 삭제 후 글자 크기를 키워 눈에 더 잘 들어오도록 함. Link 표시는 한살림 조합 홈페이지 들임으로 사용자들이 더 잘 이해할 수 있도록 한글로 변경함. ↓ 2) GNB 수정 메뉴..

모바일 폰트 크기 어떻게 정할까? 기억하고 있으면 좋을 폰트 크기 원칙 | Mobile first design이 당연하게 된 요즘, 할 때마다 새롭고 신경쓰이는 부분이 바로 모바일 폰트 크기 설정이다. 지금은 여러번의 경험으로 본문은 16pt, 푸터 brunch.co.kr * 모바일 폰트 크기는~ 본문은 16pt ~ 18pt (IOS는 17pt 권장함) 캡션은 10pt ~ 12pt 타이틀 18pt~32pt 이며 10pt 이하 폰트 크기 사용하지 않는 것이 좋음. - 이것은 권장 사항 이다. 글자에 따라서 16pt가 큰 느낌이 들어서 본문에서 14pt도 많이 사용함. - 문자는 가독성이 매우 중요. 크기 하나로 서비스의 느낌을 좌지우지 한다. :-) 느낀점 : 폰트 크기를 어떻게 써야할지 궁금했는데 이번 ..

1. 웹 서비스 선정 1) 선정 이유 : 자주 이용하는 자연드림 홈페이지이며 개선 사항이 필요해보여 선정하게 되었다. 2) 서비스 소개 : 협동조합사업체, 친환경 유기농산물 직거래 사이트 2. 디자인 분석 1) 화면 구성 ▶ Header : 최상단 부분 영역 최상단 부분에 iN, 자연드림, 라이프케어 메뉴로 나누어져 있다. 그 밑에는 항암죽 구매하기, 장보기, 라이프케어 활동 참가, 마이아이쿱, Link, 장바구니로 나누어져 있다. ▶ GNB (Global Navigation Bar) : 상단 카테고리 메인바, 모든 페이지의 메뉴구성 → 최상단 영역에 많은 메뉴들이 있어 사용자가 어디로 들어가야 하는지 혼란을 줄 수 있어 보인다. 실제로 장보기 글을 찾는데 시간이 꽤 소요되었다. → 중복되는 메뉴가 많다..