6 اتجاهات لتصميم الويب تعمل على تغيير مظهر التسويق
نشرت: 2016-11-08حدثت الكثير من الأحداث المهمة في عام 2010.
تم افتتاح أطول مبنى في العالم رسميًا في دبي ، وأطلق Space X بنجاح Dragon Capsule ، وأصدرت Apple جهاز iPad ، وأنشأ Ethan Marcotte تصميم ويب سريع الاستجابة.
لقد قطعنا شوطًا طويلاً من صفحات الويب التي كان الغرض الوحيد من تصميمها هو إبهار الزائرين بعرض ملون للصور ، مثل هذا:
يركز تصميم الويب الآن على الوظائف وتجربة المستخدم. ولماذا لا يكون ذلك عندما يعتبر 46.1٪ من الناس التصميم معيارًا رئيسيًا لتحديد مصداقية العمل.
انقر للتغريد
يتمتع تصميم الصفحة المقصودة بعد النقر بنفس القوة. في الواقع ، كان برنامج Numara قادرًا على تحسين معدل تحويل النموذج بنسبة مذهلة بلغت 133٪ فقط بتغيير خط الصفحة.
لم تعد معايير التصميم الأحدث تركز على استخدام العناصر المرئية البراقة في وجهك مثل خطوط اللون الأحمر والممرات المظللة باللون الأصفر لتوجيه الزائر نحو زر الحث على اتخاذ إجراء وامض. لذلك ، ليس عليك إلقاء نظرة على الصفحات التي تبدو كالتالي:
في الماضي ، ناقشنا اتجاهات الصفحة المقصودة لما بعد النقر والتي كانت ساخنة في عام 2018. واليوم سنلقي نظرة على اتجاهات تصميم الويب التي ستساعد في زيادة معدلات التحويل في المستقبل حتى عام 2019.
1. تخطيط على أساس البطاقة
تتوقع Intercom أن يكون التصميم المستند إلى البطاقة هو مستقبل الويب لأنه يمنحك الفرصة لعرض كميات كبيرة من النسخ أو الصور بطريقة أكثر تنظيماً ، وإخبار قصتك بشكل أسرع.
يضمن تخطيط الصفحة المستند إلى البطاقة وجود نقاط فاصلة مرئية بين عناصر الصفحة. بالإضافة إلى ذلك ، يزيل الأسلوب الفوضى - بغض النظر عن كمية النسخ والصور التي تضعها على الصفحة. علاوة على ذلك ، يعد التصميم المستند إلى البطاقة بديلاً ممتازًا لشريط تمرير الصفحة التقليدي.
تستخدم الصفحة الرئيسية لـ Essentials تخطيط صفحة يعتمد على البطاقة لعرض الصور التي تم تنسيقها بواسطة مجموعة من التصميمات العالمية:
2. صفحات التمرير الطويلة
كان الحصول على جميع المعلومات الحيوية الخاصة بك فوق "الجزء المرئي" مبدأ تصميم تشبث العديد من المسوقين سابقًا بالاعتقاد بأنه إذا لم يتمكن الزائر من رؤية زر الحث على الشراء ، فلن يقوم أبدًا بالتحويل والمشاركة معك أو الشراء.
هذه الممارسة ماتت. لم تعد صفحات الويب "القصيرة" التي تحتوي على جميع المعلومات المهمة في الجزء المرئي من الصفحة تعتبر القاعدة لمعدلات التحويل الأعلى. يتوقع مستخدمو الويب اليوم التمرير. إنهم يتوقون إلى مزيد من المعلومات ، سواء كان ذلك في شكل مشاركات مدونة 10x أو صفحات مقصودة طويلة بعد النقر.
تسمح لك صفحة التمرير الطويلة بأخذ الزوار في جولة مرئية لعرضك ، وتقديم إجابات على أي أسئلة قد تكون لديهم قبل اتخاذ إجراء على الصفحة.
إن صفحة الويب أو الصفحة المقصودة بعد النقر التي تتطلب من المستخدم التمرير خلال عرضك تبدد الشكوك وتمنحك الفرصة لرواية قصة أكثر تفصيلاً.
تعمل قائمة التمرير الثابتة على تحسين تجربة التنقل للزائر ، حيث يتم تكليفهم بمعرفة مكان التنقل في الصفحة. يكون الزائر دائمًا مسؤولاً عن المكان الذي يريد التنقل فيه ، وذلك بفضل قائمة التمرير الثابتة.
هذا ما يفعله Mugs بصفحته:
3. الطباعة الدرامية
يؤدي الوصول الأكبر إلى دقة أفضل للجهاز وسرعات إنترنت أسرع ومجموعة كاملة من الخطوط الإبداعية (بفضل Google Fonts و Adobe Typekit) إلى جعل الطباعة الدرامية على صفحات الويب والصفحات المقصودة بعد النقر نقلة طبيعية. تتيح لك الطباعة الدرامية إنشاء هوية علامتك التجارية وتمنحك فرصة لتحسين تجربة المحتوى للزائرين.
كن مغامرًا باختيارات الطباعة الخاصة بك. ومع ذلك ، تذكر أن الوضوح يجب أن يكون من أولوياتك ، لأنه إذا لم يكن الخط قابلاً للقراءة ، فلا داعي لتضمينه في أي صفحة ويب.
حاول زيادة حجم الخط للحصول على تأثير مثير ، أو قم بمقارنة لون الخط مع لون محيطه. كقاعدة عامة ، حدد الخطوط بنوعين لكل صفحة ويب حتى لا تشتت انتباه الزائرين عن هدف التحويل.
كمثال ، يستخدم Outbrain خطوطًا كبيرة على الصفحة المقصودة بعد النقر والتي تلفت الانتباه فور وصولك إلى الصفحة:
4. التفاعلات الدقيقة
تحدث التفاعلات الصغيرة بين التفاعلات الأكبر وتعزز تجربة صفحة الجوال للزوار من خلال إخبارهم بأنهم قد نفذوا بالفعل إجراءً معينًا. على سبيل المثال ، النقر فوق الزر ومشاهدة تغير اللون ، أو سماع صوت معين بعد قيامك بإجراء معين.
تساعد هذه التفاعلات الأصغر الزائرين في تصور نتائج أفعالهم ، مثل هذا من Nike:
يمكن أن تساعد التفاعلات الصغيرة الزائرين أيضًا على فهم التخطيطات غير القياسية مثل الشاشات المنقسمة العمودية أو التخطيط المستند إلى البطاقة وتشجيع الزائرين على النقر فوق عبارة تحثهم على اتخاذ إجراء:
هناك طريقة أخرى يمكنك من خلالها استخدام التفاعلات الصغيرة على صفحات هاتفك المحمول وهي تقديم برنامج تعليمي متحرك يوضح كيفية عمل منتجك (ووجود نقاط تنقل في الأسفل لإظهار الزائرين المرحلة التي يشاهدونها):
5. حجب اللون
يتضمن حظر الألوان استخدام ألوان مختلفة لإنشاء فسيفساء. يمكنك استخدام حظر الألوان على المحتوى أو صورة صفحات الويب الثقيلة لتفكيك العناصر وإعطائها مجالًا للتنفس.
هذا ما تفعله الصفحة الرئيسية لـ Wrist:
يمكنك أيضًا إقران تقنية تصميم حظر الألوان بحالات التمرير ، والتسبب في تغيير لون كتل الألوان عندما يحرك الزائرون مؤشراتهم فوق الكتلة.
للتوضيح ، تستخدم الصفحة الرئيسية لـ Barn + Co حظر الألوان وحالة التمرير في وقت واحد:
على الرغم من أن Barn + Co ليست صفحة مقصودة بعد النقر ، إلا أنها تُظهر أنها في مقدمة المنحنى في تنفيذ اتجاهات التصميم الجديدة على موقع الويب الخاص بهم. تساعد هذه الأنواع من العناصر التفاعلية في تحسين تجربة المستخدم والتفاعل العام مع علامتها التجارية.
6. استخدام الشاشات كصفحات
هل واجهت صعوبة في تحديد أنسب تخطيط للصفحة لصفحة مبيعات طويلة؟ الكفاح لا أكثر. هذا الاتجاه لك. عن طريق شاشات من الصفحات يقدم معنى جديدا لصفحة الويب التمرير.
عندما تستخدم الشاشات كصفحات ، فأنت تقوم في الغالب بتكوين كل شاشة في حظيرة لتعمل كصفحة منفصلة - لها صورتها الخاصة ، وعنوانها ، وما إلى ذلك.
إذا لم تكن صفحات التمرير الطويلة مناسبة لك أو للزائرين ، فقد تكون الشاشات كصفحات بديلاً ممتازًا للحفاظ على كل شيء منظمًا مع توفير المعلومات الضرورية.
يستخدم تطبيق Google الشاشات كصفحات:
يمكنك التبديل بين الشاشة من رأس التنقل أو التمرير بالماوس أو باستخدام مفاتيح الأسهم.
أعد اختراع عجلة تمرير الصفحة باستخدام شاشاتك كصفحات.
ما هي أنماط تصميم الويب التي تناسب علامتك التجارية أكثر من غيرها؟
يجب أن يركز تصميم صفحة الويب على تجربة المستخدم ووظائفه. يجب أن يضيف كل عنصر تقوم بتضمينه إلى هدف التحويل ويخدم غرضًا فرديًا.
تعتقد أن زوار موقعك يفضلون تجربة بصرية؟ استخدم التصميم المستند إلى البطاقة. هل لديك عرض معقد إلى حد ما للترويج؟ استخدم صفحة تمرير طويلة لشرح كل التفاصيل الصغيرة لإقناع الزوار بالتحويل إلى هدفك.
ما هو اتجاه التصميم الذي تعتقد أنه يناسب صفحات الويب الخاصة بك أكثر من غيرها؟ الرجاء التعليق أدناه وإخبارنا.
ألم تبدأ في إنشاء صفحات مقصودة بعد النقر بعد؟ صمم صفحات هبوط عالية الجودة بعد النقر ، اشترك في عرض توضيحي للمؤسسة اليوم.