[231227]UXUI 디자인 입문 4주차 강의정리/HW_프로토타입 적용해보기

12/27

*강의 정리*

1. 디자인툴
   : 디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램
   1) 인터페이스 디자인 툴: 피그마, 스케치, XD
   2) 그래픽 디자인 툴: 포토샵, 일러스트레이
   3) 3D: 시네마(유료), 블렌더(무료)
   4) 모션 그래픽: 프리미어, 애프터이펙트
   
   비트맵vs백터: 백터 파일 확장자 .svg, .eps, .ai 개발환경에서 사용가능한지 먼저 체크할 것
2. 피그마, 스케치, XD
   -모두 벡터 기반 그래픽 편집(좌표를 기반으로 함)->왜? 반응형으로 디자인해야하기 때문에
   -간단한 Lo-fi 프로토타이핑
   -dev mode를 통한 그래픽->코드 변환 이용 용이
   (피그마)
   클라우드 기반, 멀티 플랫폼 지원
   (스케치)
   피그마 이전 가장 인기 있던 툴, 로컬 컴퓨터 기반이라 안정적, mac os만 지원
   (XD)
   어도비CC로 추가 비용 없이 무료 사용 가능, 여러 사람과 함께 작업하기는 쉽지 않음
   
   
3. 프로토타이핑 툴 *lo-fi, hi-fi
   :화면의 움직임이나 인터렉션 구현을 도와주는 툴(제품과 사용자 간의 소통!)
   (피그마: 프로토타이핑): Lo-fi
   (프로토파이): Hi-fi
   조건부 트리거-특정 상황일 때 이동하거나 색상이 변하는 등
   (프레이머): 수준 높은 구현, 코드 기반 툴(react언어), 배포까지 가능!
   재사용성-코드 재사용, 컴포넌트 재사용
   CMS: 콘텐츠 관리 시스템

 

*HW_피그마로 간단한 프로토타입 만들어보기*

1. 장바구니 화면의 Button/Menu 버튼을 클릭하면 메뉴 화면으로 이동하도록 만들어보세요.
2. 메뉴 화면의 Button/Close 버튼을 클릭하면 장바구니 화면으로 이동하도록 만들어보세요.
3. 장바구니 화면의 List Item 3을 클릭하면 상세 화면으로 이동하도록 만들어보세요.
4. 상세 화면의 Button/Back을 클릭하면 장바구니 화면으로 이동하도록 만들어보세요.

https://www.figma.com/proto/98AawIvChshhFZUpzLXMgh/%5BUXUI%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%86%E1%85%AE%E1%86%AB%E1%84%80%E1%85%A1%E1%86%BC%E1%84%8B%E1%85%B4%5D-week4-%E1%84%89%E1%85%AE%E1%86%A8%E1%84%8C%E1%85%A6-%E1%84%8C%E1%85%A1%E1%84%85%E1%85%AD?type=design&node-id=1-58&t=RH72fjlh9yPyWL9P-1&scaling=scale-down&page-id=0%3A1&mode=design

Figma

개인과제할 때 사용했던 프로토타입들이라 과제하는데 어려움은 없었다.