오늘 복사할 수 있는 20가지 멋진 팝업 디자인 예

이메일 팝업이 이메일 목록을 두 배로 늘릴 수 있다는 것을 알고 계셨습니까?

Wisepops 고객이보고 한 평균 결과입니다.

이메일 목록도 두 배로 늘어나면 좋지 않을까요? 괜찮다면 팝업을 사용하여 웹사이트 방문자에게 연결할 때입니다. 취해야 할 첫 번째 단계: 매력적인 팝업 디자인을 만드는 요소를 배우는 것입니다.

다음은 시작하는 데 도움이 되는 20가지 아름다운 팝업 디자인 예입니다.

1부: 데스크탑 이메일 팝업 디자인

데스크톱 이메일 캡처 팝업부터 시작하겠습니다(데스크톱 팝업과 모바일 팝업을 분리하는 이유가 궁금하십니까? 두 번째 부분에서 그 이유를 설명하겠습니다).

이 선택 항목에는 모든 종류의 옵트인 팝업 디자인 예제가 포함되어 있습니다. 하지만 우리는 멋진 팝업을 만들기 위해 수석 디자이너가 필요하지 않다는 것을 증명하기 위해 간단한 예제로 시작하고 싶었습니다.

Flight Club: 직관적인 팝업

Flight Club의 이 팝업 예제는 배경 영상이 없는 흑백입니다. 디자인은 웹 사이트의 전체 색상 팔레트에 맞아 자연스러워 보입니다. 제안은 매우 명확하며 클릭 유도문안도 마찬가지입니다. 그것이 바로 포인트 팝업이라고 부르는 것입니다.

Weebly: 방해가 되지 않고 매력적입니다.

Weebly의 팝업 디자인 예제에서 흥미로운 점은 막대 형식입니다. 이 형식을 사용하면 팝업이 항상 표시됩니다.

우리의 경험에 따르면 바의 구독률은 팝업보다 낮습니다. 그러나 대조되는 색상과 매력적인 텍스트를 제공하면 많은 방문자의 관심을 끌 수 있습니다.

Peter Shankman: 미묘한 슬라이드인 팝업

인플루언서 Peter Shankman은 사용자가 아래로 스크롤할 때 나타나는 미묘한 슬라이드인 팝업을 디자인했습니다. 이 팝업 디자인은 방해가 되지 않으며 방문자를 매우 잘 끌어들이는 역할을 합니다.

Nike: 단순하지만 효과적인

이메일 외에 방문자로부터 더 많은 정보를 수집하고 싶으십니까? 더 많은 필드는 방문자에게 방해가 될 수 있습니다. 그러나 팝업을 디자인하는 동안 사용자 경험을 염두에 두어 이를 방지할 수 있습니다. Nike의 팝업 예제는 간단하고 효과적인 방법으로 수행할 수 있는 방법을 보여줍니다.

MeUndies: 정말 튀는 팝업

이제 다채로운 팝업 디자인을 살펴보겠습니다. MeUndies의 이 팝업은 주의를 끌고 창의적이며 매력적입니다. 이 팝업 디자인에는 시각적 요소에서 색상 선택, 그리고 막 튀어나온 CTA에 이르기까지 모든 것이 맞습니다.

Volusion: 커뮤니티 반영

제품 사진을 사용하는 것이 문제일 때(대부분의 SaaS가 이 상황에 있음) 커뮤니티에서 사진을 선택하는 것이 어떻습니까? 이것이 Volusion이 이 이메일 캡처 팝업 디자인에서 한 일입니다.

Livechat: 장난스러운 일러스트레이션

팝업 디자인에 일러스트레이션을 사용하는 것도 좋은 방법입니다. 확실히 캠페인을 돋보이게 만들고 장난기를 더할 수 있습니다. 다음은 LiveChat 블로그에 있는 멋진 팝업 예시입니다.

KlientBoost: 일러스트레이션을 더욱 발전시키다

KlientBoost는 이 캠페인을 위해 사내 디자이너로부터 약간의 도움을 받은 것 같습니다. 창의적인 일러스트가 팝업 디자인에 재미를 더합니다. 사람들에게 뉴스레터 구독을 요청하는 멋진 방법입니다!

Kelly Harrop: 즉시 사용 가능한 디자인

다음은 매우 창의적인 팝업 디자인의 또 다른 예입니다. 카피가 매력적이며 대조되는 색상과 잘린 모양 덕분에 클릭 유도문안이 눈길을 끕니다.

Carbon 38: 화면 침범

이 팝업 예제는 더 나아갑니다. 둥근 팝업(팝업 디자인에서 보기 드문 모양)은 오른쪽 모델에서 강조 표시됩니다. 전체 화면 팝업으로 방문자의 시선을 효과적으로 사로잡습니다.

Frank Body: 브랜드 개성을 사용하십시오

"바지 벗고 첫 구매 시 10% 할인" - 이 창의적이고 시선을 사로잡는 헤드라인은 Frank Body의 어조와 일치합니다. 나머지 텍스트는 동일한 전략을 따르며 브랜드의 기발하고 쾌활한 성격을 지원합니다.

Taylor Stitch: 거대한 영웅 이미지 사용

당신은 Taylor Stitch의 웹사이트를 검색하고 있습니다. 그리고 굉장합니다. 당신은 밖에 서서 아름다운 산맥을 바라보고 있습니다. 네, 그런 일은 일어나지 않았습니다(연구실의 사람들은 여전히 ​​순간이동에 대해 연구 중입니다). 하지만 이 팝업 디자인은 그 효과를 아름답게 만듭니다. 전체 화면 형식과 놀라운 배경 이미지는 놀라운 조합입니다.

파트 2: 모바일 이메일 팝업 디자인

트래픽의 절반 이상이 모바일인 세상에서 모바일 기기에 맞는 팝업 마케팅 전략이 필요합니다.

그리고 모바일 전면 광고에 관한 Google의 가이드라인을 사용하면 반응형 콘텐츠를 만드는 작업만 할 수 없습니다.

Patagonia: 단순하게 유지

가능한 가장 간단한 팝업 예제부터 시작하겠습니다: 밝은 배경에 검은색 복사. Patagonia는 방문자가 방문 페이지 콘텐츠에 액세스하고 동일한 색상 팔레트를 사용하는 것을 방지하는 팝업을 통해 Google 가이드라인을 준수합니다.

Timberland: 색상을 선택적으로 사용

Timberland는 Patagonia와 동일한 디자인을 따랐습니다. 유일한 차이점은 브랜드가 웹사이트의 스타일을 유지하면서 색상을 조금 더 추가했다는 것입니다.

개막식: 이메일 구독자를 위한 콘텐츠 관련성 높이기

이 팝업 디자인은 데스크탑 팝업을 생각나게 합니다. 이메일 필드 외에도 방문자가 선호하는 패션(남성, 여성 또는 둘 다)을 선택할 수 있습니다. 구독자에게 관련 콘텐츠를 보낼 수 있는 좋은 방법입니다.

Vans: CTA를 사용하여 더 많은 공간 만들기

더 큰 모바일 팝업을 표시하고 Google을 만족시킬 수 있는 방법이 있습니다. 팝업을 표시하기 전에 클릭 유도문안을 추가하는 것입니다. 이것이 Vans가 이 팝업 예제에서 수행한 작업입니다. 방문 페이지의 오른쪽 하단에 있는 탭을 확인하세요. 똑똑한.

OverstockArt: 핵심 이점 강조

이 팝업 디자인(어두운 배경과 밝은 텍스트)은 주요 이점을 명확하게 합니다. "지금 20% 할인 받기"와 대조되는 CTA 버튼은 방문자가 행동에 대한 소유권을 갖도록 권장합니다.

Master Dynamic: 밝은 색상을 사용하여 눈에 띄게 만듭니다.

Master Dynamic은 이 웹사이트 팝업 디자인을 만들 때 어려움에 직면했습니다. 브랜드 웹사이트는 이미 강렬한 색상을 사용하고 있으며, 구독을 생성하려면 팝업이 눈에 띄어야 했습니다. 이 문제에 대한 탁월한 해결책은 대비되는 밝은 노란색을 사용하는 것이었습니다.

Not Pot: 사이트 디자인 미러링

웹사이트의 비주얼과 디자인에 어울리는 팝업 디자인을 찾고 계시다면 바로 여기입니다. 사이트와 팝업 모두 인상적입니다. 디자인 일관성은 팝업을 웹사이트의 일부처럼 보이게 합니다. 팝업의 제목인 'Not Spam'도 브랜드 이름과 일맥상통합니다.

마무리

이 팝업 디자인 예제가 귀하에게 흥미롭고 영감을 주었기를 바랍니다.

하지만… 디자인은 퍼즐의 한 조각일 뿐입니다. 가능한 한 효과적이려면 캠페인에 강력한 카피와 좋은 제안이 필요합니다. 이러한 요소를 함께 사용하면 리드와 전환을 생성하는 고성능 캠페인을 만들 수 있습니다.

첫 번째 팝업 디자인을 만들고 싶습니까? Wisepops(14일 무료 평가판, 신용 카드 필요 없음)에 가입하여 5분 이내에 첫 번째 팝업을 만드십시오.