افضل طرق لتعلم تصميم الويب من منزلك فقط
كيفية تعلم تصميم المواقع الإلكترونية من الصفر
في بداية التعلم عندما تكون مبتدا قد تبدو لك هده الدروس مملة ولن تستمتع بالتعلم عكس قرانهم من ذوي المعرفة الحالية حتى لو كانت هده الدروس بسيطة وايضا قد يبدوا التعلم بمفردك صعب لكن تذكر بانه ليس مستحيلا و مع البدا في فهم الامور و تبدا في العلم سوف تبدا في الاستمتاع.الان سوف نلقي نضرة عن بعض المهارات التي يحتاجها مصمم الويب الحديث من أجل المنافسة و ايضا الاشياء التي يجب عليك فيها رفع معرفتك.
مادا يحتاج مصمموا المواقع إلى معرفته ؟
- الترميز : تعلم HTML و CSS امر ضروري حتى لو كنت تخطط للالتصاق بالأشياء المرئية حيث انك عندما تتعلم كيفية الكود يصبح السهل إجراء تغييرات أثناء عملية التصميم وفي وقتنا الحالي أصبح من غير المقبول نقل تصميم ويب إلى مطور بدون رمز كل هذه الاسباب تجعل تعلم الترميز من الاشياء الضرورية و المهمة.
- نظرية التصميم : ايضا من الاشياء المهمة التي يجب تعلها هي نظرية التصميم مثل أساسيات التصميم و الشكل والإيقاع واللون والطباعة والموازنة.
- UX / UI (قابلية الاستخدام) الجمالية ليست كل شيء بل يجب عليك ايضا النضر الى جانب الجمالية المرئية و تعلم كيفية تصميم شيء يعمل بشكل جيد للمستخدمين.
- Photoshop / Illustrator يعد Adobe من الاشياء الاساسية التي يستخدمها المصممون لذا تعلم Adobe photoshop من الاساسيات التي عليك تعلمها.
أفضل الدورات لتعلم تصميم المواقع من المنزل
Udemy’s Adobe Illustrator CC MasterClass
هذه الدورة مخصصة بتعليم المشاركين Adobe Illustrator لتعلم التقنيات اللازمة لإنشاء الشعارات والرسومات الموجهة. Illustrator هو برنامج يمكنك من بإنشاء الطباعة والشعارات والرموز والرسومات التوضيحية.هذه الدورة مقدمة في 12 ساعة من الفيديو حسب الطلب ، سوف فتتعلم من خلالها جميع أساسياتك من تعلم طريقك حول الأدوات إلى التقنيات المتقدمة.
يقدم Udemy أيضا دورات تعليمية في Adobe Suite الكامل من ضمنها دورات لتعلم Photoshop يختلف سعر كل دورة منها المجاني و منها من يصل الى بعض مئات الدولارات.
الدورة الخاصة ب Adobe Illustrator تبلغ حاليًا 11.99 دولارًا فقط بخصم94٪ من السعر العادي.
Gymnasium: Coding for Designers
هذه دورة مجانية تماما لمن يريد تعلم الترميز تعد هذه الدورة مثل دورات التي يقدمها معهد ماساتشوستس للتقنية.
من مميزات دورة Gymnasium أنها تركز حصرياً على المكان الذي يتقاطع فيه الترميز والتصميم هذه الميزة تبين الفرق بينها وبين معضم الدورات التي يتم طرحها .
تعلم هذه الدورة يمكن المستخدمين من كيفية ترجمة تصميم الرسومات إلى الويب واستكشاف المشكلات الشائعة مع طرق لحلها. ستتعلم ايضا كيفية تخطيط الصفحة باستخدام CSS ، وستتلقى دروس حول الطباعة على الويب ، و كيفية إنشاء موقع ويب باستخدام Twitter Bootstrap.
Career Foundry
رغم هذه الدورة ليست مجانية لكنها مصدر موثوق لتعلم لكل الأشياء المتعلقة ب UX / UI / لتصميم الويب.
يقدم الموقع بعض الخيارات مثل شهادة في كل من التخصصات المذكورة سابقا. انصحك بالبحث في الموقع لمعرفة المزيد عن الدورة وكذلك الوقع.
بلنسبة لأولئك الذين لديهم بعض المعرفة الفنية والصميمية ، يمكن لشهادة UX أن تعزز مسيرتك المهنية ، حيث أن هذه المهرات مطلوبة بشدة في وقتنا الحالي. هده الدورة تعد من افضل الدورات في هذا المجال حيث يقدمون منهجا منهجًا قائمًا و متكاملا سوف يساعدك كثيرا في حياتك المهنية اذا كنت تبحث عن وظيفة جيدة فهذه المهارات ستساعدتك على العثور على وظيفة تلائم طموحاتك.
تمتد الدورة إلى 10 أشهر وتشمل مرشدًا فرديًا لتقييم مشاريعك بشكل منتظم يوميًا.
يقدم لك الموقع دورة قصيرة مجانية UX ان لم ترد شراء المدفوعة.
General Assembly
من مميزات هذه الدورة انها توفر برنامجا مُسرعًا مصممًا لتعليمك المهارات التي يمكنك استخدامها.
تحتوي هذه الدورة على كلاً من تصميم UX والتصميم المرئي وسيكون بامكانك الاختيار لاتخاذ برنامج متسارع مدته أسبوع واحد. يمكنك أيضًا نشر الدروس خلال بضعة أشهر فقط.
يجمع المنهج بين أساسيات واجهة المستخدم وبين تخطيط الويب وتصميم المحرف مع طرق البحث والتصميم المتجاوب. تعد هذه الطريقة عصرية لتصميم الويب تغطي تكتيكات واجهة المستخدم وسهولة الاستخدام ، إلى جانب مبادئ تصميم الرسوم.
يعلمك منهج UX التصميم بمعنى أوسع. تركز معظم الدروس على بنية المعلومات ، وأبحاث المستهلك ، واختبار قابلية الاستخدام. هناك أيضًا وحدة مخصصة للتصميم المرئي ، لكن التركيز ينصب على تجربة موقع الويب ككل بدلاً من جمالياته فقط.
MIT OpenCourseWare: Introduction to Computer Science and Programming
في البداية قد يبدو اسم هذه الدورة مخيف للمبتدئين لأولئك الذين ليس لديهم اي دراية بالترميز وتطوير الويب ، لكن لا تدع هذا الاسم يخيفك. يقدم برنامج MIT المجاني على الإنترنت المبتدئين خصوصيات وعموميات بيثون ، اضافة الى تعليمك أساسيات برمجة الكمبيوتر.
رغم من أن المصممين ليسوا في حاجة ان يصبحوا خبراء في الترميز ، لكن تعلم الترميز وتكون معرفة متوسطة او اكثر سوف يساعد كثيرا للحصول على الراحة من نشاط الواجهة الخلفية. لا يعتمد كثيرا هذا البرنامج على التصميم بالدرجة الاولى.وحتى ان تعلمت اكثر مما تحتاج اعتقد على انه كلما زاد عدد المعلومات التي يمكنك في مجال التكنولوجيا ، كلما كانت استعدادك للتحول الرقمي أفضل وسوف تفيدك المعلومات التي عرفتها كثيرا لذا انصحك بالتعلم وعدم التوقف عن التعلم في اي مجال كنت وبما انك وصلت لهدا السطر فانت محب للتصميم هذا رائع جدا اعلم انك ستواصل التعلم.Udacity: Intro to HTML and CSS
هذه الدورة مقدمة من طرف أوداسيتي لتعليم أساسيات CSS و HTML مدة هذه الدورة التدريبية ثلاثة أسابيع ذاتية التطبيق بعد انتهاء لدورة ستكون قد تعلمت كل من أساسيات تطوير الويب ، وكيفية تصميم موقع ويب باستخدام CSS ، وبناء جملة CSS ، والوحدات ، ومحددات.
يمكنك الاختيار بين هذه الطرق على حسب الخدمة التي تقدمها اذا كنت تصور منتج معين للبيع مثلا فلن تفلح المواقع يجب عليك تصويرها شخصيا. غير ذلك يمكنك الاعتماد على المواقع
يجب ان يكون التنقل في الموقع واضح
يجب ان يكون تصفح موقعك سهل و سلس يجب ان يكون موقعك مثل خريطة تنقلهم من نقطة إلى أخرى و شيء اخر مهم وبعض المصممون لا يعطون لهذه المسالة اي اعتمام انه كلما كانت التحولات والمنعطفات أقل ، كانت تجربة المستخدم أفضل.
يجب ان يكون موقعك نظيف وواضح و تصميمه انيق ولطيف.
بعض الاسئلة التي يجب ان تطرحها على نفسك سوف تساعدك كثيرا على فهم الامور.
من هو الجمهور الذي تستهدفه وما الذي تريد أن ينجزوه أثناء وجودهم في الموقع؟
بعض الإضافات التي يجب وضعها في عين الاعتبار:
يجب أن تتضمن موقعك القوائم المنسدلة و المعلومات الأساسية فقط.
اجعل الشعار جزءًا من التنقل و أنه قابل للنقر.
تأكد من أن تفاصيل الاتصال مدرجة في كل صفحة.
تصميم على الشبكة
بما انك تقرا هذه التدوينة من المحتمل انك لست محترف لكن من حسن الحظ ان في وقتنا الحالي ليس عليك القيام بالمهام كاملة فإن جماليات اليوم السائدة نظيفة ومرتبة نسبيًا.
يمكنك نظام الشبكة رسم كل صورة ورسم زر وكتلة نصية بحيث ان تتم محاذاة جميع العناصر بشكل صحيح.
كان نظام الشبكة موجودًا منذ اختراع الطباعة وتوجد نوعان النوع الاول هي المناظر الطبيعية ثم النوع التاني تتمثل في الصورة.
الفائدة الرئيسية هي أنه يمكنك بسهولة اتخاذ قرارات بشأن مكان إضافة الصور والمحتوى ، حيث أن الشبكة تحد من حيث يمكنك وضع هذه العناصر.
المساحة البيضاء
يجب الاهتمام بالمساحة البيضاء للموقع العديد من المصممين يعتقدون ان المساحة الفارغة يجب ملؤها دائمًا لكن لايجب ايضا الزيادة عن الزوم لذا لا يجب ان تكون المساحة البيضاء كبيرة جدا يجب استخدامها جيدا.
تنسيق الألوان
ايضا من الاشياء المهمة التي يجب عليك التركيز عليها هي تنسيق الالوان. الفشل في اختيار الالوان قد يعرض موقعك ايضا للفشل يجب ان تكون الاوان هادئة وايضا مريحة للعين و الزائر عندما يدخل الى موقعك يجد الراحة و الابتهاج لا يريد زوار الويب الدخول إلى بيت المرح ممتلئا بالالوان.
التعلم من Hubspot هي شركة مطورة وتسويقة منتجات البرمجيات للتسويق والمبيعات تهدف إلى توفير أدوات ل تسويق وسائل الاعلام الاجتماعية ، إدارة المحتوى اخد دورات في هذا المجال مفيد جدا للذين يريدون الغوص في نظرية الألوان ومدى ارتباطها بالويب.
شيء اخر يجب الانتباه له انك تستخدم نفس نظام الألوان في جميع أنحاء الموقع.
خطوط الموقع
كلما زادت الخطوط المضافة إلى المحتوى ، سيبدو موقعك أكثر تباثتا لاكن لا يجب استخدام أكثر من ثلاثة خطوط. استخدم خط للرؤوس والآخر لمحتوى النص و واخيرا وليس اخرا خط تمييز.
إذا كنت جديدًا في عالم المحارف ان دورة جوجل لتصميم جيدة جدا سوف تستفيد منها كثير يمكنك الدخول الى الدورة من هنا. هذ الدورة خاصة للمبتدئين لاختيار خطوط الويب الصحيحة و المناسبة.
فهم فن CTA
اما اذا كنت تنشا متجر الكتروني فمن المحتمل أن تكون CTA الأساسية هي روابط لشراء المنتجات أو الاشتراك في التوصل باحدث المشاركات و الاخبار
بعض النصائح التي عليك العمل بها
اولا يجب عليك اضافة CTA واحد لكل صفحة في الموقع.
يجب عليك ايضا أن تكون CTA ذات صلة بالمحتوى على الصفحة في موقعك.
اخيرا ولبس اخرا يجب عليك التأكد من أن موقعك يستجيب للاوامر التي تطبقها.
الى هنا اكود قد اكملت هدذه التدوينة الخاصة بتصميم الويب التمنى ان تكوما قد استفدتم و وجدتم ما تبحثون عنه سوف تكون هناك تدوينات الخرى في المستقبل حتى نعزز هذه المعلومات اقترح عليك الاشتراك في الموقع في الاسفل حتى تتوصل بكل جديد مدونة كوكب المعلوميات.
4اهم النصائح لتصميم موقع جيد.
موقع الويب الناجح هو الذي يجمع بين المحتوى الرائع وكذلك التصميم الرائع هذان العنصران ضروريان قد تمتلك احدهما لكن ليس كافي من الضروري ان يجمع موقعك بينهم حتى يحقق النجاح المطلوب. ايضا تجربة المستخدم ونظام الألوان مهم جدا ولا غنى عنهما.
في هذه الفقرة سوف اقدم لكم 8 نصائح لبناء موقع رائع وجميل. لن اركز في هذه الفقرة عن التصميم فقط بل ساعطي نصائح عن محتوى الموقع حتى تكون هذه التدزينة بها اكبر عدد ممكن من النصائح لتصميم ويب
التحلي بالجدية عند التقاط الصور
تعد الاشياء المرئية من الركائز التي تساهم في نجاح الموقع والصور من بين اهم هذه الاشياء لذلك يجب الاهتمام بشدة لهذه النقطة.
يمكنك ايضا الحصول على صور بالتقاطها لكن هذه المسالة تتطلب توفر معدات و مستلزمات لتصوير اذا لم تكن تتوفر عليها يمكنك الاعتماد على شخص اخر او فقط بالهاتف الذكي الحديث وبعض تطبيقات تحرير الخيارات القيام بالخدعة مثل تطبيق VSCO و Lightroom و Snapseed او يمكنك الاستعانة بمصادر خارجية مثل بعض المواقع التي توفر صور جميلة و بدقة وجودة عالية و لن ذاخد منك الوقت الكثير حتى تحصل على صورة مثالية ومن بين هذه المواقع Pexels و Unsplash و Snappa.يمكنك الاختيار بين هذه الطرق على حسب الخدمة التي تقدمها اذا كنت تصور منتج معين للبيع مثلا فلن تفلح المواقع يجب عليك تصويرها شخصيا. غير ذلك يمكنك الاعتماد على المواقع
يجب ان يكون التنقل في الموقع واضح
يجب ان يكون تصفح موقعك سهل و سلس يجب ان يكون موقعك مثل خريطة تنقلهم من نقطة إلى أخرى و شيء اخر مهم وبعض المصممون لا يعطون لهذه المسالة اي اعتمام انه كلما كانت التحولات والمنعطفات أقل ، كانت تجربة المستخدم أفضل.
يجب ان يكون موقعك نظيف وواضح و تصميمه انيق ولطيف.
بعض الاسئلة التي يجب ان تطرحها على نفسك سوف تساعدك كثيرا على فهم الامور.
من هو الجمهور الذي تستهدفه وما الذي تريد أن ينجزوه أثناء وجودهم في الموقع؟
ما نوع المعلومات التي تقدمها في الموقع؟
كيف ستبرز المعلومات الأكثر أهمية في الموقع؟
كيف تريد أن يتواصل الناس؟
بعض الإضافات التي يجب وضعها في عين الاعتبار:
يجب أن تتضمن موقعك القوائم المنسدلة و المعلومات الأساسية فقط.
اجعل الشعار جزءًا من التنقل و أنه قابل للنقر.
تأكد من أن تفاصيل الاتصال مدرجة في كل صفحة.
تصميم على الشبكة
بما انك تقرا هذه التدوينة من المحتمل انك لست محترف لكن من حسن الحظ ان في وقتنا الحالي ليس عليك القيام بالمهام كاملة فإن جماليات اليوم السائدة نظيفة ومرتبة نسبيًا.
يمكنك نظام الشبكة رسم كل صورة ورسم زر وكتلة نصية بحيث ان تتم محاذاة جميع العناصر بشكل صحيح.
كان نظام الشبكة موجودًا منذ اختراع الطباعة وتوجد نوعان النوع الاول هي المناظر الطبيعية ثم النوع التاني تتمثل في الصورة.
الفائدة الرئيسية هي أنه يمكنك بسهولة اتخاذ قرارات بشأن مكان إضافة الصور والمحتوى ، حيث أن الشبكة تحد من حيث يمكنك وضع هذه العناصر.
المساحة البيضاء
يجب الاهتمام بالمساحة البيضاء للموقع العديد من المصممين يعتقدون ان المساحة الفارغة يجب ملؤها دائمًا لكن لايجب ايضا الزيادة عن الزوم لذا لا يجب ان تكون المساحة البيضاء كبيرة جدا يجب استخدامها جيدا.
تنسيق الألوان
ايضا من الاشياء المهمة التي يجب عليك التركيز عليها هي تنسيق الالوان. الفشل في اختيار الالوان قد يعرض موقعك ايضا للفشل يجب ان تكون الاوان هادئة وايضا مريحة للعين و الزائر عندما يدخل الى موقعك يجد الراحة و الابتهاج لا يريد زوار الويب الدخول إلى بيت المرح ممتلئا بالالوان.
التعلم من Hubspot هي شركة مطورة وتسويقة منتجات البرمجيات للتسويق والمبيعات تهدف إلى توفير أدوات ل تسويق وسائل الاعلام الاجتماعية ، إدارة المحتوى اخد دورات في هذا المجال مفيد جدا للذين يريدون الغوص في نظرية الألوان ومدى ارتباطها بالويب.
شيء اخر يجب الانتباه له انك تستخدم نفس نظام الألوان في جميع أنحاء الموقع.
خطوط الموقع
كلما زادت الخطوط المضافة إلى المحتوى ، سيبدو موقعك أكثر تباثتا لاكن لا يجب استخدام أكثر من ثلاثة خطوط. استخدم خط للرؤوس والآخر لمحتوى النص و واخيرا وليس اخرا خط تمييز.
إذا كنت جديدًا في عالم المحارف ان دورة جوجل لتصميم جيدة جدا سوف تستفيد منها كثير يمكنك الدخول الى الدورة من هنا. هذ الدورة خاصة للمبتدئين لاختيار خطوط الويب الصحيحة و المناسبة.
فهم فن CTA
من الاشياء الضوررية ايضا التي يجب عيك تعلمها هي CTA يتم استخدامها في أزرار و ارتباطات الموضوعة على الصفحة. الهدف هو حث القارئ على التحرك والانتقال في الوقع.
مثالا على ذلك كي تفهم اكثر إذا كنت تقوم بإنشاء مدونة ، فمن المحتمل أن تكون CTA الأساسية هي "اشترك الآن" "أدخل بريدًا إلكترونيًا مجانًا ebook" و العديد من الامثلة الاخرى. أنت تقدم شيء للمستخدمين في المقابل توفير بريد إلكتروني واسم المستخدم.اما اذا كنت تنشا متجر الكتروني فمن المحتمل أن تكون CTA الأساسية هي روابط لشراء المنتجات أو الاشتراك في التوصل باحدث المشاركات و الاخبار
بعض النصائح التي عليك العمل بها
اولا يجب عليك اضافة CTA واحد لكل صفحة في الموقع.
يجب عليك ايضا أن تكون CTA ذات صلة بالمحتوى على الصفحة في موقعك.
اخيرا ولبس اخرا يجب عليك التأكد من أن موقعك يستجيب للاوامر التي تطبقها.
الى هنا اكود قد اكملت هدذه التدوينة الخاصة بتصميم الويب التمنى ان تكوما قد استفدتم و وجدتم ما تبحثون عنه سوف تكون هناك تدوينات الخرى في المستقبل حتى نعزز هذه المعلومات اقترح عليك الاشتراك في الموقع في الاسفل حتى تتوصل بكل جديد مدونة كوكب المعلوميات.