دليلك الشامل للدخول والتميز في عالم تصميم المواقع
مقال بواسطة / السيد صبري
تعتبر صناعة تصميم المواقع من أهم المجالات التى انتشرت فى الفترة الاخيرة. والتى شجعت الكثيرين على محاولة الدخول فيها، لأنها لا تحتاج إلى اكثر من جهاز كمبيوتر واتصال جيد بالانترنت ليس هذا فحسب بل إنها تحتاج الى كثير من البحث والتعلم والاجتهاد لكى تصبح مصمما ناجحا متميزا عن الكثيرين.
وقد لا يعلم الكثيرين كيفية نشأة هذه الصناعة او ما هى متطلبات النجاح او ما هى الوظائف التى قد تتناسب مع كل فرد والتى بالضرورة لا تتناسب من الاخرين او معك.
لذلك وجب علينا ان نلقى الضوء على اهم المفاهيم التى تقوم عليها هذا الصناعة..
ما هو تصميم المواقع Web Design؟
يُطلق هذا المصطلح على كل ما يُعرض على الإنترنت من خلال شاشات اللابتوب أو التابلت أو السمارت فون ويحتاج أن تكون مُلمًا بأسس التصميم وتكنولوجيات تحويل التصميم إلى موقع.
ينقسم هذا المصطلح إلى كلمتين: تصميم – مواقع.
الجزء الأول: تصميم (Design)
فالتصميم "بشكل عام هو عبارة عن حل لمشكلة ما مع مراعاة أسس التصميم والمشكلة عادة تتمثل في إيجاد (Visual Design) حل مرئي لكثير من الأفكار والجمل والكلمات التي تعمل معًا حالة تسويقية لمنتج أو خدمة ما".
وتراعي عملية تصميم المواقع الأسس العلمية التي بُني عليها علم التصميم بشكل عام من مراعاة للألوان والأحجام والمساحات.
وتختلف القدرة التصميمية لمصمم عن مصمم آخر في مدى قدرته على تقديم حل تصميمي جيد لمجموعة المشاكل التي تحيط بالتصميم. ويعتبر التصميم جيدًا عندما تظهر آثار الحلول في الظهور من زيادة في عدد الزوار أو زيادة في عدد المستفيدين من الخدمات التي يقدمها الموقع.
الجزء الثاني: المواقع الإلكترونية
هي القدرة على تحويل أي تصميم صُمم خصيصًا للعرض على الإنترنت إلى تصميم فعّال باستخدام لغة الـ HTML بشكل أساسي.
وهي لا تعتبر لغة برمجة بالمعنى الحقيقي ولكنها تعتبر لغة إظهار.
ارتبط تطور تصميم المواقع بتطور تكنولوجيات صناعة الإنترنت من تطوير للغة HTML وظهور لغة الـ CSS وتطور برامج استعراض الإنترنت. وظهور حالات تصميمية جديدة يتبعها المصممون كل فترة وتنتشر حتى ظهور حالة ثانية مثل التصميم المسطح، تصميم الواقعية.
مصممو المواقع تكون خلفياتهم العلمية مختلفة ومبنية على دراسة في كليات ومعاهد فنية أو كليات لدراسة الحاسب الآلي. بينما الكثيرون يدخلون إلى عالم تصميم المواقع بدون دراسة أكاديمية متخصصة فيحتاجون إلى كثير من الجهد لكي يتعلموا الجزء الفني من خلال تعلمهم لأسس التصميم أو دراسة الجزء التقني من خلال تعلمهم لغة الـ HTML والـ CSS بشكل أساسي.
المشكلة أن بعض الناس يعتبرون أنفسهم مصممين بمجرد أنهم قاموا بتثبيت برنامج الفوتوشوب أو بمجرد حصولهم على دورة مبدئية في تصميم المواقع متناسين تمامًا أن هذه صناعة تحتاج إلى وقت وجهد لكي تتعلمها فما بالك بإتقانها.
— ملحوظة..
"أنا مؤيد لدخول الأفراد إلى عالم تصميم المواقع، ولكن يجب أن يكون ذلك وفق شروط محددة، كما ذكرت، أو تحت إشراف أكاديمي خاص."
إذًا..ما هو اول شئ يجب أن أتعلمه؟
سؤال مهم لابد أن يسأله أي مهتم بدخول صناعة تصميم المواقع. أحب أن أسميها صناعة لأنها تجلب عائدًا كبيرًا إذا اتبعت عددًا معينًا من القواعد.
لكي تبدأ فعلًا بداية صحيحة لابد أن تعرف:
- نبذة عن تاريخ الويب بشكل عام وكيفية بدايته وذلك من خلال دراستك للغة الـ HTML وتطورها.
- تتعلم برنامج لتعديل الصور مثل الفوتوشوب لكي تصمم عليه شكل الموقع وهذه خطوة مهمة بعد معرفتك بالـ HTML وسوف تراعي في تصميمه تحقيق طلبات العميل واحتياجات البزنس الخاص به. "ولابد أن تعلم أن برنامج الفوتوشوب ينفذ فكرتك، يعني لابد أن يكون لديك فكرة أولًا لكي تقوم بتنفيذها."
- تتعلم برنامج الدريمويفر لكي يساعدك على إنشاء صفحات الموقع باستخدام لغة الـ HTML، لا غنى عنه لأي مصمم إنترنت أن يتعلمه.
- كيفية استخدام الجافا سكربت والجي كويري في الموقع والجافا سكربت لغة مسؤولة عن إضافة تأثيرات للموقع حتى يصبح جذابًا وسهل الاستخدام.
- الاطلاع الدائم بشكل مستمر على أحدث المقالات والاشتراك في منتديات ومجلات التصميم.
- وهذه بشكل أساسي بعض النقاط التي يمكن البدء بها وتعتمد عليك وقدراتك على التطور فيها.
مصمم المواقع .. ماذا يفعل؟
ماذا يفعل مصمم المواقع؟ أعتقد أن هذه بداية جيدة لمعرفة مكان مصمم المواقع في حلقة صناعة الموقع كما سبق أن ذكرنا أن التصميم ما هو إلا حل لمشكلة ما... والمشكلة هنا تكون عبارة عن متطلبات العميل التي تتمثل في:
- تناسب التصميم مع شريحة المستخدمين المستهدفة للموقع (أطفال - شباب - كبار السن).
- التركيز على خدمات الشركة أو التركيز على منتجات الشركة.
- فكرة التصميم التي تعكس تاريخ الشركة العريق.
يقوم المصمم بعكس كل هذه المتطلبات في التصميم المقترح الذي يقدمه للعميل مع مراعاة تنفيذه باستخدام أحدث التكنولوجيات (HTML وCSS وجافا سكربت).
يستقبل المصمم هذه المتطلبات في شكل إطار توضيحي مقدم من مصمم تجربة المستخدم، أو قد يقوم هو بعمله في حالة عمله كمصمم مواقع حر.
يستخدم مصمم المواقع مجموعة من برامج معالجة الصور مثل الفوتوشوب لإخراج تصميمه ومجموعة من الأساليب والطرق لجعل هذا التصميم قياسيًا مثل استخدامه لنظام الشبكة ويستغل المصمم خبراته وأسس التصميم لإضفاء جو مناسب لفكرة الموقع ويحدد التكنولوجيات المستخدمة لإظهار لمساته مثل استخدام الجافا سكربت أو جي كويري أو الفلاش مع مراعاة طرق عرضه على كافة الأجهزة.
ظهر في الفترة الأخيرة مصطلح جديد اسمه مصمم شاشات ويطلق على مصمم الويب بعدما ظهرت مجموعة كبيرة من أجهزة الهواتف الذكية وحتى شاشات التلفاز الذكي وشاشات الصراف الآلي.
وطبعًا مسؤولية المصمم لا تنتهي بانتهاء دورة في التصميم لابد أن يكون لديه القدرة على العمل مع فريق وهذه مشكلة قد تقابل كثير من المصممين العاملين بشكل حر لأنهم بشكل كبير يقومون بكل أعمال الفريق بمفردهم.
ولا يجب لأي مبتدئ في تصميم المواقع أن يعمل بشكل حر لأنه لن يتعلم من أحد ولن يأخذ خبرة كبيرة وسوف يقع في مشاكل هو في غنى عنها لأن الاتصال المباشر مع العميل يفقد المصمم كثيرًا من تركيزه.
من أين تأتي الأفكار الجيدة؟
حسنًا ... كما هو معروف، لا يمكنك أن تشتري الأفكار من السوبر ماركت أو تجدها مع أحد الباعة الجائلين، لكان الأمر سهلًا. لماذا أحتاج إلى الأفكار أساسًا؟
دعني أوضح لك ... إن كل عملية تصميم يقوم بها المصمم تكون مبنية على فكرة ما يندمج فيها متطلبات العميل مع البيانات الخاصة به مع اللمسات الفنية لتصنع حالة فريدة.
فماذا لو قمت بتصميم موقع لمطعم فاخر يقدم أطعمة إيطالية وطلب منك مطعم آخر، للصدفة، يقدم أيضًا أطعمة إيطالية أن تصمم له موقعه؟ فسوف تجد نفسك قد وقعت في حالة تشابه بين الموقعين من حيث التشابه في البيانات والصور للمأكولات وأيضًا شريحة المستخدمين المستهدفة، فعليك في هذه اللحظة أن تجد فكرة جديدة مخالفة عن الفكرة الأولى. ولهذا، المصمم الناجح يعرف من أين تأتي الأفكار.
لن تجدها على الرفوف أو مع الباعة الجائلين، عليك البحث في التفاصيل والخوض فيها والاهتمام بكبيرها وصغيرها، مع محاورة العميل وكيفية معاملته لمنافسيه لعلك تجد خيطًا ما لفكرة جديدة.
نعم، إنه أشبه بالبحث الجنائي، تفصيلة صغيرة تصل بك إلى الفكرة.
مثال آخر، لو نظرنا إلى أهم ثلاث شركات في إنتاج الملابس الرياضية وهي أديداس، نايك، وبوما، سوف تجد اختلافًا كبيرًا بالرغم من تشابه المنتجات، لأن كل شركة تعتمد على فكرة معينة وتجربة مستخدم مختلفة. وهذا يثبت لك أن دائمًا توجد أفكار، شريطة أن نهتم بالتفاصيل وبمتطلبات العميل. وتخيل كذلك أنك سوف تقوم بعمل تصميم لموقع عن شركة ملابس، ماذا ستفعل؟ هل انتهت الأفكار أم يوجد المزيد؟
خطوات تنفيذ المواقع يلزمها دائمًا التجديد في الأفكار، فعند بداية العمل في مشروع جديد يجب أن يقوم المصمم بعملية تنشيط لأفكاره وطريقة الإلهام.
إن عملية التصميم ليست ضغطًا على عدة أزرار لتصل إلى ما تريده، وإنما هي عملية إلهام تكون مصاحبة لعملية تركيز في المشروع وأهدافه. وكما وضحنا في نقطة من أين تأتي الأفكار، إن التركيز في كل كبيرة وصغيرة قد يفيد بشكل كبير في الحصول على الإلهام والفكرة. وتكون عملية الإلهام بالنسبة لكثير من المصممين لها بعض الطقوس الغريبة التي تختلف من فرد لآخر.
فهناك من يجد أن بقاءه في مكان هادئ يساعد على ذلك، وهناك من يرى أن بقاءه في مكان مزدحم يساعد أيضًا على ذلك. ليست هناك قاعدة ثابتة، كل على حسب شخصيته وما يرى أنسب له، افعله.
طرق كثيرة تساعدك في إيجاد الأفكار، متابعة المواقع والمجلات التي تتكلم عن تصميم الويب مثل سماش مجازين وبست ويب جاليري. لسنا نتحدث هنا عن نقل الأفكار، بالطبع لا، لكي ترى كيف يقدمون حلًا غير تقليديًا لأفكارهم. متابعة المواقع العالمية مثل مواقع شركات الطيران العالمية أو شركات الملابس الرياضية العالمية أو مواقع سلاسل الطعام العالمية. لماذا؟ لأن هذه الشركات تقوم بتغيير تصميم الخاص بمواقعهم بشكل مستمر في المناسبات العالمية مثل الدورات الأولمبية وبطولات كأس العالم. سوف يعطيك ذلك فكرة عن كيفية إيجاد الأفكار الجديدة وإلى أن من الممكن الذهاب في تنفيذ هذه الأفكار وهذا سيزيد قدرتك على إيجاد أفكار جديدة لنفس الموضوع. لن تجدها على الرفوف أو مع الباعة الجائلين.
أحلى ماعندنا ، واصل لعندك! سجل بنشرة أراجيك البريدية
بالنقر على زر “التسجيل”، فإنك توافق شروط الخدمة وسياسية الخصوصية وتلقي رسائل بريدية من أراجيك
عبَّر عن رأيك
إحرص أن يكون تعليقك موضوعيّاً ومفيداً، حافظ على سُمعتكَ الرقميَّةواحترم الكاتب والأعضاء والقُرّاء.
جميل جدا شكرا لكم
ما تعودنا نشوف اخطاء املائية بمقالاتكم
حلو كتير افكار ممتازة شكرا كتير
انا اتقن : PHP , HTML, JQUERY, SQL … كما أتقن العمل ببروتوكول XMPP و تصميم قوالب HTML و CSS … و الفوتوشوب أيضا. حاليا أعمل على مشاريع شخصية. .
شكرا على المعلومات. مفيدة وفيها كثير من الإجتهاد والإضافة
شكرا أ/ مصطفى على النصيحة وعلى الكلمات الجميلة
شكرا أ/ مصطفى على النصيحة وعلى الكلمات الجميلة
شكرا جزيلا والحمد لله انه اعجبك واتمنى ان تستفيد منه
شكرا جزيلا والحمد لله انه اعجبك واتمنى ان تستفيد منه
مقال رائع ^_^
و افضل حاجة انه بالأمتلة الواقعية مش مجرد كلام نظرى
جزاك الله خيراااا
رائع تسلم أيديك .. حطيت أيديك على أهم نقاط الموضوع … أقتراحى ليك مجرد أقتراح (( المصطلحات اللى مفهومة بالنسبالك هتبقى مجهولة للمبتدئين )) وده بيخلية محتار ومش عارف يدخل منين 😉 تحياتى
شكرا محمود وان شاء الله يوجد المزيد 🙂
شكرا محمود وان شاء الله يوجد المزيد 🙂
موضوع رائع, نريد المزيد
شكرا
تمام اوافقك الرأى فى هذه النقطة وشكرا لك على هذه الأضافة ويسعدنى تعليقك.
تمام اوافقك الرأى فى هذه النقطة وشكرا لك على هذه الأضافة ويسعدنى تعليقك.
علي الرغم من ان التصميم ليس له طريقة مثالية يجب ان يسبر عليها كل مصمم لكن بالنسبة للمبتدئ مفتاح جيد لدخول عالم التصميم
شكرا جزيلا
شكرا جزيلا
الحمد لله ان عجب حضرتك وشكرا لزوقك
الحمد لله ان عجب حضرتك وشكرا لزوقك
شكرا لزوقك
شكرا لزوقك
ان شاء الله نعمله يا استاذ شريف
ان شاء الله نعمله يا استاذ شريف
شكرا لحضرتك وان شاء الله هارجعه تانى
شكرا لحضرتك وان شاء الله هارجعه تانى
عايزين موضوع آخر عن تطوير المواقع واية الفرق بين مثلا Php , Asp.net
ولكن موضوع جميل جدا
رائع ..
بعض التركيز في الإملاء واللغة وبيصير تمام <3
موضوع كاف وممتاز يستحق منا التنويه والقراءة
جميل جدا
موضوع ممتاز وفيه الكثير من الحوافز