| 2024년 10월 29일 화요일 TO DO |
✔️ 디자인 카타 - 랜딩페이지 발표
✔️ 디자인카타 - 랜딩페이지 피드백 및 인사이트 정리
✔️ Figma 활용법(1) 2주 차 강의 듣기
✔️ 2주차 숙제 작성 후 제출하기
✔️ Figma 활용법(1) 3주 차 강의 듣기
디자인 카타 : 랜딩페이지
튜터님의 피드백과 다른 분들의 정보를 통해 랜딩페이지의 의미와 목적, 랜딩페이지를 구분하는 기준을 확실하게 알 수 있었다.
하나씩 다 적은 후 랜딩 페이지와 홈페이지를 구분할 수 있는 방법과 구분하는 기능에 대해서 정리를 해보았다.
🔎 랜딩페이지 Landing page를 구분하는 방법
랜딩페이지는 사용자에게 처음 보여주고 싶은 사이트이다.
방문자를 회원 또는 고객으로 전환하는 목적을 가지고 있고, 그 외에도 제품을 구매 유도와 같은 액션을 이끌도록 한다.
특히, CTA의 기능이 적극적으로 활용되어야 한다.
🔎 콜투액션 CTA
사람들이 구매하거나 구독, 예약 등 비즈니스 목표에 걸맞은 행동을 할 수 있도록 유도하는 기능을 말한다.
주로 클릭할 수 있는 버튼 형태의 텍스트, 이미지 등으로 되어있고 액션을 취할 시 다음 단계로 안내하는 역할을 한다.
ex 알림받기로 회원가입을 유도 / 쿠폰을 받아 구매를 유도
내가 좋다고 생각하여 가져온 3가지 페이지를 위의 내용과 고려하여 다시 살펴보았다!
모호한 부분도 있지만, 최대한 랜딩 페이지 기능을 중점으로 생각해보았다.
01 내일 배움 캠프
- 스크롤 할때 < 지금 무료 신청하기 > 버튼이 따라오도록 되어있다.
따라서 페이지의 어느 부분에 있어도 시선을 이끌고 있으며 신청을 유도하고 있다.
- 각 분야별 프로그램을 더 알아볼 수 있도록 하여 자연스럽게 프로그램을 확인하고 신청할 수 있도록 유도하고 있다.
02 VIMEO
- Join / See plans버튼에 강조색을 배색하고 애니메이션을 적용하여 가입과 이용을 유도하고 있다.
- 영상을 배치하여 이목을 끌게 한다.
- 설명을 가볍게 안내 후 사용해 볼 수 있도록 안내하고 있다.
- 해당 이미지 위에 마우스 포인트를 올려두면, 포인트 모양이 재생 아이콘으로 바뀐다.
해당 이미지가 영상임을 알 수 있고 동시에 흥미를 유발한다.
💭
이 해당 이미지 페이지는 홈페이지가 맞으나 랜딩페이지로서도 활용 가능하다.
하지만 이 페이지가 홈페이지인지 아닌지, CTA기능이 부족하지 않은지의 의견이 다양했다.
왜냐하면 주관적인 면으로 적용될 수 있기 때문이다.
나는 VIMEO의 특징의 맞게 영상을 배치하여 이목을 끌게 한 점과 다양한 컴포넌트 애니메이션이 흥미로웠다.
그 동시에 가입을 유도하고 있다고 생각하여 선택하였다.
하지만 누군가에게는 이 점이 홈페이지의 역할이라고 생각할 수 있고, CTA기능으로서는 부족하다고 느낄 수 있다.
세션에 대한 분석과 콘텐츠의 위계에 대한 분석을 잘 해내야겠다.
03 ABLY
- 블랙과 화이트를 사용하여 대비감을 주고, 3D 폰트 아트로 어떤 이벤트 인지를 알려주고 있다.
- 91%의 서체 색상을 그라데이션으로 강조하여 큰 혜택 이벤트임을 강조하면서 구매를 촉진시킨다.
- 회원 전용 쿠폰을 통해 가입을 유도하며 오직 이 페이지에서만 얻을 수 있음을 알려준다.
- 럭키박스라는 제품이 다른 제품들과 다르게 특별하게끔 그래픽 요소로 알려주고, 호기심을 자극하여 구매페이지로 유도하고 있다.
- 특별한 세일별, 인기 상품별로 묶어서 각 제품들을 강조하고, 상품 리스트에서도 구매를 유도하고 있음을 보여준다.
Figma 활용법(1) 2주차 강의
프레임과 그룹
✨ 프레임 Frame
피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체이다.
프레임 속에서도 프레임을 계속해서 넣을 수 있기에 컨테이너 Container 라고도 불린다.
개발에 필요한 속성들을 적용할 수 있다.
✨ 그룹 Group
여러 개체를 하나로 묶어주는 기능이다.따라서 한 번에 여러 요소를 담아 움직일 때, 정리 할 필요가 있을 때 사용된다.
코드블록으로 인식되지 않기 때문에 개발에 필요한 속성들을 적용할 수 없다.
숙제 : 오토레이아웃 사용하기
사각형만 보고 도형으로 다 작업하려고 했었다.
그러다 적용이 아예 안되길래 정답 fig 찾아보았는데..
나는 바보다 크크
프레임으로 적용시켜야했는데 도형으로 죄다 해버렸던것이다 ^0^
휴.. 침착하게 다시 잘 해내야지,,
디자인 카타를 통해서 다른 사람들의 의견을 들을 수 있어서 좋았다.
특히, 다양한 시선을 통해 어떻게 느끼는 지 알 수 있었다.
1시간이라는 적은 시간동안 빠르게 찾는 스킬을 익히는 동시에 내가 찾고자 하는 정보를 알아가는 점이 도움이 되는 것 같다.
작업이 느린 나에겐 좋은 시간이라고 생각된다! 조곰 빠듯하게 찾느라 애쓰고 머리 쓰지만..히히
'Product design > 내일배움캠프' 카테고리의 다른 글
| [📝TIL 02_4]10월 마무리, Figma 활용법(1) 마무리 (1) | 2024.10.31 |
|---|---|
| [📝TIL 02_3]커리어 코칭과 3주차 강의 (0) | 2024.10.30 |
| [📝TIL 02_1]10점 만점의 10조, 괜찮아요..? 많이 놀랬조..? (0) | 2024.10.28 |
| [📝KPT 01_5 ]01주 차 주간 회고(10/21-10/25) (3) | 2024.10.25 |
| [📝TIL 01_4]팀 과제 완성과 피드백 (0) | 2024.10.24 |