[UI/UX]패스트캠퍼스 챌린지 16일차

오늘은 16일차!

드디어 XD 강의를 다 들었다

재구쌤 안녕히 가세요,,

ㅋㅋㅋㅋ이름을 본인 이름으로 하셔서 알게되었다

재구쌤 넘 귀여웠어용,,

 

강의를 다 듣고 느낀거는 역시 XD로 회사 홈페이지 기타 등등 다 작업해보니까

툴에 대한 이해도는 있는데 디테일이나 꼭 알아야할 거를 모르고 산 바보같은 느낌이였다.

레이어정리 이딴거 하나도 안하고 개발자한테 토스시켜버리고,,죄송합니다 ㅠ-ㅠ

하지만 사수가 없는 걸 어떡합니까!!!!!!!!!!!!!!

 

---

프로토타이핑 기본

#스크롤
- 가로 스크롤 
- 세로 스크롤

1. 컨텐츠의 영역을 잡는다.
2, 우측의 스크롤 아이콘을 통해 작업 진행~
+) 오른쪽에 네모를 만들어 여백을 채워주기

 

세로스크롤 실습 이미지다..퇴근하고 힘들어서..대충한 나를 용서해주세용ㅎ

사실 이게 프로토타입 해서 영상으로 보여드려야하는디..그것은...ㅎ 귀찮..

 

 

이건 가로스크롤 연습..! ㅎㅎ

 

# 회원가입 플로우 제작
1. 이메일 입력하기
2. 이메일 입력하고 계속하기
3. 비밀번호 입력하기
4. 틀렸을 경우 다시 입력

+)키보드 올라오는거 만들기
1. 키보드 이미지 불러오기
2. 아트보드 뒤에 만들기
3. 이메일 입력하기 버튼 누르면 입력하는 거로 입력요소 바꿔지게
4. 1아트보드 다음 2아트보드 클릭 후 시간(0~0.2초) -> 오버레이
5. 2아트보드를 키보드 아트보드에 연결
6. 시간은 0.2초 오버레이로
7. 애니메이션 - 위로 슬라이드

 

이건 쌤이 준 양식으로 따라해본거였다.

직접 만들긴..시간이 읍읍....퇴근하고 오면 8시입니다..이해해주세여 ㅎㅎ

#UI 키트를 활용한 와이어프레임 제작
* 지도를 이용하여 제작
+ 헹들러 먼저 만들기
+검색창 만들기
+ 지도위치 아이콘 만들기 (48 48 로 작업)
+ 장바구니에 아무것도 안담겼을 때 어떻게 보여져야할지도 까먹지말기
+ 와이어프레임은 ui 키트를 통해 제작
와이어프레임을 가져서 기획자와 의사소통을 하는게 좋다
완성된 디자인을 가지고 하면 이미 다 되었다 생각해서 서로 부담을 가짐

#GUI 제작, 디자인 레이어, 심볼 정리
- 지도는 직접 디자인하기보다는 불러와서 쓴다
- 상단의 배터리랑 시간 와이파이는 꼭 네비게이션바에 같이 넣어야한다!
고려하지 않으면 나중이 복잡해짐..
- 왼쪽 에셋에서 구성요소 정리 꼭 하기

# 디자인 검토 & 개발 사양 공유
- 공유 버튼 클릭
- 아이콘이나 이미지 같은거 내보내기 표시하면 개발자들이 다운 받을 수 있음
- 플로우로 묶으면 플로우된거만 공유 가능
- 보기 설정-개발-다운로드가능에셋 포함-링크보유누구나

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.