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

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

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

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


حصل معمل ألوان على تصميم جديد في مايو 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

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

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

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

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

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

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

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

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

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

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