تصميم Adobe Portfolio
في تشرين الثاني / نوفمبر 2015 ، قمت بمحادثة صغيرة في مدرسة الفنون البصرية (SVA) في مدينة نيويورك حول تصميم Adobe Portfolio وتصميم المنتج. تستطيع شاهد الحديث هنا . كتبت في الأصل هذا المقال في إطار التحضير للحديث ، ولكن منذ ذلك الحين توسعت عليه للنشر هنا. ويهدف إلى تقديم المنتج ، وتبادل الأفكار في عملية التصميم ، والمسح الضوئي من كراسة الرسم وبعض المواصفات / التصاميم من وراء الكواليس. اتمنى انك تجده مثيرا للإهتمام.
مقدمة صغيرة.
مرحبا أنا أندرو . أنا مصمم المنتج الرئيسي والمدير الإبداعي ل أدوبي بورتفوليو . سأشارك معك ما بذلت وفريق كبير من المطورين في Behance (Adobe) في العام الماضي.
موقع تسويق Adobe Portfolio
ما هو Adobe Portfolio؟
إنه في الأساس منتج يسمح لك بإنشاء موقع ويب بسرعة وببساطة لعرض أعمالك وتخصيصها لتناسب أسلوبك واحتياجاتك. إنه ليس مفهومًا جديدًا ، فهناك العشرات من المنتجات التي تفعل ذلك. لكن بورتفوليو لديه بعض الاختلافات الرئيسية:
- تم تصميمه خصيصًا لتصميمات الإعلانات لعرض محفظتها. بمعنى أنها تفعل ما تحتاج إليه ، ببساطة وبسرعة.
- إنه مجاني مع جميع خطط Adobe Creative Cloud.
- يمكنك الوصول إلى كل مكتبة الخطوط الخاصة بـ Typekit ، لاستخدامها على موقع الويب الخاص بك.
تتزامن المحفظة مع Behance.
الشيء الذي يجعل المحفظة أكثر فريدة من نوعها هو أنه يتزامن مع Behance. الفكرة هي أن تقوم بإنشاء موقع مخصص جميل مع Portfolio ، ومزامنة المشاريع الخاصة بك إلى ملفك الشخصي Behance. هناك يمكنك الحصول على تعرض لا يقدر بثمن لعملك على منصة إبداعية تستخدمها ملايين التصميمات ، والأشخاص الذين يوظفون تصميمات الإعلانات! ولكن ليس عليك استخدام Behance إذا كنت لا ترغب في ذلك - يمكنك استخدام Portfolio من تلقاء نفسها واختيار عدم المزامنة مع Behance. الخيار لك.
تصوير ماتياس Heiderich - كما رأينا في محفظة و Behance
تخطيطات متجاوبة.
مثل أي منشئ مواقع الويب ، فأنت تحتاج إلى نقطة بداية. لذا ، فإن أحد الأمور الكثيرة التي نحتاج إلى تصميمها هي تخطيطات مخصصة خصيصًا لعرض العمل الإبداعي ، لتكون بمثابة الأساس الذي يمكنك بسهولة تخصيصه وملؤه بالمشاريع.
تهدف التصاميم إلى تغطية مجموعة متنوعة من الأساليب لتناسب مختلف المجالات الإبداعية. يمكن استخدامها إما كحل جاهز للتعبئة بسرعة مع مشاريعك ونشر موقع ويب (في دقائق) ، أو استخدام ميزات المحرر لتغيير الهيكل والمظهر لتناسب أسلوبك.
بسهولة تخصيص نفس التخطيط لتبدو مختلفة جدا. يتميز التصوير الفوتوغرافي من قبل بريس جونسون
في ما يلي التخطيطات التي نطلقها. التخطيطات الأولية (لإصدار بيتا العام والمنتج) بسيطة للغاية ، تركز على أغطية المشاريع والمعارض والمشاريع. سوف ينمو المنتج بالطبع لتقديم المزيد من الميزات مثل صور غطاء ملء الشاشة ، وتحرير HTML & CSS ، وتكامل المدونة ، الخ ... في الوقت المناسب. ومع توسع الميزات ، ستزداد أيضًا تنوع التخطيطات وعددها لتختار منها كنقطة بداية.
التخطيطات والتصميمات التي تحمل اسمًا لها: لينا ، نشارة الخشب ، ماتياس ، Juco ، مرسيدس و توماس
لقد اخترنا تسمية التنسيقات بعد التصميمات Behance . لقد أدرجنا في قائمة مختصرة مواد إبداعية قدم نشاطًا جيدًا لتصميم معين ، وبالطبع كان مذهلاً بصريًا أيضًا.
يجب أن أقول إن هذه التصاميم كانت واحدة من آخر الأشياء التي تم تصميمها (ما قبل مرحلة بيتا) ، لكنني أقود معهم من أجل هذه المقالة ، لأعرضكم على ما يفعله المنتج ، أو على الأقل ، 'المنتج النهائي'.
المحرر.
يجب أن يقوم المنتج (نفسه) بتمكين المستخدم من تعديل موقع الويب الخاص به بسرعة وببساطة ، باستخدام أحد التخطيطات أعلاه كنقطة بداية. واجهة المستخدم صغيرة جدًا - فهي تخرج عن الطريق وتسمح لك بالتركيز على تصميم موقعك على الويب. تحدث جميع التغييرات التي تجريها مباشرةً في المحرر.
يبدو ذلك مبتذلًا ، لكن كان لدي ثلاثة أشياء في ذهنك أثناء تصميم كل شيء من العلامة التجارية ، وموقع التسويق ، وخاصة المحرر:
بسيطة ونظيفة وجميلة.
يجب عليه تمكين المستخدم من:
- قم بتعديل أي شيء يمكنهم رؤيته بسهولة.
- إدارة وإضافة المحتوى.
- معاينة موقعه على الانترنت بشكل مستجيب.
- نشر وتحديث موقع ويب مباشر.
فيما يلي مجموعة من سيناريوهات التحرير من المنتج (المحرر):
شاشات مختلفة من المحرر. يتميز التصوير الفوتوغرافي من قبل كريس بوركارد والتصميم من قبل أندرو كانويل
دور مصمم المنتج.
تغير دوري الخاص كمصمم في Portfolio بشكل كبير خلال العام ، من المفهوم إلى الإطلاق. مع تقدم المنتج الرقمي ، كذلك دورك كمصمم منتج. حتى نعود إلى البداية:
بروسايت.
Portfolio هو في الواقع تطور منتج Behance الحالي (يجري تقاعده) يسمى ProSite. عمرها 5 سنوات ، لذا كان هناك الكثير مما يمكن أن نتعلمه من هذا المنتج: ما الذي نجح بشكل جيد؟ ماذا لم؟
شبكة بيهانس.
أيضا ، ما تعلمناه عن المجتمع الإبداعي وعرض العمل ، من خلال تصميم ، وتنظيم (واستخدام!) شبكة Behance لا تقدر بثمن في فهم كيفية بناء منتج مثل Portfolio.
يعتبر فهم جمهورك نقطة انطلاق رائعة.
لذا قضيت الكثير من الوقت في استيعاب كل هذه المعرفة التي اكتسبتها بيهانس على مر السنين ، وكذلك دراسة تصاميمها الأولية لتطور ProSite. يسأل اسئلة. تدوين الملاحظات. رسم الأفكار.
شبكة Behance و ProSite
أبدأ دائمًا بالقلم الرصاص وكتيب الرسم.
تساعدني الكتابة والرسم على التركيز ، وتتدفق الأفكار من هناك. في بعض الأحيان ، أقوم ببساطة بكتابة الكلمات التي أقوم بربطها بالمنتج ، أو أدرج ما يجب أن أفعله ، فقط لأخرجه من رأسي. إنه يساعد على عدم تشويش العقل والتركيز على ما هو مهم.
يتطور عمل كراسة الرسم هذا بشكل طبيعي إلى رسومات UI. في بعض الأحيان ، سأرسم ميزة أو تفاصيل واجهة مستخدم صغيرة أو طريقة جديدة لواجهة المستخدم تمامًا. إنها طريقة سريعة بحتة وبسيطة لمجرد تصميم واستكشاف الأفكار. ربما الأهم من ذلك ، لا تشتت انتباهك بواسطة الكمال بكسل ، الخطوط ، اللون ، الشبكات ، أدلة الخ ... مثلما تفعل أثناء استخدام برامج الكمبيوتر.
هناك دائما نقطة عندما تعلم أن لديك ما يكفي لاتخاذ هذه الخطوة إلى أبعد من ذلك ، والبدء فعلا في بلورة هذه الأفكار. في الماضي ، استعملت Adobe Illustrator أو Omnigraffle لهذا ، لإطار الأسلاك. لكن الوقت كان ضيقًا على هذا المشروع ، لذلك ذهبت مباشرة إلى Photoshop.
فيما يلي بعض عمليات الفحص من كراسة الرسم الخاصة بي. يرتبط البعض بالمنتج (المحرر) ، والبعض إلى موقع التسويق والعلامة التجارية:
بعض عمليات المسح من كراسة الرسم بلدي
صورة مثيرة للاهتمام للإشارة إليها أعلاه هي الصورة الأخيرة (أسفل اليمين). يمكنك أن ترى أن رسوماتي قريبة من ما صممته في النهاية.
مفهوم & النماذج.
كل هذه الأفكار والتصاميم يتم إطلاعها وتطويرها من خلال وضع المفاهيم والنماذج الأولية ومناقشتها مع الفريق. من الجيد التحدث عبر الأفكار مع المصممين والمطورين الآخرين ، وحتى الجمهور المستهدف عندما يكون ذلك ممكنًا. على سبيل المثال: ظهرت لي فكرة واحدة مناقشًا تصميمًا مبكرًا (منتجًا) مع أحد طلاب تصميم MFA في SVA . دائمًا ما يساعد المنظور الجديد ، خاصة بالنسبة لمنتج من هذا التعقيد.
كنا نعمل على أطر زمنية مكثفة جدا في هذا المشروع. لم يكن هناك ببساطة وقت لبناء أي نماذج أولية معقدة. ولكن ما فعلته هو إنشاء سلسلة من الإرشادات التفصيلية الخاصة بـ PDF باستخدام Layer Comps في Photoshop ، والتي تظهر مؤشر الماوس يتحرك حول الشاشة ، مما يدل على كل تفاعل وميزة وتدفق للمستخدم داخل المنتج. وقد سمح هؤلاء للمطورين (وغيرهم من أصحاب المصلحة) بنقد و / أو فهم كل الوظائف وتدفق المستخدمين - حتى عرفوا ما سيتم بناؤه ، وكذلك تحديد أي عيوب محتملة في واجهة المستخدم / UX ، قبل الإنشاء والاختبار.
يوجد أدناه (مقطع فيديو) أحد الأمثلة على هذه الإرشادات الخاصة بـ PDF:
نموذج / تجول يوضح التخصيص العالمي في محرر المشروع
التفاصيل في التصميم.
ببساطة: خذ التخمين للخروج منه للمطورين. يحتاج فريقك إلى فهم ما يجب بناؤه. ليس من مهمتهم ملء الفراغات ، أو جعلها مستجيبة ، أو تخمين ما يحدث في أي سيناريو محدد. لا أستطيع المبالغة في هذا بما فيه الكفاية - لقد واجهت الكثير من المصممين لتصميم واعتبار 20 ٪ من المنتج ، وعدم التفكير في الأشياء.
بالإضافة إلى الإرشادات التفصيلية وتدفقات المستخدم والنماذج التي تحدثت عنها سابقًا ، أود أيضًا إنشاء مواصفات تفصيلية لجميع مكونات واجهة المستخدم والميزات والعلامة التجارية. أشعر أن هذه الأمور مهمة عندما يكون لديك فريق كبير ، بحيث يكون الجميع على نفس الصفحة ، مع نقطة مرجعية واحدة. تهدف المواصفات إلى تغطية جميع السيناريوهات ، بدءًا من حالات التمديد ، إلى الأخطاء ، والحالات النشطة / غير النشطة ، إلخ ... ، وتغطي أيضًا قيم وأبعاد البكسل (حتى أذهب إلى حد تضمين CSS الأساسي).
تعزيز / تشجيع الكمال بكسل في البناء. الرصاص على سبيل المثال ، وتعيين شريط عالية.
كلما زادت التفاصيل التي تتضمنها في تصميماتك ، كلما قلت الأسئلة التي يطرحها المطورون ، وقلة الوقت الذي تقضيه في إدارة الإنشاء. حتى تتمكن من التركيز على تصميم واختبار وتحسين المنتج.
أيضا ، الشيء الجميل حول أخذ الوقت لإنشاء هذه "مجموعات واجهة المستخدم" ، هو أنه من السهل تحديث المنتج (التصميم) في المستقبل. ليست هناك حاجة لتحديث مئات النماذج بالأحجام الطبيعية ، فما عليك سوى تحديث المواصفات.
في ما يلي بعض الأمثلة على هذه السمات والأسلوب:
التسويق والعلامة التجارية.
بعد مرور أشهر ، مع تصميم المنتج (المحرر) والقيام بالبناء ، أعيد تركيز انتباهي على التسويق والقيام بالعلامة التجارية والعلامة التجارية. ما هو هذا المنتج؟ كيف تبدأ في استخدامها؟ انها بحاجة الى صوت. هوية.
الاسم.
عندما انضممت لأول مرة إلى Behance ، كان هذا المشروع يطلق عليه اسم "Prosite 2.0" إلى حد ما. خدم منتج ProSite وقته ، ولكن خليفته نمت إلى وحش مختلف. بالإضافة إلى ارتباطهم مع بيهانس ، كانوا منتجات مختلفة جدا وليس لديها علاقة 1: 1. لم يكن هذا إعادة تصميم / إطلاق. كنا نبني منتج جديد مثير من الألف إلى الياء ، وتقاعد ProSite. كان ذلك مهمًا للتعبير - وهذا يبدأ بالاسم.
عدت إلى كراسة الرسم الخاصة بي ، وذهبت من خلال تمرين جمع الكلمات لتدوين كل ما فعله هذا المنتج ، وأي لغة تستخدمها كل المنتجات المماثلة في السوق. استمر التقدم الطبيعي لكل هذه العودة إلى "المحفظة". لذا بعد بعض الفكر ، خلصت: "لماذا لا ؟!" - يوجد في العلبة ما قلت انه فيها تماما. إنه مصمم / محرّر مواقع ويب مصمم خصيصًا لإنشاء محفظة. بساطة وجرأة اسم متزوج جيدا لتصميم وقيم المنتج. ولذلك أطلقنا عليها اسم "Portfolio" ، والذي أصبح قريبًا "Adobe Portfolio" ليتناسب مع مجموعة منتجات Adobe.
الصفحة الرئيسية لموقع التسويق التي تعرض صورة بها تانيا تيمال
العلامة التجارية.
محفظة لديها الكثير من هويتها وشخصيتها. محفظة ليست منتج شركة (إذا جاز التعبير). انها التسمية البيضاء. انها لك ، لجعل بنفسك. انها ودية وبسيطة ودود. تسعى العلامة التجارية ، وموقع التسويق ، والإعداد ، وكتابة الإعلانات ، والرسائل في جميع أنحاء تجربة المستخدم (المنتج) إلى نقل ذلك من خلال اللغة المستخدمة ، والطباعة ، والشبكة ، والصور ، والألوان.
تتضمن السيناريوهات الأخرى رسائل مفعمة بالحيوية وصورًا مضحكة. صورة المشروع من قبل دوا - الكسندر Esslinger
الرسم المتجاوب.
بالعودة إلى نقطتي السابقة حول التفاصيل في التصميم: يجب أن يكون لتصميم الويب ، تمامًا مثل تصميم المنتج ، نفس الاهتمام بالتفاصيل. في هذه الحالة ، من المهم بالطبع أن يكون الموقع التسويقي مستجيبًا ، ولكن ليس مهمة المطورين هي معرفة كيفية استجابة موقع الويب لأحجام مختلفة للشاشة.
سوف تكون أفضل صديق للمطورين إذا كنت تخرج من التخمين نيابة عنهم. صدقنى :)
في ما يلي بعض الأمثلة على التصميمات سريعة الاستجابة التي تم تسليمها إلى المطورين لتقوم ببنائها myportfolio.com :
تصاميم متجاوبة لموقع التسويق ، تعرض نسخة مبكرة من هوية العلامة التجارية
عرض دراسة حالة كاملة لموقع التسويق هنا
تصاميم متجاوبة لبضعة مخططات ، تغطي سيناريوهات مختلفة
عرض دراسة حالة كاملة للتخطيطات هنا
اختبار المستخدم.
يجب أن يتطور المنتج الرقمي ليتناسب مع الأشخاص الذين يستخدمونه ، ويمثل سلوك المستخدم ، لإعطاء أفضل تجربة للمستخدم. من الناحية المثالية ، ستخضع المنتجات لمرحلة ألفا / بيتا (إصدارات محدودة) قبل طرحها للجميع. فعلنا هذا مع Portfolio. وقد ساعدنا ذلك على التخلص من المشكلات ، والتعرف على ما إذا كانت واجهة المستخدم / UX "قد نجحت" والحصول على تعليقات فعلية من المستخدمين بهدف تحسين المنتج. من الأفضل الاختبار والتعلم والتنقية مع مجموعة محدودة من المستخدمين ، بدلاً من إطلاقها لآلاف الملايين من الأشخاص واكتشاف المشكلات عندما يفوت الأوان.
اختبار. تعلم. تراجع. كرر.
هذا مهم في تصميم المنتج. تتعلم الكثير من الأشخاص الذين يستخدمون المنتج.
أفضل طريقة لمعرفة ما إذا كان يعمل هو استخدامه.
ستندهش مما تكتشفه:
... لا يستخدم الناس دائمًا منتجًا ما كنت تتوقعه!
- انت تتعلم،
- أنت تتحسن ،
- أنت تتكرر على المنتج ،
- أنت تستمر في الاختبار ،
- وتكرار هذه العملية.
وبصراحة ، في بعض الأحيان تشعر قليلا مثل هذا:
... ولكن المنتج سيكون أفضل لذلك.
فى الختام.
إذا كنت لأخذ أي شيء بعيدا عن هذا سيكون:
ابطئ.
اشعل حماسك. فهم جمهورك. يكتب ملاحظات. رسم الأفكار.
مفهوم.
اعمل مع فريقك. استكشاف الأفكار. فكر بالأمر مليا.
التفاصيل في التصميم.
يحتاج شخص ما (آخر) إلى بناء ما تصممه.
اختبار وتحسين.
هل يعمل؟ كيف يمكن تحسينها؟ يمكن دائما أن تتحسن.
تعلم.
دائما. كل تجربة في التصميم هي تجربة تعليمية جيدة.
[- تم نشر هذه المقالة أصلا في Medium.com ، إعادة نشرها مع إذن المؤلف -]