오늘 한일
-디자인 카타 작성
-UI 디자인 강의 2, 3강 완강
-UI 디자인 1강 과제
-UI 디자인 2강-3 과제 1까지
내일 할일
-UI 디자인 4, 5강 완강
-UI 디자인 2강 남은 과제 진행
-개인 과제 가능한 만큼 진행
UI 디자인 1강 과제
📕디자인 핵심 원리 잘 적용된 사례 찾아보기
네이버 지도 앱 화면
😎직관적인 디자인
- 정보를 시각적으로 표현
상단 픽토그램을 통해 사용자가 정보를 더 쉽고 빠르게 이해 가능
하단 아이콘은 사용자의 문화적, 언어적 차이를 넘어 즉각적인 이해 가능 - 사용자의 행동 유도
배경과 분리되는 흰 앱 바와 이와 대비되는 파란색 버튼 컬러를 통해 강조와
사용자가 쉽게 사용 가능
✏️픽토그램과 아이콘의 차이점
픽토그램은 일반적인 정보 전달의 목적으로 단순, 직관적인 방식으로 디자인
아이콘은 기능을 상징, 서비스를 표시하는데 사용(인터페이스와 연관성이 중요)
넷플릭스 홈 화면
📲일관된 디자인
- 다양한 디바이스 간의 일관성
데스크탑, 태블릿, 모바일의 다양한 디바이스에서 일관된 경험을 제공 - 디자인 시스템
넷플릭스는 브랜드 색상인 빨간색 컬러를 정의하여 다양한 플랫폼, 디바이스에서 동일한 컬러를 사용하여 일관된 디자인을 유지
올리브영 홈 화면
🛍️가독성을 고려한 디자인
- 컨텐츠 그룹화
카테고리에 이미지와 텍스트를 가깝게 배치하고 여백을 활용해 그룹화하여 정보를 빠르게 확인 가능 - 크기와 비율
요소의 중요도에 따라 타이틀의 크기를 다르게 하여 계층 구조를 형성하고 있으며 제품의 이미지가 매력적으로 보일 수 있도록 이미지 영역을 강조
UI 디자인 2강 과제
👩💻텍스트 분석 후 목록 화면 리디자인하기(2강-2)
카드 컴포넌트 하나에도 텍스트에 사이즈, 컬러, 두께, 정렬 등
많은 요소를 디자인해야 하는구나 느꼈고 하나하나 찾아야 하다보니 시간도 꽤나 걸렸다,,!🪧아이콘 만들기(2강-3/1)
정답과 비슷하게 그려진 것 같아 만족!
한가지 아쉬운 점은 크기가 일정해 보이지 않는다는 점?
프레임 말고 실제 아이콘 사이즈에 맞춰 그린 것 같은데,,
다시 확인해 봐야 할 것 같다
UXUI 도전!!!