يسعى تطبيق واحد فقط من تطبيقات الطقس هذه إلى حل المشكلة الحقيقية:
تكمن الأشياء المتناقضة في وسط مجتمع التصميم. من ناحية أخرى ، لدينا كتابات رائعة من أمثال رايان سينجر وجولي شو التي تدفع حرفتنا إلى الأمام. من ناحية أخرى ، لدينا عدد متزايد من الأشخاص ينشرون أعمالهم ويناقشونها على Dribbble ، وكل ذلك دفع حرفتنا إلى الوراء. لا تتناول هذه المقالة Dribbble نفسها ، ولكن ما يمثله مجتمع Dribbble. في ما يلي سأستخدم مصطلح “تصميم المنتج” ، ولكن هذا يشمل أيضًا تصميم تجربة المستخدم وتصميم التفاعل.
في مراجعتي لأعمال التصميم للعديد من المتقدمين لوظائف التصميم العام الماضي ، في Facebook والآن في Intercom ، لاحظت وجود نمط مقلق. الكثير من المصممين يصممون فقط لإثارة إعجاب أقرانهم بدلاً من معالجة المشكلات العملية الحقيقية. لطالما كانت هذه مشكلة في الإعلان الإبداعي (حيث يميل العمل الإبداعي غالبًا إلى الفوز بجوائز أكثر من أهداف العمل الأساسية للعملاء) وأصبح الآن أكثر وأكثر بروزًا في تصميم المنتج.
الكثير من أعمال تصميم المنتج التي رأيتها مؤخرًا كانت ضحلة ، وتم تنفيذها مع التركيز على Dribbble. الأشياء التي تبدو رائعة ولكنها لا تعمل بشكل جيد. التنفيذ المتقن لوحدات البكسل ذات التصميم المسطح ، ولكن العمل الذي لا يهدف إلى أغراض تجارية حقيقية ، لا يحل المشكلات التي يواجهها الأشخاص يوميًا ، ولا يأخذ في الاعتبار نظام الأعمال ككل. يساهم Dribbble نفسه في تشكيل الحوار إلى حد ما ، من خلال كونه الوسيط الذي يتم من خلاله تكوين هذه الرسائل ، ومن خلال إبراز اللوحات الملونة وتفاصيل السطح الأخرى الشائعة في مجال تصميم واجهة المستخدم. يلاحظ الناس ويقلدون. تبدو الغالبية العظمى من أعمال تصميم المنتج في Dribbble متطابقة. سواء كان برنامجًا اجتماعيًا أو برنامجًا للمحاسبة أو موقعًا للتسويق أو تطبيقًا للطقس ، يتم استخدام نفس الأساليب. أغمض عينيك قليلاً ثم حاول تحديد الفرق بين هذه التطبيقات:
في المقابل ، فإن أفضل المتقدمين للوظائف الذين رأيتهم قد قدموا منهجية التفكير الخاصة بهم. رسومات ورسوم بيانية ، إيجابيات وسلبيات ، مشاكل حقيقية ، مساومات وحلول. نماذج أولية توضح كيفية التفاعل والتحرك. الأشياء تتحرك وتتغير وتتحرك. الأشياء التي تستخدم بيانات حقيقية.
قدم أسوأ المتقدمين ملفات PNG مسطحة. ملفات PDF مليئة بالإطارات الشبكية. لا يعبر عن السياق أو المشكلة التي ينوي حلها. قد تبدو ملفات PNG المتقنة هذه رائعة على Dribbble ، لكنها ستفقد قيمتها إذا تم إنشاؤها كأداة تصميم أساسية في بيئة صنع منتج حقيقي.
لهذا السبب ، يعد الأمر مضيعة للوقت لبعض المصممين في إعادة تصميم ونشر أعمال شركات أخرى (مثل المصمم الذي يقترح إعادة تصميم موقع ويب أو شعار) ، كما هو الحال مع اقتراحات إعادة التصميم شعار Yahoo ، نظام iOS ، إعادة تصميم واجهة Facebook ، Twitter أو حتى إعادة تصميم شعار American Airlines ، وغيرها الكثير. لا يعرف الناس السياق أو المنهجية المتبعة في اتخاذ القرارات في هذه المشاريع ، ولا يدركون المتطلبات والقيود ، وليسوا على دراية بسياسة الشركة.
بالنظر إلى أن تصميم المنتج يهدف إلى حل المشكلات للمستخدمين ضمن قيود تجارية معينة ، فإن الأمر ببساطة هو أن العديد ممن يطلقون على أنفسهم مصممي المنتجات / واجهة المستخدم يمارسون الفن الرقمي بالفعل. إنهم فنانون يقومون بأشياء جميلة ، وهي بالتأكيد مهارة مهمة ، لكنهم ليسوا في تصميم المنتج.
من المفهوم العام إلى التفاصيل على مستوى البكسل ، يجب على المصممين أن يضعوا في اعتبارهم مهمة الشركة ورؤيتها وهيكل المنتج. كل ما يفعلونه يجب أن يمر بهذه الطريقة.
ينشأ التصميم من أعلى الشركة ، بدءًا بمهمتها ثم رؤيتها. من الصعب جدًا تحقيق تصميم جيد بدون رؤية ورسالة واضحتين. لا تقلل من أهمية هذا. إذا كانت شركتك تفتقر إلى مهمة واضحة ، فابادر لإنشاء واحدة. بعد المهمة والرؤية تأتي هندسة المنتج. ليس الهندسة التقنية ، بل بالأحرى أجزاء المنتج وعلاقتها ببعضها البعض. إنه النظام في حد ذاته. في أول يوم لي في Facebook ، ألقى كريس كوكس (نائب رئيس المنتجات) خطابًا تمهيديًا رائعًا (يمكنك رؤية بعضًا منه هنا). في ظل وجود موظفين من مختلف الإدارات في الشركة ، وبينما كان بإمكانه التحدث عن أشياء كثيرة ، ركز على شرح هندسة المنتج ، وعلاقته برسالة الشركة.
بالنسبة إلى Facebook ، تعد Geometry مجلدًا ضخمًا من الأشخاص وأصدقائهم واهتماماتهم ؛ كما يضم مجموعة من الشركات ، بدءًا من أكبر الشركات وصولاً إلى المتاجر المحلية الصغيرة. فوق هذا المجلد توجد خريطة توضح العلاقة بين كل هذه الأشياء. إنه وصف واضح تمامًا لهندسة المنتج ، ويرتبط ارتباطًا مباشرًا بمهمة الشركة. من واقع خبرتي ، من الصعب جدًا القيام بتصميم جيد في غياب بنية منتج محددة جيدًا. في كثير من الحالات ، كما هو الحال مع المهمة ، من المفيد أن يساعد المصمم في تحديد هذه البنية وتطويرها. عند وصف Facebook للشركاء الخارجيين ، غالبًا ما أرسم مخططات مثل هذه على السبورة:
هندسة المنتج ليست هندسة معلومات. إنها ليست مجموعة من الصفحات المرتبطة ، أو شيء يعرض نوافذ فرعية ويشرح ما تفعله الأزرار. النموذج الأولي سوف يخدم هذا الغرض بشكل أفضل. هندسة المنتج مستوى أعمق من هذا. إنه الهيكل. إنها الفتيات. يظهر الأشياء بالترتيب والعلاقة بينهما. في Intercom ، نتصور التصميم وفقًا لهندسة منتجنا:
لا أتذكر أنني رأيت هندسة المنتج على Dribbble. لا يزال من النادر رؤية مصمم يتحدث عن علاقة عمله بمهمة ما ، وكيف يسير وفقًا لرؤية ما ، أو موقعه في هندسة منتج ما. يجب أن تكون هذه هي القاعدة وليس الاستثناء.
بمجرد أن يكون لديك مهمة ورؤية وبنية منتج واضحة ، يمكنك البدء في التفكير في بقية التفاصيل. في الأهداف التي يمتلكها الناس ، ما يجعلهم سعداء ويلبي احتياجاتهم ويساهم في نجاحهم. وأيضًا في الوظيفة التي يؤديها منتجك لهم ، وأين يعمل بشكل جيد ، وأين لا يعمل.
تعد الرسومات والخربشات القبيحة والمشتتة التي تصور هذه الأشياء أكثر أهمية من ملفات PNG و PDF التي تنتهي في Dribbble. بالنسبة لي ، تعد ملفات Photoshop و PNG أقل جوانب العملية أهمية منذ البداية وحتى تقديم منتج جاهز. ما يهم أكثر هو عند مناقشة الإيجابيات والسلبيات ، أو عندما ترتبط الأفكار برؤية الشركة ، أو عندما يتم تطوير الأشياء بناءً على بنية المنتج. كل تلك المخططات على السبورة ، كل تلك الرسومات اليدوية واستكشاف الأخطاء وإصلاحها على ظهر المنديل ، هي ما يجب على المصممين نشره على Dribbble. أرني ذلك. في الواقع ، يعد الوصف الكتابي لما يُراد بناؤه أكثر أهمية من ملف PNG أو PDF.
التصميم هو عملية متعددة الطبقات. في تجربتي ، هناك ترتيب مثالي للانتقال بين هذه الطبقات. أبسطها هو النظر إليها على أنها أربع طبقات:
أرى المصمم بعد المصمم يركز على الطبقة الرابعة دون الالتفات إلى الطبقات الأخرى. إنهم يعملون من الأسفل إلى الأعلى ، وليس العكس. الشبكة ونوع الخط والجماليات غير مهمة إذا تم إهمال الطبقات الأخرى. يدعي الكثير من المصممين أنهم يقومون بكل الطبقات لكنهم لا يثبتون ذلك حقًا ، لأن رسم صور جميلة وانغماس نفسك في البكسل أكثر متعة من التعامل مع قرارات العمل المعقدة والأشخاص ذوي الآراء المختلفة. لا بأس بالبقاء في الطابق الرابع ، لكن هذا فن وليس تصميم. انت فنان ولست مصمم
سيكون لاختراع الويب أكبر تأثير على المجتمع منذ الثورة الصناعية. الويب يقول كل شيء. إنه في منازلنا ، في أماكن عملنا ، في أسرتنا عندما ننام ، وفي جيوبنا أينما ذهبنا. الويب معنا في جميع الأوقات. إنه ينتقل إلى سياراتنا وملابسنا والأشياء التي لدينا وصحتنا. بحلول عام 2020 ، إن لم يكن قبل ذلك ، سيتم إنشاء جميع الأنشطة التجارية على الويب. كما قال تشارلز ايمز ذات مرة ، “في النهاية ، كل الأشياء تتحد.”
يعد تصميم صفحات الويب الثابتة والمتصلة مهنة تحتضر. يرسم ظهور تقنيات الأجهزة المحمولة وواجهات برمجة التطبيقات ومجموعات تطوير البرامج والشراكات المفتوحة بين المنصات والمنتجات المختلفة صورة واضحة عن المستقبل الذي سنقوم فيه جميعًا بتصميم أنظمة متكاملة. تعد ملفات PDF المليئة بالإطارات الشبكية مخرجات تتضاءل ، كما أن Photoshop هو أداة تصميم منتج تتضاءل أيضًا. يتنقل المصممون الذين يدفعون حقًا حرفتنا إلى الأمام بين الرسومات واللوحات البيضاء وأدوات النماذج الأولية (Quartz Composer و After Effects و Keynote و CSS / HTML).
هذا هو أحد الأسباب للاعتقاد بأن المصممين يجب أن يبرمجوا. سواء أكنت توافق على هذا أم لا ، يجب على المصممين تحديد المشكلة بشكل حتمي وحلها ليس من خلال وحدات البكسل ، ولكن من خلال وصف ما يحدث بين أجزاء النظام ، ثم متابعة البرمجة وبناء النماذج الأولية ، بحيث يتم بعد ذلك تحديد المشكلة بدقة. سيتم إجراء التعديل كلما كشفت البيانات عن أشياء لم يتم أخذها في الاعتبار. العمل على التفاعل مع البيانات الحقيقية يعطي صورة أفضل لما يجري.
في Intercom ، نتبع إطار عمل وظائف كلاي كريستنسن لتصميم المنتجات. نحن نحصر كل مشكلة تصميم في وظيفة ، مع التركيز على الحدث المسبب ، والدافع ، والهدف ، والنتيجة المرجوة:
عندما _______ ، أود _______ ، حتى أتمكن من _______.
على سبيل المثال: عندما يقوم مستخدم جديد بالتسجيل ، أريد أن يتم تنبيهي ، حتى أتمكن من بدء محادثة معهم.
يمنحنا هذا الوضوح ، ويمكننا من ربط هذه الوظيفة بالمهمة وإعطائها الأولوية المناسبة. يضمن هذا أيضًا أننا نفكر باستمرار في طبقات التصميم الأربعة ، ويسمح لنا برؤية أجزاء النظام المتعلقة بهذه الوظيفة والعلاقات والتفاعلات اللازمة لتسهيلها. هذا يمكننا من التصميم من الأعلى إلى الأسفل ، مروراً بالنتيجة ، النظام ، التفاعلات ، قبل الوصول إلى التصميم المرئي.
بالإضافة إلى استخدام الوظائف ، فإننا نعمل أيضًا على بناء مكتبة أنماط تعكس الطبيعة المرتبطة بالنظام لعملنا في التصميم. سنصمم المزيد والمزيد باستخدام كود من المكتبة بدلاً من الاعتماد على Photoshop. هذه الطريقة ليست مثالية ، لكننا نعمل باستمرار على تحسينها.
ترجمة – وتكييف – لمقال Dribbblisation of Design لمؤلفها: Paul Adams.
tuto-gratuit-photoshop-les-dents-de-la-mer.zip