أهم خطوات تصميم موقع ويب ناجح ( 2016 )

خطوات تصميم موقع ويب ناجح

دعنا نتطرق الى مجموعة من الخطوات التى يجب ان يتبعها المصمم حتى يشرع فى تصميم الموقع من وجهه نظر مختلفة فى مجال تصميم مواقع الويب فعملية التصميم هى عملية ابتكارية يجب اتباع التدرج فيها حتى تصل الى تصميم احترافى 

الخطوة الاولى : ضع أفكارك على الورق او التصميم على الورق

غالبا ما يقوم المصممين بالذهاب للفوتوشوب مباشرة قبل التفكير في المشكلة التي يحاولوا حلها. فالتصميم يقوم بحل مشاكل وهذه المشاكل لا يمكن حلها باستخدام الظلال أو الـ gradients ولكن من خلال تصميم (layout) جيد وتسلسل هرمي واضح (clear hierarchy). فكر في المحتوي والتصميم والـ functionality.

الخطوة الثانية: ابدأ برسم الشكل العام لتصميم الموقع او المستوى الاعلى من الاطار العام

المستوي الأعلي من الإطار”framework” يحل جميع مشاكل التصميم. الإطار “framework” هو واجهة المستخدم (UI) المحيطة بالمحتوي والتي تساعد علي التنقل وتنفيذ الإجراءات (perform actions). وهي تتضمن التصفح والمكونات مثل الشريط الجانبي”sidebars”. اذا اتبعت نهج التصميم هذا سيكون لديك فهم واضح لما سيحتاجه التصميم عند البدأ بتصميم باقي الصفحات.

الخطوة الثالثة : اختيار التيبوغرافي لتصميم الموقع

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

الخطوة الرابعة : اضافة grid لـ PSD الخاص بتصميم الموقع

قبل أن تبدأ بتصميم الموقع بالفوتوشوب فانت تحتاج إلي grid مناسبة للبدأ.

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

الخطوة الخامسة : اختر colour theme

استخدم عند تصميم الموقع مجموعة محدودة من الألوان وtones لتجنب الحمل البصري الزائد visual overload.

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

من المهم تنسيق الألوان في واجهة المستخدم اعتمادا علي وظيفة العناصر”element’s functionality” .فكر في تصميم موقع مثل (Facebook, Twitter, Quora, and Vimeo).

الخطوة السادسة :  تقسيم تصميم الموقع

البنية البسيطة لتصميم موقع تسهل التنقل للمستخدمين

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

الخطوة السابعة : إعادة التفكير في المُنشأ (established)

هل نحتاج حقا لزر البحث؟ في معظم الحالات الجواب يكون لا

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

الخطوة الثامنة :  تحدي نفسك 

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

الخطوة التاسعة :  اهتم بالتفاصيل 

يمكن أن يكون الاهتمام بالتفاصيل عن طريق تفاعل بسيط، رسوم متحركة (animation) غير متوقعة أو لمسة جمالية كالـ gradient في زر.

الخطوة العاشرة :  عامل كل عنصر “component” كما لو كان سيعرض في مسابقة

يجب أن تصمم كل عنصر كأنه سيكون أفضل عنصر بارز بذاته.

الخطوة الحادية عشر : تجنب البكسل الضبابي

لتجنب البكسل الضبابي “blurry pixels”، حاول تحديد التباين الصحيح بين strokes والخلفية أو ألوان الخلفية.

بالاضافة إلي اعتبار الجانب الجمالي يوجد بعض الأشياء الشائعة التي يجب تجنبها لإنشاء تصميم مميز ونظيف.  يجب ان تبحث عن بعض الأشياء عند محاولة شحذ “sharpen” عملك كالحواف الباهتة وتباين التدرجات.

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

الخطوة الثانية عشر :  ترتيب وتنظيم الـ PSD للتصميم 

تنظيم وترتيب الـ psd أحد أهم الأشياء في التصميم بالفوتوشوب. بالرغم من حجم المشروع وعدد المصممين العاملين عليه يجب أن تحافظ علي ملفاتك نظيفة ومنظمة. وهذا سيساعد في تسريع عملية التصميم والعمل مع الملفات المشتركة مع المصممين الآخرين.

الخطوة الثانية عشر :  تصميم أفضل سيناريو والاستعداد للأسوأ

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

الخطوة الرابعة عشر : تجنب اضاعة الكثير من الوقت علي فكرة “concept” خاصة بالموقع قبل مشاركتها مع العميل

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

الخطوة الخامسة عشر :  كن أفضل صديق للمطورين “developer’s”

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

الخطوة السادسة عشر :  العروض التقديمية: اشرح لي كأني طفل عنده 4 سنوات

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

الخطوة السابعة عشر :  أحب كل أفكارك ولكن لا تتعلق جدا بهم

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

الخطوة الثامنة عشر : تابع تصميمك خلال عملية التطوير

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

الخطوة التاسعة عشر :  اعرض مراحل عملك فى تصميم موقع (showcase )

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