[UI 디자인 프로세스] 2 - 04. PR 페이지 만들기

ㅣ플러스 엑스 UI 강의 후기 05ㅣ

---

02_04.  요약: 포폴 정리겸 디자인 사이트에 올릴 작업물을 만드는 방법

비핸스와 자사 홈페이지에 작업물을 올리고 홍보를 해. PR 페이지 만으로 홍보가 되기 때문에 공을 들여 작업해. 어떻게 작업하는지 알려줄게.

 

 

PR이 왜 중요 한가?  영업 수단이 된다.  다른 디자이너들에게 귀감이 되고 파트너사에 홍보하기 위해 업로드 한다. 

 

PR 페이지 만드는 방법

[PR 페이지 디자인]

프로젝트를 작업한 UI와 UX디자이너 한명씩 작업. UX디자이너가 전체적인 흐름을 만들고 UI 디자이너가 디자인 

 

전개 방법

1. Project Overview
2. Interview & Research
3. Insight
4. UX/UI Concept
5. Page Design

 

 

자사 웹 사이트 용 / 비핸스 업로드용으로 나눠 작업. 

• 자사웹 경우: 한글 중심 마크업 개발/  1920 사이즈로 작업. 원 페이지 웹 형식 디자인. 스크롤 이벤트 , 마우스 호버 등 개발 요소를 추가 하기도 함. / PC형, 모바일형 두 가지로 만듬. 
• 비핸스 업로드: 영문기준, 통이미지 / 1920를 2배수로 작업하고 추출하여 사용 / 작업 이미지를 섹션별로 구분하여 정리.

 

[인터렉티브 요소 제작]

에프로이펙트 , XD, 피그마 사용. 간단한 모션은 피그마로 만듬

 

Ex) 비핸스의 업로드용 PR 모션 만들기

 피그마 프로토타입으로 영상 만들기 -> 백그라운드 컬러 포함하여 영상이 돌라갈 부분 표시 하여 피그마에서 이미지 추출 (영상은 1배수 사이즈) -> 추출된 이미지 포토샵에서 영상표시 부분 삭제  -> 키노트에서 배경 이미지 불러온 후  프로토타입으로 만든 영상을 뒤쪽에 배치 -> 키노트 영상으로 내보내기 선택 대기시간 0으로 설정 해상도 (사용자화 -> 이미지와 동일한 사이즈로 설정) 키노트에서 작업한 영상 추출하기 -> vimeo (유료)에 임베딩 한 후 코드를 비핸스에 임베드. 임베드 코드 입력 시 백그라운드 자동 재생을 위해 “autoplay=1%background=1&” 코드 삽입

---

 플러스 엑스가 작업한 포트폴리오를 볼때마다 이런 작업은 어떻게 했지?? 하는 궁금증이 컷다. 영상은 당연히 에펙작업이나 간단한 영상 툴을 이용해서 만들었을 줄 알았는데 간단한 툴로 효과적인 영상을 만들 수 있었다. 이 부분이 이번강의의 꿀팁 이였다. 비핸스에 영상 업로드 시 동영상 플레이어가 기본값으로 생성되었는데 코드 임베딩 방식으로 백그라운드 모션으로 표현 할 수 있는 법을 알 수 있었다.  

 

---

[🌰인사이트]

● 포폴 작업물 전개 흐름 
-Project > OverviewInterview & Research> Insight> UX/UI Concept> Page Design 순으로 정리. 스토리 흐름이 느껴지도록 전개짜기

● 인터렉티브
- 간단한 모션구현은 피그마와 키노트를 사용해서 만들자. 

●  Vimeo 임베딩 코드로 비핸스에 업로드
- 비핸스 업로드 시 백그라운드에 자동으로 영상이 재생될 수 있도록 vimeo 임베드 코드를 입력하고 자동재생 코드를 삽입하여 업로드

---

[🥜 추가조사]

마크업 개발자?

https://velog.io/@css/%EB%A7%88%ED%81%AC%EC%97%85-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9E%80

마크업 개발자란?

https://www.theteams.kr/teams/2712/post/69270 

“디자인과 기술을 이어주는 존재, 마크업 개발자를 함께 알아볼까요?” - 유저플로우셀 오혜진

---

[🌞 목표]

▶ 포폴 작업시 이해도 높은 전개 흐름을 만들 수 있다. 

▶ 멋있는(내가 만족할 수 있는) 작업을 만들어서 비핸스에 올려보자. 모션 구현 포함

▶ 마크업 개발자 첨듣는다. 이 직군에 대해서 알아보고 9월까지 목표한 과업 달성후 차근차근 공부해 보자. 

---