UX/UI 디자이너 이성민 Details
- Section 01
OT
01. 디렉션 스튜디오 & 디자이너 이성민 소개- 비핸스 포트폴리오 전문 스튜디오가 되기까지 - UX/UI 디자이너가 되기까지
02. 비핸스 프로젝트 구조 이해- UI & Interaction - UX/UI - Branding
- Section 02
UI Interaction 디자인
03. UI & Interaction 디자인 작업 이해- 포트폴리오 전반적인 작업 순서 및 진행 방식
04. 제품 그림자 및 백그라운드 이펙트- 사물 및 목업 그림자 넣기 (신발, 의자, 제품) - 재질 효과 및 백그라운 이펙트 적용
05. 서체의 중요성 #1: 타이포그래피 작업- 포트폴리오 컨셉에 따른 서체 선정의 중요성 - 서체의 종류 및 이해 - 시각 보정 "커닝"
06. 서체의 중요성 #2: 타이포그래피 작업2- 인트로 페이지 타이포그래피 적용 - 타이포그래피 이펙트 - 탭으로 이루어진 UI 레이어 정리 요령 - 컨셉 디자인
- Section 03
디자인 소스 아카이빙
07. 디바이스 목업 소스- 목업 소스 선정 및 종류 (Clay, Metaphor, Nude) - 목업 소스 분리 및 수정
08. 브랜드 선정 과정과 리뉴얼 및 브랜딩 이해- 브랜드 선정의 중요성 - 브랜드 리서치 (카테고리 선정) - 포트폴리오 리뉴얼 & 브랜딩
09. 레퍼런스: 사진 수집 방법- 레퍼런스 사이트 소개 - 목적별 사진 수집 방법 - 포트폴리오에 적합한 사진
- Section 04
포트폴리오 제작 실습
10. 포트폴리오 제작: 인트로- 콘셉트별 인트로 소개 - 비핸스를 활용한 프로젝트 콘셉트 찾기 - 인트로 레이아웃 제작
11. 포트폴리오 제작 #1: 레이아웃 설정- 무드보드를 통한 레이아웃 틀 잡기 - 스토리텔링 디자인
12. 포트폴리오 제작 #2: 빌드업- 구간별 레이아웃 디자인 배치 (Desktop, Tablet, App Page) - 데코레이션 디자인 적용
13. 포트폴리오 제작 #3: 마무리- 오마주 기법을 활용한 마무리 디자인 설정 - 타이포그래피를 활용한 마무리 단계
14. 포트폴리오 제작 #4: 썸네일 선정- Behance 썸네일에 대한 이해 - 포트폴리오 구간을 활용한 썸네일 - 세미 촬영을 통한 썸네일 적용
15. 비핸스 업로드 및 큐레이팅 설명- 포트폴리오 구간별 자르기 - 비핸스 업로드 및 키워드 검색 노출 설정 - 비핸스 분야별 큐레이팅 및 선정 방법
- Section 05
UX/UI 디자인 실습: 주제 및 앱 선정
16. UXUI 포트폴리오 주제 선정- 비핸스 카테고리 - 브랜딩 & 컨셉 앱 선정
17. 앱 선정 과정 및 기능성 설정- 기능적 요소 앱 리서치 - 앱에 적합한 브랜드 선정 - 분야별 포트폴리오 레퍼런스
18. 피그마를 활용한 앱 Description 제작- 기능성 파악 - 페이지 및 섹션 시작하기 - 포트폴리오 25개 앱 Depth 분류 및 프로토타입 제작
- Section 06
UX/UI 디자인 실습: 콘셉트 설정
19. UX/UI 포트폴리오 레퍼런스- UI 키트 플랫폼 - 앱 리서치 방법
20. User Flow 설계와 프로젝트 콘셉트 설정- User Flow 종류 및 선정 - 디자인 및 형태 제작 - 피그마를 활용한 User Flow 베리에이션
21. 콘텐츠 & UI 아이콘 설계- 사진을 이용한 콘텐츠 아이콘 제작 - 인터페이스 & 매칭 아이콘 제작 - 패밀리 아이콘 제작 및 탭바 아이콘 제작
22. 아이폰 목업 소스 선정과 레퍼런스- 포트폴리오 구간에 적합한 앱 목업 소스 선정 - 비핸스 디자이너별 사용 사례
- Section 07
UX/UI 디자인 실습: 앱 디자인
23. 앱 디자인 #1: 로그인 및 회원가입- 버튼 종류 및 이펙트 효과 넣기 - 로그인 디자인 적용 및 짜집기
24. 앱 디자인 #2: 메인 디자인 제작- 탭바 디자인 및 플로팅 버튼 만들기 - 리스트 메뉴 디자인 적용 - 사진 메뉴 및 레이웃 배치
25. 앱 디자인 #3: 카테고리 및 제품 페이지- 그림자를 활용한 제품 디자인 적용 - 제품 디테일 페이지 및 레이아웃 제작
26. 앱 디자인 #4: 결제 페이지- 카드 디자인 및 재질 효과 적용하기 - 결제 페이지 만들기
27. 앱 디자인 #5: 상세 페이지- 상세 페이지 디자인 종류 - 포트폴리오에 적용할 스크롤 상세 페이지 제작
- Section 08
UX/UI 디자인 실습: 포트폴리오 제작
28. 포트폴리오 제작: 포토샵 업로드 후 레이아웃 진행- 피그마에서 제작된 결과물 추출 - 앱 포트폴리오 인트로 및 구성 제작
29. 포트폴리오 제작: 비주얼 이펙트 및 데코레이션- 포트폴리오 백그라운드 효과 적용 - 데코레이션 및 사진 구성 설정
30. 마치며- 디자이너의 정체성(I am Designer) - 저는 이런 제품입니다 - 명분성이 있는 기술자


























