랜딩 페이지 디자인

랜딩 페이지 > 반응형이 주된 트렌드

모바일 사용자가 늘어나는 추세이기 때문에 반응형이 필요하다. 여기에 코딩이 더해지기 때문에 어려워 진다.

반응형 웹 모음 사이트

브라우저 크기에 따라 레이아웃이 변경되게 설정하고 디자인 하는게 반응형 디자인 (모바일, 태블릿, pc ...)

brack point (중단점)

반응형으로 변경할 때 바뀌는 부분을 이야기 한다. (pc : 1024 + / 태블릿 : 1023 - 768 / 모바일 : 767 - 320 (375))

기본적으로 모바일과 태블릿 둘다 세로상태를 기준으로 한다.

- 랜딩 페이지

: 1페이지 짜리 홈페이지, 브랜드나 상품의 명함이라고도 할 수 있다. 판매자가 원하는 정보를 사용자에게 좀 더 직접적으로 전할 수 있도록 허고 사용자가 여러번 찾는것이 아닌 한번에 찾도록 하여서 마케팅적으로 많이 사용한다.

랜딩 페이지에선 홍보 뿐만아니라 정보를 전달하고, 사용자가 원하는 정보를 얻을 수 있도록 유도하는 것이다.

내비게이션 바 - 유저가 주로 사용하고 찾게 되는 메뉴를 상단에 두는것

디자인은 pc 부터 코딩은 모바일부터 진행한다. (디자인은 크기를 줄이면서 맞추면 되기 때문에)

사이즈에 따라 칼럼 그리드를 계속 바꾸어 주면서 진행한다. (짝수로 설정하는것이 배치에도 편하다. (주로 4배수))

콘텐츠를 표기하는 모니터의 사이즈가 각각 다르기 때문에 그리드를 만들어 준 후 캔버스 사이즈를 원하는 여백만큼 늘려서 진행해준다. (디자인이 너무 좁아보이지도 않고 수정에 용이하다.)

디자인을 할때 사용자에게 눈이 쉴 공간을 주는것이 중요

문단사이 여백조정 (칸수 맞춰주기) / 해당 사진은 10px씩 여백을 넣어주었다.

📍 모든 작업물은 반복, 정렬, 배치

디자이너의 역할은 사용자에게 알맞은 디자인을 하고 사용자가 사용했을때의 사항까지 고려하여 만들어 놓는것이다.

팝업창 같이 사용자가 행동을 하였을때 이어질 상황까지 생각해 제작을 해야한다.

퍼블리셔에게 디자인이 넘어갈때 디자이너의 의도를 알릴 수 있고 조율이 가능해진다.

내용이 많은 랜딩, 상세페이지 같은 작업물들은 텍스트 박스를 만들어서 작업하는것이 수정이나 배치에 용이하다.

< 텍스트 레이어 _ 우클릭 _ convert to paragraph text>

랜딩페이지 제작

웹, 앱 홍보 랜딩페이지 / 구매 랜딩페이지 등등의 종류가 있다. 사용자, 구매자에게 이어지도록 하는것이 랜딩 페이지 이며 니즈에 유도되도록 만들어야 한다. (특별한 이벤트나 선착순, 신규 가입자 혜택 등 사람들이 눌러 볼 수 있게끔)

이때 중요한 것이 foam 창인데 사용자의 정보를 기입하도록 하여서 해당 사이트 가입자나 상품 구매자를 늘리는것이 포인트. 디자인이 익숙하지 않다면 단순하게 작업하기 (레이아웃이 간단해야 코딩 작업시 쉽다.)

- 랜딩 페이지 제작과정 : 주제 정하기 - 내용 스케치 (와이어 프레임 + pc > teb > phone) - 사용자에게 이어질 창 만들기 (foam창을 랜딩페이지에 넣었다면 팝업창을 만들 필요는 없다.)

폰트는 최소 14픽셀 이하로 내려가지 않도록해야 한다. (연령대에 따라 글자크기가 달라진다. 사용자 연령이 높을경우 16-18px로 설정한다.) 본문 서체 16px 이상 잡는것이 안정적 중요하지 않는 내용은 12-14px 정도로 설정

모바일 디자인시 430-375 정도의 사이즈로 진행된다. 태블릿에서 모바일로 넘어갈 경우 중간단계 500-600 정도의 사이즈에서 문제가 발생한다

✔ 검사받기 - 내용 1-3행까지 , 아이콘 하나라도 넣기(자리는 비워놓기), 폼태그 넣기.

갈무리