[UIUX] 스파르타 2023-12-18 TIL

Today I Learned

[이번주 목표] 팀 소개 피그마 페이지 만들기

오늘 할 일 와이어 프레임 짜기

 

1. 내용 구성

• 팀 소개 페이지
  • 팀 설명
  • 팀 목표
  • 팀 규칙(약속)
• 개인 멤버 소개 페이지
  • 이름
  • 사진
  • mbti
  • 취미
  • 장점
  • uiux 목표 하는 이유 및 포부
  • 협업 스타일 소개
  • 블로그 주소

 

2. 내용 구성에 맞는 레이아웃 레퍼런스 찾기

(메인 및) 팀 소개 페이지

선정이유
- 메인 화면과 팀 소개 화면을 seamless하게 전환해 줄 수 있는 레이아웃(상단 토글)
- 유저가 가장 소극적이게 행동해도 한눈에 정보를 확인할 수 있는 편리함

 

(개인 소개 페이지)

선정이유
- 사이드 각 멤버별 페이지로 바로 이동할 수 있는 토글
- 카드 ui 형식으로 다양한 정보들을 카테고리별로 묶을 수 있음

 

3. 레퍼런스 참고 와이어프레임 짜기

(메인페이지)

- 메인 화면을 커버 이미지처럼 활용
- 접속 후 5초 뒤 자동으로 팀 소개 페이지로 넘어가도록 after delay
- 토글로 바로 왔다 갔다 페이지 이동 가능

 

(팀 소개)

- tmi 말풍선 수신 애니메이션 효과
- 페이지 전환시 목표/ 규칙/구성원 위에서 아래로 나타나기
- 구성원 아바타 누르면 각 개인 페이지로 이동
- 아바타에 마우스 호버링 시 아바타 점프

 

(개인 소개)

- 취미 구경 카드 ui 섹션
- 취미 카드 선택시 팝업 overlay로 확장
- 아래 캐릭터 누르면 각자 멤버 페이지로 이동
- 각 캐릭터 마우스 호버링시 오퍼시티 10 > 100 왔다갔다
- 뒤로 가기 버튼으로 직전 페이지로 이동

 

4. 조원 아이디어 합치기

(팀소개페이지)

- 메인 페이지 없이 바로 팀 소개 페이지로 이동
- 각 멤버 카드로 직관적이고 간단하게

 

(개인 소개)

- 우측 사이드 토글로 각 멤버별 페이지 바로 이동 가능
- 블로그 버튼 가시화
- 취미 카드 뉴스 ui

 

5. 오늘 배운 점

인물 중심 소개 페이지 레이아웃 구성법

 

6. 아쉬운 점

내가 구현하고 싶은 기능을 프로토타입으로 만들 수 없음 ex. 마우스 호버링 시 오퍼시티 변환 등
레이아웃별 폰트 및  컬러스타일화
팀원들이랑 만나기로 한 시간까지 완성하지 못햇음 엉엉
좀 더 다양한 피그마 기능을 사용하기 위해 어떤 내용이 적절한지 생각 못함
와이어프레임 제작시 신경써야 하는 사항들 정리

 

7. 앞으로 다짐

프로토타입으로 구현하고 싶은 기능 배우기
각 기능별 맞는 내용 매치하기