20 خطوة يجب عليك معرفتها وتطبيقها قبل البدء في أي مشروع لمصممي الويب

في هذه القائمة نقاط مهمة لمصممي الويب والتي يجب الاهتمام بها قبل البدء في أي عمل أو خلال إنجاز الأعمال

اكتب جميع أفكارك على ورقة أولاً

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

أبدأ في رسم الإطار أو البنية الأولية

أو ما يسمى بـ sketching a top level framework، هذه الخطوط الأولية عبارة عن البنية التحتية للمشروع وهي ما يعطيه الشكل والحس الخاص به. الرسوم الأولية هي الأساس لحل جميع مشاكل تصميم الويب. الإطار هو واجهة المستخدم أو UI وتوجد مكتبات كثيرة ومفتوحة المصدر يمكنك البدء باستخدامها أو تطوير واجهة مستخدم خاصة بك. واجهة المستخدم تحوي عناصر كثيرة من ضمنها عناصر القوائم على سبيل المثال والأزرار وماشابه وهي ما يؤطر التصميم ويعطيه التنسيق العام.

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

أضف الخطوط الشبكية لتصميمك

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

الخطوط الشبكية ستساعدك على تنظيم وتخطيط الأقسام المختلفة، سترشدك إلى تحديد متطلبات ابعاد الشاشات المختلفة، و مساعدتك في إنشاء قالب متفاعل أو ما يسمى بـ responsive templates، لتكون متسقة من حيث التباعد وكذلك العديد من الأمور المتعلقة بالتصميم.

اختيار الخطوط

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

اختيار الألوان

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

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

تقسيم تخطيط التصميم

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

فكّر بأبسط تخطيط تستطيع تخيله لأبسط هدف وأبدأ باضافة العناصر الضرورية. وفي النهاية ستجد كم هو صعب جداً أن تكون بسيطاً !

أعد التفكير في ما تم إنشاؤه

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

تحدى نفسك

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

اهتم بأدق التفاصيل

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

تعامل مع كل عنصر كما لو يمكن تقديمه لمسابقة تصميم

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

اشحذ عملك

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

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

رتّب ملفات الـ PSD

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

صمم لأفضل السيناريوهات واستعد للأسوء

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

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

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

قم بالتعديل على التصميم إلى أن تكرهه

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

تجنب قضاء وقت كثير على فكرة قبل مشاركتها مع عميلك

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

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

اجعل المطورين أفضل أصحابك

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

محاضرة: اشرحها لي وكأني ذو الأربع سنوات

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

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

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

تعقب التصميم الخاص بك أثناء عملية التطوير

إذا كنت تعمل في مؤسسة أو لصالح شركة ما، يمكن أنك قد لاحظت أنه من السهل أن تجد نفسك تعاني مع تصميم مشروع جديد والتصميم السابق الذي انتهيت منه للتو لازال قيد مرحلة التطوير. فعملك لا ينتهي بتسليم ملف الـ PSD و CSS بل حلقة متواصلة من التصميم والتعديل.

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

اعرض خطوات سير العمل

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