سنتحدث عن تصميم موقع إلكتروني بشكل عام في هذا المقال، ولكن يجب أن نوضح أن مجال بناء المواقع الإلكترونية يتفرع إلى فرعين أساسيين هما تصميم المواقع وتطويرها، فتصميم المواقع يختص بترتيب العناصر المرئية واختيارها وتخطيط سلوك المستخدم وتجربته من حيث طريقة تفاعله مع الموقع وكيفية استقباله لرسالته التي أنشئ من أجلها، أما تطوير المواقع فيختص بتحويل تلك التصاميم المرئية إلى أكواد وشيفرات برمجية يخرج منها منتجات جاهزة للإطلاق.
ورغم تشعبات هذا المجال التي تتزايد كل حين إلا أن أغلب حديث العملاء عند الرغبة في تصميم مواقع لهم سيدور حول التصميم المرئي للعناصر والنماذج وترتيبها على الشاشة، وكيفية ظهور الموقع على الشاشات المختلفة سواء كانت حواسيب أو هواتف أو غيرها، وطريقة تفاعل المستخدم مع عناصر الموقع.
خطوات تصميم موقع إلكتروني وبنائه
نلاحظ أننا ذكرنا نوعين من أنواع تصميم المواقع في الفقرة السابقة، وهما التصميم المرئي وتصميم تجربة الاستخدام، وهما يشبهان الهندسة المعمارية للمباني حيث يرى المستخدم آثارهما مباشرة عند تفاعله مع الموقع من حيث تنسيق الواجهة وترتيب العناصر وتناسق الألوان والتفاعلات الموجودة فيها.
كذلك فإن هذين النوعين من التصميم هما أول مرحلتين من مراحل تصميم مواقع الإنترنت أو التطبيقات الموجهة للهواتف أو غيرها من الأجهزة، ثم يأتي بعدهما تطوير الواجهات سواء الأمامية أو الخلفية.
1. تصميم تجربة الاستخدام
يختص مصمم تجربة الاستخدام User Experience (UX) بدراسة الفئات المستهدفة من الموقع، وحالاتهم الصحية والنفسية وأعمارهم وجنسياتهم، وذلك من خلال بحوث عميقة لطبيعة نشاط العميل والموقع والأهداف التي يجب أن يحققها الموقع أو التطبيق المراد إنشاؤه، من أجل توجيه انتباه المستخدم إلى العناصر التي يريد له صاحب الموقع أن يهتم بها أو يراها، إضافة إلى تخطيط تجربة استخدامه عمومًا داخل الموقع.
وتظهر أهمية هذا المجال عند تصميم مواقع طبية مثلَا لا تراعي فئات المستخدمين التي لديها مشاكل في النظر أو القراءة أو السمع، فلا يراعي تهيئة الموقع لتلك الفئات من المستخدمين، فهل تتخيل موقعًا لمستشفى للأطراف الصناعية فيه الكثير من الحقول التي على المستخدم ملؤها في استمارة حجز موعد في مستشفى؟
ويضع مصمم تجربة الاستخدام الخريطة التأسيسية للموقع، وكيف يجب أن يكون التصميم المرئي للواجهة، وترتيب كل قسم رئيسي وفرعي فيه، وعدد النقرات التي ينقر عليها المستخدم للوصول إلى العناصر الهامة في الموقع، والألوان التي يجب استخدامها، وأحجام الأزرار والعناصر، وهكذا.
2. تصميم واجهة المستخدم
يأتي مصمم واجهة المستخدم User Interface (UI) ليعمل على هذه النسخة التي أخرجها مصمم تجربة الاستخدام مسترشدًا بها، فيصمم الواجهة النهائية التي يراها المستخدم من قوائم وأزرار وألوان وغيرها وفق مبادئ تصميمية تحقق أهداف تجربة الاستخدام.
قد يتخصص مصمم الواجهات المرئية في تصميم العناصر المرئية فقط إذا كان يعمل في شركة كبيرة وفي فريق تصميم كبير، لكن الغالب أنه يتجاوز هذه المرحلة إلى تصميم مواقع الإنترنت بحيث تكون تفاعلية، تستطيع بقية الفرق أن يتفاعلوا معها ليعرفوا الأثر المطلوب تنفيذه عند النقر على أحد الأزرار، أو كي يستطيع العميل أن يرى نسخة شبه حية من الموقع قبل البدء في تطويره وبنائه.
3. تطوير واجهة المستخدم
بعد تمام مرحلة تصميم المواقع أو التطبيقات بحيث يكون لدينا نسخة مرئية جاهزة منها، ينتقل العمل إلى مطور الواجهات الأمامية Front End Development الذي يعمل على برمجة هذه الواجهات لتتحول من مجرد تصميمات إلى نسخة حية من الموقع يستطيع العميل أن يتفاعل معها بنفس كيفية تفاعل المستخدم النهائي معها.
ويستخدم لغات وصفية مثل HTML وبرمجية مثل جافاسكربت لإتمام عمله، إضافة إلى أطر عمل Frameworks لئلا يعيد اختراع العجلة من الصفر في المهام المكررة.
ومطور الواجهات الأمامية هو المسؤول عن إنشاء التأثيرات المرئية للأزرار والقوائم والانتقالات في الصفحة الواحدة وبين الصفحات.
4. تطوير الواجهة الخلفية
ينشئ مطور الواجهة الخلفية قواعد البيانات التي تلتقط بيانات المستخدم من نماذج التسجيل وبيانات وصور وغيرها لتخزينها وتصنيفها ثم جلبها للمستخدم عند الحاجة، وكذلك الخوادم التي تكون عليها المواقع نفسها وقواعد بياناتها.
وتختلف أهداف المطورين عن المصممين في أنهم يولون أهمية كبيرة لسرعة تحميل الموقع والعناصر التي فيه، وكذلك كفاءة التشغيل للخوادم لئلا تكون عرضة للاختراق أو التعطل، على عكس المصممين الذين يهتمون بتفاعلات المستخدم مع الواجهة اﻷمامية، وسهولة فهمه للمطلوب من الموقع أو التطبيق، وسرعة وصوله للمعلومات التي يحتاج إليها بأقل عدد من النقرات والإجراءات.
الأدوات المستخدمة في تصميم موقع
يشترك مصمم تجربة الاستخدام ومصمم الواجهات المرئية في بعض البرامج التي يستخدمونها في تصميم المواقع، لكن توجد بعض البرامج والأدوات التي ينفرد بها كل منهما، وفيما يلي أشهر تلك البرامج.
Adobe XD
يُستخدم برنامج Adobe XD من حزمة أدوبي لإنشاء نماذج أولية للمواقع والتطبيقات إما ثابتة أو تفاعلية، إضافة إلى مزية التعاون بين المصممين على نفس التصميم.
Figma
يسمح برنامج Figma ببناء نماذج أولية أيضًا للمواقع والتطبيقات واختبار قابلية استخدامها -وهو أمر ضروري لمصممي تجربة الاستخدام-، وهو أيضًا بيئة تفاعلية يستطيع فيها المصممون التعاون في العمل على نفس المشروع في نفس الوقت -مثل العمل المشترك على تطبيقات جوجل السحابية-، مما يعني أنه ليس تطبيقًا مستقلًا وإنما يعمل داخل المتصفح.
FlowMapp - Octopus
هذان التطبيقان يعملان في المتصفح أيضًا، ويُستخدمان في إنشاء خريطة تدفق Flow map لسلوك المستخدمين في التطبيقات، وكذلك مخططات التطبيقات وخرائط المواقع، كي تكون واضحة لبقية فرق العمل من مصممي الواجهات المرئية والمطورين، مما يعني أن هاتين اﻷداتين لمصممي تجربة الاستخدام خاصة.
Balsamiq
تُستخدم هذه الأداة لإنشاء إطارات سلكية Wireframes للموقع أو التطبيق، وهي كذلك لمصممي تجربة الاستخدام، حيث يستخدمونها لإنشاء تصميمات بسيطة لعناصر وتقسيمات الموقع أو التطبيق دون تشتيت بقية فرق العمل بتفاصيل العناصر من نصوص وأيقونات وألوان وغيرها.
Adobe Ai
أبقينا هذا البرنامج إلى نهاية القائمة ربما لإمكانياته الكبيرة، حيث يمكن تنفيذ أغلب مهام البرامج والأدوات السابقة فيه، وهو أقدم هذه الأدوات في سوق التصميم وأشملها، وكذلك أشهرها بين مصممي تجربة الاستخدام والواجهات المرئية على حد سواء.
اللغات المستخدمة في تطوير المواقع
نأتي إلى اللغات التي يستخدمها المطورون لتحويل التصميمات المرئية إلى تطبيقات حية جاهزة للإطلاق في السوق، وسنبدأ بمطوري الواجهات الأمامية أولًا ثم ننتقل إلى الواجهة الخلفية.
HTML
لا تُعد لغة HTML لغة برمجة وإنما هي لغة توصيفية تُستخدم لإنشاء هيكل واضح لصفحات الويب، فهي التي تحدد أن هذا النص عنوان وذاك نص عادي، وهذه قائمة غير مرتبة، وبالمثل تحدد بقية العناصر من روابط تشعبية وصور وأقسام في الصفحة وغيرها.
لعل HTML هي أبسط اللغات في تعلمها إذ قد لا تستغرق بضعة أيام لفهم أساسياتها ومن ثم البناء بها أو الانتقال إلى بقية اللغات.
CSS
لغة CSS هي لغة تنسيق تضفي بعض مظاهر الحياة على صفحات الويب مع توحيد مظهر تلك الصفحات في نفس الوقت، وكذلك تُستخدم لإنشاء تصميمات متجاوبة responsive للمستخدمين لتناسب الأجهزة التي يتصفحون منها سواء كانت هواتف محمولة أو حواسيب لوحية أو حتى أجهزة سطح المكتب.
تكمن فائدتها الأساسية في أن شيفرتها توضع في ملف منفصل عن HTML، ثم تُكتب فيها القوانين العامة لتصميم الموقع، مثل تنسيق العناوين الرئيسية وألوانها وحجم خطوطها، حتى إذا أردنا تغيير ذلك التنسيق لجميع العناوين غيرناه مرة واحدة في ملف CSS، بدلًا من تغييره في كل صفحة على حدة، وهكذا في بقية عناصر الصفحات من تنسيق الأزرار والألوان ومحاذاة النصوص مثلًا.
جافاسكربت Javascript
تأتي لغة جافاسكربت لتكمل أغلب الجوانب التي تبقى في عملية تطوير الويب سواء للواجهة الأمامية أو الخلفية، سواء باللغة نفسها أو بأطر العمل frameworks التي بُنيت عليها، فهي لغة برمجة أصيلة -ليست وصفية مثل HTML- تُستخدم لإنشاء تفاعلات من الموقع مع إجراءات المستخدم، إما باستخدام جافاسكربت نفسها أو أحد أطر العمل المشهورة التي بُنيت عليها، مثل أنجولر Angular و jQuery و Vue.js.
وتُستخدم بعض أطر العمل تلك لبناء خدمات وتطبيقات تعمل في الواجهة الخلفية أيضًا للمواقع، مثل أنجولر Angular و Vue.js، إضافة إلى أطر عمل مثل Next.js.
لغات أخرى
يمكن استخدام العديد من لغات البرمجة وأطر العمل لتصميم مواقع الإنترنت وتطويرها، فمثلًا يُستخدم إطار العمل جانغو Django المكتوب بلغة بايثون لكتابة تطبيقات للويب، وكذلك إطار العمل Ruby-on-rails المكتوب بلغة روبي Ruby، وهكذا، فلم يعد الأمر مقصورًا على لغة جافاسكربت وحدها لإتمام عملية بناء الموقع.
ويتوقف قرار اللغة المستخدمة في بناء الموقع وكذلك إطار العمل على طبيعة المشروع المطلوب والعميل والبيئة التي سيعمل فيها والتطورات المستقبلية له، لكن تظل جافاسكربت هي اللغة اﻷشهر المستخدمة في تطوير واجهات الويب أو الواجهات الأمامية لمواقع الإنترنت.
الأدوات المستخدمة في تطوير الواجهات الأمامية
يحتاج مطورو المواقع الإلكترونية إلى بيئات أو أدوات يستخدمونها لكتابة شيفراتهم البرمجية، وبيئات أخرى لاختبارها، وفيما يلي أمثلة لأهم هذه الأدوات.
المحررات النصية Text Editors
وهي برامج كتابة نصوص بسيطة مثل Notepad، لكنها تكون موجهة للمبرمجين والمطورين، فتتميز بتمييز النصوص بصريًا وفقًا لنوعها ليسهل قراءتها، وكذلك الإكمال التلقائي للنصوص، وغيرها من المزايا المخصصة لتطوير المواقع والتطبيقات، وأشهر هذه المحررات ما يلي:
- Vim
- Emacs
- Notepad++
- Sublime Text
بيئات التطوير المتكاملة IDEs
تختلف بيئة التطوير عن المحرر النصي العادي في أنها أشمل وأكثر تكاملًا، فإضافة إلى المحرر النصي فإنها تحتوي على مصرِّف compiler و منقِّح debugger وأداة لبناء واجهات المستخدم المرئية، كما تدعم عدة لغات أحيانًا مثل بايثون و PHP وروبي Ruby و جافاسكربت وغيرها. فيما يلي أهم بيئات التطوير المستخدمة في تطوير المواقع:
خاتمة
مواقع الإنترنت هي المقرات الافتراضية للشركات والمؤسسات، وهي عنصر لابد منه في العلامة التجارية لأي كيان له نشاط على الويب أو على الأرض، سواء كان ذلك شركة أو مؤسسة أو حتى فردًا مستقلًا.
وترغب هذه الكيانات بإنشاء مواقع لها لبيع منتجاتها أو الترويج لأنشطتها والتعريف بها، أو توجيه جمهورها إلى استخدام تطبيقات مخصصة للهواتف، أو حتى لمجرد حجز خدماتها والتواصل من خلالها، إضافة إلى أن وجود موقع إنترنت يرفع كثيرًا من سمعتها لدى محركات البحث، مما يعني تصدرًا لنتائج البحث وشهرة أكثر.
وقد ذكرنا في بداية المقال أن العملاء يولون أهمية خاصة لتصميم الموقع الذي يريدون له أن يعكس هويتهم التي تمثلهم، وتحمل روح المؤسسة أو الشركة من حيث جدية التصميم أو حداثته أو غير ذلك، وكذلك مناسبته للفئات المستهدفة منه.
وعلى ذلك ينبغي أن يطلع المصمم -إلى جانب إلمامه بالجوانب الفنية الخاصة بعمله- على أصول إدارة المنتجات الرقمية، خاصة إن كان يوظف مطورين آخرين للعمل معه أو كان يدير فريق تصميم، وكذلك على أسس التعامل مع العملاء ليفهم احتياجاتهم ويوصل لهم رأيه المهني بالطريقة المثلى.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.