‫خطوات تصميم مواقع الويب‬

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

‫‪ ‬ال يؤدي موقع الويب الجيد التنظيم والواضح إلى زيادة عدد الزيارات فحسب‪ ،‬بل‬

‫يساعد أيضا ً الزوار على فهم األعمال والمنتجات والخدمات الخاصة بك من خالل‬

‫الجمع بين النصوص والصور والرسوم المتحركة أحيانا ً‪ .‬ونتيجة لذلك‪ ،‬تساعد تجربة‬

‫المستخدم الجيدة الشركة على الوصول إلى المزيد من العمالء‪.‬‬

‫مراحل تصميم وانشاء موقع الويب‬

‫‪ ‬هناك الكثير من األشياء التي يجب أن تؤخذ بعين االعتبار عند تطوير الشكل‬

‫والمظهر للموقع‪ .‬لمساعدتك في مراحل تصميم وإنشاء موقع الويب‪ ،‬قسمنا هذه‬

‫المراحل إلى عدة خطوات‪:‬‬

 ‫‪ .1‬تحديد االحتياجات واألهداف وتدوينها‬

‫‪ ‬في البداية‪ ،‬يجب عليك تحديد االحتياجات من تصميم موقع إلكتروني‪ .‬اسأل نفسك عن‬

‫السبب الذي يجعلك تُص ّمم موقعًا إلكترونيًا‪ ،‬أو ح ّدد المشكلة التي ت ُريد حلها من خالل‬

‫التصميم‪ .‬ح ّدد هدفًا واض ًحا تريد تحقيقه من تصميم الموقع اإللكتروني‪ .‬سيساعدك‬

‫ذلك في تعريف وظائف الموقع والميّزات التي سيحتويها‪.‬‬

 ‫‪ ‬فوفقًا للهدف ال ُمح َّدد‪ ،‬يختلف تصميم مواقع الويب‪ْ .‬‬
‫فإن كنت تنوي إنشاء موقع ت ُ َ‬
‫عرض‬

‫فيه إنجازاتك في مجال الفنون أو الطبخ‪ ،‬سيختلف تصميمه عما إذا كان الهدف‬

‫األول ستهتم بوضع أكبر عدد‬

‫عرض منتجات تجميل على سبيل المثال‪ ،‬في التصميم ّ‬

‫ممكن من الصور الجذابة بجودة عالية‪ ،‬في حين ستُر ّكز في تصميم الموقع الثاني‬

‫على الموازنة ما بين النصوص والصور وتوفير أزرار الدفع بصورة بارزة‪.‬‬
‫وقبل أن تبدأ عملية تصميم موقع إلكتروني‪،‬‬
‫عليك أن تسأل نفسك األسئلة التالية‪:‬‬
‫‪ ‬من هم جمهورك المستهدف؟‬

‫‪ ‬ما هي األهداف الرئيسية التي تريد تحقيقها من خالل موقعك اإللكتروني؟‬

‫‪ ‬ما هي الخدمات التي تريد تقديمها لعمالئك؟‬

‫‪ ‬ما الفائدة التي يُق ّدمها موقعك الحالي إن ُو ِجد؟‬

‫‪ ‬كيف يُؤ ّدي منافسيك؟ ما هي األنماط المتبعة؟ هل يحافظون على أنماط التصميم‬

‫التقليدية أم يُواكبون العصر بتصاميم مواقعهم؟‬

 ‫ً‬
‫موجزا يتضمن التفاصيل الرئيسية حول تصميم موقع الويب‪ ،‬بما في ذلك‬ ‫‪ ‬أنشئ‬

‫الموعد النهائي للتسليم والجمهور المستهدف واألدوات التي ستُستخدم خالل مراحل‬

‫التصميم والتطوير‪ ،‬فذلك سيساعدك على فهم المدة والقدرات التي تحتاجها للتصميم‪.‬‬

‫وننصح دائ ًما بتسجيل مخرجات هذه المرحلة في مستند خاص‪.‬‬

 ‫‪ .2‬تحديد نطاق المشروع‬
‫‪ ‬نطاق المشروع وهو عبارة عن مصطلح يستخدم في مجال إدارة المشاريع‪ ،‬ويطلق‬

‫على األعمال التي يجب إنجازها لتحقيق أهداف المشروع‪ ،‬أي أنه هو عملية تحديد‬

‫األهداف و النتائج و االرشادات و المهمات و التكاليف و الجدول الزمني لتنفيذ أعمال‬

‫المشروع وتوثيقها‪.‬‬

‫‪ ‬يُعد تحديد نطاق المشروع من أصعب الخطوات في عملية تصميم الموقع بأكملها‪ .‬إن‬

‫فهم النطاق والتوقعات والموارد شيء مهم لتجنّب التحديات التي قد تنشأ عن التغيير‬

‫المستمر في العوامل الثالث آنفة الذكر في أثناء عملية التصميم‪ ،‬مما قد يؤدي إلى‬

‫زيادة حجم العمل وبالتالي قد يؤثر على جودة المشروع بأكمله‪.‬‬

 ‫قادرا على توقُّع‬
‫‪ ‬يسهل عليك إدارة المشاريع وأنت تعرف نطاقها الكامل‪ ،‬وتُصبح ً‬

‫المخاطر وإدارتها‪ .‬فمن خالل تحديد نطاق مشروع تصميم الموقع‪ ،‬مثل الجدول‬

‫الزمني لمشروعك والعدد اإلجمالي لصفحات الويب والميزات التي تريدها في موقعك‬

‫اإللكتروني وما إلى ذلك‪ ،‬يمكنك تحقيق أهداف تصميم موقعك دون أي متاعب بالوقت‬

‫المحدد‪.‬‬
 ‫‪ .3‬إنشاء خريطة الموقع ‪Sitemap‬‬

‫‪ ‬بعد معرفة أهداف ونطاق المشروع‪ ،‬يحين الوقت إلنشاء خريطة موقع وهيكلية‬

‫المعلومات‪ ،‬وهي عبارة عن مخطط بصري للتسلسل الهرمي للموقع يُوضح المكان‬

‫الذي تتناسب فيه كل صفحة مع هذا التسلسل الهرمي‪ ،‬وتُوفّر هيكلية المعلومات حول‬

‫محتوى كل صفحة‪.‬‬
 ‫‪ ‬وأثناء قيامك ببناء التسلسل الهرمي الخاص بموقعك‪ ،‬من الضروري أن تشير‬

‫باستمرار إلى أهداف مشروعك‪ ،‬ذلك ألن التسلسل الهرمي للموقع يدعم تحقيق هذا‬

‫الهدف‪ .‬على سبيل المثال‪ ،‬إذا كنت تبني موقعًا للتجارة اإللكترونية‪ ،‬فسيكون أحد‬

‫أهدافك بال شك بيع المنتجات‪ ،‬وبالتالي‪ ،‬يجب أن تضع في خريطة الموقع صفحات‬

‫ال ُمنتَج في الجزء العلوي من التسلسل الهرمي أو بالقرب منه؛ حتى يتمكن ّ‬
‫الزوار‬

‫على الفور من معرفة المكان الذي يحتاجون إلى الذهاب إليه لتحقيق الهدف المشترك‬

‫بينك وبينهم والمتمثّل في شراء المنتجات‪.‬‬

‫تعرف عناكب محركات‬ ‫أن خريطة موقع ‪ XML‬التي تُو َ‬
‫ضع لتسهيل ُّ‬ ‫‪ ‬جدير بالذكر ّ‬

‫البحث على الموقع اإللكتروني وأرشفة صفحاته تختلف اختالفًا كليًا عن خريطة‬

‫الموقع المرئية في مرحلة التصميم‪ ،‬فاألولى عبارة عن أكواد برمجية ال يراها‬

‫المستخدم العادي والهدف الوحيد لها هو تسهيل فهرسة صفحات الموقع‪.‬‬

 ‫‪ ‬أ ّما الثانية فهي مستند مرئي يُ ّ‬
‫صور محتوى الموقع؛ بغرض عرضه على مختلف‬

‫الفرق ال ُمشاركة في عملية بناء الموقع اإللكتروني‪ ،‬مثل مديري المشاريع وفرق‬

‫المحتوى والتصميم والتطوير والعاملين في المستويات اإلدارية العليا‪ .‬انظر إلى‬

‫خريطة الموقع البسيطة التالية التي أنشأتها للتو‪:‬‬

 ‫‪ .4‬إنشاء المخططات التصوّرية أو اإلطار‬
‫الشبكي للموقع ‪Wireframes‬‬
‫‪ ‬وهي عبارة عن تصاميم ومخططات تجريدية منخفضة الدقة َّ‬
‫تتكون من مربعات‬

‫وخطوط‪ ،‬وال تحتوي على ألوان كثيرة في الغالب؛ ألن الهدف الرئيس منها تقديم نبذة‬

‫عن شكل الموقع وهيكله العام ووصف رحلة المستخدم‪ ،‬واختبار سلوك تصميم الموقع‬

‫وفحص فعاليته الوظيفية دون إعطاء األجزاء الجمالية أهمية كبيرة‪.‬‬

‫‪ ‬أنت بالتأكيد لن تبدأ بعملية بناء منزلك من دون خريطة‪ .‬وبالمثل‪ ،‬ال يجب أن تبدأ في‬

‫تصميم موقع إلكتروني من دون إطارات عمل الموقع ‪ ،Wireframes‬إذ تسمح لك‬

‫التصورية أقل‬
‫ّ‬ ‫هذه الخطوة تبسيط بقية العملية‪ ،‬فأثر التعديالت على المخططات‬

‫وأسهل من إجراء تغييرات على نماذج وتصاميم رسمية ُمنجزة عبر برامج معقدة‪..‬‬

‫هذا يوفر الوقت والمال على الجميع‪.‬‬

‫‪ ‬يُمكن إعداد المخططات الهيكلية لتصميم موقع إلكتروني عن طريق رسمه بورقة وقلم‬

‫س ِم ْك ‪(Balsamiq).‬‬
‫أو استخدام أدوات رقمية‪ ،‬مثل أداة بَل َ‬
 ‫‪ .5‬نمذجة التصميم ‪Mockup‬‬

‫‪ ‬بعد اعتماد المخططات الهيكلية لتصميم موقع الويب‪ ،‬تأتي خطوة النمذجة التي نُنشئ‬

‫خاللها تصاميم حقيقية باأللوان والصور والخطوط الفعلية للموقع‪ .‬مخرجات هذه‬

‫المرحلة تكون عبارة عن صور ثابتة )‪ (Static Images‬لصفحات الموقع ال‬

‫تحتوي على أي تفاعل‪ ،‬الغرض منها عرض نموذج لما سيبدو عليه الموقع‪ .‬يُوجد‬

‫برامج عديدة لنمذجة تصميم موقع إلكتروني‪ ،‬لع َّل أشهرها برنامج ّ‬
‫ي أدوبي إكس دي‬

‫)‪ (Adobe XD‬و فيجما )‪(Figma‬‬

 ‫‪ .6‬النماذج األولية ‪Prototype‬‬

‫‪ ‬في هذه الخطوة نربط عناصر التصميم وصفحات الموقع ببعضها ببعض‪ ،‬وتُضاف‬

‫التفاعالت والحركات والتأثيرات وما إلى ذلك‪ ،‬بهدف عرض سلوك التصميم الفعلي‬

‫وكيف سيعمل الموقع في البيئات الحقيقية‪ .‬يُمكنك تنفيذ هذه الخطوة عبر األدوات‬

‫الرقمية مثل برنامج أدوبي إكس دي )‪ (Adobe XD‬وفيجما )‪ (Figma‬وأكشَر بي‬

‫آر)‪(Axure RP‬‬
 ‫‪ .7‬كتابة نصوص تجربة المستخدم‬

‫‪ ‬لسنوا ٍ‬
‫ت طوال‪ ،‬كان يتجاوز معظم مديري المنتج ومديري المشاريع خطوة إنشاء‬

‫النصوص وال يُع ّدونها ضمن األولويات‪ ،‬ولكن تغيَّر الوضع في السنوات األخيرة‪ ،‬إذ‬

‫أصبح وجود كاتب إعالنات أو ما أصبح يُعرف بكاتب تجربة المستخدم‬

‫(‪ )UX Writer‬ضمن فريق تصميم موقع إلكتروني ضرورة قصوى‪ ،‬فال يمكن لتصميم‬

‫موقع إلكتروني أن يعمل جيدًا دون الكلمات الواضحة لتُس ّهل رحلة المستخدم مهما بلغ‬

‫تأثير العناصر المرئية األخرى‪.‬‬

 ‫‪ .8‬اختبار التصميم‬

‫‪ ‬في المرحلة األخيرة من عملية تصميم موقع إلكتروني‪ ،‬تُجرى عدة اختبارات على‬

‫التصميم‪ ،‬فمن جهة يجب عليك إجراء اختبار قابلية االستخدام للتحقّق من ّ‬
‫أن جميع‬

‫األشخاص يمكنهم الولوج إلى موقعك واستخدامه بسالسة‪ .‬يُمكنك اتّباع المعايير‬

‫العالمية لقابلية استخدام مواقع اإلنترنت‪ ،‬مثل‪ :‬إرشادات إتاحة محتوى الويب‬

‫‪WCAG‬ومعيار االتحاد العالمي للويب إلمكانية الوصول ‪WAI.‬‬

 ‫‪ ‬وقد يتعيَّن عليك كذلك إجراء اختبارات أ‪/‬ب )‪ (A/B Testing‬وهو يتمثَّل في‬

‫عرض تصميم الموقع على مجموعتين متساويتين من الناس مع تغيير بسيط في جزء‬

‫تنس تدوين جميع المالحظات التي يقولها المستخدمون‬

‫من الموقع مع كل مجموعة‪ .‬ال َّ‬

‫من كال المجموعتين‪ ،‬ور ّكز على األجزاء التي وجدوا فيها صعوبة في استعمال‬

‫الموقع أو فهم التصميم‪.‬‬

‫‪ ‬ويجدر بنا التنويه بأنك غير ُملزم بتاتًا بإجراء مراحل االختبار في بداية عملية تصميم‬

‫موقع إلكتروني‪ ،‬على الرغم من ّ‬

‫أن خبراء تجربة المستخدم يُوصون دائ ًما بإجراء‬

‫االختبارات في البداية والنهاية والمنتصف‪ .‬يجب عليك دائ ًما التطلّع لتطوير تصميم‬

‫تكف عن االختبار والتحسين المستمر‪ ،‬مستعينًا‬

‫َّ‬ ‫موقعك وتحسينه باستمرار‪ ،‬فال‬

‫بخدمات تصميم موقع إلكتروني التي يقدمها المستقلون المحترفون على خمسات‪.‬‬