(DAY32) 피그마 프로토타이핑

 

안녕하세요:) 가을이 삭제되고 겨울이 왔습니다..

추워도 아아를 마셨었는데, 오늘은 날씨에 못이겨 뜨아를 마셨어요 ☕

 

오늘부터 UX리서치 파트를 마무리 하고, [ IT직무 이해 & 커뮤니케이션 ] 파트에 들어갔습니다!

학습목표는 디자이너와 개발자 간 협업 이해하기, 커뮤니케이션 역량 강화 하기 입니다!

앞으로 열심히 커뮤니케이션 역량을 강화해보겠습니다 💪🏻

---

 

 

 

✏️오늘의 학습

실습 ) 구매 페이지 프로토타이핑 만들어보기

 

 

 

 

📖오늘의 핵심

누구나 자신이 원하는 모먼트가 있다. '나는 저걸 원해'라고 솔직하게 인정하는게 중요하다.
나이는 숫자에 불과하다.

 

 

 

 

📝 수업 내용 메모장

 

이번 챕터에서 배울 것

- 프로토타입제작, 핸드오프까지 실무 중심 협업 경험

- AI를 활용한 EDA분석

- HTML, CSS 기본 학습

 

 

피그마 프로토타입 관련 단축키
Shift + E  : 우측 패널 Design/Prototype 모드 변경
(깃발 누른 채로) Shift + space : 폰 프로토타입이 뜸

 

 

 

실습 ) 구매 페이지 프로토타이핑 만들어보기

 

💡 문방구를 모티브로 이동 동선에 집중하여 연습해봤습니다.

 

https://www.figma.com/proto/kxPZt0eh1N7QcP1i4TDVV8/%EC%A0%95%EB%AF%BC%EC%A7%80?page-id=158%3A50&node-id=169-1523&viewport=1016%2C-1419%2C0.61&t=5x0YQxR3UbpTlLHq-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=169%3A2001&show-proto-sidebar=1

 

 

화면 전체샷

 

 

 💡디자인을 바로바로 움직일 수 있어서 너무 재미있었다.

프로토타입 기능을 써보니 어떤 식으로 이동되어야 하는지를 더욱 이해할 수 있었다. 단순히 페이지만 나열해서 디자인한다고 좋은 ux를 설계할 수 있는 것은 아닌 것 같다. 직업 화면 동선을 짜보고, 어떤 속도로 어느 모션을 넣어야 사용성이 좋은지 또한 고려해야 하는 부분임을 느꼈다.

 

프로토타입 기능을 써보는데 의의를 둔 작업과정이라 ui디자인은 꼼꼼하게 하진 않았고 문방구 컨셉으로 재밌게 진행했다. 꼼꼼히 디자인된 페이지에 프로토타이핑 기능을 쓰면 정말 실제 제품같은 느낌이 날 것 같다.