17+ من الأمثلة على تصميم الصفحة الرئيسية الأكثر فاعلية لموقعك على الويب في عام 2022

تم التحديث: 06 أبريل 2022 بواسطة: Dessign Team

إفصاح القارئ: عند الشراء من خلال روابط الإحالة على موقعنا ، قد نربح عمولة (دون أي تكلفة إضافية عليك)

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

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

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

أهداف وفوائد Well Design Homepage

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

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

تحسين تجربة المستخدم (UX) وواجهة المستخدم (UI) للحصول على مزيد من التحويل

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

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

كيفية تخطيط وتصميم أفضل صفحة رئيسية؟

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

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

أفضل أمثلة تصميم الصفحة الرئيسية مع الشرح وما يجعلها لا تنسى

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

1. Adobe

Adobe واحدة من أكثر شركات البرمجيات شهرة في مجال التصميمات. نستخدم Adobe للعديد من مشاريع التصميم الخاصة بنا من Photoshop إلى After Effects. يريدون منك التسجيل للحصول على نسخة تجريبية مجانية من برامجهم ، لذا فهذه هي الدعوة الرئيسية للعمل. بمجرد رؤية كلمة "مجاني" ، من المحتمل أن تجربها لأنه ليس لديك ما تخسره.

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

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

2. عش

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

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

الألوان الأساسية: أبيض ، أسود ، أخضر ، رمادي
سطر الوصف: مرحبًا بك في Google Next.
الشعار: ابنِ منزلك المفيد.
عبارة تحث المستخدم على اتخاذ إجراء (CTA 1): لا شيء
عبارة تحث المستخدم على اتخاذ إجراء (CTA 2): لا شيء

3. WordPress

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

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

الألوان الأساسية: أبيض ، أسود ، أزرق
Tagline: مرحبًا بك في منشئ مواقع الويب الأكثر شهرة في العالم.
الشعار: 43٪ من مواقع الويب مبنية على WordPress.
دعوة إلى العمل (CTA 1): ابدأ موقع الويب الخاص بك
عبارة تحث المستخدم على اتخاذ إجراء (CTA 2): لا شيء

4. Squarespace

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

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

الألوان الأساسية: الأسود والوردي والأبيض
سطر الوصف: كل شيء لبيع أي شيء
الشعار: ابدأ تجربتك المجانية لموقع الويب اليوم
عبارة تحث المستخدم على اتخاذ إجراء (CTA 1): ابدأ
عبارة تحث المستخدم على اتخاذ إجراء (CTA 2): ابدأ

5. دروب بوكس

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

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

الألوان الأساسية: أسود ، أزرق ، برتقالي
سطر الوصف: حافظ على تنظيم حياتك والعمل يتحرك - كل ذلك في مكان واحد
الشعار: يمنحك Dropbox وصولاً آمنًا إلى جميع ملفاتك.
دعوة للعمل (CTA 1): ابحث عن الخطة لك
عبارة تحث المستخدم على اتخاذ إجراء (CTA 2): لا شيء

6. أوبر

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

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

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

7. WooCommerce

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

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

الألوان الأساسية: الأسود ، الأبيض ، البنفسجي
سطر الوصف: قم ببناء موقع التجارة الإلكترونية الذي تريده بالضبط
الشعار: WooCommerce عبارة عن منصة تجارة إلكترونية قابلة للتخصيص ومفتوحة المصدر مبنية على WordPress
عبارة تحث المستخدم على اتخاذ إجراء (CTA 1): ابدأ متجرًا جديدًا
عبارة تحث المستخدم على اتخاذ إجراء (CTA 2): التخصيص والتمديد

8. HotJar

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

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

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

9. الزفاف الإلكتروني

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

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

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

10. انشورم

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

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

الألوان الأساسية: أسود ، أبيض ، أخضر
Tagline: أنا إيما ، مساعدتك الافتراضية في ميديكير.
الشعار: يمكنني مساعدتك في العثور على المنتجات ومقارنة الأسعار والتسجيل بنفسك.
دعوة للعمل (CTA 1): انظر الخطط
دعوة للعمل (CTA 2): جرب Emma

11. Bluehost

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

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

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

12. FindLaw

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

لديهم شريط بحث كبير في المنتصف حيث يمكنك فقط إدخال معلوماتك أو الرمز البريدي والبحث في قاعدة بيانات جميع المحامين في منطقتك بسهولة. يتوفر CTA "Find My Lawyer" باللون البرتقالي اللامع لذا لا يمكنك تفويته.

الألوان الأساسية: أسود ، أبيض ، برتقالي ، رمادي
Tagline: احصل على المساعدة في جميع احتياجاتك القانونية
الشعار: FindLaw يجعل من السهل العثور على محام
دعوة إلى العمل (CTA 1): ابحث عن المحامي الخاص بي
عبارة تحث المستخدم على اتخاذ إجراء (CTA 2): لا شيء

13. سوكوري

Sucuri هو أحد المواقع المعروفة جيدًا لتنظيف موقع الويب الخاص بك عند اختراقه أو إصابته بالفيروسات. نحن نحب CTA "Fix Hacked Site" ولا توجد أسئلة عما يريدون منك القيام به عند وصولك إلى الصفحة الرئيسية. لقد أتيت إلى هنا مع وجود مشكلة ، ربما تم اختراق موقع الويب الخاص بك ويمكنهم إصلاحه بسهولة من أجلك.

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

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

14. WP Engine

WP Engine هي شركة استضافة WordPress معروفة ولديها صفحة رئيسية نظيفة وبسيطة للغاية مع شعار كبير جدًا يخبرك أنها شركة استضافة WordPress الأولى. يستخدمون اثنين من CTA ، أحدهما باللون الأزرق مع خطط الرسائل والتسعير والآخر هو رؤية جميع منتجاتنا. يستخدمون صورة توضيحية لطيفة جدًا على اليمين توضح لك السرعة والتحليلات والدردشة.

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

الألوان الأساسية: أسود ، أبيض ، عزم الدوران ، أزرق
Tagline: عزز إبداعك على النظام الأساسي رقم 1 لـ WordPress
الشعار: اختر أفضل حل استضافة WordPress لعملك
عبارة تحث المستخدم على اتخاذ إجراء (CTA 1): الخطط والأسعار
عبارة تحث المستخدم على اتخاذ إجراء (CTA 2): شاهد جميع المنتجات

15. الرعاية الصحية المتحدة

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

الألوان الأساسية: أبيض ، عزم الدوران ، أزرق
Tagline: احصل على خطط صحية لك ولعائلتك ، في كل عمر ومرحلة
الشعار: لا يزال هناك متسع من الوقت للحصول على تغطية لعام 2022
دعوة للعمل (CTA 1): ابحث عن خطتك
Call to Action (CTA 2): احصل على مساعدة للعثور على خطة

16. مواضيع أنيقة

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

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

الألوان الأساسية: الأزرق والوردي والأبيض
سطر الوصف: إطلاق العنان لـ WordPress
الشعار: أكثر ثيمات WordPress شيوعًا في العالم وأداة إنشاء الصفحات المرئية المطلقة
دعوة للعمل (CTA 1): أطلق العنان لقوة Divi
عبارة تحث المستخدم على اتخاذ إجراء (CTA 2): التسعير

17. ليفت

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

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

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

18. ستاربوك

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

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

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

19. تكبير

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

CTA باللون البرتقالي مع نص أبيض "تسجيل مجاني" أو يمكنك البحث عن الأسعار والخطط. لا توجد أسئلة حول ما يفعلونه وماذا يريدون أن تستكشف المزيد من خلال الاشتراك في منتجهم.

الألوان الأساسية: أسود ، أبيض ، أزرق
سطر الوصف: Zoom Learning Center
الشعار: Zoom مناسب لك
دعوة إلى العمل (CTA 1): اشترك مجانًا
دعوة للعمل (CTA 2): الخطط والأسعار

20. النعناع

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

الألوان الأساسية: أسود ، أخضر ، أخضر فاتح
سطر الوصف: تبسيط إدارة الأموال
الشعار: رحب بالتطبيق الذي يأخذ العمل من الشؤون المالية الشخصية
دعوة إلى العمل (CTA 1): اشترك في Mint
عبارة تحث المستخدم على اتخاذ إجراء (CTA 2): متجر التطبيقات أو Google Play

21. AirBnB

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

يتألف موقع الويب من 90٪ من السود مع كون اللون الأبيض هو المهيمن والنقاط المحورية. مظهر حديث للغاية وأنيق.

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

22. موما

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

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

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

ملخص تصميم الصفحة الرئيسية

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

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

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

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