الوصايا الثماني لعملية تصميم الويب (للمبتدئين وبدون كود)
نشرت: 2021-11-01
اكتشف كيف يمكنك إنشاء موقع ويب ناجح باتباع عملية تصميم موقع ويب منظمة.
فرضيتنا هي أنك عثرت بالفعل على اسم مجال ومزود استضافة.
إذا لم تكن قد اخترت مضيفك بعد ، فنحن نوصي حقًا بشريكنا Cloudways .
في المثال أدناه ، يتم تقديم الخطوات للحالة التي تقوم فيها بإنشاء موقع ويب لنفسك. إذا كان موقع الويب خاصًا بعميل ، فقد تحدث خطوات جديدة فيما يتعلق بتخطيط المشروع ، وإعداد المواعيد النهائية ، والعقد ، والمزيد. ولكن في الأساس ، لا يزال يتعين عليك الالتزام بالخطوات الموضحة أدناه.
الآن ، هذه هي الخطوات:
- تحديد النطاق : ما هي الاحتياجات التي يجب أن يلبيها الموقع؟ إلى من يتحدث الموقع؟ ما هي أهدافها ومحفزاتها؟ ما هي الشركات التي لها نفس النطاق والجمهور المستهدف مثلك؟
- تحديد خريطة موقع الويب : ما هي صفحات الويب والميزات التي تساعد الأعمال والجمهور في تحقيق أهدافهم؟
- إنشاء المحتوى : تجهيز النسخة لصفحات الموقع ؛
- إنشاء العلامة التجارية المرئية : إعداد لوحة الألوان والخطوط والرسومات لاستخدامها في تصميم موقع الويب الخاص بك ، والتي ستؤدي في النهاية إلى تشكيل هويتك المرئية ؛
- التخطيط الشبكي : رسم تخطيط صفحات الويب الخاصة بك ؛
- تصميم موقع الويب : إنشاء موقع الويب الفعلي ، كن على دراية بقيود الأدوات التي تستخدمها ؛
- الاختبار : التأكد من أن كل شيء يعمل ، من الروابط إلى النماذج والأزرار. اختبر الموقع على متصفحات وأجهزة مختلفة للتأكد من أنه يعمل بشكل صحيح ؛
- الإطلاق: قم بإحداث بعض الضوضاء قبل بدء البث المباشر باستراتيجية اتصال مخططة بعناية.
لنأخذهم واحدًا تلو الآخر.
خطوات عملية تصميم الموقع
1. تحديد النطاق
في هذه المرحلة ، ستحتاج أنت وفريقك إلى معرفة إجابات بعض الأسئلة أدناه:
- لمن هذا الموقع؟
قد يكون لموقع الويب اللافت للنظر امتيازاته ، ولكن إذا كنت تريد أن يلتزم زوار موقعك على الويب بأموالهم أو وقتهم ، فهذا يعني أنك بحاجة إلى المزيد من البحث ، من أجل إقناعهم بأن الالتزام يستحق ذلك. لكي تكون مقنعًا ، ستحتاج إلى فهم جمهورك المستهدف ، وفهم احتياجاته ، والدوافع الداخلية والخارجية.
يعني هذا الحفر أيضًا أنك بحاجة إلى إنشاء منتج مفيد ويلبي احتياجات شخص ما.
على سبيل المثال ، لنفترض أن لديّ هواية في صنع تنسيقات الزهور الورقية وأريد أن أواصلها وتحويلها إلى عمل تجاري. هل من أحد ورق الزهور؟ أين يمكنني أن أجد هؤلاء الأشخاص؟
حسنًا ، قد أعتقد أن منظمي حفلات الزفاف وعرائس المستقبل قد يرغبون في مثل هذا الخيار.
لكن يجب أن أذهب أبعد من ذلك. هل تريد كل عروس زهوري الورقية أم مجرد نوع من العروس؟
هذا يعني أنك ستحتاج إلى إجراء بعض الأبحاث والتحقق من منافسيك. هل هناك تجار زهور ورقية أخرى؟ أنت أيضًا تنافس محلات الزهور القديمة الجيدة. ما هي القيمة المضافة الخاصة بك ، أو القيمة الفريدة الخاصة بك؟
- ما الذي يتوقع زوار موقعك العثور عليه على موقع الويب الخاص بك؟
بالعودة إلى مثالنا ، ربما يرغب زوار موقعك في رؤية مجموعة متنوعة من المنتجات ، والألوان ، ومعلومات عن الشحن (قد يحتاجون إلى مزيد من العناية لأن الزهور الورقية هشة) ، وما إلى ذلك. ماذا عن بعض الإشارات إلى أن الورق معاد تدويره ؟ ربما يكون عملاؤك مدركين تمامًا لتأثيرهم على البيئة ، وهم يهتمون بمثل هذه التفاصيل
هل يمكن لشخص ما أن يؤجر الزهور؟
الآن ، ماذا لو قمت بتضمين بعض الشهادات؟ ربما صممت بعض تنسيقات الزهور الورقية لحفلات زفاف أصدقائك.
ترى من أين أنا؟ تحتاج إلى إجراء البحث الخاص بك ، قبل القفز إلى تصميم موقع الويب.
- كيف تبدو التحويلات؟
هل نتحدث عن التسجيل في الدورة ، شراء منتج ، الاشتراك في النشرة الإخبارية؟
في حالة يوم الاثنين ، يمكنك بسهولة معرفة تحويلاتهم من الصفحة الرئيسية. 
يكون التحويل الرئيسي واضحًا من عبارة "البدء" التي تحث المستخدم على اتخاذ إجراء ، والتي يتم وضعها في الجزء المرئي من الصفحة مباشرةً ، في المنتصف.
التحويل الجزئي الآخر هو التسجيل في المؤتمر ، والذي يمكنك ملاحظته من الرسالة الموجودة في الزاوية العلوية اليسرى.
تحويل صغير آخر هو "مبيعات الاتصال".
ماذا عن موقع الويب الخاص بك ، هل هناك تحويل رئيسي؟ هل هناك بعض الثانوية؟
- كيف تبدو رحلة العميل؟
خريطة رحلة العميل هي تمثيل مرئي للمسار الذي يسلكه الزائر عبر موقع الويب الخاص بك من مدخله ، حتى يصل إلى الهدف المنشود ويغادر.
يجب أن تتضمن خريطة رحلة العميل معلومات مثل الصفحات التي تتم زيارتها وبأي ترتيب ، والخطوات اللازمة ليحقق زائر الموقع أهدافه ، ونقاط التفاعل بين شركتك وزوار الموقع (النماذج ، الدردشة ، إلخ) ، نقاط الاحتكاك المحتملة.
لم يتم إصلاح رحلة العميل. تبدأ بافتراض ثم تعدل على طول الطريق. يمكنك استخدام أدوات مثل Google Analytics لتحليل سلوك موقع الويب وإجراء تحسينات بناءً على رؤى حقيقية.
2. تحديد خريطة موقع الموقع 
مصدر
الآن وقد أصبحت رحلة العميل واضحة ، فقد حان الوقت لإنشاء خريطة الموقع. تُستخدم خريطة موقع الويب لإنشاء بنية معلومات موقع الويب وتشرح العلاقات بين الصفحات المختلفة.
يمكنك إنشاء خرائط مواقع في أدوات تتراوح من Excel إلى Figma.
3. إنشاء المحتوى 
الآن وقد تم إنشاء هيكل موقع الويب ، فقد حان الوقت لإنشاء محتوى للصفحات الفردية.
فيما يلي بعض أفضل ممارسات الحالة عندما يتعلق الأمر بكتابة الإعلانات:
- استخدم كلمات ومفاهيم مألوفة للمستخدمين المثاليين ؛
- لا تذهب مع الزغب والمصطلحات ؛
- حاول التواصل كما تفعل في المواجهة العادية وجهاً لوجه. بهذه الطريقة سوف تحفز الشعور بالألفة ؛
- اكتب في المضارع ، وتجنب المبني للمجهول ؛
- تحقق دائما من سهولة القراءة الخاصة بك. لهذا ، يمكنك استخدام أدوات مثل Readable .
- اختبر عناوينك مع الأصدقاء والغرباء والزملاء. كما قال ديفيد أوجيلفي:
"في المتوسط ، 5 أضعاف عدد الأشخاص الذين يقرؤون العنوان الرئيسي كما يقرؤون نسخة الجسم. عندما تكتب عنوانك ، تكون قد أنفقت ثمانين سنتًا من دولاراتك ".
هذا يعني أن العناوين الرئيسية مهمة على موقع الويب.
حاول تحسين المحتوى الخاص بك حول بعض الكلمات الرئيسية ذات الصلة لجمهورك (SEO). يمكنك استخدام أدوات مثل اتجاهات Google (مجانًا) أو Ubersuggest (مجانًا) أو Ahrefs (مدفوع).
- استفد من إطار عمل كتابة الإعلانات AIDA.
أ- الانتباه : قم بإنشاء محتوى يلفت الانتباه ، ويثير الفضول ، ويقنع جمهورك أنه بحاجة إلى معرفة المزيد عن علامتك التجارية.
أولاً - الاهتمام : امنح زوار موقعك سببًا للبقاء على اتصال. المفتاح هنا هو جعل المشكلة شخصية بحيث لا تتحدث إلا مع العميل المحتمل ولا أحد غيرك.
د - الرغبة : هذا هو المكان الذي تظهر فيه لزوار صفحتك الرئيسية كيف تقدم عروضك حلاً لمشكلتهم / ألمهم. هنا يمكنك البدء في شرح ميزات منتجك ، مع التركيز على كيفية تحسين هذه الميزات لحياتهم.
أ - الإجراء : حان الوقت الآن لإقناع العملاء المحتملين بالتصرف: الشراء والاشتراك وتنزيل الهدية الترويجية وبدء تجربة وما إلى ذلك.
4. خلق العلامة التجارية المرئية
لا يجب أن تكون هذه الخطوة دائمًا خطوتك الرابعة. يمكنك أن تبدأ في وقت مبكر من هذه العملية.
تشير الهوية المرئية إلى الطريقة التي تشكل بها التصور حول علامتك التجارية.
هذه عملية كاملة في حد ذاتها.
هنا سوف تحتاج إلى:
- حدد كيف يجب أن تبدو الرسومات الخاصة بك. هل ستستخدم الأشكال والرسومات ثلاثية الأبعاد والرسوم التوضيحية؟
مصدر
- تحديد طباعة موقع الويب الخاص بك ؛
مصدر
- اختر لوحة الألوان . من لوحة الألوان ، يمكنك التطور إلى دليل الأنماط ، حيث يمكنك إنشاء ألوان الروابط والعناوين الرئيسية والأزرار والخلفيات وما إلى ذلك ، لذلك يمكنك استخدام أدوات مثل عجلة ألوان Adobe .
مصدر
- تنظيم الصور التي تحكي قصة علامتك التجارية ؛
المصدر: https://convertsquad.com/blog/
- صمم شعارك
مصدر
- قم بإعداد الأصول المادية (تغليف المنتج ، إلخ).
مصدر
يمكن استخدام معظم العناصر المذكورة أعلاه لإنشاء لوحة مزاجية. عندما تقوم بتجميع الخطوط والرسومات والألوان في لوحة الحالة المزاجية ، ستتمكن من فهم رؤية الحالة العامة لموقع الويب بشكل أفضل. كيف ستكون نبرة صوتك بشكل عام: فاتح أم غامق؟ رسمي أم مرح؟ 
مصدر
5. إطارات سلكية 
مصدر
الإطارات الشبكية هي رسومات تخطيطية لصفحة ويب أو تطبيق. يمكنك رسمها يدويًا أو إنشائها في محرر مستندات Google أو Sketch أو Figma ، اعتمادًا على مدى تعقيد موقع الويب الخاص بك. يستخدم الإطار السلكي لتخطيط المحتوى والوظائف على الصفحة. يجب أن يخبر المصمم بالمكان الذي يجب أن يضع فيه مقطع الفيديو والصور والعناوين الرئيسية وكتل المحتوى والأزرار وما إلى ذلك. من الجيد استخدام الإطارات الشبكية قبل الانتقال إلى التصميم لأنها تتيح لك أن تكون أكثر مرونة. يعد تعديل هيكل الإطار الشبكي أسهل من تعديل هيكل موقع الويب المصمم مسبقًا.
6. تصميم الموقع 
مصدر
الآن نحن نتحدث عن الأعمال!
لدينا المحتوى والإطارات الشبكية والعناصر المرئية ، والآن حان وقت العمل.
كما هو مذكور في العنوان ، لست بحاجة إلى أن تكون مصمم ويب أو خبيرًا برموزًا لإنشاء موقع ويب. هناك الكثير من الأدوات لمساعدتك في تصميم موقع ويب بدون رمز. يطلق عليهم بناة الصفحة.
يسمح لك معظمها بتخصيص كل شبر من تصميمك ، وجعله مستجيبًا.
داخل WordPress ، يمكنك استخدام مُنشئ Colibri الخاص بنا ، أو Elementor ، على سبيل المثال. خارج WordPress ، تحظى Wix و Squarespace بشعبية كبيرة. يمكن أن تزودك هذه الأدوات بالقوالب التي يمكنك إثرائها عن طريق إضافة الأقسام والمرئيات والمحتوى الخاص بك.
الآن ، إذا كان تصميمك يتطلب رسومًا متحركة وتأثيرات معينة ، فقد تحتاج إلى إضافة بعض التعليمات البرمجية.
7. الاختبار
حسنًا ، لنفترض أن المحتوى والمرئيات الخاصة بك قد ارتفعت. وظيفتك ليست جاهزة بعد. حان الوقت للتأكد من أن كل شيء يعمل: ليس لديك أي روابط تؤدي إلى أي مكان (ويعرف أيضًا باسم الروابط المعطلة أو 404) ، وأن جميع الأزرار والنماذج تعمل ، وأن موقع الويب يبدو جيدًا على معظم المتصفحات والأجهزة.
الآن ، قبل الإطلاق ، يمكنك أن تختبر قليلاً كيف ينظر الأشخاص الخارجيون إلى موقعك على الويب. بهذه الطريقة يمكنك تجنب الوقوع في انحيازاتك الخاصة. لهذا ، يمكنك إجراء بحث مستخدم بسيط: اختبار 5 ثوان . هذه طريقة تساعدك في قياس الانطباع الأول الذي يحصل عليه المستخدمون خلال الثواني الخمس الأولى من مشاهدة الصفحة الرئيسية ، على سبيل المثال
8. إطلاق
الآن ، عند بدء التشغيل ، ما عليك سوى النقر على "نشر" والانتهاء من ذلك. لا ، أنت بحاجة إلى إثارة بعض الضجة ، وإطلاق بعض حملات العلاقات العامة ، وإجراء صيحة على وسائل التواصل الاجتماعي لإعلام الناس بأنك في الخارج!
وهذا هو التفاف الناس. الآن لديك الخطوات الصحيحة لعملية تصميم الويب.
بناء موقع سعيد!
إذا أعجبك هذا المقال ، وترغب في معرفة المزيد حول كيفية تصميم موقع WordPress على الويب ، فتأكد من الاشتراك في قناة Colibri's Youtube ومتابعتنا على Twitter و Facebook!