المتابع للتوجة العام في الأدوات والبرامج الجديدة المخصصة لمصممي الويب التي بدأت تظهر مؤخراً، يستطيع أن يتنبأ وهو مرتاح البال أن مستقبل أدوات التصميم للويب يتجة للإبتعاد عن Photoshop إلى التصميم على المتصفح Browser مباشرة (صمم وأنت تكتب الكود)، فتطور الويب وتقنيات التصميم سواء بإستخدام HTML5 و CSS3 والإمكانيات المذهلة التي وفرتها تلك التقنيات لم يقابلها على الجانب الآخر تطور موازي  في الأدوات المستخدمة لصناعة المواقع خاصة وأن غالبية مصممي المواقع يعتمدون على برنامج Photoshop الغير مؤهل بالأساس للتصميم للويب، مما أدى لظهور عدد من البرامج الجديدة التي تتباهي بأنها تصمم على المتصفح فوراً وترفع شعار “رسم الكود ! Drawing Code” بدلاً من “التصميم والتكويد Design and Code”.

أتذكر احدى المقالات اللاذعة التي نشرت على مدونة Signal vs. Noise (المدونة الرسمية لشركة Basecamp أو 37 Signals سابقاً) التي تحدثت عن كيف أنهم يتجاوزون الفوتوشوب ويتجهون للتصميم على المتصفح فوراً (التصميم أثناء كتابة كود  HTML & CSS) بعد مرحلة التخطيط! وهي ممارسة تعتبر غريبة بعض الشيء عن الخط الطبيعي لسير عملية تصميم المواقع التي اعتدنا عليها، فالفوتوشوب يوفر أدوات كثيرة قد لاتحتاجها في التصميم للويب، كما يفتقر لأدوات كثيرة لاغنى عنها أثناء صناعة صفحة الويب، كما أن النصوص على Photoshop لا تبدوا كالويب خاصة عندما تستخدم Web Fonts والتي نعاني من مشاكلها في الويب العربي لندرة الجيد منها.

القصة من البداية…

الـ Flat Design أو التصميم المسطح جاء ومعه تغيرات جزرية على الطريقة التي نفكر بها في التصميم للويب، فالأمر لم يعد مجرد اعتماد الألوان “السادة” أو الظل الحاد وفقط، ولكن التصميم المسطح أثر بشكل مباشر علي الطريقة التي نصمم بها تجربة المستخدم ككل فلم يعد التعنت في إستخدام “الاستعارات Metaphor” هو أصل في التصميم، كأن نستخدم ال Pattern والخامات لكي نصمم مثلاً أيقونة ملف تبدوا كالحقيقية، فخبرة المستخدمين زادت وتوقعاتهم أيضاً زادت بشكل ملحوظ، مما يعني أن المصمم لم يعد مجبراً على الاهتمام بتفاصيل الخامات المستخدمة في صناعة أيقونة مثلاً أو وضع خلفية للهيدر بها Texture صاخب، يكفي فقط أن يستخدم بضعة ألوان وتدرجاتها المختلفة ليحصل على صورة مسطحة قريبة من الواقع وسيفهمها المستخدم على الفور.

هذا الامر أدى إلى التفكير في صناعة أدوات تستفيد من البساطة التي اتجهت لها واجهات الاستخدام التي جاءت بعد ثورة ال Flat Design، حيث ظهرت برامج تصميم للويب جديدة مثل Webflow، Adobe Reflow و Macaw والمزيد منها على Andrew Ford’s site والتي أطلق عليها اسم Codesign Tools وهي إختصار لكلمتين Code و Design بمعنى أن تصمم وفي نفس الوقت تصنع الكود، هذا المبدأ لا تستطيع أن تنفذه البرامج الحالية التي نستخدمها مثل Adobe Photoshop فكان لابد من بديل.

أيضاً الذي دعم ظهور أدوات Codesign Tools  هو الحاجة لبناء تطبيقات ويب سريعة لا تأخذ فيها مرحلة تصميم الواجهة وتحويلها الHTML/CSS الكثير من الوقت خاصة إذا لم نكن متأكدين من نجاح فكرة الموقع من الاساس أو ما اطلق عليه البعض سرعة “الوصول للواقعية” وإطلاق الموقع حتى وان لم يكن مكتمل، المهم أن تبدأ في أسرع وقت! هذا المبدأ أيضاً لا تستطيع أن تساعدنا في تنفيذه البرامج الحالية التي نستخدمها مثل Adobe Photoshop، فأنت مجبر على الإلتزام بخط سير مرسوم لك مسبقاً وهو أولاً أن تصمم على فوتوشوب ثم ثانياً تبدأ في تحويل التصميم إلى كود HTML & CSS

مزايا التصميم بإستخدام برامج وأدوات Codesign Tools (صمم وأنت تكتب الكود)

التصميم بأدوات Codesign Tools مثل  Adobe Reflow يعتمد على رسم Divs -ورسم الHTML الأساسي في الويب- على المتصفح مباشرة ووضع ال Style الخاص به، بمعني انك تصنع المنتج النهائي وليس مجرد شكل صامت كما تفعل علي الفوتوشوب، فعندما ترغب في وضع ظل ما لمستطيل اذهب وافعل هذا فوراً فما تصنعة هو ما سيشاهده المستخدم فعلاً وليس مستخدمي الفوتوشوب فقط! فالمشكلة التي تواجة أغلب مصممي الويب هي أنه عندما يرسل التصميم الذي صنعة علي الفوتوشوب للمطور Front-End ليحولة لكود HTML/CSS فما يحدث في الغالب ان المنتج لا يشبة التصميم 100% خاصة في التفاصيل الدقيقة … فهذه الادوات تحل هذه المشكلة.

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

مصمم الجرافيك و ال HTML/CSS

“مصمم الويب الحقيقي يكتب الكود، ويجب عليه أن يفعل هذا دائماً، لا إستثناء في هذا، يجب أن يكتشف المصمم التفكير المنطقي، تحتاج علي الأقل فهم مباديء HTML و CSS وأفضل الممارسات بهم.” – Jeffrey Zeldman مؤسس A List A part

ثورة أدوات الCodesign Tools أو المبدأ نفسه -التصميم أثناء كتابة الكود- يتفق مع ما يقوله زلدمان بأن مصمم الويب يجب أن يتعلم التكويد بلغة HTML&CSS وهو ما يجب أن يفعله دائماً، من وجهة نظري أعتقد أن المستقبل لن يكون فيه مكان لمصمم الويب الذي لا يتقن أفضل الممارسات لتطوير الواجهة بلغة المتصفح HTML/CSS ومعهما Javascript وهو أمر ربما يجب أن تبدأ العمل عليه من الآن، فلن تستطيع الاستمرار على حلم وخيال “التصميم بفوتوشوب وكل شيء بعده أمر ثانوي!”

كما أعتقد أيضاً انه لن يكون هناك مستقبل لمطور Front-End Developer الذي لا يتقن مهارات وقوانين تصميم الواجهات الجرافيكية للمواقع وبعض من قابلية الاستخدام إن لم يكن الكثير!

الخلاصة

احدى المناقشات التي دارت علي Arabia I/O والتي تحدث فيها عبد المهمين -مؤسس حسوب- أن كل المشاريع التي انتجها برمجياً قام بتصميم الواجهة أثناء تنفيذها! بعد تخطيطها Wirefaming دون الحاجة لتصميم واجهة جرافيكية كاملة واختبارها قبل التنفيذ كما هو الحال غالباً، فهذا يعني أن هناك من نجح في تطبيق هذا الاسلوب Codesign (صمم وأنت تكتب الكود). البعض قد يختلف في وجهة النظر هذه بأنها لا تصلح لكل المواقع أو الغايات، لكن أعتقد أن هذه الأدوات مناسبة جداً خاصة إذا كانت ميزانيات تصميم وتطوير المواقع محدودة كما نعيشها جميعاً.