15 فكرة لتصميم مواقع الويب لموقعك التالي على الويب

نشرت: 2019-09-19

قد يبدو إنشاء موقع على شبكة الإنترنت أمرًا صعبًا للغاية عندما تكون في مرحلة أولية للغاية. ومع ذلك ، إذا تم تقسيمها خطوة بخطوة وفهمها بالكامل ، فإن العملية بسيطة نسبيًا. اسأل 5Ws (من وماذا ولماذا ومتى ومن) و 1 H (كيف). سيساعدك هذا في الحصول على فكرة واضحة حول كيفية البدء.

جدول المحتويات إخفاء
1. النعناع:
2. Dropbox: دبوس
3. التفاح: دبوس
4. تصميم الكافا: دبوس
5. Maaemo:
6. القارب: دبوس
7. Think Quarterly-Google: Pin
8. ستينكس ستوديوز:
9. قرى الأطفال SOS في الهند: Pin
10. سيبور:
11. بونفير: دبوس
12. حلبك:
13. Chownow: دبوس
14. جولدمان ساكس:
15. عطلة TN: دبوس

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

1. النعناع:

دبوس

الغرض : Mint يساعد الأفراد والشركات على إدارة جميع فواتيرهم وحساباتهم في مكان واحد.

الميزة : مخططات الألوان.

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

2. Dropbox: دبوس

الغرض : Dropbox معروف بقدرات تخزين الملفات ومشاركتها. يصبح مكانًا مركزيًا للوصول إلى البيانات ومشاركتها للمؤسسات.

الميزة: استخدام الرسوم المتحركة التعليمية.

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

3. التفاح: دبوس

الغرض: توفير خدمات وأجهزة متعددة في مجال التكنولوجيا لإنشاء نظام بيئي سلس لمستخدميه.

الميزة: عبارات تحث المستخدم على اتخاذ إجراء موضوعة بذكاء

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

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

4-تصميم الكافا: دبوس

الغرض: إنها شركة إبداعية متخصصة في العلامات التجارية والتفاعلية وتجارب التعبئة والتغليف في الحياة.

الميزة: طباعة.

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

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

5. Maaemo:

دبوس

الغرض: موقع ويب لمطعم يستخدم منتجات طبيعية ومحلية لمساعدة الناس على فهم المشهد والثقافة المحلية من خلال الطعام.

الميزة: نهج أضيق الحدود

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

يجب أن تفكر في شيء على نفس المنوال إذا كان منتجك أو خدمتك فريدة ؛ يمنحك ميزة.

6. القارب: دبوس

الغرض: القارب عبارة عن رواية تفاعلية تعتمد على الرسوم البيانية حول الكفاح ورحلة الهروب من حرب فيتنام.

الميزة: Parallax Scrolling

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

7. Think Quarterly-Google: دبوس

الغرض: Think كل ثلاثة أشهر هو منشور Google ربع السنوي الذي يتناول حركات واتجاهات الويب.

الميزة: مساحة بيضاء

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

8. ستينكس ستوديوز:

دبوس

الغرض: إنه استوديو إبداعي عالمي له مكاتب في جميع أنحاء العالم.

الميزة: تمرير الماوس فوق النص

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

9. قرى الأطفال SOS في الهند: دبوس

الغرض: قرى الأطفال SOS هي منظمة غير حكومية تعمل على مساعدة هؤلاء الأطفال الذين ليس لديهم والديهم أو فقدوهم في حادث مؤسف أو لأسباب أخرى.

الميزة: جولة افتراضية

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

10. سيبور:

دبوس

الغرض: SIBUR هي شركة روسية متكاملة للبتروكيماويات. تشتري وتعالج الهيدروكربونات إلى عناصر مختلفة مثل البلاستيك والمطاط الطبيعي وما إلى ذلك.

الميزة: الرسوم المتحركة

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

11. بونفير: دبوس

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

الميزة: الرسوم التوضيحية

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

12. حلبك:

دبوس

الغرض: Helbak Ceramics عبارة عن مجموعة من منتجات السيراميك من إنتاج Malene Helbak والتي تجمع بين بساطة التصميم الاسكندنافي والألوان الرائعة في خط السيراميك.

الميزة: تصوير المنتج

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

13. Chownow: دبوس

الغرض: ChowNow عبارة عن منصة لطلب الطعام عبر الإنترنت. يربط العملاء بمطعمهم المحلي.

الميزة: شهادات

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

14. جولدمان ساكس:

دبوس

الغرض: تقديم مجموعة واسعة من الخدمات المالية لعميل كبير ومتنوع يشمل الشركات والحكومات والأفراد.

الميزة: رسوم بيانية

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

15. عطلة TN: دبوس

الغرض: الموقع الرسمي لوزارة التنمية السياحية بولاية تينيسي وهي وكالة على مستوى مجلس الوزراء داخل حكومة ولاية تينيسي.

الميزة: خريطة جوجل البرنامج المساعد

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

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