[📝TIL 05_3]UI 개인과제 피드백과 UX 기획 리서치

| 2024년 11월 20일 수요일 TO DO |

✔️ 디자인 카타 : UI 컴포넌트 [입력 필드]

✔️ UX 기획 및 리서치 2주차 강의

✔️ 2차 튜터님과 면담 진행하기 *11:00, UI 개인과제를 토대로 면담

✔️ 산책 + 아티클

2차 튜터님과 면담

✨ 지난번에 받았던 피드백과 추가 내용 정리

01_여백

- 좌우여백 통일해주기

- 콘텐츠 유사성을 기준으로 간격 정리해주기 : 시각적으로 카테고리들이 같은 콘텐츠로 묶여보이게 조정

Q. 뭉쳐보이지 않고 답답하게 보여서 어려웠습니다. 그리드가 안맞춰져서 그런걸까?

A. 이미지와 텍스트를 합한 영역을 Fill로 채운 후, 와이어 프레임 형식으로 먼저 배치해보자.

그러고 난 뒤에 이상이 없어 보인다면 이미지 형태나 텍스트 영역을 다시 맞춰주다보면 훨씬 좋은 결과가 나온다.

02_디자인 통일

- 시각적 요소 통일화 : 곡률 및 작은 요소들의 공통성부터 찾아서 디벨롭

위계의 따르는 조절이 필요하다.

카드사이의 간격은 괜찮지만, 이미지와 설명 사이의 간격이 친화적이게 보이지 않는다.

어떤걸 먼저 드러낼까? 가격을 강조할까? 세일 현황을 강조하는게 좋을까? 등 여러 고민을 해보자.

03_버튼

- Primary > Icon : 라인 형태를 이미지 형태로 바꾸고 다른 레퍼런스 형태들 찾아보기

- Primary > Disabled : 직관적으로 보이도록, 시각적 의사 전달이 잘 되도록 바꾸기

04_하단 컴포넌트

- 현재 상태도 좋으나 다른 기능 중 효과적이라고 보여지는 부분 활용해보기

- home indicator의 여부만 variants로 제작되었는데 이 부분을 properties로 변경해보기

> 버튼 개수에 따라 옵션을 만들어보면 훨씬 효율적인 컴포넌트 제작 가능

"재입고 알림받기"는 Active 상태이다.

"품절" 버튼이었다면 Disable 상태이므로, 내가 사용한 버튼을 이때 적용하는 것이 적합하다.

피그마 툴 사용에는 잘 해내는 것 같아서 큰 피드백이 없으셨다.

다만, UI면에서 보충이 필요한 부분들이 있으니 다른 레퍼런스를 많이 보고 따라 그려보는 것이 중요하다.

시간 안에 모든 심화과제를 진행하기에 부족하였다.

그래서 일부만 진행해서인지 다른 피드백을 더 못받았다.

여유가 있을 때 나머지 UI을 작업해서 상담해보기로 하였다.ㅎㅎ

UI는 정말 재미있는거같다 😊

UX도 재미있지만 정말 많은 공부와 이해가 필요해서인지 여러번 보고 또 이해하느라 진도가 전처럼 느려지고 있다.

시간분배를 해보고 틈날때마다 다시 복습하는 식으로 익혀봐야겠다.