수석 비주얼 디자이너 Freddierick Mesias와 랜딩 페이지 디자인 Q&A

Instapage에서 우리는 최고의 기대치인 귀하의 기대치를 유지합니다. 우리는 우리 플랫폼이 직관적이고 그들의 캠페인이 더 높은 전환율을 얻는 데 도움이 된다는 많은 마케터들로부터 들었습니다. 우리는 특히 지난 몇 년 동안 우리가 출시한 몇 가지 특정 기능 때문에 디자이너가 우리 빌더를 사용한다는 것을 알고 있습니다.

우리 팀은 사용성 테스트, 조정된 인터뷰 및 NPS 점수에서 디자이너로부터 지속적으로 피드백을 받고 있습니다. 우리는 디자이너의 현재 요구 사항뿐만 아니라 미래의 요구 사항도 충족하는 플랫폼을 계속 구축하기 위해 이러한 피드백을 매우 진지하게 받아들입니다.

수석 비주얼 디자이너인 Freddierick Mesias와 함께 앉아 클릭 후 랜딩 페이지와 Instapage 플랫폼에 대한 경험을 얻었습니다.

BW: 당신의 디자인 배경은 무엇이며 Instapage에서 당신의 역할은 무엇입니까?

FM: 내 디자인 경험 범위는 웹 디자인, 브랜딩, 사용자 인터페이스 디자인입니다. 제가 사용하는 주요 디자인 도구는 Sketch(고충실도 목업 제작용), Adobe Photoshop, Illustrator(아이콘, 사진 편집, 일러스트레이션 등과 같은 클릭 후 랜딩 페이지 시각적 자산 제작용)입니다.

여기 Instapage에서 우리 디자인 팀은 웹 디자인, 일러스트레이션, 브랜드 커뮤니케이션과 같은 다양한 기술 세트로 보완됩니다. 우리의 주요 목표는 시각 자료를 통해 청중과 효과적으로 소통하는 것입니다. 제 역할은 특히 마케팅 팀을 위해 아름답고 전환율이 높은 클릭 후 랜딩 페이지를 디자인하는 것입니다.

BW: Instapage로 클릭 후 랜딩 페이지를 디자인했을 때 첫 경험은 어땠나요?

FM: 저에게는 2016년 11월에 합류했을 때 제품이 이미 상당히 발전했기 때문에 학습 곡선이 많지 않았습니다. Instapage를 처음 시작했을 때 디자이너를 염두에 두고 플랫폼이 구축된 방식에 깊은 인상을 받았습니다. . 빌더는 길을 잃을 수 있는 많은 메뉴 옵션으로 어수선하지 않았습니다.

물론 빌더에는 요소를 정렬하는 데 도움이 되는 녹색 가이더가 있었지만 첫 번째 클릭 후 랜딩 페이지를 디자인했을 때 모바일, 그룹화 및 정렬 기능에 놀랐습니다. 모바일용으로 각 요소를 정렬하고 간격을 두는 대신 이제 항목을 함께 그룹화하고 모바일용 종횡비를 그대로 유지하면서 한 번에 모두 이동할 수 있습니다.

마지막 부분은 인터넷에서 모바일을 더 자주 사용하기 때문에 마케터의 클릭 후 랜딩 페이지를 모바일에 최적화하는 것이 중요하기 때문에 특히 특별합니다. 이 기능을 사용하여 완성된 데스크톱 버전을 클릭 한 번으로 자동으로 모바일로 변환할 수 있었습니다. 이렇게 함으로써 많은 시간을 절약하고 우리 팀을 위해 페이지를 더 빨리 게시할 수 있었습니다.

Instapage의 두 가지 특성을 정의한다면 사용자 정의가 가능하고 고통이 없다고 말할 것입니다.

BW: Instapage를 사용하는 데 얼마나 걸렸나요?

FM: 전혀 길지 않습니다. Instapage의 장점은 디자이너 친화적이라는 것입니다. Sketch, Illustrator 또는 Photoshop과 같은 다른 디자인 도구에 익숙하다면 플랫폼에 익숙해지는 데 아무런 문제가 없습니다.

내가 만든 HubSpot 통합 클릭 후 랜딩 페이지를 가져옵니다. 전체 페이지는 Instapage에서 구성했지만 저는 Photoshop에서 3계층 페이지 그래픽을 만들고 멋진 시각적 구성 요소를 추가한 플랫폼에 삽입했습니다(전체 클릭 후 방문 페이지를 보려면 여기로 이동).

BW: 클릭 후 랜딩 페이지를 만들 때 디자이너가 직면하는 일반적인 불만 사항은 무엇입니까?

FM: 디자이너는 본질적으로 완벽주의자입니다. 우리의 직업은 그 속성에 달려 있습니다. 예를 들어, 어떤 것이 훈련되지 않은 눈에는 완벽하게 정렬된 것처럼 보이지만 그렇지 않더라도 디자이너는 그것이 더 나을 수 있다는 것을 깊이 알게 될 것입니다.

인라인 스타일 편집기 기능이 요소 수준의 사용자 정의 스타일을 변경할 수 있기 때문에 특히 유용한 이유입니다. 텍스트 패딩 변경, 테두리 반경, 줄 높이 등의 모든 것. 더 이상 눈을 볼 필요가 없습니다. 빌더를 사용하면 마지막 픽셀까지 사용자 정의할 수 있으므로 원하는 것을 정확하게 만들 수 있습니다.

(다음은 사용자 지정 스타일을 사용하여 요소를 분리하고 버튼에 그림자 효과를 추가하는 방법의 예입니다.)

BW: 페이지를 디자인할 때 누구와 가장 많이 협업합니까?

FM: 캠페인에 따라 적어도 3~5명의 이해 관계자가 있습니다. 카피라이터 1명, 디자이너 1~2명, 마케팅 리더 1~2명입니다. 카피라이터는 제안의 가치 제안과 주요 이점을 설명하기 위해 몇 가지 설득력 있는 언어를 작성하고 최종 디자인을 위해 사본을 저에게 전달하며 마케팅 리더는 프로젝트를 감독하고 그 과정에서 승인을 내립니다. 또한 클릭 후 랜딩 페이지의 디자인 요구 사항에 따라 때로는 그래픽 디자이너와 대화하여 메시지 전달에 도움이 되는 gif 또는 기타 시각적 개체를 만듭니다.

내가 개발자를 포함하지 않았다는 것을 알 수 있습니다. 매우 드문 경우지만 복잡한 디자인 구현을 위해 개발자를 고용할 것입니다. 협업 솔루션으로 클릭 후 랜딩 페이지를 구축할 때 협업하고 서로에게 피드백을 제공하는 것이 2배 더 효율적이 되었습니다. Slack 또는 타사 도구를 통해 전송된 스크린샷을 사용하는 대신 클릭 후 랜딩 페이지 요소에 핫스팟을 배치하고 필요한 업데이트를 수행하도록 디자이너(카피라이터 또는 다른 이해 관계자)에게 알릴 수 있습니다.

(협업에 대해 자세히 알아보려면 아래에서 핫스팟을 통해 통신하고 마케팅 팀과 페이지를 공유하는 내용을 시청하십시오. 또는 여기로 이동할 수 있습니다.)

BW: 가장 좋아하는 Instapage 기능은 무엇이며 그 이유는 무엇입니까?

FM: 디자이너로서 대답하기는 어렵지만 제가 가장 좋아하는 Instapage 기능은 2017년 6월에 발표한 세 가지 새로운 디자인 기능입니다.

• 에지 측정
• 축 잠금
• 키보드 단축키

내가 아는 대부분의 디자이너는 디자인 프로세스를 보다 효율적으로 만드는 데 사용할 올바른 도구에 항상 굶주려 있습니다. 그러나 픽셀 단위의 완벽한 디자인 작업도 필요합니다. 즉, Instapage가 그렇게 한다고 믿습니다.

Sketch 앱을 사용하는 것과 유사하게 가장자리 측정 및 키보드 단축키가 있습니다. 가장자리 측정은 요소를 픽셀 단위 또는 픽셀 범위로 이동하고 정렬할 수 있기 때문에 특히 좋습니다. 축 잠금을 사용하면 지저분한 가이더를 처리할 필요 없이 X축 또는 Y축을 따라 요소를 매끄럽게 이동할 수 있습니다.

이러한 기능이 결합되어 플랫폼 자체 내에서 아름답고 완벽한 클릭 후 랜딩 페이지를 구축할 수 있습니다. 이제 제한 없이 디자인할 수 있습니다! (에지 측정 및 축 잠금에 대한 자세한 내용은 다음을 확인하십시오.)

클릭 후 랜딩 페이지를 출시한 후 초기 디자인을 최적화하고 반복하는 것은 가장 중요한 단계 중 하나입니다. 여기에서 Instapage A/B 테스트 기능이 유용합니다.

BW: 가장 자랑스러워하는 특정 클릭 후 랜딩 페이지가 있습니까?

FM: 물론이죠! 몇 달 전에 협업 솔루션 출시를 위한 클릭 후 랜딩 페이지를 디자인하고 구축하는 프로젝트가 있었습니다. 저는 팀에 비교적 신참이었기 때문에 브랜드 가이드라인과 스타일 가이드를 배우고 따르는 것이 프로세스에서 큰 역할을 했습니다. 클릭 후 랜딩 페이지를 꽤 쉽게 만들 수 있었고 현재 전환율이 24%라고 자랑스럽게 말할 수 있습니다(전체 페이지를 보려면 여기로 이동).

추가되었으면 하는 디자인 기능이 있습니까?

우리는 항상 고객으로부터 피드백을 구하고 있으며 귀하가 대규모로 전환율이 높은 클릭 후 랜딩 페이지를 만드는 데 도움을 드리고자 합니다. 빌더에 추가되었으면 하는 디자인 기능이 있으면 피드백을 보내주십시오. Capterra, Trustpilot 또는 G2 Crowd에서 Instapage를 검토해 주셔서 감사합니다.

그런 다음 Instapage를 사용하여 100% 사용자 지정 가능한 클릭 후 랜딩 페이지를 만들기 시작하세요. 디자이너 친화적인 플랫폼과 고급 A/B 테스트 기능을 사용하면 잘못될 일이 없습니다. 당신의 전환율은 당신에게 감사할 것입니다. 지금 Instapage Enterprise 데모에 등록하세요.