본문 바로가기

UXUI 디자인 입문(23.12.18~24.01.29)

(39)
피그마 활용법(2)_2주차 숙제 ✅ 과제 1 : UI 차이점 찾아보기(최소 2개 이상의 앱/제품에서 2곳 이상) (1) OS 별로 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요. - 동일한 앱의 UI가 안드로이드 기기와 아이폰에서 다르게 보이는 부분을 찾고 왜 다른지 다양한 이유를 논의해 보세요. ① Google map : • 캐러셀 상세 내용 Android : 캐러셀 안에 제공되는 정보가 더 상세하게 적혀 있음(km제공, 리뷰수 제공, 호텔급 제공) iOS : 반면에 좀 더 심플하게 제공되고, 주요 내용에 더 집중 • 날씨 제공 Android : 지도 화면 내에 날씨 아이콘이 없음 iOS : 지도 화면 내에 날씨 아이콘을 제공하고, 검색한 근처 주변의 온도를 제공 • 업데이트 탭 내에 추천 Android : 업데이트..
피그마 활용법(2)_중간점검 ✅ 중간 점검 저번주 화요일 부터 시작된 피그마 활용법을 열심히 수강하고 계획대로 진행했다. 일단 UX,UI에 관한 수업 내용은 수강한 것 같다. 그 후에, 개인 과제를 진행 했다. 기술적으로 컴포넌트 제작이나 베리언츠, 프로퍼티 등은 이제는 막히지 않고 자연스럽게 구사 할 수 있는 것 같다. 반면에, 오토레이아웃 리사이징에서 좀 더 숙련도를 올려야 할 것 같다. 리사이징 속성에 대해 더 연습해 보면 좋을 것 같다. 전체적인 화면 구성 작업은 처음이었다. 사용자 시나리오를 그려놨지만, 작업을 진행하면서 미로에서 헤매듯 한참을 만졌다. 3일(수) - 피그마 활용법(1) 1,2주차 완강 4일(목) - 피그마 활용법(1) 3,4주차 완강 5일(금) - 피그마 활용법(2) 1주차 완강, 개인 과제 : 사용자 시..
피그마 활용법(2)_3주차 정리 프로토타입의 개념과 용도를 이해합니다. 피그마 프로토타입 기능의 구성을 배웁니다. 피그마 프로토타입 기능을 활용해 기본적인 인터랙션과 프로토타입을 만들 수 있습니다. 1. 장단점 2. 구성과 기능 살펴보기 3. 기본적 인터렉션 실습 4. 실무에서 프로토타입 공유 과정 ✅ 진행 일정 3일(수) - 피그마 활용법(1) 1,2주차 완강 4일(목) - 피그마 활용법(1) 3,4주차 완강 5일(금) - 피그마 활용법(2) 1주차 완강, 개인 과제 : 사용자 시나리오 완료 6일(월) - 개인 과제 진행 : 공통화면, 홈화면, 목록 화면, 상품 상세 화면 완료 7일(화) - 피그마 활용법(2) 2,3주차 수강 후, 개인 과제 마무리(장바구니 화면, 상품 상세 화면 스크롤, 프로토타이핑), 심화(시간이 허락한다면..)..
피그마 활용법(2)_2주차 정리 [수업 목표] UI 설계 시 유의해야 할 점들을 살펴보고 이해합니다. 정보구조도(IA)와 화면흐름도(Flowchart)의 차이를 이해합니다. 와이어프레임의 개념을 이해하고 실제 와이어프레임을 그릴 수 있습니다. ⦿ 다양한 환경에서의 UI 차이 → 웹 - 모바일 웹, 운영체제에 대한 제한 없음, 웹브라우저는 주소 입력 접속, 업데이트하기 쉬움, 웹브라우저와 충돌하지 않는 선의 UI → 앱 - 안드로이드와 iOS 둘 다 준비, 앱은 다운로드, 심사를 통화해야 함, 다양한 인터렉션 사용 1. 목적이 다르면 UI의 차이가 있다. UI의 차이가 있다는 것은 목적이 다름 (1) 페이지 이동 : 웹은 주소창 인터페이스가 있다. 주소를 입력하면 접근이 가능하기 때문에, 사용자가 접근하면 안되는 곳에 접근했을 때에 대..
피그마 활용법(2)_1주차 정리 [수업 목표] 팝업과 모달을 이해합니다. 다이얼로그 컴포넌트를 만들면서 구조와 기능을 이해합니다. 컨트롤 요소들을 살펴보고, 체크박스와 라디오의 차이를 이해합니다. 지금까지 배운 컴포넌트 지식 및 기술을 활용해 디자인을 설계합니다. 01 컨테이너 컴포넌트와 모달 -컴포넌트 종류 중 컨테이너 컴포넌트 -굉장히 자주 사용할 ‘모달' UI개념에 대해 / 라이트박스 02 다이얼로그 컴포넌트 -다이얼로그 사용 시기(언제 써야 하는지) / 다이얼로그 직접 만들기 03 체크박스와 라디오 -언제 쓰는지, 무엇인지 / 두가지의 차이, 유의사항 04 UI키트 완성하기 -나만의 UI키트 와성함을 되돌아보기 1.모달 -합성 컴포넌트와 컨테이너 컴포넌트 : 컴포넌트+컴포넌트=컴포넌트(합성 컴포넌트) (바텀시트, 다이얼로그, 리..
피그마 활용법(2)_1주차 숙제 #숙제
피그마 활용법(1)_4주차 정리 [수업 목표] 피그마의 컴포넌트 개념과 분류를 이해합니다 버튼 컴포넌트의 개념과 구조를 이해합니다. 텍스트필드 컴포넌트의 개념과 구조를 이해합니다. -컴포넌트 : 앞으로 계속 볼 컴포넌트가 무엇인지, 피그마에서 컴포넌트를 쓸때 필요한 용어와 기능 -버튼 컴포넌트 : UI의 대표. 어떤 종류, 어떤 구조로 구성되어 있는지 상세하게(버튼별 상태, 구조, 속성) -텍스트필드 컴포넌트 : 텍스트필드의 개념, 주의해야 할 점, 상세하게(상태, 구조, 속성) 1. 컴포넌트 -개념: 어떤 것을 만들기 위한 재료/구성품 원자 요소(Atom)를 결합해서 만든 분자(Molecule) 단위의 구성 요소 -유의할 점: 버튼이 하는 일이 중요(모양이 중요X), -종류 : ① 액션 : 사용자가 중요한 행동을 수행할 때 사용 ② ..
피그마 활용법(1)_3주차 정리 [수업 목표] UI 설계의 기본 원리와 기초 디자인 지식을 이해합니다 디자인 시스템의 설계 원리와 원칙을 이해합니다 기본적인 디자인 시스템 요소를 만들 수 있습니다. 피그마 디자인시스템(UI키트 정도의 크기) 폰트, 컬러 만들어보기 (1)UI 디자인 원리 기초 (2).디자인 시스템의 개념과 원리 : 앱/웹을 일관되게 설계 할 수 있게 해주는 것/ 아토믹 디자인 (3)파운데이션과 스타일 : 컬러와 폰트 스타일 1. 디스플레이와 픽셀, 배수 디지털화면Display (폰,컴,모니터,전광판,키오스크) - 픽셀이라는 정말 작은 칸으로 이루어짐. -해상도 : 화면의 선명한 정도. 픽셀의 개수(가로줄의 픽셀*세로줄의 픽셀) -해상도와 픽셀의 관계 : 픽셀의 수가 같을 때 화면이 커지면 픽셀이 커짐/ 가로와 세로가 2..