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

ما هو تصميم المواقع ؟

كما ذكرنا من قبل فإن عملية تطور موقع ما تنقسم إلى قسمين أو مرحلتين
1- مرحلة تصميم الموقع:

وهذه المرحلة هي التي يتم فيها تصميم واجهة الموقع والصفحات الأخرى وتصيمي لوحات التحكم ويشمل التصميم توزيع العناصر واختيار الالوان وكيف يكون شكل الصفحة وكل هذه الأمور تندرج تحت مسمى تصميم المواقع

2- مرحلة تطوير الموقع:

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

كيف تدخل إلى مجال تصميم المواقع

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

التقنيات التي يجب تعلمها للدخول في تصميم المواقع

يوجد عدد من التقنيات والمهارات التي يجب ان تتعلمها لكي تصبح مصمم مواقع محترف وفي هذه الفقرة سنطرح عليك هذه التقنيات اجمالا لكي تتعلمها بالترتيب

1- تعلم لغة html
لغة html هي اختصار لجملة hyper text markup language والتي تعني لغة النص التشعبي وهي تستخدم لتوزيع بنية الموقع فهي اساس بناء اي موقع حيث من خلالها تظهر عناصر الصفحة ويظهر الكلام المكتوب او فيديو في صفحة الويب وغيره. إليك صورة توضيحية:

مثال على تصميم المواقع
مثال على تصميم المواقع

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

2- لغة css:

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

دور لغة css في تصميم المواقع
دور لغة css في تصميم المواقع

3- لغة javascript أو جافا سكريبت:

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

إذا كنت مهتم بتعلم لغة جافا سكريبت باستفاضة وأطر العمل المبنية عليها ننصحك بقراءة هذا المقال

نصصحك عزيزي المصمم بعد أن تتعلم الثلاث لغات هذه تقوم بالتدريب عليهم وبناء مواقع باستخدامهم لكي تتقن العمل بهم.

بعد ذلك يمكنك البدء في تعلم بعض أطر العمل والمكتبات المبنية على اللغات المذكورة بالأعلى مثل:

1- bootstrap

وهو إطار عمل مبني على html, css, javascript يستخدمفي تصميم المواقع حيث يسهل عليك كثيرا في عملية تصميم الموقع، حيث يقدم لك مجموعة من عناصر html وتنسيقات جاهزة لها يمكنك استخدامها في موقعك مباشرة.

2- jquery

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

3- material design

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

4- تعلم لغة sass
وهذه اللغة تم انشاؤها على لغة css حيث يتقدم مميزات لا تقدمها لغو css بشكل مباشر ولا شك في أن لغة ساس يستخدمها أي مصمم مواقع محترف.

5- إطار عمل materialize

وهذا إطار عمل تم بناؤه على material design ليسهل استخدامه لكل المصممين.

6- تعلم أطر عمل جافا سكريبت لبناء تطبيقات الويب الصفحة الواحدة وفي هذا الإطار ننصحك بقراءة هذا المقال حيث يشرح لك ما هي تطبيقات الويب الصفحة الواحدة ومن ثم قراءة هذا المقال أيضا حيث يتحدث عن أطر عمل جافا سكريبت وأشهرها

طبعا يوجد العديد من أطر العمل الأخرى ولكن هذه هي أهم أطر العمل وبالتأكيد ليس المطلوب منك هو تعلم كل هذه المكتبات وأطر العمل ولكن يكفي واحد أو اثنين حتى تتقنه.

شكرا لكم على حسن القراءة ولنا موعد مع مقال أخر ان شاء الله في تصميم المواقع