تصميم المواقع – الدليل الشامل لمصمم الويب

اهلا بك من جديد عزيزي متابع مدونة بصمملك ,انا اعلم انك افتقدتني ?, عدت من جديد للحديث عن موضوع يشغل الكثيرون ممن يودون الدخول في عالم التصميم ,ولكن احترس نحن لا نتحدث في هذا الموضوع عن تصميم الجرافيك ولكن كما رأيت في عنوان الموضوع ( تصميم المواقع ) ,سأتحدث بشفافية ووضوح حول الموضوع ككل بغض النظر عن...

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

اهلا بك من جديد عزيزي متابع مدونة بصمملك ,انا اعلم انك افتقدتني ?, عدت من جديد للحديث عن موضوع يشغل الكثيرون ممن يودون الدخول في عالم التصميم ,ولكن احترس نحن لا نتحدث في هذا الموضوع عن تصميم الجرافيك ولكن كما رأيت في عنوان الموضوع ( تصميم المواقع ) ,سأتحدث بشفافية ووضوح حول الموضوع ككل بغض النظر عن كل المواضيع التي تبرز نقاط معينة وتغفل عن اخري ,اما اليوم سنضع “النقط علي الحروف” كما نقول باللغة المصرية, ولكن في البداية نقسم المقال الي اجزاء.

  • ما هو تصميم المواقع ؟
  • ما هي انواع المواقع ؟
  • ما هي تخصصات مصمم الويب ؟
  • ما هو متوسط اجور مصمم الويب في الوطن العربي ؟
  • ما هو افضل كورس لتعلم تصميم الويب ؟
  • اماكن التغذية البصرية لمصمم الويب.

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

تصميم الويب بكل بساطة هو عملية ترتيب وتخطيط وتصور وتنسيق المحتوي عبر الانترنت !, هل هو تعريف بسيط ؟ نعم انه كذالك ولكن لا يخدعك التعريف ويهئ لك ان الامر بسيط هو كذلك لمن أحبوا تعلمه فهم يجدونه صعب ولكنه ممتع, معقد ولكنه ملهم ,مرهق ولكنه غذاء انبهاراتهم ,فهو يحمل في طياته الكثير من التفاصيل والاشياء التي يجدر بك اتقانها قبل ان تبحث عن عمل بهذا المسمي الوظيفي.

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

ما هي انواع المواقع

صديقي ! يوجد في هذا العالم حتي اللحظة التي اكتب لك فيها هذا الموضوع 1.7 مليار موقع ويب لذا لن يكون من السهل جرد جميع انواع المواقع فهي امرُ يرجع للغرض المطلوب من انشاء الموقع ,لذالك دعنا نسلك الطريق الاكاديمي في هذه الجزأية ونتعرف علي اهم 5 انواع لمواقع الويب ونتعرف علي كل نوع منهم.

1- المتاجر الالكترونية – Ecommerce

من منا لا يعرف موقع الشهير Amazon ! فهو موقع للتجارة الالكترونية تم تأسيسة في عام 1994م بواسطة جيف بيزوس, وهي غني عن التعريف, تتيح مواقع التجارة الالكترونية لمستخدميها بالشراء والتسوق عامة من خلال الانترنت ليس هذا فقط بل ايضاً تتيح للتجار بيع منتجاتهم عن طريق تلك المواقع ,انها طفرة في عالم التجارة حيث بكل بساطة تستطيع اختيار المنتج الذي ترغب في شرائه و وضعه في عربة التسوق الخاصة بك والدفع عن طريق بطاقتك البنكية او Paypal او اياً كانت الطريقة المتوفرة علي المتجر ,انا اري ان المتاجر الالكترونية هي اهم انواع مواقع الويب تأثيراً في العالم.

2- مواقع المؤسسات او الاعمال

هنا تتيح المواقع لأصحاب الاعمال والشركات بجميع احجامها التواجد والظهور للعملائهم وعرض طبيعة عملهم وما يستطيعون تقديمه ,وعندما اقول لك المؤسسات والاعمال فأنا لا اقصد الشركات الكبيرة فقط فأنا اقصد الشركات والمؤسسات بجميع انواعهها ,حتي لو كانت مكونة من فرد واحد ( محامي ,طبيب ,مهندس, سباك ,الخ..), وعندما يتم ظهور الموقع الخاص بهؤلاء الاشخاص او المؤسسات بصورة طيبة علي الانترنت يأتي التحول الاهم في عالم المال ” تحول الزائر الي عميل “?.

3- تصميم المواقع الشخصية

المواقع الشخصية هي تخص في الاساس ااشخاص الذين يريدون التعبير عن ارائهم او طرح افكارهم للمجتمع ومساعدة الاخرين بخبراتهم او بتجاربهم السابقة ,ويعتبر هذا النوع من المواقع بسيط جداً فهو عبارة عن نصوص وصور ومحتوي بشكل عام فهو لا يتطلب عمل شاق لتنفيذه يكفي فقط بعض الممارسات والخبرة اللازمتين وتستطيع البدأ في تنفيذه.

4- المدونات – Blog

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

5- معرض الاعمال – Portfolio

مواقع عرض الاعمال تتمحور حول عرض اعمالك الاحترافية بطريقة مبتكرة وابداعية تتناسب مع عملك وفي النهاية هي ايضاً تكون بهدف كسب العملاء, مواقع الـ Portfolio تتكون من جميع العناصر التي تساعد علي عرض عملك في ابسط وابهي صورة وذالك عن طريق تضمين الفيديوز والشرائح المتحركة (Slider) وغيرها من عناصر العرض المختلفة, مواقع البورتفوليو تشبه نوعاً ما المواقع الشخصية الا ان المواقع الشخصية يكون الهدف منها هو التعبير عن الرأي ومشاركة الخبرات ومواقع البورتفوليو الهدف منها مشاركة الاعمال.

يوجد العديد من انواع المواقع الاخري يمكنك البحث والتعرف اكثر فيما بعد ,ولكن كبداية كنت اريد ان اذكر لك تلك الانواع لأضمن لك بداية جيدة او معرفة افضل عن تصميم المواقع خاصة عند الحديث عن تخصصات مصمم الويب في الفقرة القادمة.

ما هي تخصصات مصمم الويب

اعطني تركيزك عزيزي القارئ فهذا الجزء هو خصيصاً ما يستحق اعطائه انتباهك بشدة “وايضاً باقي الموضوع ?”, ينقسم اي موقع علي الانترنت او حتي تطبيق موبايل او غيره الي جزئين لا يتجزئان :

  • الواجهة الامامية – Front-End
  • الواجهة الخلفية – Back-End
تصميم المواقع وبرمجتها

لا تجعل الامر مربكاً عزيزي القارئ ,الامر ليس بهذا التعقيد.

الواجهة الامامية – Front End

مصممين الـ Front End وهم الاقرب الي قلبي, وهم مسئولون عن تطوير الواجهة الامامية للموقع وهي بكل بساطة الصفحة التي تتعامل معها الان وانت تقرأ هذا الموضوع ,كل تلك الالوان والنصوص وتنسيق اماكن ومحاذاة الصورة والازرار في الموقع والعمل علي كل جزء يتفاعل معك الان في الموقع او اي موقع اخر.

يضمن مصمم الواجهة الامامية ظهور الموقع بصورة جذابة وجيدة وتسهيل التعامل مع الموقع علي الزوار اتمني ان تكون تلك الجزئية مفهومة بالنسبة لك وإن لم تكن كذالك يمكنك التواصل لطلب المعلومة في اي وقت ?.

لن ازيد الامر تعقيدً وسأكتفي بذلك القدر من التعريف عن الـ Front End علما ان هذا التخصص ينقسم الي تخصصات اخري وهي UI/UX ,سوف نتحدث عنها في موضوع اخر وفي مراحل اكثر تقدماً.

مهارات اساسية لـ مصمم الـ Front End

الابداع

عندما يتعلق الامر بالواجهة الامامية للموقع فنحن نتحدث عن ظهور الموقع بشكل راقي ومريح بصرياً ومع كل ذالك سهل التعامل ولتنفيذ تلك الشروط لابد من توافر الحس الفني والابداعي, لا تقلق عزيزي القارئ فأنا اعلم انك مبدع ?.

مهارات التواصل

لا تنسي اننا ذكرنا منذ قليل ان جزء الـ Front End جزأ لا يتجزأ من الـ Back End وهذا يعني ان مصمم الواجهة الامامية عاجلاً ام اجلاً سيحتاج للتعامل مع مطوري الواجهة الخلفية او حتي العملاء وهذا يعني انه يجب ان يكون مصمم الواجهة الامامية يمتلك المهارات اللازمة للتواصل لكي يحظي بفاعلية مع عملائه او مع باقي الفريق.

HTML 

وكل ما اريدك ان تعرفه عنها مؤقتاً انها اختصار لـ Hyper Text Markup Language وتعتبر هي المسؤولة عن هيكلة صفحات الويب ووضع البنية التحتية لها, كما انها هي اللغة الرسمية من قبل شبكة اتحاد الويب العالمية W3C .

CSS 

يستخدم مصممين الواجهة الامامية لغة Css لتنسيق الالوان والخطوط واماكن ومحاذاة العناصر بداخل تصميم صفحات الموقع ,وهي تعتبر الصديق الصدوق للغة HTML فالإثنين يتم بواسطتهما تكوين الواجهة الاساسية للصفحات الويب.

Java Script 

جافا اسكريبت (Js) بالنسبة لتصميم المواقع هي بمثابة السحر ,لن تفشل جافا اسكريبت ابداً في ابهارك بالنتائج التي يمكن الوصول اليها عن طريقها , كما انها تمكنك من اجراء عمليات تكاد تكون معقدة او شبة مستحيل تنفيذها بدون جافا اسكريبت او اياً من مكتباتها الرائعة, جافا اسكريبت هي لغة برمجة تستخدم في العديد من الامور غير تصميم مواقع الويب ولكننا نتحدث الان عن الجزء الخاص بالويب منها.

لغات تصميم المواقع

فريم وورك ومكتبات يعتمد عليها مصمم الـ Front End :

jQuery – AngularJS – SASS – Bootstrap – EmberJS

الواجهة الخلفية – Back End

يعمل مطورين الواجهة الخلفية للمواقع علي الجزء الخاص بالخادم وقواعد البيانات وكل شئ يعمل خلف الكواليس ليظهر كل شئ قام مصمم الواجهة الامامية بالعمل عليه ,ويعتبر هو الجزء الاكثر تعقيداً في عملية تصميم المواقع فهو يعمل علي ايجاد الحلول البرمجية وتحديد قواعد البيانات والتعامل معها من حفظ وتخزين وعرض واخفاء.

مهارات اساسية لـ مطور Back End

مهارة التواصل

وهي مهارة مشتركة ما بين مصمم الواجهة الامامية والخلفية ,واعتقد انها مهارة مطلوبة لاي فريلانسر.

حل المشاكل – Problem-Solving

تشمل عملية تطوير الواجهة الخلفية للمواقع الكثير من عمليات التصحيح والاختبارات وحل المشاكل التي من الممكن حدوثها اثناء عملية تشغيل الموقع ,فمهارة حل المشكلات هي مهارة تمكنك من ايجاد الحلول المناسبة في اسرع وقت. 

PHP

يجدر بك اختيار لغة برمجة للعمل بها وعليها سيكون مسماك الوظيفي, يوجد العديد من لغات البرمجة التي تخدم تطوير الويب مثل (PHP, Paython, Ruby, ASP.net, Etc..) , سنتحدث عن PHP بحكم اغلبيتها في الشرق الاوسط وبين العرب بشكل عام ,بي اتش بي هي لغة برمجة مفتوحة المصدر يعتمد عليها الكثير من المبرمجين حول العالم وخاصة في تطوير الويب عن طريق ادخالها في HTML ,تم انشائها عام 1994م بواسطة Rasmus Lerdorf .

التعامل مع قواعد البيانات SQL

بشكل منظم ومرتب تتيح لك قواعد البيانات تخزين بيانات مستخدمي الموقع وترتيبها ووضع الشروط وطرق الوصول للمعلومات وانشاء النسخ الاحتياطية الخ..

فريم وورك ومكتبات يعتمد عليها مطور الويب :

Django – Laravel – Spring – Zend – Symfony – CakePHP

متوسط اجور مطورين الويب في الوطن العربي

الأجور هو الشئ الوحيد الذي لا نعدكم بالثقة 100% في مصداقيته هنا في المدونة وذلك نظراً لتقلب الاحوال الاقتصادية واحتياجات السوق المتناقضة والتي من الصعب تتبعها خاصة وبشكل شديد في الوطن العربي ,ولكن من مصادر موثوقة وسنحرص ع تحديث الموضوع بشكل مستمر ليتناسب مع الوقت الحالي الذي تقرأ فيه المقال.

يبلغ الحد الادني لمتوسط اجور مصممين ومطورين الويب في المملكة العربية السعودية : 6000 ريال سعودي

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

اماكن التغذية البصرية لمصمم الويب

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

 الى هنا لقد وصلت عزيزي الي نهاية موضوع تعلم تصميم المواقع  ,يمكنك ايضاً تزويدنا بالمعلومة التي تملكها في هذا الموضوع عن طريق التعليقات لكي تعم الفائدة ,أرجو من الله سبحانه وتعالى ان اكون قد افدتك بهذا المقال المتواضع واتمنى لك التوفيق.