تصميم مواقع

تصميم مواقع الكترونية

تعلم تصميم المواقع في عام 2023: كل ما يجب أن تعرفه

إن بدء حياة مهنية جديدة في تصميم المواقع هو أمر مثير (ومربح للغاية)، لكن احتمال البدء فعلياً في تعلم تصميم المواقع في عام 2023 قد يكون مخيفاً.

كمية المعلومات والخيارات لتعلم تصميم المواقع الإلكترونية هائلة. 

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

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

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

6 خطوات لتعلم تصميم المواقع في 2023

ينقسم الدليل إلى ستة أقسام رئيسية:

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

إذا كنت جديداً في تصميم موقع الكتروني وترغب في معرفة الأساسيات، فاقرأ المقال التالي لمعرفة كيفية البدء كـ مصمم ويب مميز!

بدء العمل: أساسيات تصميم المواقع الإلكترونية وتطويرها

البداية , يعد تصميم الويب في عام 2023 مجالاً ضخماً – يتضمن العديد من المهارات المختلفة والتخصصات والأدوات والبرامج. ولكن في جوهرها، تظل أساسيات تصميم المواقع واحدة لها اهمية كما هي بالنسبة للجميع.

ما هومصطلح تصميم الويب؟

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

يمكن أن يتراوح تصميم المواقع من إنشاء موقع ويب ثابت يحتوي على نص عادي وصور وروابط حتى وتطبيقات الانترنت المعقدة وأنظمة إدارة المحتوى وواجهات برمجة التطبيقات (API) وخدمات الشبكات الاجتماعية.

الفرق بين مصمم الويب ومطور الويب

ربما لاحظت أيضاً أن هناك أدواراُ مختلفة في عالم تصميم الويب — مصممي الويب ومطوري الويب ومطوري البرامج الكاملة. يوجد الكثير من التداخل بينهم – من المربك غالباً فهم من المسؤول عن ماذا.

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

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

بالطبع، بعض مصممي الويب هم مطوري الويب في الوقت نفسه وهم متخصصين .إذا كنت تستمتع بتطوير الواجهة الأمامية والخلفية، فإن كونك مطوراً متكاملاً يمكن أن يجعلك أكثر قابلية للتسويق. تشير دراسة استقصائية للمطورين لعام 2019 في Stack Overfloww إلى أن حوالي 50٪ من المشاركين يعتبرون مطورون full-stack.

اختيار المسار الوظيفي لك 

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

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

تعلم المهارات الأساسية: مفاهيم التصميم والبرمجة التي يجب أن يتعلمها جميع مصممي الويب الجدد

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

دعنا نلقي نظرة على المهارات الأساسية التي ستحتاج إلى إتقانها لتصبح مصمم ويب.

الأساسيات: HTML ،CSS ،JavaScript، وأنظمة التحكم في النسخ (version control)

أول شيء يجب أن تتعلمه هو كيفية ترميز وتصميم موقع ويب أساسي – ولهذا، ستحتاج إلى معرفة كل من HTML و CSS.

HTML و CSS هما لغات ترميزية يستخدمها المصممون لإنشاء أجزاء من صفحة الويب وأنماطهم البصرية عناصر المتعددة . إنها اللبنات الأساسية وراء كل موقع ويب – تستخدم متصفحات الويب كود HTML و CSS لتحديد ما يراه المستخدمون عند تصفحهم لموقع الويب.

HTML هي لغة الترميز المستخدمة لوصف المحتوى على صفحة الويب وكيفية هيكلته فكر في ما يخص العناوين والنقاط واالروابط.

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

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

وأخيراً وليس آخراً، يجب أن يتعرف كل من مصممي الواجهة الأمامية ومطوري الواجهة الخلفية على أنظمة التحكم في النسخ (version control systems). تتيح لك أنظمة التحكم في النسخ تتبع التغييرات في الكود، وتمكين عدة أشخاص من العمل على الكود في نفس الوقت دون خوف من إحداث تغييرات في عمل أي شخص آخر. أكثر أنظمة التحكم في النسخ <https://www.atlassian.com/git/tutorials/what-is-version-control> شيوعاً هذه الأيام هو Git – الغالبية العظمى من المعسكرات التمهيدية للترميز والدورات التدريبية عبر الإنترنت تستخدم Git، لذلك فهو أفضل مكان لبدء المطورين الجدد.

مهارات تصميم المواقع واجهات المواقع: تصميم متجاوب، أطر العمل، مكتبات

إن امتلاك القدرة على فهم HTML و CSS و JavaScript كافية للبدء في مجال تصميم المواقع . 

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

أحد المفاهيم التي ستعرفها جيدًا هو تصميم الموقع المتجاوب، أي التخطيطات الديناميكية التي تتكيف لتبدو رائعة على أي حجم شاشة، من أجهزة التلفزيون ذات الشاشة الكبيرة إلى الهواتف الذكية. تستخدم المواقع استعلامات الوسائط media queries للتحكم في “نقاط التوقف” “breakpoints” – دقة الشاشة المختلفة التي يجب أن يتحول فيها متصفح المستخدم إلى تصميم مختلف ومجموعة من الأنماط. نظراً لأن الأجهزة المحمولة تمثل ما يقرب من نصف عدد زيارات الويب في عام 2019، يعد تصميم المواقع المتجاوب مهارة أساسية لأي مصمم ويب.

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

تأتي الأُطُر الأمامية الأمامية مثل Bootstrap معبأة مسبقاً بأنماط وأمثلة من الرموز لعناصر تصميم مواقع شائعة الاستخدام مثل أشرطة التنقل وجداول التسعير. نظراً لأن الكود تم اختباره جيداً وتوثيقه، يمكن أن تجعل الأطر إنشاء تصاميم جديدة أسرع بكثير.

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

نظراً لأن متصفحات الويب لا تفهم شفرة SCSS مباشرةً، مع ذلك، تحتاج إلى تحليلها إلى vanilla CSS باستخدام أداة إنشاء مثل Grunt أو webpack. إن أدوات الإنشاء سهلة الاستخدام أيضاَ لدمج عدة ملفات CSS في ملف واحد (مما يساعد في الحفاظ على تنظيم الكود الخاص بك)، وضغط (أو تصغير) الكود لتحسين سرعات التنزيل، وحتى نشر الكود تلقائيًا على خادم ويب بعيد.

أخيراً، ستتعلم أن تحب أطر عمل JavaScript ومكتباتك. أطر عمل JavaScript هي هياكل عمل لرمز JavaScript يمكنك تضمينها في الموقع الالكتروني لتسريع عملية التطوير. تشمل أطر عمل JavaScript الشائعة في 2020: Vue.js ،React، و Angular. إذا كنت جديداً في تصميم الواجهات، فإن Vue مكان رائع لبدء التعلم.

في المقابل، تعد مكتبة JavaScript عبارة عن مجموعة من المكونات المستقلة التي يمكنك إدخالها وتوصيلها بالتصميمات الخاصة بك، مما يؤدي إلى إضافة وظائف إضافية إلى الكود لديك بالفعل. مكتبة جافا سكريبت الأكثر شعبية هي jQuery، والتي تضم أكثر من 300 وظيفة يمكنك استخدامها.

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