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