موقع الويب
الاثنين, يونيو 08, 2020
Web design : ماهي أفضل 31 أمثلة وأفكار لتصميم الصفحة الرئيسية لموقعك على الويب ؟
ماذا يحدث عندما تحاول بيع منزل بحديقة متضخمة ، وتشققات في الممر ، وباب أمامي مكسور؟ لا يوجد عروض ، أليس كذلك؟ لهذا السبب تحتاج إلى أفضل تصميم الصفحة الرئيسية لموقع الويب الخاص بك.
فكر في صفحتك الرئيسية على أنها مشابهة لجاذبية المنزل. إنه أول شيء يراه الكثير من الناس عند زيارتهم لموقع الويب الخاص بك ، لذلك تريد أن تبهرهم من الثانية التي يتم فيها تحميل الصفحة .
لكن الأمر لا يقتصر فقط على الجماليات. تريد أيضًا تحويل صفحتك الرئيسية. كما قلت أعلاه ، يمنع الباب الأمامي المكسور والممر الذي لا يمكن الوصول إليه المشترين في المستقبل من التفكير في البيع. الشيء نفسه ينطبق على موقع الويب الخاص بك.
لا يستطيع الناس أو لا يجرون تحويلات إذا لم تمنحهم حافزًا للقيام بذلك وإذا لم تجعل التحويل سهلاً وبديهيًا قدر الإمكان.
الخطوة الأولى في كسب المزيد من العملاء هي فهم العناصر الأساسية التي يجب أن تدخل في كل صفحة رئيسية.
بمجرد أن تتقن الأساسيات ، استلهم الإلهام من 31 من أفضل تصميمات الصفحات الرئيسية حتى تتمكن من معرفة ما هو الأفضل لنشاطك التجاري وجمهورك.
فوائد الصفحة الرئيسية جيدة التصميم
يرحب تصميم الصفحة الرئيسية البسيط بجمهورك على موقعك ، ويخبرهم بما تريدهم أن يفعلوه بعد ذلك ، ويسمح لهم باستكشاف موقعك بمزيد من العمق.
يمكنك وضع طبقة أكثر تعقيدًا ، لكنك لا تريد أن تبدأ بفوضى مشوشة ويجب عليك تقليمها بشكل انتقائي. ابدأ دائمًا بالأساسيات. عندما تبدأ في التخطيط لتصميم صفحتك الرئيسية ، تأكد من أن كل عنصر يلبي واحدًا على الأقل من الأهداف الأربعة التالية.
يمكنك إضافة تعقيد إلى تصميم الصفحة الرئيسية البسيط ، ولكنك لا تريد البدء بفوضى فوضى ويجب عليك تقليمه بشكل انتقائي. ابدأ دائمًا بالأساسيات.
ماذا تحتاج في صفحتك الرئيسية؟ ماذا يتوقع جمهورك؟ وأي العناصر لها الأولوية؟
عندما يمكنك الإجابة على هذه الأسئلة ، ستحصل على المعلومات التي تحتاجها لتحسين تصميم الصفحة الرئيسية. في تصميم الويب ، يكون لعناصر الصفحة الرئيسية أغراض محددة للغاية.
مساعدة جمهورك المستهدف على التعرف على عملك
سيجد العديد من زوار موقعك الإلكتروني صفحتك الرئيسية أولاً. مع أخذ ذلك في الاعتبار ، تحتاج إلى ترك انطباع أول قوي.
يجب أن توفر صفحتك الرئيسية فكرة عن قيم شركتك ، وعرض البيع الفريد (USP) ، والغرض. من المرجح أن تجذب العملاء المحتملين إذا كان بإمكانك توصيل هذه المعلومات بشكل فعال.
تحسين تجربة المستخدم على موقع الويب الخاص بك
يقوم المستهلكون بزيارة موقع الويب الخاص بك لغرض. قد يكون ذلك للتحقق من خط المنتج ، أو قراءة مشاركات المدونة ، أو معرفة ما إذا كنت تبيع نوعًا معينًا من الخدمة.
بغض النظر ، تريد توجيه ذلك المستهلك إلى الصفحة المناسبة. من المفترض أن يسهل تصميم صفحتك الرئيسية هذا الانتقال من خلال توفير تنقل بديهي وإحساس بكيفية تدفق موقعك على الويب.
تجميع المزيد من التحويلات
تريد أن يقوم زوار الموقع بالتحويل ، لكنهم لن يفعلوا ذلك إذا لم تمنحهم الحافز والفرصة اللازمة. ربما تريد إنشاء قائمة بريد إلكتروني ، ولكن إذا لم يتمكن الزائرون من العثور على نموذج تسجيل ، فستظل قاعدة بياناتك فارغة.
بجعل هذه المعلومات يمكن الوصول إليها بسهولة على صفحتك الرئيسية ، سترى زيادة في التحويلات.
هناك طريقة أخرى لتعزيز التحويلات وهي إنشاء انطباع أول قوي مع صفحتك الرئيسية. إذا كان الزوار يستمتعون بتجربتهم على موقع الويب الخاص بك ، فسيكونون على الأرجح أكثر عرضة لتذكرها في المستقبل. ربما لن تجري عملية بيع اليوم ، ولكن هذا العميل سيعود بعد أيام أو أسابيع وسيشتري منك.
تحسين الوعي بالعلامة التجارية
اجعل شركتك لا تنسى من خلال السماح لصورة علامتك التجارية والمراسلة بالظهور في كل صفحة. هذا صحيح بشكل خاص عندما يتعلق الأمر بتصميم الصفحة الرئيسية لأن الصفحة الرئيسية بمثابة بوابة لبقية موقع الويب الخاص بك.
يجب أن يحتل شعارك وشعارك وغرضك مكان الصدارة. في الواقع ، قد ترغب في إضافة نموذج أو بيان إلى أعلى صفحتك الرئيسية - ويفضل أن يكون بخطًا كبيرًا - يمنح زوارك فكرة عما تفعله:
ما هي المشاكل التي تحلها لعملائك؟ كيف تحسن حياة عملائك - سواء كانت شخصية أو مهنية؟
لا تجبر جمهور موقع الويب الخاص بك على اكتشاف وتخمين ما تقوم به. اجعلها واضحة من البداية.
كيفية تصميم الصفحة الرئيسية للموقع
الآن بعد أن عرفت الأهداف الأربعة لتحفيز مبادئ التصميم الخاصة بك ، اسأل نفسك ثلاثة أسئلة إرشادية: ما الذي تحتاجه تمامًا على صفحتك الرئيسية؟ من هو جمهورك المستهدف وماذا يتوقعون؟ ما العناصر التي لها الأولوية؟
بمجرد الحصول على إجابات لهذه الأسئلة الثلاثة ، يمكنك البدء في رسم أفضل السبل لتحسين صفحتك الرئيسية. تذكر ربط كل عنصر من عناصر التصميم الخاصة بك بأحد الأهداف الأربعة المذكورة أعلاه. الأهم من ذلك ، لا تقلق بشأن الحصول على الكمال. تحسين الموقع هو عملية مستمرة!
أفضل أمثلة لتصميم الصفحة الرئيسية (ولماذا تعمل)
لا يوجد معلم أفضل من المثال. سأعرض عليك بعضًا من أفضل أمثلة تصميم الصفحة الرئيسية التي وجدتها ، وسأخبرك بالضبط لماذا تعمل حتى تتمكن من تطبيق نفس التكتيكات على موقعك الخاص.
1. Dropbox
لقد اتصلت بـ Dropbox من قبل كمثال ممتاز للتسويق الجيد في كل مكان. الصفحة الرئيسية للشركة لا تختلف. لديك صورة بطولية منحرفة قليلاً تجذب العين واثنتين من عبارات الحث على اتخاذ إجراء - أحدهما يستخدم خلفية داكنة لجذب المزيد من الانتباه لأنه مخصص للإصدار المدفوع من الأداة.
النسخة التسويقية بسيطة للغاية هنا. يعرف Dropbox جمهوره المستهدف ويتعمق في نقاط الألم التي تؤثر عليهم ، بما في ذلك الكفاءة والأمن. بالإضافة إلى ذلك ، يتم تجريد التنقل إلى حد كبير ، مع خيار "مقارنة الخطط".
2. سلاك
أنا أحب تصميم صفحة Slack الرئيسية نظرًا لرسومها الفريدة. لا يمكنك أن تخطئ في الرسومات المخصصة. يعجبني أيضًا سطر الوصف - "أين يحدث العمل" - لأنه مبدع ، ولكنه يشتمل أيضًا على غرض الأداة.
يوضح سلاك ما يجب على الزوار فعله. يمكنهم تسجيل الدخول أو إنشاء حساب. هنا ، لدينا خيارات تنقل أكثر مما توفره Dropbox ، ولكن كل منها يساهم في مساعدة الزوار في العثور على ما يريدون.
3. الطاقة الخضراء الجبلية
انا ذاهب مع مثال آخر للرسومات المخصصة. لا تترك Green Mountain Energy أي شك حول غرض الشركة. تريد توفير الطاقة النظيفة بسعر مناسب. هناك نوعان من CTAs متساوية - أحدهما للعملاء المقيمين والآخر لأصحاب الأعمال - يستخدمون ألوانًا متناقضة لجذب الانتباه.
4. CarMax
واجهت CarMax تحديًا فريدًا عند تصميم صفحتها الرئيسية. تشتري الشركة وتبيع السيارات على حد سواء ، لذلك كانت بحاجة إلى تلبية احتياجات كل من الجماهير. كما ترون ، نجح CarMax.
توجه العديد من CTA الزوار إما للعثور على سيارة للشراء أو لبيع سيارتهم المستعملة. نظيفة وبسيطة. من الواضح أن صورة البطل مخصصة لأنه يمكنك رؤية شعار CarMax على لوحة ترخيص السيارة.
5. thredUP
يمكن أن يصبح تصميم الصفحة الرئيسية للتجارة الإلكترونية صعبًا. هل تقدم الأعمال التجارية ، أو تعرض منتجك الرئيسي ، أو تطغى على جمهورك بالكثير من المنتجات أو الفئات؟
آمل ألا تفعل هذا الأخير.
في حالة thredUP ، تتبع الصفحة الرئيسية نهجًا موسميًا. يبدو أن نمط بوهو في (على الأقل للنساء) ، لذلك نرى رسمًا مخصصًا يعلن عن الكثير من أزياء بوهو المتاحة. التنقل ضخم ولكنه مصمم بشكل نظيف ، بحيث يمكن للزوار العثور بسهولة على الفئات التي تهمهم.
6. StudioPress
العناصر البسيطة والرسوم التوضيحية ذات التصميم المسطح والألوان الخافتة تجعل تألق الصفحة الرئيسية لـ StudioPress . بفضل النسخة ، أنت تعرف بالضبط ما يفعله StudioPress لعملائه: "إنشاء مواقع WordPress مذهلة." بعد ذلك ، لديك ثلاث عبارات حث على اتخاذ إجراء للاختيار من بينها بناءً على الطريقة التي ترغب في المتابعة بها.
7. Healthline
في بعض الأحيان ، يجب أن يعكس أسلوبك في تصميم الصفحة الرئيسية نوع موقع الويب الذي تقوم ببنائه. في حالة Healthline ، هو في الأساس منشور تعليمي يقدم نصائح ورؤى حول الرعاية الصحية والتغذية واللياقة البدنية والمزيد.
هذا مثال على تصميم "العرض وليس القول". بدلاً من العنوان الكبير الذي يقول ، "نحن ننشر مقالات حول الصحة" ، يوضح Healthline هذه الحقيقة مع الكثير من عناوين المقالات ومقتطفات فوق الجزء المرئي. يمكنك أيضًا الوصول إلى قائمة الهامبرغر في الرأس ، والتي يمكن أن تساعدك في الانتقال إلى ما تريده ، ورابط بسيط للنشرة الإخبارية للموقع.
8. بيض مجنون
أنت لا تعتقد أنني سأكتب هذا المقال دون تضمين Crazy Egg ، أليس كذلك؟ تركز الصفحة الرئيسية لموقع الويب هذا حصريًا على تشجيع الزائر على إدخال عنوان URL الخاص به لعرض خريطة التمثيل اللوني. هناك أيضًا رابط لبدء تجربة مجانية لمدة 30 يومًا ، مع وجود لغة "الثقة في أي وقت" لبناء الثقة بجوارها.
لديك دليل اجتماعي في العنوان الفرعي ، والذي يخبر الزوار بعدد الأشخاص الذين يثقون في أدوات Crazy Egg. إذا قمت بالتمرير لأسفل ، فستواجه محتوى قابل للتوسيع أسفل بعض الأدلة الاجتماعية.
عند النقر على رابط "مزيد من المعلومات" ، تتوسع الصفحة الرئيسية لتشمل المزيد من المعلومات حول كيفية مساعدة Crazy Egg لمالكي مواقع الويب على تعزيز التحويلات.
9. العداد السباكة
هذا يختلف كثيرًا عن الأمثلة الأخرى في هذه الصفحة ، لكني أحب حقًا كيف قامت Abacus Plumbing بتنظيم صفحتها الرئيسية.
قد تبدو مزدحمة بعض الشيء ، لكن هذه الصفحة الرئيسية تحتوي على الكثير من الأدلة الاجتماعية. تم وضع شعار BBB المعتمد ، وعدد المراجعات ، وكلمات "يمكنك الاعتماد علينا" بشكل استراتيجي.
تسلط الصفحة الرئيسية الضوء على عنصر آخر لبناء الثقة وهو أن العملاء سوف يتلقون معلومات شخصية عن الفنيين قبل وصول الفنيين. يمكن للعملاء أن يشعروا بأمان أكبر عندما يعلمون أنهم يفتحون أبوابهم بالفعل لفني العداد.
10. تريفاجو
ربما سمعتني أقول مرة أو مرتين إنني أحب التصميم البسيط. لا يمكنك الحصول على الحد الأدنى من تصميم الصفحة الرئيسية trivago . إنه يركز على شيء واحد: جعل الزوار يبحثون عن وجهة. هذا هو.
11. سينشري 21
لفتت كلمة "بلا هوادة" عيني عندما رأيت تصميم الصفحة الرئيسية لأول مرة. إذا كنت توظف سمسار عقارات ، ألا تريده أن يكون بلا هوادة؟ أود.
تصميم الصفحة الرئيسية جذاب ومثالي لجمهور Century21. هناك تركيز على البحث عن الخصائص مباشرة من الصفحة الرئيسية ، ولكن يمكنك أيضًا الوصول إلى التنقل المفيد.
12. مارك جاكوبس
لا أحد يمكن أن يدعوني بخبير في الأزياء ، لكني أحب التصميم العام للصفحة الرئيسية على موقع مارك جاكوبس . إنها بسيطة ومتطورة ، والتي تناسب الجمهور المستهدف ، وتجذب الكتابة الإبداعية إبداء انتباه الزوار.
بالإضافة إلى ذلك ، سيلاحظ المستهلكون على الفور طلب الشحن المجاني في الشريط العلوي وروابط التنقل جيدة التباعد.
13. لورا ورثينجتون الخطوط
أنشأت لورا ورثينجتون تصميمًا للصفحة الرئيسية يعكس أسلوبها في تصميم الخطوط. إنها أنثوية وملونة دون إرباك الحواس.
في الوقت نفسه ، لا تشعر العناصر بالاضطراب ، وتعلم على الفور ما تبيعه لورا ورثينجتون.
14. سكايب
أستخدم Skype كثيرًا ، لذا فأنا على دراية كبيرة بكيفية عمله. أنشأ Skype تصميمًا للصفحة الرئيسية يعالج الجمهور المستهدف بشكل مثالي. يوضح الرسم بمهارة أن التقنية تعمل على جميع أنواع الأجهزة ، وتبين كلمة "الملايين" مدى شعبية الخدمة.
ثم لديك الأشياء الثلاثة التي يستخدمها الأشخاص في Skype: التحدث والدردشة والتعاون. يلفت زر CTA ذو الخلفية الزرقاء والنص الأبيض الانتباه إلى نفسه بشكل جميل.
15. خلاط اللياقة
من الشعار إلى النسخة التسويقية ، أنشأت Fitnessblender صفحة رئيسية رائعة. مع كل الأموال التي ينفقها الناس على صناعة اللياقة البدنية ، إنه أمر منعش - وجذاب - أن ترى رسالة تعد بمقاطع فيديو تمارين رياضية لا تكلفك أموالًا. أشركني!
لديك أيضًا عارضات أزياء من الذكور والإناث ، وكلاهما يبدو جاهزًا للياقة البدنية ، لجذب الانتباه وتحفيز الجمهور.
16. عش
تحتل النسخة والصور مركز الصدارة لتصميم الصفحة الرئيسية لـ Nest . أرى بعض عناصر تصميم Apple في هذا المثال. لقد تم وضع المنتج في جميع ألوانه وشعار "توفير الطاقة لا ينتهي أبدًا." تخبر عبارة "اشتر الآن" CTA للزوار بالضبط ما يجب عليهم فعله بعد ذلك.
17. توستماسترز الدولية
على الرغم من أن تصميم الصفحة الرئيسية لموقع Toastmasters International قد يبدو قديمًا في البداية ، إلا أنه يجب عليك تذكر جمهوره المستهدف. تريد المنظمة جذب الأشخاص - عادة قادة الأعمال - وهي تفعل ذلك جيدًا. أنا أحب صور الخلفية ونسخة العنوان. بالإضافة إلى ذلك ، تلائم الألوان النغمة والصوت الذي ترغب المنظمة في التعبير عنه.
إذا لم يفلح ذلك مع عملك ، فلن تحتاج إلى استخدام مخطط ألوان باهت أو تصميم بسيط. لا تتردد في تجربة ومعرفة أفضل طريقة لتمثيل عملك.
18. الحجز
في ما يلي مثال آخر على التصميم البسيط إلى حد ما. Bookouture هو ناشر رقمي ، بشكل رئيسي عن الروايات الرومانسية والتشويق ، وتستهدف صفحته الرئيسية المؤلفين الذين قد يرغبون في نشر كتبهم هنا. يعد استخدام صورة الكمبيوتر لإظهار صورة الغلاف أمرًا ذكيًا. في الرأس ، لديك رابط للإرسالات ، وأسفل نسخة الصفحة الرئيسية ، هناك CTA أخرى لمعرفة المزيد حول ما تقدمه الشركة.
19. Ensurem
Ensurem هو مثال على التصميم البسيط الذي لا يزال يشعر بالثقافة والنمو . تساعد صورة البطل الضخمة ، كما تفعل لوحة الألوان الداكنة. تحصل على إحساس صقل من التصميم.
ملحوظ بشكل خاص هو CTA. إنها كبيرة ، والخلفية عالية التباين ، ولون الخلفية يتذكر الألوان الموجودة في شعار Ensurem. كلها تتناسب مع بعضها بسلاسة.
20. الخط الساخن لمنع الانتحار
تواجه المؤسسات غير الربحية عقباتها الخاصة عندما يتعلق الأمر بتصميم الصفحة الرئيسية. إنهم يريدون مساعدة أكبر عدد ممكن من الأشخاص ، لكنهم يريدون أيضًا طلب التبرعات والمتطوعين ومساعدات أخرى من الجمهور. ل منع الانتحار الخط الساخن يحقق كل هذه الأهداف أيضا.
من المثير للاهتمام أن CTA الأساسي هو رقم هاتف. قد يبدو هذا مناقضًا لما نراه عادة ، ولكنه مصمم لجمهوره. وإذا كنت تتصفح هاتفك الذكي ، يمكنك النقر فوق هذا الرقم لطلبه ، مما يجعله مفيدًا بشكل خاص.
21. لورسين
L'Oursin ، مطعم سياتل الرائع ، يسمر تمامًا تصميم الصفحة الرئيسية هنا. تثير صور الطعام على الفور براعم تذوق الزائرين ، ويمكنك الشعور بمزاج المكان من خلال صوره وخيارات الخط.
22. The Motley Fool
يستخدم الكثير من الناس The Motley Fool حصريًا لمقالات عن التمويل ، لكن الشركة تقدم المزيد. ستلاحظ أن عنصرًا واحدًا يبرز على الصفحة - زر CTA الأصفر الذي يقول "أحدث أسعار الأسهم". إذا قمت بالنقر فوقه ، يتم نقلك إلى الخدمات المدفوعة للشركة ، والتي تتضمن تزويدك باختيار الأسهم من المحللين والخبراء.
23. FindLaw
لدى FindLaw غرضان: تثقيف الناس حول القانون وربط العملاء بالمحامين. إنها تلبي كلا الغرضين من خلال تصميم صفحتها الرئيسية. يمكنك استخدام شريط التنقل العلوي للعثور على المعلومات التعليمية ، ولكن CTA الأساسية - المتمركزة حول صورة البطل - تشجعك على العثور على محام بالقرب منك.
24. يونايتد هيلث كير
إذا كنت على دراية بعلم نفس اللون في التسويق ، فأنت تعلم أن اللون الأزرق غالبًا ما يستخدم لترمز إلى الصحة والشفاء العاطفي.
هذا هو السبب في أن تصميم الصفحة الرئيسية لموقع UnitedHealthcare فعال للغاية. بالإضافة إلى ذلك ، يستخدم الصور ذات الصلة لمساعدة الزوار على الشعور بأنهم في المنزل ، وتقدم العديد من CTA اتجاهات واضحة حول كيفية المتابعة.
25. نسبة المشاهدة
إذا كنت تشاهد مقاطع الفيديو الخاصة بي على YouTube ، فأنت تعرف أني ولدي سلسلة الخميس العادية حيث نجيب على أسئلة الأشخاص الذين تركوا تعليقات على مقاطع الفيديو السابقة. تركز أعمال Adam ، Viewership.com ، على مساعدة الأشخاص على الاستفادة من تسويق الفيديو.
تصميم الصفحة الرئيسية مثالي. نرى اللون الوردي / الأحمر في مكانين فقط واللون الأخضر في مكانين فقط. هذه هي الطريقة التي تجذب بها المشاهدة المشاهدين إلى الأجزاء ذات الصلة من الصفحة.
26. ليفت
في مقالتي السابقة حول أفضل الأمثلة على الصفحة الرئيسية ، استخدمت Uber كأحد اختياراتي. من العدل إذن أن أشير إلى Lyft هنا. إنها صفحة رئيسية رائعة تستخدم رسمًا توضيحيًا مخصصًا ذكيًا لجذب المشاهدين وتتضمن زر CTA عالي التباين. كما أنه يخدم بنجاح كل من الدراجين والسائقين.
27. المحور
أنا أحب تصميم الصفحة الرئيسية hubEngage لأنها أنيقة وجذابة. "أطلقوا العنان لقوة الموظفين المشاركين". هذا هو الغرض الوحيد للعمل. ثم لديك مربع الدردشة في الزاوية اليمنى السفلية ، وهو قرار UX ممتاز ، وصورة البطل الموضعية.
28. ستاربكس
لماذا لا نغلق بانفجار؟ ستاربكس ليست مبتدئ في التسويق. وضعت الشركة أعلى مستوى لكل مقهى آخر ، ويتغير تصميم الصفحة الرئيسية بانتظام بناءً على المنتجات التي تريد Starbucks الترويج لها.
هنا ، لديك اثنين من مخفوق البروتين الذي يبدو لذيذًا بالإضافة إلى نسخة بسيطة ولكنها فعالة. تجذب أيضًا الرموز "الجديدة" بجوار أسماء المنتجات.
29. Copyblogger
يستخدم موقع Copyblogger نهج الصورة الرئيسية لتصميم الصفحة الرئيسية - وهو يعمل بشكل جميل. الموقع نظيف وبسيط ، يستخدم الألوان الفاتحة وصورة جذابة وغير بارزة في نفس الوقت.
يمكنك الحصول على كل ما تتوقعه من الصفحة الرئيسية ، من الشعار وشعار العلامة إلى شريط التنقل في الأعلى. هناك أيضًا عرض القيمة أعلى صورة البطل ، مما يساعد على تعزيز قيمة الشركة.
سبب نجاحها: تعمل الصفحات الرئيسية لصور البطل بشكل جيد عندما تبيع عرضًا بقيمة واحدة. إنه ليس مثاليًا لصفحات التجارة الإلكترونية الرئيسية - ما لم تبيع منتجًا واحدًا فقط - ولكنه مثالي للشركات الخدمية التي لديها خدمة أساسية أو رئيسية تقدمها.
يستجيب البشر بشكل جيد للصور المرئية. في الواقع ، قال ما يقرب من 60 في المائة من العملاء الذين شملهم الاستطلاع في إحدى الدراسات إنهم يفضلون التعامل مع صفحة ويب مصممة بشكل جميل من صفحة تم تصميمها ببساطة. يحكم المستهلكون على نشاطك التجاري بناءً على جماليات الصفحة الرئيسية.
30. أوبر
أي شخص يعرفني سيخبرك أنني أكره القيادة. أتصل دائمًا بشركة Ubers لإحضاري .
أنا أيضًا معجب كبير بموقع Uber على الويب. يقدم أحد أفضل تصميمات الصفحات الرئيسية التي رأيتها منذ وقت طويل.
إنه مثال رائع للجمع السلس بين عرضين للقيمة: احصل على رحلة آمنة وغير مكلفة أو أصبح سائقًا وكسب المال.
هذا ليس بالأمر السهل ، خاصة مع عدد قليل من الكلمات على الصفحة.
سبب نجاحه: إذا نظرت إلى كل عنصر فردي على الصفحة الرئيسية لـ Uber ، فستلاحظ أنه تم تصميمه بالكامل لتوجيه زوّار موقع الويب نحو إجراء أو آخر. يريدون منك التسجيل للحصول على حساب حتى تتمكن من طلب ركوب أوبر أو التسجيل كسائق وكسب النقود.
هذان قسمان مختلفان تمامًا من السوق. ومع ذلك يعمل بطريقة أو بأخرى.
لاحظ اختيار الصورة. الرجل خلف عجلة القيادة من الواضح أن سائق اوبر، لكنه يحدق الحق في الكاميرا - في لك . إذا كنت ترغب في طلب سيارة أوبر ، فهو شخص ستشعر براحة في الركوب معه في السيارة. أو ، إذا كنت تريد صخبًا بدوام جزئي ، فهو شخص تريد محاكاة نجاحه.
توفر بقية الصفحة الرئيسية الكثير من المعلومات ، من خريطة ونموذج اقتباس للانتقال من مكان إلى آخر إلى التشويش على عرض القيمة للشركة.
31. Rosetta Stone
إذا لم تكن على دراية بـ Rosetta Stone ، فهي مجموعة من الأدوات المصممة لمساعدتك على تعلم لغة أجنبية. إنه في نهاية طيف التسعير ، لكنه لا يزال يتمتع بشعبية كبيرة.
أيضًا ، إنها واحدة من أفضل الأمثلة على الصفحة الرئيسية التي رأيتها في موقع للتجارة الإلكترونية.
نحن نتعامل مع صورة بطل مرة أخرى ، هذه المرة لمسافر عالمي يستخدم هاتفه - ظاهريًا للوصول إلى تطبيق Rosetta Stone.
لماذا يعمل: Rosetta Stone تقود مع USP الأساسي: تقنية TruAccent. تميزها فوائد القيمة المضافة للتكنولوجيا عن منافسيها وتجعلها تبدو أكثر فعالية في مساعدة الأشخاص على تعلم المهارات اللغوية.
ثم لديك عرض قيمة آخر: تعمل الشركة منذ 25 عامًا. هناك أيضًا دليل اجتماعي: "الحل اللغوي الأكثر ثقة ..."
قد تستفيد Rosetta Stone من بعض الأرقام الصلبة هنا. كم عدد العملاء الذين تخدمهم؟ قد يكون هذا أكثر إثارة للإعجاب. ولكن هذا هو الخطأ الوحيد الذي أجده مع هذه الصفحة الرئيسية.
هناك دعوة رئيسية للعمل من أجل إطلاق عرض توضيحي تفاعلي ، ولكن يمكن للمستخدمين أيضًا معرفة حلول محددة لشرائح العملاء المختلفة: الأفراد والمعلمون والشركات.
تقوم هذه الصفحة الرئيسية بعمل ممتاز في جذب انتباه الزائر وتوفير الكثير من الأماكن لاستكشافها دون تشتيت انتباه الزائر عن CTA الأساسي.
قائمة مراجعة تحسين الصفحة الرئيسية
لقد رأيت ثلاثة أمثلة واقعية لبعض أفضل تصميمات الصفحات الرئيسية على الإنترنت ، ولكن ما الذي يمكنك أخذه منها؟ وكيف تصمم أفضل صفحة رئيسية لعملك؟
صدق أو لا تصدق ، يتلخص تصميم الصفحة الرئيسية في خمسة عناصر بسيطة. لديك مساحة كبيرة للعب مع الإبداع ، ولكن تأكد من أنك تقدم عرضك بوضوح وبدون تشتيت.
في ما يلي قائمة تحقق مفيدة بالأشياء التي يجب تضمينها في صفحتك الرئيسية لتحسينها وتعزيز التحويلات .
1. اكتب عنوانًا قويًا وواضحًا
يحتوي كل من الأمثلة الثلاثة التي ذكرتها أعلاه على عنوان واضح ومحدد لترسيخ الصفحة. دعونا نلقي نظرة على كل عنوان هنا:
- قم ببناء سلطتك على الإنترنت من خلال تسويق المحتوى الفعال
- الوصول إلى هناك - يومك ينتمي إليك
- برنامج اللغة الوحيد مع TruAccent ™ - أفضل تقنية للتعرف على الكلام في العالم.
من الواضح أنهم مختلفون جدًا ، ولكن لديهم العديد من الأشياء المشتركة.
أولاً ، يستخدمون كلمات القوة. هذه هي الكلمات التي تثير المشاعر على الفور أو تتواصل مع القارئ.
يركز Copyblogger على كلمات مثل "السلطة" و "فعالة للغاية". إنها ليست مثيرة للإعجاب من تلقاء نفسها ، ولكن عندما يتم تضمينها في عنوان موجز ، فإنها تساعد في إرسال رسالة أقوى.
تتخذ أوبر نهجًا أكثر عاطفية. بدلاً من ذكر عرض القيمة الذي يقدمه بشكل مباشر ، فإن Uber تروق لما يريده عملاؤها المستهدفون: الحرية والكفاءة والوجهة.
ثم لديك Rosetta Stone ، التي تستخدم كلمات مثل "فقط" و "أفضل ما في العالم" لنقل المصداقية والسلطة. تشير هذه الكلمات إلى أن Rosetta Stone هي كل ما تحتاجه لتحقيق أهدافك.
اكتب عناوين قوية بوضع نفسك مكان العميل. ما الذي سيثير إعجابه؟ ما الذي يربط هذا الشخص بما يكفي لإقناعه باستكشاف بقية موقعك؟ أو لملء استمارة؟
2. لا تخلط بين المستخدمين
أحد أكثر المشاكل شيوعًا التي ألاحظها في الصفحات الرئيسية هي تعارض الحث على الشراء (CTA).
تجنب التعارضات قدر الإمكان. يمكن أن يكون لديك أكثر من خيار واحد ، ولكن أوضح أن هناك CTA واحدة تريد أن يتابعها زوارك على وجه التحديد. يمكنك أن ترى كيف قام كل من Uber و Rosetta Stone بذلك في الأمثلة أعلاه عن طريق جعل عبارات CTA البديلة أصغر وأقل وضوحًا.
الأهم من ذلك ، تريد تجنب الفوضى البصرية. تمامًا مثل التقاط الألعاب والملابس والمجلات المتناثرة وغيرها من المخلفات في المنزل ، فأنت تريد إزالة أي عناصر بصرية مربكة من صفحتك الرئيسية.
وبعبارة أخرى ، اجعلها بسيطة.
أنت تريد ما يكفي في الصفحة لجذب الانتباه ، ولكن ليس كثيرًا بحيث لا يعرف القراء مكان البحث.
3. إضافة زر CTA مباشر وكبير للعرض
CTA هو المكان الذي تريد أن يركز فيه زوارك انتباههم. إنها دعوة: إليك ما يجب فعله بعد ذلك!
على زر CTA لا ينبغي أن تولي الشاشة بأكملها، ولكن يجب لفت انتباه الزائر. ضع في اعتبارك استخدام خط فريد إذا كنت لا تعتقد أنه آسر بما فيه الكفاية.
بالإضافة إلى ذلك ، تأكد من استخدام عبارة تحث المستخدم على اتخاذ إجراء تكون منطقية وتنقل القيمة. لا تثيرني عبارة CTA مثل "اشترك الآن". قم بتغييرها إلى: "اشترك الآن للحصول على دراسة حالة مجانية". أنا مهتم الآن.
4. استخدام الألوان المتناقضة
أنا من أشد المعجبين بالتباين عندما يتعلق الأمر بمواقعي. سترى لوني البرتقالي المميز على NeilPatel.com و Neil Patel Digital.
لا يعني التباين لونًا عاليًا أو بغيضًا. يمكنك إنشاء التباين بعدة طرق.
على سبيل المثال ، يعمل لون غامق للخلفية ولون محايد للنص الموجود على CTA بشكل جيد. أنت لا تريد اللون الأخضر الجير على الأزرق الكهربائي - وهذا أمر صعب على العيون.
في CTA ، يمكنك أيضًا استخدام لون غير موجود في أي مكان آخر على الصفحة. فقط تأكد من أنها لا تثير الكثير من الخلاف البصري. إن تعلم عجلة الألوان وكيف تكمل الألوان بعضها البعض سيجعلك مصممًا أفضل.
5. الحفاظ على العرض فوق الطية
قد لا يمرر زوار موقع الويب الخاص بك مطلقًا إلى ما وراء الطية. هذه مجرد حقيقة. إذا دفنت عرضك في الجزء السفلي غير المرئي من الصفحة ، فلن يراه الكثير من زوارك أبدًا.
كما ترى من أفضل الأمثلة على الصفحة الرئيسية التي ذكرتها أعلاه ، فإن كل واحد يتضمن العرض أو USP (عرض بيع فريد) في الجزء المرئي من الصفحة. من الواضح منذ لحظة وصول الزائر.
كيفية معرفة ما يعمل وما ليس في صفحتك الرئيسية
تصميم الويب غير موضوعي للغاية. قد أحب تصميم الموقع ، بينما قد تكرهه. لا توجد طريقة لإرضاء الجميع.
ومع ذلك ، يمكنك إرضاء معظم الأشخاص الذين يزورون موقعك. كيف؟ أنت تكتشف ما يعمل وما لا يعمل ، بناءً على ما يستجيب له غالبية زوار موقعك بشكل إيجابي.
يتيح لك Crazy Egg تشغيل تقارير سلوك المستخدم على موقعك. سترى المكان الذي ينقر فيه الأشخاص على عناصر التصميم والتمرير عليها ويتفاعلون معها بطريقة أخرى.
تتيح لك الخريطة الحرارية ، على سبيل المثال ، معرفة ما يهتم به الأشخاص على صفحة الويب ، وما لا يلاحظونه (حتى عندما يجب عليهم ذلك). من ناحية أخرى ، يعرض لك تقرير حلويات معلومات دقيقة عن مواقع الإحالة وكيف يتفاعل الأشخاص القادمون من أماكن مختلفة مع موقعك.
هل يميل الأشخاص إلى تخطي CTA عندما يأتون من Facebook؟ ربما لا تتماشى منشوراتك على Facebook مع تصميم موقعك.
تتيح لك تقارير سلوك المستخدم الأخرى عرض أنماط الزوار بطرق مختلفة. على سبيل المثال ، تُظهر خريطة الحرارة القياسية مناطق النشاط "الساخن" وعدم النشاط "البارد". يمكن أن يؤدي وضع عناصر صفحتك الرئيسية للتوافق مع تتبع العين إلى زيادة فعاليتها.
بعد جمع هذه المعلومات ، قم بإنشاء نسختين من موقع الويب الخاص بك. قدم نسخة واحدة لنصف زوارك وأخرى للباقي. ستساعدك عملية اختبار العناصر الفردية A / B (أ / ب) على تحسين موقعك ، لذا فهو مثالي للجمهور المستهدف.
استنتاج
لا يتطلب منك تصميم الصفحة الرئيسية الجيد اتباع صيغة محددة. كما ترى من الصفحات الرئيسية التي أشرت إليها أعلاه ، تشترك بعض صفحات الويب الرئيسية في العناصر المشتركة ، لكنها كلها مختلفة عن بعضها البعض.
في الواقع ، يمكن أن يعمل توسيع حدود اصطلاحات التصميم الحديث لصالحك ، ولكن فقط إذا لم تعرقل تجربة مستخدم الزائر. لا بأس في اتخاذ خيارات تصميم جريئة ، ولكن لا تفعل ذلك على حساب الفائدة.
لا تريد نسخ شخص آخر. أنشئ أفضل تصميم للصفحة الرئيسية لجمهورك المحدد ، وتأكد من أنك تقدم منتجاتك وخدماتك بشكل جيد من خلال إبراز صفاتهم الفريدة.
بمجرد الانتهاء من ذلك ، ستقوم ببناء آلة تحويل موقع الويب .
