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

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

فهم مبادئ التصميم

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

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

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

تشريح الصفحة عن طريق مصدر الشفرة

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

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

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

firebug-ex

الإستلهام من أفكار الحالية

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

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

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

من مواضيع المدونة:

متابعة مقالات وأعمال المصممين

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

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

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

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

وجدت مقابلات رائعة يمكنك الإستفادة منها مثل 50 مقابلة مع مطورين ومصممين ومؤسسين مألوفين إضافةً إلى قسم المقابلات في موقع Nettuts.

التعلم بالعمل/بالبناء learning by doing

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

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

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

ليس ضرورياً تعلم أي شيء عند الحاجة يمكن التعلم في أي وقت حتى لو كانت لمجرد التجربة والمتعة! بالطبع التعلم لا ينتهي عند سن أو حد معين ولكن شيء مهم يجب أن نعرفه هو كيف يمكن أن نستفيد ونفيد بما لدينا من مصادر متوفرة يمكن لأي أحد أن يتعلم منها.

مكتبة خاصة لأدوات التصميم والتطوير

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

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

firefox-bookmark

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

تدوينات متعلقة:

مصادر أخرى تفيدك