< 2차 프로젝트 > 러너 8기 '상세페이지' 완성
- 1차부터 최종 디자인 + 썸네일까지
안녕하세요,
복작한 일상을 적는 일상다복입니다.
지난 번 상세페이지 분석과 로직까지 구성한 후
본격적으로 디자인 단계에 들어오게 되었어요.
12일 화요일까지는 어드민 페이지에서도
완벽하게 세팅이 되어 있어야해서
11일 월요일 자정 전까지는 디자인 작업을 모두
끝내야겠다고 생각했는데 나름 일정을 다 맞췄습니다.
(이틀동안 2-3시간씩 잔 보람이 있네요..^^)
그럼 오늘은 상세페이지 1차 디자인부터
최종 디자인 그리고 썸네일 작업까지에 대한 과정을
포스팅해볼게요!
상세페이지 1차 디자인
지난번 로직을 완성하고 각자 맡은 파트에서
1차 디자인을 완성했습니다.
모두 각자 맡은 파트를 열심히 해주시니
으쌰으쌰가 되는 것 같아요!
쭉 합쳐보니 코랄 색이 메인 컬러라 그런지
전체적으로 산뜻하고 따뜻하게 나왔어요!
상세페이지 디자인에 들어가기 앞서
폰트 종류와 맥시멈 사이즈를 잡았습니다.
타이틀 폰트는 평창평화체로 맥시멈을 100px로
상세페이지 제목은 레시피코리아체로 80px,
본문은 프리텐다드로 두께는 미디움에 30px로 정했어요.
타이틀에 들어가는 평창평화체는 글자 빈공간에
다이아몬드 모양이 박혀있는데
빛나는 새해 느낌과 어울려서 마음에 들었습니다!
1차 디자인은 디테일보다 어디서 배경색이 깔리고
겹치지는 않는지 레이아웃이 잘 들어오는지 등에
초점을 맞추어 본 상태입니다.
민태님이 몇몇 부분은 모바일에서 봤을 경우,
글씨가 너무 작아서 안 보일 수 있다고 하셔서
최소 폰트를 30px로 잡고 수정 작업을 하였습니다.
1차 디자인이라 러프하게 진행하기로 했지만,
초반부에서 컨셉과 스타일을 확실하게 잡아줘야
최종 디자인 단계에서도 수월하게 작업이 될 것 같았습니다.
따라서,
제가 맡은 헤드부분에서 공을 들여 디자인 작업을 하였습니다..
타이틀 이미지 만드는데 소스 하나 따온 것없이..
피그마로 직접 제가 다 맹글었어요ㅎ
(저 구름들 만드느라 애를 좀 먹었...ㅎ)
시간을 투자한 만큼 제가 생각한 문구와 디자인이
잘 어우러지게 들어간 것 같아서 만족했고
팀원들도 마음에 들어해서 나름 뿌듯했습니다!
상세페이지 최종 디자인
제가 상세페이지 디자인 전체 마무리 작업을 맡고
삼희님과 윤지님이 h2 작업을 맡아주셨어요.
두분이 h2 작업을 든든하게 잘 해주셔서
저도 전체 디자인 작업에 집중할 수 있었네요!
최종 디자인을 향한 제 피그마 페이지..
레이어 정리도 신경쓰느라
시간이 조금 오래걸렸습니다ㅜㅎㅎ
1차 때와 로직이 바뀐 부분이 있다면
러너 기대 효과(강의 장점) 대신 타사 비교 컷을 넣었습니다.
타사 비교 부분은 잊고 있었는데
삼희님의 예리함 덕에 수정할 수 있었어요!
그리고,
생각보다 복병이였던 '페이스 메이커 소개' 컷.
삼희님이 예쁜 레이아웃을 잡아주셨는데
밑에 폰트가 너무 작아지고 정리가 되지 않아서ㅜ
레이아웃을 잡는데 조금 어려움을 겪었습니다.
결국 7기 모집 '페이스 메이커 소개'
레이아웃처럼 변경했어요..
드디어, 완성된 8기 모집 상세페이지 최종본,
매 페이지마다 오탈자, 띄어쓰기, 레이아웃, 간격 등
섬세하게 모두 만졌습니다.
타이틀 - 타겟 대상 - 페인포인트 & 기대 효과
눈과 손을 갈아넣어 만든 앞부분..ㅋㅋ
우리만의 컨셉으로 만들기 위해 혼자 피그마로
고군분투하며 디자인을 했던 부분입니다ㅎㅎ
기대 효과 1(만족도 위주) - 타사 비교 - 마러너 리얼 후기
강점 1 - 강점 2 - 강점 3 -강점 4
강점같은 경우 4개로 상세하게 설명 하였으며,
배경을 연그레이색으로 깔아 통일감을 주었습니다.
러너 3 코스 - 직무 경험
러너 3 코스같은 경우 점진적인 단계의 느낌을 주기 위해
그라데이션으로 색을 뽑아냈어요.
기획 의도 - 페이스 메이커 소개
그로스쿨을 만든 나영님의 기획 의도와
페이스 메이커 소개는 레이아웃보다 색감을
크게 바꾸었습니다.
장점(빠른 피드백) - 타겟 추천
장점 중 하나인 '빠른 피드백'을
실제 슬랙 채팅방 느낌으로 디자인하였어요.
'타겟 추천'에서는 비추천과 추천을
색감으로 대비를 주었습니다.
여기서 사람 아이콘은 삼희님이 가져오신 건데
넘 찰떡이라 마음에 들었습니다!
얼리버드
얼리버드 같은 경우 1,2차가 금방
종료될 상황을 대비하여 이미지를 미리
만들어 두었는데요,
사실, 처음에는 얼리버드 종료 블러를
연하게 넣어서 디자인을 했습니다.
다른 것 보다 가격 관련된 이미지라
확실한 피드백을 받으면 좋을 것 같아 민태님께 여쭤보니
이전 가격을 좀 더 진하게 블러 처리해서 구매자가
허탈감이 들지 않도록 하는 것이 좋겠다는 피드백을 받았습니다!
구매자의 입장에서 생각하는 것도
잊지 않아야겠다는 생각을 했네요ㅜㅎㅎ
지원 절차 - 8주 코스
전 기수 7기 상세페이지를 봤을 떄
서류 신쳥하기와 장바구니 담기 등 순서가
헷갈려서 헤맸던 기억이 있어 저희는 그 점을 보완했습니다.
말이 헷갈렸던 지원 절차 4단계에서
6단계로 친절하게 풀어서 써놓았습니다.
동기부여 - 취업 후기
동기부여는 7기에서 사용한 회사 로고들을
그대로 넣어 장점을 차용하였고 실제 수강생이 말하는
'마케터 취업 후기'로 내용을 마무리지었습니다.
+
포트폴리오와 서류 제출하기 버튼은
이미지보다 GIF로 넣으면 더 효과적일 것 같아
따로 만들어 추가하였습니다!
(포폴 GIF는 윤지님이, 서류 제출하기 버튼은
제가 시도했다가 사이즈 조정에 실패해서
삼희님이 만들어 주셨어요!)
이렇게 마케팅러너 8기 모집 최종 이미지가
완성되었습니다!!
(물론 앞으로 수정사항에 맞춰 고칠테지만요ㅎㅎ)
상세페이지 썸네일
플로우와 디자인에 집중하다 보니
러너 8기 모집 썸네일 작업을 뒤늦게 들어갔습니다.
(미처 생각을 못했는데 다른 팀에서 썸네일 이미지를
원하셨어요... 근데 제가 늦게 드린 것 같아서 죄송했네요ㅜ)
썸네일은 1200 * 630과 300 * 300
사이즈 총 2개를 만들었습니다.
팀원분들이 타이틀 이미지를 마음에 들어하셔서
그 느낌에서 벗어나지 않는 선에서 작업을 하였습니다.
이로서, 상세페이지 모든 이미지가 준비되었기 때문에
어드민 페이지에 업로드를 시작했습니다.
상세페이지 피드백 + 어드민 업로드
삼희님 덕에 그로스쿨 어드민 최종 업로드 전에
러너분들께 소중한 피드백을 받았는데요!
(다들 바쁘실텐데 피드백 주셔서 감사합니다ㅜㅜ)
< 러너 7기분들 소중한 피드백 >
1. 컨텐츠랑 콘텐츠 단어를 통일하는 것이 필요해보임
2. 8주 코스 안에 텍스트가 작아서 잘 보이지 않음
3. 강점 4(소수 정예 밀착케어) ~ 페이스 메이커 소개까지
글이 너무 많음
이 3가지까지 최종적으로 수정을 하여
어드민에 업로드를 하였습니다.
1월 1일 23:59 전까지 많은 분들이
러너 8기 모집 상세페이지를 봐주시길 바라며...
조금 숨을 돌렸네요ㅜㅎㅎ
앞으로는 뷰저블을 통해 분석하며
순서나 내용들을 조금씩 수정해나가야할 것 같습니다!
최종 완성된 마케팅러너 8기 모집 상세페이지는
👇여기에서 확인해주세요! 👇
https://groschool.kr/category/marketing/course/marketing-runner-8th
취업률 90%이상, 실제 마케팅을 해보는 마케팅 러너 8기
마케팅 인턴보다 알찬 포트폴리오 얻어가세요! 8주만에 광고 집행 후 데이터 분석, 성과까지 전부 가져갈 수 있습니다. 마케팅 경험, 스펙 없다고 걱정 마세요! 마케팅러너는 8주만에 여러분을
groschool.kr
다음 포스팅에서는 상세페이지 작업으로 인해
뒤늦게 시작하는 '네이버 검색 광고'에 대해 적어 보겠습니다!
그럼 오늘도 읽어주셔서 감사합니다 :)
▼ 다음 포스팅으로 달리기 ▼
https://bokjakday.tistory.com/138
7-19. 러너 8기 모집을 네이버 검색으로 알리자 - 네이버 검색 광고 캠페인 생성
7-19. 러너 8기 모집을 네이버 검색으로 알리자 - 네이버 검색 광고 캠페인 생성 안녕하세요, 복작한 일상을 적는 일상다복입니다. 오늘은 상세페이지로 인해 뒤늦게 시작하는 네이버 SA, '네이버
bokjakday.tistory.com
모든 저작권은 일상다복에 있습니다.
'시작,해야지 달려 마케팅러너집' 카테고리의 다른 글
| [러너 7기] 7-20. 러너 8기 모집 '상세페이지' 얼마나 들어왔나 볼까 - 뷰저블 분석 1주차 (1) | 2023.12.20 |
|---|---|
| [러너 7기] 7-19. 러너 8기 모집을 '네이버 검색'으로 알리자 - 네이버 SA 광고 생성과 1주차 기록 (2) | 2023.12.20 |
| [러너_7기] 7-17. 바통 터치 <2차 프로젝트> 러너 8기 모집 - 상세페이지 분석부터 구성까지 (2) | 2023.12.09 |
| [러너_7기] 7-16. '네이버 검색 광고' 정리 - 네이버 SA 광고하는 법 (2) | 2023.12.08 |
| [러너_7기] 7-15. <1차 프로젝트> 완주 후 숨 고르기 - 1차 프로젝트 성과 정리 (0) | 2023.12.06 |