ما يجب فعله وما لا يجب فعله في تصميم الويب الرائع

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

عملية تصميم الويب الرائع فقط للتأكد من أننا جميعًا على نفس الصفحة، فلنبدأ بالتعريف الأساسي لـ "تصميم الويب". وفقًا لموقع ويكيبيديا، تصميم الويب هو:

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

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

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

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

هناك بعض الأشياء التي ستحتاجها من أجل تصور وتخطيط موقع الويب الخاص بك بشكل فعال:

• دماغ
• قلم وورقة
• (اختياري) برنامج المخطط الانسيابي
• فكرة عامة عن الأقسام المختلفة لموقعك على الويب

للبدء، أمسك بالقلم والورقة أو قم بتشغيل برنامج المخطط الانسيابي المفضل لديك. نحن نستخدم OmniGraffle Professiona لنظام التشغيل Mac OS X والذي يكلف 150 دولارًا لكل ترخيص ولكنه يستحق ذلك إذا قمت بإنشاء مواقع ويب بشكل منتظم. إذا كنت تستخدم جهاز كمبيوتر، فإن SmartDraw هو برنامج مجاني رائع للمخططات الانسيابية يمكنك استخدامه. ومع ذلك، فإن القلم والورقة يعملان بشكل جيد.

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

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

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

دوس

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

التبرعات
يعد إنشاء مخطط انسيابي أمرًا سهلاً ومباشرًا؛ ومع ذلك، هناك بعض الأخطاء التي يمكن ارتكابها بسهولة:

• لا تستخدم مصطلحات وصفية للغاية في التنقل الأساسي الخاص بك إلا إذا كان موقع الويب الخاص بك بأكمله يركز على موضوع واحد ضيق. - لا تحاول تجميع موضوعات متعددة في نفس الصفحة. قم بإنشاء قسم عام لهذه المواضيع ومن هذا القسم قم بإنشاء أقسام فرعية. سيؤدي هذا إلى زيادة احتمالية حصول صفحات الويب الخاصة بالقسم الفرعي (الوصفي) على تصنيفات أفضل في محركات البحث (Google وYahoo وMSN وAsk). بمجرد إنشاء مخطط انسيابي موجز ووصفي، تصبح جاهزًا للانتقال إلى المرحلة الثانية من عملية تصميم الويب:

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

• شعار
• قائمة التنقل
• محتوى
• الصور ومقاطع الفيديو

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

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

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

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

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

المهام

• نموذج بالحجم الطبيعي لجميع الصفحات الفريدة
• قم بتضمين عناصر مهمة (الشعار، التنقل، موضع المحتوى، موضع الصور/الفيديو) - ابدأ من الأعلى ثم انتقل إلى الأسفل - قم بالإشارة إلى المخطط الانسيابي الذي تم إنشاؤه في المرحلة 1 حتى لا تنسى إنشاء نموذج بالحجم الطبيعي لأي صفحات - احفظ، احفظ، حفظ - كما هو الحال مع أي شيء على الكمبيوتر، احفظ نموذجك (نماذجك) بالحجم الطبيعي كل 10 دقائق أو نحو ذلك
• ركز على التخطيطات النظيفة وسهلة الاستخدام - قم بتسمية العناصر الخاصة بك حتى لا تنسى ماهيتها عندما تشير إليها في المرحلة 3، التنفيذ - استخدم مواقع الويب الأخرى كمصدر إلهام؛ لا حرج في أخذ عناصر من مواقع أخرى وجعلها خاصة بك (راجع "ممنوع التصرف")

لا

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

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

بحلول الوقت الذي تصل فيه إلى المرحلة الثالثة، يجب أن تكون لديك فكرة واضحة عن:

• كيف سينتقل زوار موقعك من مكان إلى آخر (المرحلة الأولى، المخطط الانسيابي) - كيف سيتم تخطيط صفحات الويب الخاصة بك (المرحلة الثانية، نماذج بالحجم الطبيعي السلكي)

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

تخلص من القلم والورقة
في المرحلة 3، يجب عليك استخدام Photoshop أو أي برنامج آخر لتحرير الصور حيث أنك ستستخدم الألوان والرسومات لإنشاء تخطيط موقع الويب الخاص بك.

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

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

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

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

دوس

• قم بالإشارة إلى القوالب الخاصة بك التي تم إنشاؤها في المرحلة 2؛ على الرغم من أنه من الجيد أن تحيد عن التصميم الأصلي الخاص بك، فلا داعي لذلك
• قم ببعض الأبحاث قبل إنشاء التصميم الفعلي الخاص بك؛ احصل على أفكار من مواقع أخرى واجعلها خاصة بك (بدون سرقة أدبية)
• قم بتضمين الألوان والرسومات لإنشاء المظهر النهائي لصفحات الويب الخاصة بك - استخدم CSS (أوراق الأنماط المتتالية) لتحويل تصميماتك من الصور إلى علامات يمكن فهمها بواسطة متصفحات الويب - قم بالإشارة إلى المخطط الانسيابي الخاص بك من المرحلة 1 عند ترميز صفحاتك باستخدام الارتباطات التشعبية؛ من الأفضل استخدام قائمة منسدلة تتضمن جميع (أو أغلبية) الروابط الموجودة في موقع الويب الخاص بك في كل صفحة؛ سيسمح هذا بتنقل أسهل ويجعل أيضًا صفحاتك أسهل في الزحف عندما تتوقف عناكب محرك البحث؛ يعد موقع DynamicDrive.com مكانًا رائعًا للحصول على قوائم CSS المنسدلة - قم بوضع اللمسات النهائية على تصميمك أثناء العمل في Photoshop أو أي برنامج تحرير صور تستخدمه؛ قد يكون من الصعب إجراء تغييرات على تصميمك بمجرد تحويله إلى علامة (رمز)

التبرعات

• لا تقم بتضمين النص في قوائم التنقل الخاصة بك عند التحويل إلى CSS؛ بدلاً من استخدام نص الصورة، استخدم نصًا عاديًا يمكن قراءته بواسطة عناكب محرك البحث
• لا تستخدم الجداول عند التحويل؛ حتى لو كنت بحاجة إلى شراء كتاب عن CSS، فسيكون الأمر يستحق ذلك؛ الجداول ميتة
• لا تتجاوز المرحلتين الأوليين فقط لتوفير الوقت؛ سيكون موقع الويب الخاص بك أفضل إذا بدأت من بداية عملية تصميم الويب (بدلاً من النهاية)
• لا تنس ضغط صورك عندما يتم تقطيعها إلى أجزاء لـ CSS؛ لا يوجد شيء أسوأ من موقع ويب بطيء التحميل بسبب ملفات الصور الكبيرة؛ يحتوي Photoshop على خيار "حفظ محسّن للويب" (CS3 - "حفظ للويب والأجهزة")

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