أماني الشهري
24-10-2016, 08:24 PM
19 خطوة لتصميم موقع ويب مثالي
هذه المبادئ والخطوات لا تغطي فقط جوانب التصميم كصفحة الهبوط (landing page) ولكنها تشمل أيضا قضايا سير العمل العام. فقم باتباع هذه المبادئ وستقوم بإنشاء تصميمات مواقع ويب احترافية.
1. ضع أفكارك على الورق أولا
3 اسكتشات مبدئية عن المدن
غالبا ما يقوم المصممين بالذهاب للفوتوشوب مباشرة قبل التفكير في المشكلة التي يحاولوا حلها. فالتصميم يقوم بحل مشاكل وهذه المشاكل لا يمكن حلها باستخدام الظلال أو الـ gradients ولكن من خلال تصميم (layout) جيد وتسلسل هرمي واضح
(clear hierarchy). فكر في المحتوي والتصميم والـ functionality.
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
2. ابدأ برسم المستوي الأعلي من الإطار (framework)
الرسم الأساسي Sketching سيساعدك علي حل مشاكل تجربة المستخدم (UX) وتنظيم التصميم.
المستوي الأعلي من الإطار”framework” يحل جميع مشاكل التصميم. الإطار “framework” هو واجهة المستخدم (UI) المحيطة بالمحتوي والتي تساعد علي التنقل وتنفيذ الإجراءات (perform actions). وهي تتضمن التصفح والمكونات مثل الشريط الجانبي”sidebars”.
اذا اتبعت نهج التصميم هذا سيكون لديك فهم واضح لما سيحتاجه التصميم عند البدأ بتصميم باقي الصفحات.
3. اضافة grid لـ PSD
مثال علي 978 Grid بخط أساس 10px
قبل أن تبدأ بتصميم أي شئ في الفوتوشوب فانت تحتاج إلي grid مناسبة للبدأ.
الـ grid ستساعدك في تنظيم تصميم الأقسام المختلفة، فستساعدك علي إنشاء قوالب مستجيبة “responsive” ومتناسقة من حيث التباعد وكذلك ستحل الكثير من مشاكل التصميم الأخري
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
.
4. اختيار التيبوغرافي
القاعدة العامة هو عدم استخدام أكثر من خطين في تصميم موقع الويب.
استكشاف الخطوط المختلفة والألوان هو جزء من مراحل المشروع. وانصح باستخدام خطين علي الأكثر في موقع الويب اعتمادا علي طبيعته. عموما قم باختيار خط يسهل قرائته في النصوص الكثيرة ويكون مناسب للعناوين. ولا تخف من استخدام الخطوط الكبيرة.تعرف أكثر على التيبوغرافي.
5. اختر colour theme
استخدم مجموعة محدودة من الألوان وtones لتجنب الحمل البصري الزائد visual overload.
خلال عملية اختيار الخطوط يجب أن تبدأ في استكشاف الألوان التي ستستخدمها في واجهة المستخدم والخليفات والنصوص.
من المهم تنسيق الألوان في واجهة المستخدم اعتمادا علي وظيفة العناصر”element’s functionality” .فكر في تصميمات مواقع مثل (Facebook, , Quora, and Vimeo).
6. تقسيم التصميم
البنية البسيطة للموقع تسهل التنقل للمستخدمين
كل قسم في الموقع يحتاج أن يروي قصة. فهو يحتاج إلي سبب ونتيجة نهائية للمستخدم. التصميم يحتاج لمساعدة المحتوي في إبراز أهم الأجزاء. في الواقع لا ينبغي أن يوجد عدد كبير من الدعوات CTA في الصفحة لذلك كل شئ في الصفحة يجب أن يقود في النهاية إلي “ماذا يمكنني أن أفعل هنا”.
فكر في أبسط تصميم يمكنك تخيله لهدف بسيط وابدأ في إضافة المكونات والعناصر الضرورية. وفي النهاية ستدرك مدي صعوبة ابقاء التصميم بسيط
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
7. إعادة التفكير في المُنشأ (established)
هل نحتاج حقا لزر البحث؟ في معظم الحالات الجواب يكون لا
كمصممين فنحن نشكل طريقة تصفح المستخدمين للانترنت، والأمر متروك لنا لتحديد عدد الخطوات التي سيأخذها إجراء معين (كالتسجيل) ومدي كفاءة الموقع. من المهم إعادة التفكير في الأنماط التفاعلية في أي عنصر ونري كيف يمكننا تحسينه.
8. تحدي نفسك
أُشجع كل المصممين لتحدي أنفسهم في كل مشروع. فالابتكار لا يأتي كشرط أساسي في المشروع حيث الأمر متروك لك لإبتكار شئ تفاعلي جديد. وأمثلة لتحديات مختلفة يمكن أن تتضمن استخدام نظام شبكي جديد (grid system) وإنشاء عناصر جديدة أو حتي تحديات بسيطة كتجنب استخدام لون معين أو blend modes .
9. اهتم بالتفاصيل
يمكن أن يكون الاهتمام بالتفاصيل عن طريق تفاعل بسيط، رسوم متحركة (animation) غير متوقعة أو لمسة جمالية كالـ gradient في زر.
10. عامل كل عنصر “component” كما لو كان سيعرض في مسابقة
يجب أن تصمم كل عنصر كأنه سيكون أفضل عنصر بارز بذاته.
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
11. شحذ “Sharpen” عملك
لتجنب البكسل الضبابي “blurry pixels”، حاول تحديد التباين الصحيح بين strokes والخلفية أو ألوان الخلفية.
بالاضافة إلي اعتبار الجانب الجمالي يوجد بعض الأشياء الشائعة التي يجب تجنبها لإنشاء تصميم مميز ونظيف. يجب ان تبحث عن بعض الأشياء عند محاولة شحذ “sharpen” عملك كالحواف الباهتة وتباين التدرجات.
وهذه فقط بعض الأمثلة لمشاكل للبحث عنها ولكن في الواقع يوجد قائمة لاتنتهي. دائما انظر لتصميمك ككل لمعرفة اذا كان كل شيئ يعمل جيدا ومن ثم قم بتحليل كل عنصر علي حده بعناية أكبر.
12. ترتيب وتنظيم الـ PSD
تنظيم وترتيب الـpsdأحد أهم الأشياء في التصميم بالفوتوشوب. بالرغم من حجم المشروع وعدد المصممين العاملين عليه يجب أن تحافظ علي ملفاتك نظيفة ومنظمة. وهذا سيساعد في تسريع عملية التصميم والعمل مع الملفات المشتركة مع المصممين الآخرين.
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
13. تصميم أفضل سيناريو والاستعداد للأسوأ
فكر في كيف سيبدو تصميمك وكيف وسيعمل علي الأجهزة والشاشات المختلفة.
كمصممين مهمتنا هي حل المشاكل عبر المعوقات المختلفة. في تصميم مواقع الويب، تتراوح القيود من القضايا التقنية والمفاهيمية “conceptual” إلي مشاكل مرتبطة بالمحتوي.
نحتاج لإنشاء موقع لا يعمل فقط في السيناريو المثالي ولكن أيضا في أسوا سيناريو. علي سبيل المثال يمكن أن يستخدم المستخدم شاشة صغيرة جدا ويتحقق من الموقع عند وجود محتوي قليل فيبدو الموقع وكأنه معطل.
ومع ذلك لتقديم عمل جيد يجب إنشاء أفضل سيناريو له. لذلك سنقوم بنعرض كمية مثالية للنص ونفتح الموقع من متصفح حجمه مثالي وهذا يجب أن يكون السيناريو الشائع لمعظم المستخدمين
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
.
14. تجنب اضاعة الكثير من الوقت علي فكرة “concept” قبل مشاركتها مع العميل
عند اقتراح مفهوم وفكرة أو تصميم “الشكل والمظهر”، فانت بحاجة للتأكد من أنك والعميل متفاهمين. فبمجرد أن يوافق علي المفهوم الأًولي يمكنك الاسترخاء وبدأ العمل.
ولكن اذا لم يحب العميل أول مفهوم “concept”، يجب أن تجمع ملاحظات كافية منه لإنشاء مفهوم ثاني جديد مناسب”concept”.
15. كن أفضل صديق للمطورين “developer’s”
المطورين أشخاص مبدعين ويحبوا عملهم مثلك. ولكنهم لا يشتركوا في المشروع من بدايته وكثيرا ما يتدخلوا فقط عندما يتم اختيار المفهوم “concept” ويتم تجاوز دورهم الإبداعي. فهذا فكرة خاطئة تماما وأحيانا أفضل الأفكار تأتي من فريق المطورين، لذلك تأكد من اشراكهم في المشروع من بدايته. فمشاركة أفكارك “concepts” وحماسك معهم ستؤدي إلي أفضل الأفكار وتنفيذ أفضل في النهاية.
16. العروض التقديمية: اشرح لي كأني طفل عنده 4 سنوات
من المهم إنشاء عمل عظيم وتقديمه. فيمكن تجاهل أفضل تصميم لك ونسيانه إذا لم تقدمه بشكل صحيح. فكر في ان ما يبدو واضح تماما لك قد لا يكون واضح لشخص ما يري تصميمك لأول مرة.
17. أحب كل أفكارك ولكن لا تتعلق جدا بهم
كمصمم فانت تحتاج بأن تؤمن بما تفعله، ولكن أيضا يجب أن تكون منفتح لتقوم بتغيير فكرة بسرعة وابتكار فكرة جديدة. ولا تنسي أنه يوجد حلول كثيرة رائعة.
18. تابع تصميمك خلال عملية التطوير
اذا كنت تعمل في وكالة قد تجد نفسك تعاني في تصميم مشروع جديد بعد الانتهاء من مشروع سابق قد أنهيته. فعلي عكس الاعتقاد العام، عملك في المشروع لا ينتهي بمجرد تسليم الـ PSD .
اذا كنت تهتم حقا بتصميماتك وتنفيذها بشكل جيد، فقم بمراجعة المطورين من وقت لآخر ومساعدتهم بقدر الإمكان للتأكد من أن كل شيئ مثالي.
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
19. اعرض مراحل عملك
شارك خطوات العمل مع المجتمع
كجزء من مجتمع المصممين، فنحن جميعا نحن أن نري مراحل التقدم في العمل وليس فقط النتيجة النهائية. فبمجرد الانتهاء من المشروع وتحصل علي موافقة العميل فقم بتعزيزه وان أمكن قم بإنشاء دراسة حالة”case study” للتقدم في العمل. ستساهم في المجتمع وستحصل علي ملاحظات وتعليقات قيمة في المقابل.
توب لاين
http://tl4s.com.sa/
هذه المبادئ والخطوات لا تغطي فقط جوانب التصميم كصفحة الهبوط (landing page) ولكنها تشمل أيضا قضايا سير العمل العام. فقم باتباع هذه المبادئ وستقوم بإنشاء تصميمات مواقع ويب احترافية.
1. ضع أفكارك على الورق أولا
3 اسكتشات مبدئية عن المدن
غالبا ما يقوم المصممين بالذهاب للفوتوشوب مباشرة قبل التفكير في المشكلة التي يحاولوا حلها. فالتصميم يقوم بحل مشاكل وهذه المشاكل لا يمكن حلها باستخدام الظلال أو الـ gradients ولكن من خلال تصميم (layout) جيد وتسلسل هرمي واضح
(clear hierarchy). فكر في المحتوي والتصميم والـ functionality.
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
2. ابدأ برسم المستوي الأعلي من الإطار (framework)
الرسم الأساسي Sketching سيساعدك علي حل مشاكل تجربة المستخدم (UX) وتنظيم التصميم.
المستوي الأعلي من الإطار”framework” يحل جميع مشاكل التصميم. الإطار “framework” هو واجهة المستخدم (UI) المحيطة بالمحتوي والتي تساعد علي التنقل وتنفيذ الإجراءات (perform actions). وهي تتضمن التصفح والمكونات مثل الشريط الجانبي”sidebars”.
اذا اتبعت نهج التصميم هذا سيكون لديك فهم واضح لما سيحتاجه التصميم عند البدأ بتصميم باقي الصفحات.
3. اضافة grid لـ PSD
مثال علي 978 Grid بخط أساس 10px
قبل أن تبدأ بتصميم أي شئ في الفوتوشوب فانت تحتاج إلي grid مناسبة للبدأ.
الـ grid ستساعدك في تنظيم تصميم الأقسام المختلفة، فستساعدك علي إنشاء قوالب مستجيبة “responsive” ومتناسقة من حيث التباعد وكذلك ستحل الكثير من مشاكل التصميم الأخري
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
.
4. اختيار التيبوغرافي
القاعدة العامة هو عدم استخدام أكثر من خطين في تصميم موقع الويب.
استكشاف الخطوط المختلفة والألوان هو جزء من مراحل المشروع. وانصح باستخدام خطين علي الأكثر في موقع الويب اعتمادا علي طبيعته. عموما قم باختيار خط يسهل قرائته في النصوص الكثيرة ويكون مناسب للعناوين. ولا تخف من استخدام الخطوط الكبيرة.تعرف أكثر على التيبوغرافي.
5. اختر colour theme
استخدم مجموعة محدودة من الألوان وtones لتجنب الحمل البصري الزائد visual overload.
خلال عملية اختيار الخطوط يجب أن تبدأ في استكشاف الألوان التي ستستخدمها في واجهة المستخدم والخليفات والنصوص.
من المهم تنسيق الألوان في واجهة المستخدم اعتمادا علي وظيفة العناصر”element’s functionality” .فكر في تصميمات مواقع مثل (Facebook, , Quora, and Vimeo).
6. تقسيم التصميم
البنية البسيطة للموقع تسهل التنقل للمستخدمين
كل قسم في الموقع يحتاج أن يروي قصة. فهو يحتاج إلي سبب ونتيجة نهائية للمستخدم. التصميم يحتاج لمساعدة المحتوي في إبراز أهم الأجزاء. في الواقع لا ينبغي أن يوجد عدد كبير من الدعوات CTA في الصفحة لذلك كل شئ في الصفحة يجب أن يقود في النهاية إلي “ماذا يمكنني أن أفعل هنا”.
فكر في أبسط تصميم يمكنك تخيله لهدف بسيط وابدأ في إضافة المكونات والعناصر الضرورية. وفي النهاية ستدرك مدي صعوبة ابقاء التصميم بسيط
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
7. إعادة التفكير في المُنشأ (established)
هل نحتاج حقا لزر البحث؟ في معظم الحالات الجواب يكون لا
كمصممين فنحن نشكل طريقة تصفح المستخدمين للانترنت، والأمر متروك لنا لتحديد عدد الخطوات التي سيأخذها إجراء معين (كالتسجيل) ومدي كفاءة الموقع. من المهم إعادة التفكير في الأنماط التفاعلية في أي عنصر ونري كيف يمكننا تحسينه.
8. تحدي نفسك
أُشجع كل المصممين لتحدي أنفسهم في كل مشروع. فالابتكار لا يأتي كشرط أساسي في المشروع حيث الأمر متروك لك لإبتكار شئ تفاعلي جديد. وأمثلة لتحديات مختلفة يمكن أن تتضمن استخدام نظام شبكي جديد (grid system) وإنشاء عناصر جديدة أو حتي تحديات بسيطة كتجنب استخدام لون معين أو blend modes .
9. اهتم بالتفاصيل
يمكن أن يكون الاهتمام بالتفاصيل عن طريق تفاعل بسيط، رسوم متحركة (animation) غير متوقعة أو لمسة جمالية كالـ gradient في زر.
10. عامل كل عنصر “component” كما لو كان سيعرض في مسابقة
يجب أن تصمم كل عنصر كأنه سيكون أفضل عنصر بارز بذاته.
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
11. شحذ “Sharpen” عملك
لتجنب البكسل الضبابي “blurry pixels”، حاول تحديد التباين الصحيح بين strokes والخلفية أو ألوان الخلفية.
بالاضافة إلي اعتبار الجانب الجمالي يوجد بعض الأشياء الشائعة التي يجب تجنبها لإنشاء تصميم مميز ونظيف. يجب ان تبحث عن بعض الأشياء عند محاولة شحذ “sharpen” عملك كالحواف الباهتة وتباين التدرجات.
وهذه فقط بعض الأمثلة لمشاكل للبحث عنها ولكن في الواقع يوجد قائمة لاتنتهي. دائما انظر لتصميمك ككل لمعرفة اذا كان كل شيئ يعمل جيدا ومن ثم قم بتحليل كل عنصر علي حده بعناية أكبر.
12. ترتيب وتنظيم الـ PSD
تنظيم وترتيب الـpsdأحد أهم الأشياء في التصميم بالفوتوشوب. بالرغم من حجم المشروع وعدد المصممين العاملين عليه يجب أن تحافظ علي ملفاتك نظيفة ومنظمة. وهذا سيساعد في تسريع عملية التصميم والعمل مع الملفات المشتركة مع المصممين الآخرين.
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
13. تصميم أفضل سيناريو والاستعداد للأسوأ
فكر في كيف سيبدو تصميمك وكيف وسيعمل علي الأجهزة والشاشات المختلفة.
كمصممين مهمتنا هي حل المشاكل عبر المعوقات المختلفة. في تصميم مواقع الويب، تتراوح القيود من القضايا التقنية والمفاهيمية “conceptual” إلي مشاكل مرتبطة بالمحتوي.
نحتاج لإنشاء موقع لا يعمل فقط في السيناريو المثالي ولكن أيضا في أسوا سيناريو. علي سبيل المثال يمكن أن يستخدم المستخدم شاشة صغيرة جدا ويتحقق من الموقع عند وجود محتوي قليل فيبدو الموقع وكأنه معطل.
ومع ذلك لتقديم عمل جيد يجب إنشاء أفضل سيناريو له. لذلك سنقوم بنعرض كمية مثالية للنص ونفتح الموقع من متصفح حجمه مثالي وهذا يجب أن يكون السيناريو الشائع لمعظم المستخدمين
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
.
14. تجنب اضاعة الكثير من الوقت علي فكرة “concept” قبل مشاركتها مع العميل
عند اقتراح مفهوم وفكرة أو تصميم “الشكل والمظهر”، فانت بحاجة للتأكد من أنك والعميل متفاهمين. فبمجرد أن يوافق علي المفهوم الأًولي يمكنك الاسترخاء وبدأ العمل.
ولكن اذا لم يحب العميل أول مفهوم “concept”، يجب أن تجمع ملاحظات كافية منه لإنشاء مفهوم ثاني جديد مناسب”concept”.
15. كن أفضل صديق للمطورين “developer’s”
المطورين أشخاص مبدعين ويحبوا عملهم مثلك. ولكنهم لا يشتركوا في المشروع من بدايته وكثيرا ما يتدخلوا فقط عندما يتم اختيار المفهوم “concept” ويتم تجاوز دورهم الإبداعي. فهذا فكرة خاطئة تماما وأحيانا أفضل الأفكار تأتي من فريق المطورين، لذلك تأكد من اشراكهم في المشروع من بدايته. فمشاركة أفكارك “concepts” وحماسك معهم ستؤدي إلي أفضل الأفكار وتنفيذ أفضل في النهاية.
16. العروض التقديمية: اشرح لي كأني طفل عنده 4 سنوات
من المهم إنشاء عمل عظيم وتقديمه. فيمكن تجاهل أفضل تصميم لك ونسيانه إذا لم تقدمه بشكل صحيح. فكر في ان ما يبدو واضح تماما لك قد لا يكون واضح لشخص ما يري تصميمك لأول مرة.
17. أحب كل أفكارك ولكن لا تتعلق جدا بهم
كمصمم فانت تحتاج بأن تؤمن بما تفعله، ولكن أيضا يجب أن تكون منفتح لتقوم بتغيير فكرة بسرعة وابتكار فكرة جديدة. ولا تنسي أنه يوجد حلول كثيرة رائعة.
18. تابع تصميمك خلال عملية التطوير
اذا كنت تعمل في وكالة قد تجد نفسك تعاني في تصميم مشروع جديد بعد الانتهاء من مشروع سابق قد أنهيته. فعلي عكس الاعتقاد العام، عملك في المشروع لا ينتهي بمجرد تسليم الـ PSD .
اذا كنت تهتم حقا بتصميماتك وتنفيذها بشكل جيد، فقم بمراجعة المطورين من وقت لآخر ومساعدتهم بقدر الإمكان للتأكد من أن كل شيئ مثالي.
تصميم المواقع (http://www.tl4s.com.sa/)
تصميم مواقع (http://www.tl4s.com.sa/)
19. اعرض مراحل عملك
شارك خطوات العمل مع المجتمع
كجزء من مجتمع المصممين، فنحن جميعا نحن أن نري مراحل التقدم في العمل وليس فقط النتيجة النهائية. فبمجرد الانتهاء من المشروع وتحصل علي موافقة العميل فقم بتعزيزه وان أمكن قم بإنشاء دراسة حالة”case study” للتقدم في العمل. ستساهم في المجتمع وستحصل علي ملاحظات وتعليقات قيمة في المقابل.
توب لاين
http://tl4s.com.sa/