제목 – 이메일 디자인에 접근하는 방법

상당한 비율의 소비자( 99% )가 매일 이메일을 확인합니다. 밀레니얼 세대를 포함한 일부 인구 통계는 전화나 문자와 같은 다른 형태의 커뮤니케이션보다 회사의 이메일 커뮤니케이션을 선호합니다. 그리고 전 세계적으로 50억 개 이상의 이메일 계정이 활성화되어 있으므로 이메일은 모든 디지털 제품 전략의 필수적인 부분입니다.

마케팅 담당자가 사용할 수 있는 이메일 템플릿 디자인은 수천 가지가 있지만 이메일 디자인은 웹 디자이너에게 중요한 전문 분야입니다. 더 큰 브랜드, 크리에이티브 회사 및 템플릿을 꺼리는 다른 사람들과 함께 작업하려는 사람들에게 특히 그렇습니다.

디자이너는 이메일을 디자인할 때 대부분의 이메일 플랫폼의 한계(가장 큰 것 중 하나인 Gmail의 웹 글꼴에 대한 지원이 제한적임), 소비자가 이메일을 열 때 기대하는 것 등 여러 가지를 염두에 두어야 합니다. 이미 비즈니스를 하고 있는 회사입니다.

모바일 이메일 디자인의 중요성

모든 이메일의 최소 절반이 이제 모바일 장치에서 열리고 읽히는 상황에서 디자이너가 모바일 친화적인 이메일 디자인을 무시하는 것은 무책임한 일입니다. 특히 모바일 이메일 전환율이 데스크톱 비율보다 훨씬 더 높은 경향이 있다는 점을 고려할 때.

PiperJaffray의 이 모바일 이메일 디자인은 단순하고 우아하게 유지됩니다. 깔끔한 링크와 미묘한 브랜딩으로 모바일 장치에서 읽기 쉽습니다. 사용자의 요구를 최우선으로 하여 전반적인 사용자 경험과 회사에 대한 인식을 개선합니다.

Dribbble은 "인기 사진" 이메일을 요점만 유지하고 전적으로 콘텐츠에 초점을 맞춥니다. 이 초점을 통해 모바일 장치에서 이메일을 쉽게 탐색할 수 있습니다. 콘텐츠에 중점을 둔 단순한 레이아웃은 여러 유형의 이메일에 좋은 아이디어이지만 콘텐츠를 소비하고 콘텐츠와 상호 작용하기가 더 쉬운 모바일 이메일에 특히 적합합니다.

콘텐츠에 집중하기

이메일을 디자인하든 다른 디지털 제품을 디자인하든 디자이너는 항상 콘텐츠에 집중해야 합니다. 일부 이메일 디자인은 콘텐츠 가 디자인인 미니멀리스트 디자인으로 이 모범 사례를 극단적으로 활용합니다.

대부분의 이메일 디자인을 작업할 때 디자이너는 디자인에 뛰어들기 전에 먼저 콘텐츠를 생성하는 것이 좋습니다. 그러나 특히 미니멀리스트 디자인에서는 콘텐츠가 무엇인지 아는 것이 훨씬 더 중요합니다.

Marvel은 미니멀한 디자인으로 콘텐츠에 중점을 둡니다. 페이지의 텍스트만 지원하는 흰색 배경과 이미지는 콘텐츠를 돋보이게 합니다.

Unsplash의 모든 이메일은 홍보하는 이미지에 정확히 초점을 맞춥니다. "컬렉션 보기" 버튼과 이미지 하단의 페이드 기능은 사람들이 더 많은 것을 보고 싶게 만들므로 사이트에 대한 클릭률을 높일 수 있습니다.

브랜딩 강화

방문자가 웹사이트에 도착하면 (이상적으로는) 몰입형 브랜딩 경험이 됩니다. 모든 것은 웹사이트 디자이너의 통제 하에 있습니다. 하지만 이메일 디자인은 다릅니다. 사용자는 다른 앱 내에서 이메일을 보고 있으며 모든 이메일 앱이 모든 이메일을 동일하게 렌더링하는 것은 아닙니다.

이 때문에 이메일 디자인의 브랜딩은 이메일을 읽는 사용자에게 올바른 경험을 제공하는 데 매우 중요합니다. 그러나 브랜딩은 다양한 장치와 이메일 클라이언트에서 가장 높은 비율의 사용자에게 효과적으로 렌더링하기 위해 단순하게 유지되어야 하는 경우가 많습니다.

이메일 상단에 있는 단순한 로고, 여러 이미지에 걸쳐 동일한 헤더 이미지를 사용하고 브랜드의 다른 디지털 제품과 일관된 많은 요소를 유지하는 것은 소비자에게 브랜드의 인식을 지원하고 강화하는 데 큰 도움이 됩니다.

Everlane의 브랜딩은 본질적으로 이메일과 웹사이트 전반에 걸쳐 단순합니다. 이 이메일 상단에 눈에 띄게 표시된 로고는 그 브랜드를 강화합니다.

Middle Finger Project는 밝은 보라색 악센트 색상과 함께 모든 이메일에 일관된 헤더 이미지를 사용합니다. 이렇게 하면 구독하는 모든 사람이 이메일을 즉시 알아볼 수 있으며 웹사이트에서 브랜딩이 계속됩니다.

색상으로 관심 끌기

색상은 감정, 지각, 심지어 행동에 영향을 미치는 능력으로 인간의 마음에 강한 영향을 미칩니다. 이메일에서 색상을 효과적으로 사용하면 클릭률과 전환율을 높일 수 있습니다. 일부 테스트에서는 버튼 색상의 차이로 인해 전환율이 20% 이상 차이가 날 수 있습니다.

그러나 색상 사용의 이점은 행동 유도만이 아닙니다. 다채로운 이메일을 만드는 것은 예상과 다를 수 있으며 사람의 받은 편지함에 있는 다른 이메일과 완전히 다른 모양과 느낌을 만들 수 있습니다.

밝은 레드 컬러의 세일 현수막이 눈길을 사로잡는 것은 실제 판매 사인을 연상케 하며, 종종 같은 색상으로 연출되기도 합니다. 독자의 눈은 즉시 붉어집니다.

스칸디나비아 가구 전자 상거래 사이트인 Article은 차분한 빨강 및 녹색 색상 구성표를 사용하며 빨강은 가장 중요한 부분인 판매 클릭 유도문안 버튼에 주의를 기울입니다.

일부 이메일 디자인은 콘텐츠의 특정 부분에 주의를 끌기 위해 색상을 사용하지만, 휴스턴 동물원의 이 이메일은 밝은 색상을 사용하여 재미있고 활기찬 디자인을 만듭니다. 밝은 오렌지와 핫핑크의 배색은 단숨에 시선을 사로잡으며 독자를 끌어들입니다.

멋진 이미지 사용하기

인간은 시각적인 존재이며 놀라운 이미지는 이메일을 돋보이게 하고 독자의 관심을 끌 수 있습니다. 이미지는 또한 이메일의 메시지와 회사 브랜드를 강화할 수 있습니다.

TV 프로그램은 "놀라운 이미지" 카테고리에서 우위를 점하고 있는 것 같습니다. 이 Netflix 이메일은 기묘한 이야기 의 생생하면서도 신비로운 스틸을 사용합니다. 눈길을 사로잡는 이미지와 바로 아래에 있는 "재생" 클릭 유도문안을 결합하면 UX 관점에서 의미가 있습니다. 독자가 홍보된 쇼를 즉시 쉽게 볼 수 있기 때문입니다.

멋진 이미지는 사진에만 국한되지 않습니다. WePresent가 이메일에 사용하는 것과 같은 만화나 삽화는 사진만큼이나 눈길을 사로잡으며 독자를 콘텐츠로 끌어들이는 데 도움이 될 수 있습니다.

디스커버리 채널 다큐멘터리 시리즈를 홍보하는 이 Deadliest Catch 이메일은 아래 콘텐츠에 녹아드는 멋진 헤더 이미지를 표시합니다. 이것은 보는 사람이 계속 읽을 수 있도록 하는 유용한 기술입니다.

틀에 얽매이지 않는 레이아웃 실험하기

많은 이메일 디자인은 상단에 헤더, 단일 열 콘텐츠, 상단과 하단에 클릭 유도문안이 있는 꽤 표준적인 형식을 가지고 있습니다. 그러나 디자이너가 특정 패턴을 따라야 한다는 규칙은 없습니다.

틀에 얽매이지 않는 레이아웃은 독자의 관심을 끌고 콘텐츠를 읽고 싶게 만드는 좋은 방법입니다. 특이한 디자인을 만드는 방법은 다양합니다. 널리 사용되는 방법 중 하나는 이미지를 사용하여 많은 이메일 플랫폼과 반드시 ​​호환되지 않는 이메일 레이아웃을 만드는 것입니다.

틀에 얽매이지 않는 레이아웃이 반드시 벽에서 떨어져 있을 필요는 없습니다. Mailchimp의 이 디자인은 색상 블록이 한 열을 차지하는 2열 디자인을 사용합니다. 기억에 남는 것은 시각적으로 매력적이며 예상치 못한 것입니다.

이미지를 사용하면 KLM에 대해 이와 같은 예상치 못한 이메일 레이아웃을 더 많이 사용할 수 있습니다. 디자이너는 일부 이메일 클라이언트가 여전히 이미지 자동 로드를 차단하므로 메시지의 요지를 여전히 전달하는 대체 텍스트가 있어야 한다는 점을 염두에 두면 됩니다.

글꼴 작업

가장 널리 사용되는 이메일 클라이언트는 웹 글꼴을 지원하지만 불행히도 모든 것이 지원되는 것은 아닙니다. Gmail이 가장 눈에 띄는 예외입니다(Gmail은 Gmail 인터페이스의 일부로 Roboto 및 Google Sans를 지원하지만). 그러나 디자이너는 많은 수의 이메일 클라이언트가 대체 글꼴을 사용할 것이라는 점을 염두에 두는 한 웹 글꼴을 계속 사용할 수 있습니다.

물론 웹 글꼴을 사용하는 것의 대안은 글꼴이 포함된 이미지를 사용하는 것입니다. 많은 이메일 디자이너가 특히 폴백 글꼴이 부적절하게 보일 수 있는 헤더에서 선택하는 방식입니다.

이 FabFitFun 뉴스레터는 재미있는 스크립트 글꼴을 사용하여 내용에 주의를 집중시키는 동시에 가독성이 높은 산세리프 서체와 결합합니다. 이메일 디자인에서 글꼴 조합을 실험하는 것은 좋은 생각이며 웹사이트에서 서체를 변경하거나 다른 브랜드 자료에서 사용하기 전에 시험 실행으로 사용할 수도 있습니다.

Sickbubble은 이메일 디자인에 다양한 글꼴을 사용하므로 까다로울 수 있습니다. 하지만 이 경우에는 각 섹션을 분리하기 때문에 작동합니다. 헤더의 디스플레이 글꼴은 매우 날카로운 느낌을 주는 반면 본문 텍스트는 읽기 쉬운 산세리프체입니다. 제품 프로모션 섹션의 필기체 글꼴은 이메일 본문에서 오프셋되어 있기 때문에 작동합니다.

애니메이션으로 즐기기

애니메이션은 이메일에 시각적인 흥미를 더하고 즉시 독자의 시선을 사로잡습니다. 애니메이션 GIF는 이메일에 움직임을 추가하는 데 널리 사용되며 대부분의 이메일 클라이언트에서 지원됩니다.

많은 사람들이 모바일 장치에서 이메일을 읽기 때문에 디자이너는 애니메이션을 포함할 때 파일 크기를 염두에 두어야 합니다. 또한 애니메이션이 콘텐츠를 지원하고 단순한 필러가 아님을 확인해야 합니다.

Product Hunt의 이 이메일 예에서와 같이 애니메이션 GIF를 사용하여 포인트를 유도하거나 재미있는 방식으로 제시된 콘텐츠를 더 잘 설명하는 것은 이메일 디자인에 환상적인 추가 기능입니다.

Hustle은 이메일에 애니메이션 GIF를 사용하여 메시지의 요점을 설명하고 미니멀한 이메일 디자인에 시각적인 흥미를 더합니다.

행동 촉구

클릭 유도문안은 회사에서 보내는 거의 모든 이메일에서 틀림없이 가장 중요한 부분입니다. 대부분의 이메일은 기사 읽기, 제품 구매 또는 기타 행동 수행 여부에 관계없이 즉각적인 조치를 취하기 위해 전송됩니다.

디자이너는 클릭 유도문안의 디자인에 세심한 주의를 기울이고 성능 최적화를 위해 A/B 테스트를 수행할 수 있습니다.

Litmus가 여기에서 한 것처럼 클릭 유도문안을 위해 밝은 색상을 사용하면 나머지 콘텐츠와 차별화됩니다. 디자이너는 이메일 캠페인을 보낼 때 A/B 테스트를 사용하여 청중에게 가장 적합한 색상을 확인하기 위해 다양한 색상을 실험하는 것을 고려해야 합니다.

클릭 유도문안을 위해 이메일의 나머지 내용과 완전히 다른 색상을 사용하여 눈에 띄게 만듭니다. Campaign Monitor의 이메일에 있는 라임 그린은 배경을 구성하는 보라색에 분할된 보색이기 때문에 충돌하지 않고 눈에 띕니다.

이메일 디자인 모범 사례에 주의를 기울이십시오

이메일 디자인에는 창의성과 실험을 위한 여지가 많이 있지만 디자이너는 매체의 모범 사례와 한계도 염두에 두어야 합니다.

이메일 디자인에서 가장 중요한 단계 중 하나는 이메일을 보내기 전에 다양한 이메일 플랫폼에서 이메일을 테스트하는 것입니다. 그들 사이에는 약간의 변형이 있을 수 있고 디자인을 다르게 렌더링하는 덜 일반적인 플랫폼을 사용하는 사람들이 항상 있지만 대부분의 사용자에게 이메일이 적절하게 표시되도록 하는 것이 현명합니다.

디자이너가 다양한 이메일 플랫폼에서 이메일이 어떻게 보이는지 확인하는 데 사용할 수 있는 여러 이메일 테스트 서비스가 있습니다. Litmus는 가장 인기 있는 옵션 중 하나이지만 Mailgun, Email on Acid, Mailtrap 및 Preview My Email과 같은 다른 옵션도 각 프로젝트의 요구 사항을 가장 잘 충족하는 옵션을 확인할 가치가 있습니다.

그 외에도 모바일 장치에서 여는 이메일의 수로 인해 이미지 크기와 대역폭 사용량을 염두에 두는 것이 중요합니다. 같은 이유로 반응형 디자인은 사실상 필수입니다.

최고의 이메일 디자인은 사람들이 어떤 기기에서든 쉽게 읽을 수 있으며 가장 중요한 것은 이메일에서 클릭 유도문안을 클릭하라는 메시지를 표시합니다(또는 요청된 모든 작업을 수행). 이러한 이메일 디자인 모범 사례를 따르면 웹 디자이너는 이를 효과적으로 수행하는 이메일을 만드는 데 유리합니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 경험이 전부입니다 – 최고의 UX 가이드
• 모든 트렌드가 가치가 있습니까? 디자이너가 저지르는 가장 흔한 5가지 UX 실수
• UI 대 UX – 핵심 차이점 탐색 [인포그래픽]
• 모바일 UX 디자인 원칙 및 모범 사례
• 모바일 사용성을 위한 기본 가이드