سطر الموضوع - كيفية الاقتراب من تصميم البريد الإلكتروني

نشرت: 2022-03-11

تقوم نسبة كبيرة من المستهلكين - 99٪ - بفحص بريدهم الإلكتروني كل يوم. تفضل بعض التركيبة السكانية ، بما في ذلك جيل الألفية ، اتصالات البريد الإلكتروني من الشركات على أشكال الاتصال الأخرى ، مثل المكالمات الهاتفية أو الرسائل النصية. ومع وجود أكثر من 5 مليارات حساب بريد إلكتروني نشط حول العالم ، يعد البريد الإلكتروني جزءًا أساسيًا من أي استراتيجية منتج رقمي.

في حين أن هناك الآلاف من تصميمات قوالب البريد الإلكتروني المتاحة للمسوقين ، فإن تصميم البريد الإلكتروني يعد مجالًا مهمًا من مجالات الخبرة لمصممي الويب. هذا ينطبق بشكل خاص على أولئك الذين يرغبون في العمل مع العلامات التجارية الكبرى والشركات الإبداعية وغيرهم ممن يخجلون من القوالب.

هناك العديد من الأشياء التي يجب على المصممين وضعها في الاعتبار عند تصميم رسائل البريد الإلكتروني ، من قيود معظم أنظمة البريد الإلكتروني (مع دعم محدود لأشياء مثل خطوط الويب من أحد أكبرها - Gmail) ، بالإضافة إلى ما يتوقعه المستهلكون عند فتح بريد إلكتروني من الشركة التي قد يتعاملون معها بالفعل.

أهمية تصميم البريد الإلكتروني للجوال

مع فتح ما لا يقل عن نصف رسائل البريد الإلكتروني وقراءتها الآن على الأجهزة المحمولة ، فإنه من غير المسؤول للمصممين تجاهل تصميمات البريد الإلكتروني الملائمة للهاتف المحمول. خاصة مع الأخذ في الاعتبار أن معدلات تحويل البريد الإلكتروني للجوال تميل إلى أن تكون أعلى بكثير من معدلات سطح المكتب.

مثال جيد لتصميم البريد الإلكتروني للجوال
تصميم Krista Swanson على Behance

يجعل تصميم البريد الإلكتروني للجوال هذا من PiperJaffray الأشياء بسيطة وأنيقة. من السهل قراءتها على جهاز محمول بروابط نظيفة وعلامات تجارية دقيقة. إنه يضع احتياجات المستخدم أولاً ، مما يحسن تجربة المستخدم الإجمالية وتصور الشركة.

نصائح تصميم البريد الإلكتروني: اجعله مناسبًا للجوّال.

يحتفظ Dribbble بالبريد الإلكتروني "اللقطات الشعبية" في صلب الموضوع ، مع التركيز كليًا على المحتوى. هذا التركيز يجعل البريد الإلكتروني سهل التنقل على الأجهزة المحمولة. في حين أن التصميم البسيط الذي يركز على المحتوى يعد فكرة جيدة للعديد من أنواع رسائل البريد الإلكتروني ، إلا أنه مناسب تمامًا لرسائل البريد الإلكتروني للجوال حيث يسهل استهلاك المحتوى والتفاعل معه.

التركيز على المحتوى

من أفضل الممارسات ، سواء كان تصميم رسائل البريد الإلكتروني أو غيرها من المنتجات الرقمية ، يجب على المصممين التركيز دائمًا على المحتوى. تأخذ بعض تصميمات البريد الإلكتروني أفضل الممارسات هذه إلى أقصى الحدود مع التصميم البسيط حيث يكون المحتوى هو التصميم.

عند العمل على معظم تصميمات البريد الإلكتروني ، يستفيد المصممون من إنشاء المحتوى أولاً قبل الغوص في التصميم. ومع ذلك ، في التصميمات المبسطة على وجه الخصوص ، من المهم معرفة المحتوى الذي سيكون مقدمًا.

أفضل ممارسات تصميم البريد الإلكتروني: ركز على المحتوى.

تضع Marvel التركيز بشكل مباشر على محتواها بتصميم بسيط. الخلفية البيضاء والصور التي تدعم النص الموجود على الصفحة فقط تجعل المحتوى بارزًا حقًا.

أمثلة على تصميم البريد الإلكتروني: Unsplash

تركز جميع رسائل البريد الإلكتروني الخاصة بـ Unsplash بشكل مباشر على الصور التي تروج لها. يمكن أن يؤدي زر "عرض المجموعة" والتلاشي في الجزء السفلي من الصور إلى زيادة النقرات إلى الموقع ، حيث يترك الأشخاص يرغبون في رؤية المزيد.

تعزيز العلامة التجارية

عندما يصل زائر إلى موقع ويب ، يكون (من الناحية المثالية) تجربة علامة تجارية غامرة. كل شيء تحت سيطرة مصمم الموقع. لكن تصميم البريد الإلكتروني مختلف. يقوم المستخدم بعرض رسائل البريد الإلكتروني داخل تطبيق آخر ، ولا تعرض جميع تطبيقات البريد الإلكتروني جميع رسائل البريد الإلكتروني بشكل متساوٍ.

لهذا السبب ، تعد العلامة التجارية في تصميمات البريد الإلكتروني أمرًا حيويًا لإنشاء التجربة الصحيحة للمستخدم الذي يقرأ البريد الإلكتروني. ومع ذلك ، غالبًا ما تحتاج العلامة التجارية إلى أن تظل بسيطة لتقديمها بفعالية على أجهزة مختلفة وعملاء البريد الإلكتروني لأعلى نسبة من المستخدمين.

الشعار البسيط في الجزء العلوي من البريد الإلكتروني ، باستخدام نفس صور العنوان عبر صور متعددة ، والحفاظ على العديد من العناصر المتسقة من المنتجات الرقمية الأخرى للعلامة التجارية يقطع شوطًا طويلاً نحو دعم وتعزيز تصور العلامة التجارية للمستهلكين.

أنماط تصميم البريد الإلكتروني: العلامات التجارية

العلامة التجارية لـ Everlane بسيطة بطبيعتها عبر رسائل البريد الإلكتروني والموقع الإلكتروني. يتم عرض شعارهم بشكل بارز في الجزء العلوي من هذا البريد الإلكتروني لتعزيز هذه العلامة التجارية.

تخطيط البريد الإلكتروني: علامة تجارية متسقة

يستخدم مشروع Middle Finger صورة رأس متسقة عبر جميع رسائل البريد الإلكتروني الخاصة بهم ، جنبًا إلى جنب مع اللون الأرجواني اللامع. هذا يجعل رسائل البريد الإلكتروني الخاصة بهم قابلة للتعرف على الفور لأي شخص يشترك ، وتستمر العلامة التجارية على موقع الويب.

لفت الانتباه مع اللون

للون تأثير قوي على العقل البشري ، مع القدرة على التأثير في العواطف والتصورات وحتى السلوك. يمكن أن يؤدي استخدام الألوان بشكل فعال في رسائل البريد الإلكتروني إلى زيادة معدلات النقر والتحويل. في بعض الاختبارات ، يمكن أن يؤدي الاختلاف في لون الزر إلى أكثر من 20٪ فرق في معدلات التحويل.

لكنها ليست مجرد دعوات للعمل هي التي تستفيد من استخدام اللون. يمكن أن يكون إنشاء بريد إلكتروني ملون خروجًا عما هو متوقع ويخلق مظهرًا وأسلوبًا مختلفين تمامًا عن رسائل البريد الإلكتروني الأخرى في البريد الوارد للشخص.

تصميم تخطيط البريد الإلكتروني: استخدام الألوان الجريئة للفت الانتباه

إن لفت الانتباه إلى لافتة البيع ذات اللون الأحمر الفاتح تذكرنا بعلامات البيع الواقعية ، والتي غالبًا ما يتم إجراؤها أيضًا بنفس اللون. تنجذب عين القارئ إلى اللون الأحمر على الفور.

تصميم بريد إلكتروني رائع: استخدام الألوان

مقال ، وهو موقع للتجارة الإلكترونية للأثاث الاسكندنافي ، يستخدم مخطط اللون الأحمر والأخضر الصامت ، مع اللون الأحمر الذي يلفت الانتباه إلى الجزء الأكثر أهمية - زر الحث على الشراء للبيع.

اتجاهات تصميم البريد الإلكتروني: ألوان جريئة
تصميم شون دوريس على Behance

بينما تستخدم بعض تصميمات البريد الإلكتروني الألوان كوسيلة لجذب الانتباه إلى جزء معين من المحتوى ، تستخدم هذه الرسالة الإلكترونية من حديقة حيوان هيوستن ألوانًا زاهية لإنشاء تصميم مرح وحيوي. نظام الألوان البرتقالي الزاهي والوردي الساخن ملفت للنظر على الفور وتجذب القارئ.

باستخدام صور مذهلة

البشر مخلوقات بصرية ويمكن للصور المذهلة رفع مستوى البريد الإلكتروني وجذب انتباه القارئ. يمكن أن تعزز الصور أيضًا رسالة البريد الإلكتروني والعلامة التجارية للشركة.

تصميم جميل للبريد الإلكتروني: صور رأسية مذهلة

يبدو أن البرامج التلفزيونية تتمتع بميزة في فئة "الصور المذهلة" ، حيث تستخدم رسالة البريد الإلكتروني هذه من Netflix صورة نابضة بالحياة ولكنها غامضة من Stranger Things . إن الجمع بين الصورة اللافتة للنظر وعبارة "تشغيل" التي تحث المستخدم على اتخاذ إجراء أسفلها مباشرة أمر منطقي من منظور UX ، لأنه يجعل من السهل على القراء مشاهدة العرض الذي تم الترويج له على الفور.

أفضل ممارسات تصميم البريد الإلكتروني: يمكن أن تعمل الرسوم التوضيحية بالإضافة إلى الصور.

لا تقتصر الصور المذهلة على الصور فقط. الرسوم التوضيحية أو الرسوم التوضيحية مثل تلك التي يستخدمها WePresent في رسائل البريد الإلكتروني الخاصة بهم ملفتة للنظر تمامًا مثل الصور ، ويمكن أن تساعد في جذب القراء إلى المحتوى.

مبادئ تصميم البريد الإلكتروني: اجذب الانتباه بصور مذهلة.
تصميم بواسطة Harvs Linarez على Behance

يعرض هذا البريد الإلكتروني Deadliest Catch ، الذي يروج للمسلسل الوثائقي لقناة Discovery ، صورة رأس مذهلة تندمج مع المحتوى الموجود أسفلها. هذه تقنية مفيدة تشجع المشاهد على مواصلة القراءة.

تجربة تخطيطات غير تقليدية

تحتوي العديد من تصميمات البريد الإلكتروني على تنسيق قياسي جدًا: رأس في الجزء العلوي ، ومحتوى عمود واحد ، مع عبارات تحث المستخدم على اتخاذ إجراء بالقرب من الأعلى والأسفل. لكن لا توجد قاعدة تنص على أن على المصممين اتباع هذا النمط المحدد.

تعد التخطيطات غير التقليدية طريقة رائعة لجذب انتباه القارئ وجعله يرغب في قراءة المحتوى. هناك طرق متنوعة لإنشاء تصميمات غير عادية. تتمثل إحدى الطرق الشائعة في استخدام الصور لإنشاء تخطيطات بريد إلكتروني لا تتوافق بالضرورة مع العديد من أنظمة البريد الإلكتروني.

تصميم تخطيط البريد الإلكتروني: تبرز التخطيطات غير التقليدية.

التخطيطات غير التقليدية لا تحتاج بالضرورة أن تكون بعيدة عن الحائط. هذا ، من Mailchimp ، يستخدم تصميمًا من عمودين مع عمود واحد يتم تناوله بواسطة كتل الألوان. ما يجعلها لا تُنسى هو أنها جذابة بصريًا وغير متوقعة.

تخطيط البريد الإلكتروني: استخدم الصور لإنشاء تخطيطات غير تقليدية.
تصميم Piotr Swierkowski على Behance

يسمح استخدام الصور بمزيد من تخطيطات البريد الإلكتروني غير المتوقعة مثل هذا التخطيط لـ KLM. يحتاج المصممون فقط إلى أن يضعوا في اعتبارهم أن بعض عملاء البريد الإلكتروني سيظلون يمنعون الصور من التحميل تلقائيًا ، مما يجعل من الضروري وجود نص احتياطي لا يزال يحصل على جوهر الرسالة.

العمل مع الخطوط

تدعم معظم برامج البريد الإلكتروني الشائعة خطوط الويب ، ولكن لسوء الحظ ، لا تدعم جميعها - يعتبر Gmail هو الاستثناء الأكثر بروزًا (على الرغم من أن Gmail يدعم Roboto و Google Sans كجزء من واجهة Gmail). ومع ذلك ، لا يزال بإمكان المصممين استخدام خطوط الويب طالما أنهم يضعون في اعتبارهم أن عددًا كبيرًا من عملاء البريد الإلكتروني سيستخدمون الخطوط الاحتياطية.

إن البديل لاستخدام خطوط الويب ، بالطبع ، هو استخدام الصور التي تتضمن الخطوط. هذا ما يختاره العديد من مصممي البريد الإلكتروني ، خاصةً في العناوين حيث من المحتمل أن تبدو الخطوط الاحتياطية في غير مكانها.

تصميم قالب البريد الإلكتروني: تجربة الخطوط الممتعة
تصميم Katelyn Steffen على Behance

تستخدم هذه النشرة الإخبارية من FabFitFun خطًا نصيًا ممتعًا لجذب الانتباه إلى المحتوى ، مع إقرانه بمحرف sans serif مقروء للغاية. تعد تجربة مجموعات الخطوط في تصميمات البريد الإلكتروني فكرة رائعة ، ويمكن حتى استخدامها كإجراء تجريبي قبل تغيير الخطوط على موقع ويب أو استخدامها في مواد أخرى تحمل علامات تجارية.

تصميم البريد الإلكتروني: خطوط غير متوقعة تلفت الانتباه.
تصميم Krysta Francoeur على Behance

يستخدم Sickbubble مجموعة متنوعة من الخطوط في تصميم البريد الإلكتروني الخاص بهم ، والتي قد تكون صعبة. لكن في هذه الحالة ، لأنهم يفصلون كل قسم ، فهو يعمل. يتميز خط العرض في الرأس بإحساس شديد الانفعال ، في حين أن النص الأساسي الرئيسي هو عبارة عن نص سهل القراءة بلا وسيط. تعمل الخطوط المكتوبة بخط اليد في قسم العرض الترويجي للمنتج نظرًا لإزاحتها عن نص البريد الإلكتروني.

يلهون مع الرسوم المتحركة

تضيف الرسوم المتحركة اهتمامًا بصريًا إضافيًا إلى رسائل البريد الإلكتروني ، وتجذب انتباه القارئ على الفور. تعد صور GIF المتحركة خيارًا شائعًا لإضافة حركة إلى رسائل البريد الإلكتروني وهي مدعومة من قبل معظم عملاء البريد الإلكتروني.

يجب أن يتأكد المصممون من مراعاة أحجام الملفات عند تضمين أي رسوم متحركة ، حيث يقرأ الكثير من الأشخاص رسائل البريد الإلكتروني على الأجهزة المحمولة. يجب عليهم أيضًا التأكد من أن الرسوم المتحركة تدعم المحتوى وليست مجرد حشو.

نصائح تصميم البريد الإلكتروني: تأكد من أن الرسوم المتحركة تعزز المحتوى.

يعد استخدام صور GIF المتحركة لتوجيه نقطة إلى المنزل أو توضيح المحتوى المقدم بطريقة ممتعة بشكل أفضل إضافة رائعة لتصميم البريد الإلكتروني ، كما في مثال البريد الإلكتروني هذا من Product Hunt.

تصميم البريد الإلكتروني للجوال: تضيف صور GIF المتحركة اهتمامًا بصريًا.

يستخدم The Hustle صورة GIF متحركة في رسائل البريد الإلكتروني الخاصة بهم لتوضيح نقطة الرسالة ولإضافة اهتمام بصري إلى تصميم بريد إلكتروني بسيط بخلاف ذلك.

دعوات إلى العمل

يمكن القول إن عبارة الحث على اتخاذ إجراء هي أهم جزء في أي بريد إلكتروني ترسله الشركة تقريبًا. يتم إرسال معظم رسائل البريد الإلكتروني لاتخاذ إجراء سريع ، سواء كان هذا الإجراء هو قراءة مقال أو شراء منتج أو أداء سلوك آخر.

يتم تقديم المصممين جيدًا لإيلاء اهتمام وثيق لتصميم عباراتهم التي تحث المستخدم على اتخاذ إجراء ، بالإضافة إلى إجراء اختبار A / B عليهم لضمان تحسين الأداء.

تصميم البريد الإلكتروني: دعوات إلى العمل

إن استخدام لون ساطع للعبارة التي تحث المستخدم على اتخاذ إجراء ، كما فعل Litmus هنا ، يجعله متميزًا عن بقية المحتوى. يجب على المصممين التفكير في تجربة ألوان مختلفة لمعرفة الألوان التي تناسب جمهورهم بشكل أفضل من خلال استخدام اختبارات A / B عند إرسال حملات البريد الإلكتروني.

تصميم قالب البريد الإلكتروني: ألوان متباينة للعبارات التي تحث المستخدم على اتخاذ إجراء

إن استخدام لون مختلف تمامًا عن باقي محتوى البريد الإلكتروني للحث على اتخاذ إجراء يجعله مميزًا. نظرًا لأن اللون الأخضر الليموني الموجود في البريد الإلكتروني الخاص بـ Campaign Monitor هو لون مكمل منقسم للأرجواني الذي يشكل الخلفية ، فإنه يبرز دون تصادم.

انتبه إلى أفضل ممارسات التصميم عبر البريد الإلكتروني

في حين أن هناك متسعًا كبيرًا للإبداع والتجريب في تصميم البريد الإلكتروني ، يحتاج المصممون أيضًا إلى مراعاة أفضل الممارسات والقيود الخاصة بالوسيلة.

من أهم خطوات تصميم البريد الإلكتروني اختبار رسائل البريد الإلكتروني في مجموعة متنوعة من منصات البريد الإلكتروني قبل إرسالها. في حين أنه من المحتمل أن تكون هناك اختلافات صغيرة بينهما ، وهناك دائمًا أشخاص سيستخدمون أنظمة أساسية أقل شيوعًا تعرض التصميمات بشكل مختلف ، فمن الذكاء التأكد من ظهور رسائل البريد الإلكتروني بشكل مقبول لمعظم المستخدمين.

هناك العديد من خدمات اختبار البريد الإلكتروني التي يمكن للمصممين استخدامها لمعرفة كيف ستبدو رسائل البريد الإلكتروني الخاصة بهم عبر مجموعة متنوعة من منصات البريد الإلكتروني. Litmus هو أحد أكثر الخيارات شيوعًا ، لكن الخيارات الأخرى مثل Mailgun و Email on Acid و Mailtrap و Preview My Email تستحق أيضًا التحقق لمعرفة أيها يلبي احتياجات كل مشروع بشكل أفضل.

علاوة على ذلك ، فإن مراعاة أحجام الصور واستخدام النطاق الترددي أمر ضروري نظرًا لعدد رسائل البريد الإلكتروني المفتوحة على الأجهزة المحمولة. تعتبر التصميمات المتجاوبة ضرورة تقريبًا لنفس السبب.

سيكون من السهل على الأشخاص قراءتها على أي جهاز أفضل تصميمات البريد الإلكتروني ، والأهم من ذلك أنها ستحثهم على النقر فوق عبارة الحث على اتخاذ إجراء في البريد الإلكتروني (أو القيام بأي إجراء مطلوب). إن اتباع أفضل ممارسات تصميم البريد الإلكتروني هذه يمنح مصممي الويب ميزة في إنشاء رسائل بريد إلكتروني تقوم بذلك بشكل فعال.

• • •

مزيد من القراءة على مدونة Toptal Design:

  • التجربة هي كل شيء - دليل UX النهائي
  • هل كل الاتجاهات تستحق العناء؟ أكثر 5 أخطاء UX شيوعًا يرتكبها المصممون
  • واجهة المستخدم مقابل UX - استكشف الاختلافات الجوهرية [معلومات رسومية]
  • مبادئ تصميم تجربة المستخدم المحمولة وأفضل الممارسات
  • الدليل الأساسي لاستخدام الهاتف المحمول