تعلمك مقالة ويكي هاو هذه كيفية تصميم موقع ويب سلس وذو مظهر احترافي. بينما أنت حر في اتخاذ قرار بشأن تصميم موقعك ، فهناك بعض الأشياء المهمة التي يجب عليك القيام بها وتجنبها عند إنشاء موقع ويب.
خطوة
جزء 1 من 2: إنشاء تصميم موقع
الخطوة الأولى. قرر ما إذا كنت تريد استخدام منشئ مواقع الويب
يتطلب إنشاء موقع ويب من البداية فهمًا تفصيليًا لرمز HTML ، ولكن يمكنك إنشاء موقع باستخدام خدمة استضافة مجانية مثل Weebly أو Wix أو WordPress أو مواقع Google. يميل منشئو مواقع الويب إلى أن يكونوا أسهل بكثير للمصممين المبتدئين من HTML.
- إذا قررت الترميز بنفسك ، فيجب أن تتعلم ترميز HTML و CSS.
- إذا كنت مترددًا في تخصيص الوقت والجهد لإنشاء موقع الويب الخاص بك ، فيمكنك تعيين مصمم موقع ويب. تختلف خدمات المصممين لحسابهم الخاص على نطاق واسع ، فبعضها يتقاضى رسومًا في الساعة وبعضها لكل مشروع ، مع نطاق إجمالي من الملايين إلى عشرات الملايين من الروبيات.
الخطوة 2. إنشاء خريطة الموقع
قبل فتح منشئ موقع الويب ، يجب أن تحدد عدد الصفحات الموجودة على الموقع ، ومحتوى كل صفحة ، والتخطيط العام للصفحات المهمة مثل "الصفحة الرئيسية" و "حول".
سيكون من الأسهل بالنسبة لك تصور صفحات موقعك عن طريق إنشاء صور تقريبية ، وليس مجرد ظلال
الخطوة 3. استخدم تصميمًا بديهيًا
في حين أن الأفكار الجديدة مثيرة للاهتمام عادةً ، يجب أن تتبع التصميمات الأساسية هذه الإرشادات العامة:
- يجب وضع خيارات التنقل (على سبيل المثال ، علامات تبويب متعددة لصفحات مختلفة) في أعلى الصفحة.
- إذا كنت تستخدم رمز القائمة (☰) ، فيجب أن يكون في الزاوية العلوية اليسرى من الصفحة.
- إذا كنت تستخدم شريط البحث ، فضعه بالقرب من أعلى الجانب الأيمن من الصفحة.
- يجب أن تكون الروابط المفيدة (على سبيل المثال ، الروابط إلى صفحات "حول" أو "اتصل بنا") في أسفل الصفحة.
الخطوة 4. كن متسقًا
بغض النظر عن النص ولوحة الألوان وموضوع الصورة والتصميم الذي تختاره ، تأكد من تطبيق نفس القرارات في جميع أنحاء موقعك. سوف يفاجأ المستخدمون عندما يرون أن نظام الخطوط والألوان في صفحة "حول" مختلف تمامًا عن ذلك المستخدم في الصفحة الرئيسية.
- على سبيل المثال ، إذا كنت تستخدم لونًا ناعمًا لصفحتك الرئيسية ، فلا تستخدم لونًا ساطعًا في الصفحة التالية.
- لاحظ أن استخدام الألوان الزاهية أو المتضاربة ، وخاصة الألوان المعروضة (أو المتحركة) ديناميكيًا ، يمكن أن تؤدي إلى نوبات أو نوبات صرع لدى أقلية من المستخدمين. إذا قررت استخدام مثل هذا اللون ، فتأكد من تضمين تحذير "خطر النوبة" قبل الصفحة المعنية.
الخطوة 5. إضافة خيارات التنقل
سيساعد وضع روابط مباشرة لصفحات مهمة فوق الصفحة الرئيسية الزوار الجدد على المحتوى الذي يهمهم. يضيف معظم منشئي مواقع الويب هذا الرابط افتراضيًا.
من المهم التأكد من أنه يمكن الوصول إلى جميع صفحات الموقع من خلال النقر فوق خيار داخل الموقع بدلاً من الوصول إليها فقط عبر عنوان الصفحة
الخطوة 6. استخدم ألوان متطابقة
مثل جميع أنواع التصميم ، يعتمد تصميم موقع الويب أيضًا على مجموعات الألوان الممتعة. لذلك ، يعد اختيار لون النسق المطابق أمرًا مهمًا للغاية.
إذا كنت مرتبكًا ، فابدأ باللون الأسود والأبيض والرمادي
الخطوة 7. النظر في تصميم بسيط
يشجع مفهوم الحد الأدنى على استخدام الدرجات اللونية الرائعة والرسومات البسيطة وصفحات النص الأسود على خلفية بيضاء والقليل من الزخرفة قدر الإمكان. نظرًا لأن التصميم البسيط يتطلب عددًا قليلاً جدًا من العناصر ، فمن السهل جعل موقعك يبدو احترافيًا وجذابًا دون بذل الكثير من الجهد.
- يوفر معظم منشئي مواقع الويب مظهرًا "بسيطًا" يمكنك الاختيار من بينها عند إنشاء موقع ويب.
- البديل البسيط هو "الوحشية" ، والتي تستخدم كلمات أكثر قسوة وألوانًا زاهية ونصًا جريئًا ورسومات بسيطة. يوجد عدد أقل بكثير من مستخدمي التصاميم الوحشية مقارنة بالحد الأدنى ، ولكن إذا كان المحتوى مناسبًا ، يمكن أن يكون هذا التصميم اختيارًا جيدًا.
الخطوة 8. تطبيق خيارات فريدة
تعتبر عناصر الشبكة والخط المستقيم اختيارات آمنة ، ولكن بعض الأنماط الفريدة ستضيف لمسة شخصية وتميز موقعك عن البقية.
- لا تخف من عكس الاتجاه عن طريق وضع عناصر موقع غير متكافئة أو استخدام عناصر مكدسة لإنشاء مظهر متعدد الطبقات.
- على الرغم من أن العناصر المربعة الأنيقة وذات الحواف الحادة (المعروفة باسم العرض التقديمي المستند إلى البطاقة) أقل استحسانًا من العناصر المستديرة الناعمة.
جزء 2 من 2: تعظيم أداء الموقع
الخطوة الأولى. استفد من خيارات تحسين السيارة
تجلب متصفحات الجوال حركة مرور أكثر من متصفحات سطح المكتب. هذا يعني أن الاهتمام الذي توليه لإصدار الهاتف المحمول يجب أن يكون على الأقل هو نفسه تطوير موقع سطح المكتب. قامت معظم مواقع الويب الخاصة بالمُنشئين تلقائيًا بإصدار نسخة للسيارة ، ولكن ضع المعلومات التالية في الاعتبار لمواقع الجوّال:
- تأكد من أن الأزرار (على سبيل المثال ، روابط أقسام الموقع) كبيرة ويسهل النقر عليها.
- تجنب الميزات التي لا يمكن رؤيتها على الأجهزة المحمولة (مثل Flash و Java وما إلى ذلك).
- ضع في اعتبارك إنشاء تطبيق سيارات لموقعك.
الخطوة 2. لا تقم بتضمين الكثير من الصور في كل صفحة
تواجه متصفحات سطح المكتب والجوال أحيانًا مشكلة في تحميل الصفحات التي تحتوي على الكثير من الصور أو مقاطع الفيديو. في حين أن الصور مهمة جدًا في تصميم الويب ، فإن الكميات الزائدة من الوسائط لكل صفحة يمكن أن تطيل أوقات التحميل ، وهذا يثني المستخدمين عن زيارة تلك الصفحات.
بشكل عام ، يجب أن يستغرق تحميل الصفحة أقل من أربع ثوانٍ
الخطوة 3. أضف صفحة "جهة اتصال"
قد تلاحظ أن معظم المواقع توفر صفحة "اتصل بنا" تحتوي على معلومات الاتصال (مثل رقم الهاتف وعنوان البريد الإلكتروني). في الواقع ، تقدم بعض المواقع نموذج استفسار آليًا على هذه الصفحة. صفحة "الاتصال" هي خط اتصال مباشر بينك وبين زوار الموقع ، مما يعني أنها أيضًا حل لسؤال الزائر أو إحباطه.
الخطوة 4. قم بإنشاء صفحة 404 مخصصة
عندما يصل زائر إلى صفحة معينة لم يتم إنشاؤها أو غير موجودة ، ستظهر صفحة "خطأ 404". توفر معظم المتصفحات صفحة 404 مضمنة ، ولكن يمكنك تخصيص شكلها من إعدادات منشئ موقع الويب. إذا كنت تريد إنشاء صفحة 404 مخصصة ، أدخل التفاصيل التالية:
- رسائل خطأ مضحكة وممتعة (على سبيل المثال ، "تهانينا ، لقد وصلت إلى صفحة خطأ!")
- ربط العودة إلى الصفحة الرئيسية
- قائمة الروابط التي يراها الزوار عادة
- صورة موقعك أو شعاره
الخطوة 5. أدخل شريط البحث إن أمكن
إذا كانت طريقة منشئ موقع الويب التي تستخدمها تدعم إضافة شريط بحث ، فإننا نوصي بإضافته. يضمن ذلك أن يتمكن المستخدمون من العثور على الصفحة المحددة أو المحتوى الذي يبحثون عنه دون الحاجة إلى النقر فوق جميع خيارات التنقل.
يعد شريط البحث مفيدًا جدًا أيضًا عندما يريد الزائرون البحث عن مصطلحات شائعة دون الانغماس في صفحات عشوائية
الخطوة 6. انتبه أكثر للصفحة الرئيسية
عندما يذهب الزوار إلى الصفحة الرئيسية ، يجب أن يكونوا قد فهموا جوهر موضوع موقعك. بالإضافة إلى ذلك ، يجب تحميل جميع عناصر الصفحة الرئيسية بسرعة ، بما في ذلك خيارات التنقل والصور. يجب أن توفر الصفحة الرئيسية أيضًا الجوانب التالية:
- عبارة تحث المستخدم على اتخاذ إجراء (على سبيل المثال ، زر للنقر أو نموذج لملءه)
- شريط الأدوات أو قائمة التنقل
- دعوة الرسومات (مثل صورة صلبة أو مقطع فيديو أو صور متعددة بنص مكمل)
- الكلمات الرئيسية المتعلقة بالخدمة أو الموضوع أو التركيز على موقعك
الخطوة 7. اختبر موقعك على متصفحات ومنصات مختلفة
هذا مهم جدًا لأن المتصفحات تعالج جوانب موقع الويب بطرق مختلفة. قبل الترويج لموقعك ، حاول فتح موقعك واستخدامه في المتصفحات التالية على أنظمة Windows و Mac و iPhone و Android:
- جوجل كروم
- ثعلب النار
- Safari (iPhone و Mac فقط)
- Microsoft Edge و Internet Explorer (نظام التشغيل Windows فقط)
- المتصفح الافتراضي لبعض هواتف Android (Samsung Galaxy و Google Nexus وما إلى ذلك)
الخطوة 8. حافظ على تحديث الموقع
تتغير اتجاهات التصميم والروابط والصور والمفاهيم والكلمات الرئيسية دائمًا. لذلك ، يجب عليك دائمًا إجراء تغييرات لمواكبة العصر. يجب عليك التحقق من أداء موقعك ومقارنته بالمواقع المماثلة مرة واحدة على الأقل كل ثلاثة أشهر (يفضل أكثر من ذلك).
نصائح
- تعد إمكانية الوصول أيضًا جانبًا مهمًا بنفس القدر في تطوير موقع الويب. تتضمن إمكانية الوصول أوصافًا للزوار ضعاف السمع ، وأوصافًا صوتية للزوار المعاقين بصريًا ، وتنبيهات الحساسية للضوء إذا كان موقعك يستخدم تأثيرات يحتمل أن تسبب النوبات.
- يوفر معظم منشئي مواقع الويب قوالب يمكنك استخدامها لتحديد التخطيط والتصميم قبل إضافة العناصر المطلوبة.
تحذير
- معظم مواقع المبدعين مجانية ، ولكن إذا كنت تريد استخدام المجال الخاص بك (مثل "www.yourname.com" بدلاً من "www.yourname.wordpress.com") ، فستحتاج إلى دفع رسوم شهرية أو سنوية.
- تجنب الانتحال وتعلم جميع قوانين حقوق النشر. لا تقم بتضمين صور عشوائية من الإنترنت أو عناصر هيكلية بدون إذن.
