التبسيط وصولاً إلى الجوهر

توثيق لفلسفة تصميم واجهة معمل ألوان في إصدارها الرابع

آخر تحديث تم في 28 مايو 2016

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


حمل هذا الكتاب كاملاً بإمتداد .pdf أو .epub

الحجم التقريبي للملف 400 كيلوبايت

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

فلسفة التصميم

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

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

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

الكلمات بدلاً من الايقونات

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

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

الشعار

الرمزية والتيبوغرافي مزجاً في تكوين واحد، هذا هو الشعار الجديد لمعمل ألوان …

colorslab-v4-logo-colored-black-and-white

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

التيبوغرافي، الانقرائية والوضوح

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

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

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

فعل “القراءة” بدون معاناة

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

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

الانقرائية والوضوح

colorslab-v4-typography-sequance

وقع اختيارنا على عائلة خطوط Janna LT بالوزنين المتاحين Regular و Bold، ومع اختبارهم على أنظمة التشغيل والمتصفحات المختلفة تأكدنا من أن الخط يعرض بشكل مقبول على الأجهزة المختلفة وقابل للتعميم.

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

قابلية الوصول

بالسير على المبادئ العامة التي وضعتها w3.org  لمعايير قابلية الوصول (Web Content Accessibility Guidelines 2.0) إتبعنا عدد كبير من تلك المبادئ لكي نجعل معمل ألوان قابل للوصول للشريحة الأكبر من المستخدمين ذوي الإعاقات البصرية المتعلقة بالألوان، والذي تظهر مشاكلهم عند قراءة  نصوص تباينها عن الخلفية غير كاف.

contrast-for-accessability-bold-vs-regular-weight

لقد حرصنا على أن يكون معدل التباين يتجاور 4.5:1 للنصوص العادية، وهذة القاعدة لم يكن تطبيقها على التصميم مشكلة كبيرة لأن الإعتماد في لون النصوص لكل محتوى معمل ألوان كان على اللون الأسود فوق الخلفية البيضاء، الإستثناء الوحيد كان لون أزرار ال CTA  الاحمر، والذي يفشل في تحقيق معيار WCAGAAA عندما يكون النص فوقة بوزنه العادي، تغلبنا على هذة المشكلة بالإعتماد على الوزن السميك لخط Janna LT عندما تكون الخلفية باللون الأحمر.

لوحة الالوان

identity-colors-of-colorslab-v4

الألوان يجب أن تسير على نفس النهج العام لفلسفة التصميم معمل ألوان - الإصدار الرابع، أن توصل شعوراً انياً بالبساطة وأن تحفزك للمهمة التي جئت معمل ألوان من أجلها، أن تقرأ، لذا إستقرينا على الإستمرار على اللون الأزرق كلون أساسي مع تطعيم التصميم في أماكن متفرقة باللون الأحمر "المهيج" والمحفز كلون الفعل Call To Action.

دكتور الوان Dr.Colors

dr-colors-brand-colorslab-v4-identity

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

النشرة البريدية

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

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

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

لقد جمعنا أرشيف الأعداد التي أرسلت من نشرة معمل ألوان البريدية منذ إعادة إطلاقها للمرة الثانية في 15 مارس 2014، بداية من العدد #15. تستطيع الوصول له في أي وقت على معمل ألوان: أرشيف النشرة البريدية

استبيان المعمل

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

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

سلاسل المقالات

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