مستقبل أدوات التصميم للويب … وخروج الفوتوشوب من المعادلة

كتبه أحمد مجدي 12 فبراير 2014

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

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

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

لم نعد نعتمد علي ال Pattern و Textures في التصميم
لم نعد نعتمد على ال Pattern وTextures في التصميم

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

Macaw برنامج مدعوم من Envato يرفع شعار رسم الكود ! Drawing Code
Macaw برنامج مدعوم من Envato يرفع شعار رسم الكود ! Drawing Code

هذا الامر أدى إلى التفكير في صناعة أدوات تستفيد من البساطة التي اتجهت لها واجهات الاستخدام التي جاءت بعد ثورة ال 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 (صمم وأنت تكتب الكود)

واجهة برنامج Adobe Reflow
واجهة برنامج Adobe Reflow

التصميم بأدوات 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 (صمم وأنت تكتب الكود). البعض قد يختلف في وجهة النظر هذه بأنها لا تصلح لكل المواقع أو الغايات، لكن أعتقد أن هذه الأدوات مناسبة جداً خاصة إذا كانت ميزانيات تصميم وتطوير المواقع محدودة كما نعيشها جميعاً.

عن كاتب المقال

أحمد مجدي
مهندس تجربة الاستخدام، متخصص في تصميم واجهات مواقع، تطبيقات الويب والموبايل منذ عام 2006، ورئيس تحرير معمل ألوان. تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 24 تعليق

  • لؤي حمادة

    أنا ومن فترة طويلة أخرجت الفوتوشوب وغيره من برامج التصميم من حساباتي، الـ notepad++ إلى جانب صفحة المتصفح، اكتب الكود واستعرضه، تجربة سريعة جدًا 🙂

    يعطيكم العافية.

  • إسلوب الكوديزين بيوفر بعض الوقت ايضا والدقة في المخرجات على حسب تجربي, ولدي استفسار ما الفرق بين adobe muse و adobe edge, وتدوينة ممتازة اتفق مع ان التوجهات الحديثة ستعتمد على هدا الاسلوب..

  • مشير عبد الحليم

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

    • nontandesign

      رد أعجبنى ومنطقي جدآ مقتنع بيه
      أشكرك 🙂

  • assassinateur

    أعجبتني الفكرة فعلا، أظن أني سأطبقها قريبا، فقد بدأت أمل من الفوتوشوب والوقت الكبير الذي يأخذه في كل مشروع

  • اشكرك على هذا الموضوع الذي يري القارئ او المهتم في الموضوع مستقبل مهنته

  • من هنا ستكون بداية جديدة …ان شاء الله

  • محمود السعيد

    من فترة وانا مستغنى عن الفوتوشوب و غيرة من البرامج و مش بستخدم غير Text editor الموضوع ده من زمان نتيجة للقلق اللى بيبقى موجود بداخلك اثناء العمل مخافة ان يكون مشكلة ما فى التصميم و بسببها تضطر تعيد بعض الخطواط…

    الله ينور على المقالة الممتازة جدا فعلا معمل الالوان بيفيد معظم العرب العاملين فى مجال صناعة الويب.

  • في الحقيقة لا اعرف كيف تصمم المواقع عبر الفوتشوب , لم يسبق لي أن فعلت ذلك ,
    كل شيئ اكتبه عبر برامج التحرير كالنودباد أما الستايل css لإانني اصممه عبر المتصفح مباشرة , فهو سريع و يظهر لك النتيجة مباشرة

  • احمد الشحات

    مقال اكثر من رائع يا احمد

  • اعتقد بأن ادوبي تتجه لإنتاج اداة لتصميم الويب الجديد .. ( ايقاف برنامج الفايروركس ) + (انتاج ادوبي ميوز) + (ادوات ادوبي ايدج ) كلها تشير إلى ذلك،
    من يدري .. قد تكون هذه الأداة مضمنة في الفوتوشوب في تحديث قادم ؟!

  • مصطفى وهبه

    مقال رائع يا احمد بارك الله فيك على ان الكوديزاين هو المستقبل لا محاله بل اني انصح ادوب من الان ان تقوم بتطوير برامجها لتكون جاهزه لاخراج تصميم كامل من برنامج واحد و يكون خاص بمطوري الويب وحدهم و تعزز في هذا البرنامج من البرفورمانس الذي يعاني منه غالبيه مطوري الويب في برامج ادوب و ان تقوم بعمل توصيات و ارشادات للمطور عن البست براكتس بمجرد ان يقوم المبرمج بكتابه سطر واحد من الكود و قد انتهجت ميكروسوفت هذا النهج مؤخرا في بيئة دوت نت طبعا مع اغفال البروفورمانس كالعاده 🙂

  • عبدالمجيد الدهاسي

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

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

  • Ahmed AlamEldin

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

    كما يجب على مصمم الويب سواء كان مصمم الجرافيك او مصمم الكود او كاتبه يجب عليهم الالمام باللغات HTML, CSS, PHP ..etc وذلك لتفادي الوقوع في تصاميم والوان وابعاد و و و ليست لها اي فائدة لا للعميل ولا للمتصفح العادي.

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

    واعتقد على حسب خبرتي البسيطة بان تصميم المواقع بواسطة الكود اكثر امانا واكثر تنوع من حيث الخصائص Data base والسماحية للدخول والتعديل الخ.

    عموما شكرا جزيلا على هذا الموضوع والنقاش الممتع

  • خالد عوض

    الموضوع متميز ولكن هل تستطيعوا من اليوم ترك الفوتوشوب دون العودة له في تصميمكم للواجهات ومهما كان تعقيدها ؟

    • مشير عبد الحليم

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

  • عبد الهادي اطويل

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

  • تصميم اي موقع لا يمكنك ان تستغني عن برامج الجرافكس 🙂
    مهما كان ….

    الكود تايب = أوامر

    التصميم = مرئي

  • موضوع خيالى

  • Hisham Elsayad

    مقال رائع لكن من راي الخاص اختلف معاك في شئ
    وهو
    ان هذه الطريقه تصلح لمصمم الويب الذي سوف يصمم موقعه الشخصي او يصمم موقع لشركه ……الخ

    لكن في بعض الاحيان يريد العميل ان يري شكل الموقع قبل ان يبدا في تكويده في هذه النقطه يحتاج مصمم الويب ان يقوم بتصميم الموقع اولا علي الفوتوشوب او اي برنامج جرافيك لكي يراه العميل وهذه النقطه مهمة جدا لان 90% من العملاء الذين تعاملت معهم يريدون ان يروا الموقع في مرحلة التصميم اولا

    وشكرا

  • رائد المطيري

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

  • Ashraf Hefny

    كلامك صحيح نسبيا
    لكن خروج الفوتوشوب من المعادله صعب جدا لبعض الاسباب
    اهمها وانا مصمم ويب اننى احتاج لواجه كاملة اعرضها على العميل قبل البدء فى عملية التكويد المرهقة
    اقوم بعمل التصميم psd اولا واعرضه على العميل ونتفق على الواجهة
    بعدها ابدا عملية التكويد وانا اعلم ان ما افعله هو الشكل النهائى للتصميم
    لو لم يكن فى الفوتوشو بالا هذه الميزة فهى كافية عندى
    ابعد الله عنك مشاكل العملاء