طراحی Adobe Portfolio

در نوامبر 2015، در مدرسه صحبت کردم هنرهای تجسمی (SVA) در شهر نیویورک در مورد طراحی Adobe Portfolio و طراحی محصول. می‌توانید گفتگو را در اینجا تماشا کنید. من در ابتدا این مقاله را برای آمادگی برای سخنرانی نوشتم، اما از آن زمان آن را برای انتشار در اینجا گسترش دادم. هدف آن معرفی محصول، به اشتراک گذاشتن بینش در مورد فرآیند طراحی، اسکن از دفترچه طراحی من و برخی از مشخصات/طراحی ها از پشت صحنه است. امیدوارم برای شما جالب باشد.

 

معرفی کوچک.

سلام، من اندرو هستم. من طراح اصلی محصول و مدیر خلاق Adobe Portfolio هستم. من می‌خواهم آنچه را که خودم و تیم بزرگی از توسعه‌دهندگان Behance (Adobe) در سال گذشته روی آن کار کرده‌اند، با شما به اشتراک بگذارم.

سایت بازاریابی Adobe Portfolio

 

Adobe Portfolio چیست؟

اساساً این محصولی است که به شما امکان می دهد به سرعت و به سادگی یک وب سایت برای نمایش کارهای خود ایجاد کنید و آن را مطابق با سبک و نیازهای خود سفارشی کنید. این یک مفهوم جدید نیست، ده ها محصول وجود دارد که دقیقاً این کار را انجام می دهند. اما Portfolio چند تفاوت کلیدی دارد:

• به طور خاص برای خلاقان طراحی شده است تا نمونه کارها خود را به نمایش بگذارند. به این معنی که آنچه را که شما نیاز دارید، به سادگی و به سرعت انجام می دهد.
• این برنامه رایگان با همه برنامه‌های Adobe Creative Cloud است.
• شما می توانید به تمام کتابخانه فونت های Typekit برای استفاده در وب سایت خود دسترسی داشته باشید.

نمونه کارها با Behance همگام می شود.

چیزی که Portfolio را منحصر به فرد می کند این است که با Behance همگام می شود. ایده این است که یک وب سایت سفارشی زیبا با Portfolio ایجاد کنید و پروژه های خود را با نمایه Behance خود همگام کنید. در آنجا می‌توانید در یک پلتفرم خلاقانه که میلیون‌ها خلاق، و افرادی که خلاق جذب می‌کنند، از آن استفاده می‌کنند، آثار ارزشمندی را برای کار خود به دست آورید! اما اگر نمی‌خواهید مجبور نیستید از Behance استفاده کنید — می‌توانید از Portfolio به تنهایی استفاده کنید و انتخاب کنید که با Behance همگام نشوید. انتخاب با شماست.

عکاسی ماتیاس هایدریش — همانطور که در پورتفولیو و Behance

 

طرح‌بندی‌های پاسخگو.

مثل هر سازنده وب سایت، به یک نقطه شروع نیاز دارید. بنابراین یکی از چیزهایی که ما نیاز به طراحی داشتیم، طرح‌بندی‌هایی بود که به‌طور خاص برای نمایش کارهای خلاقانه طراحی شده بودند تا به عنوان پایه‌ای عمل کنند که می‌توانید به راحتی آن را سفارشی کنید و پروژه‌ها را پر کنید.

هدف طرح‌بندی‌ها پوشش انواع سبک‌ها متناسب با زمینه‌های خلاقانه مختلف است. آنها می توانند به عنوان یک راه حل آماده برای پر کردن سریع پروژه های شما و انتشار یک وب سایت (در عرض چند دقیقه) استفاده شوند یا از ویژگی های ویرایشگر برای تغییر ساختار و ظاهر مطابق با سبک شما استفاده کنند.

به راحتی یک طرح بندی را سفارشی کنید تا بسیار متفاوت به نظر برسد. دارای عکاسی توسط برایس جانسون

در زیر طرح‌بندی‌هایی است که با آن راه‌اندازی می‌کنیم. طرح‌بندی‌های اولیه (برای عرضه نسخه بتا و محصول عمومی) بسیار ساده هستند و بر روی جلد پروژه‌ها، گالری‌ها و پروژه‌ها تمرکز دارند. البته این محصول برای ارائه ویژگی های بیشتری مانند تصاویر جلد تمام صفحه، ویرایش HTML و CSS، ادغام وبلاگ و غیره به مرور زمان رشد خواهد کرد. و با گسترش ویژگی‌ها، تنوع و تعداد طرح‌بندی‌ها به عنوان نقطه شروع نیز افزایش می‌یابد.

لایه‌آوت‌ها و خلاقیت‌هایی که بر اساس آنها نامگذاری شده‌اند: لینا، خاک اره، متیاس، جوکو ، مرسدس و توماس

ما انتخاب کردیم که طرح‌بندی‌ها را با نام خلاقیت‌ها در Behance نامگذاری کنیم. ما خلاقیت‌هایی را انتخاب کردیم که کارشان به خوبی به یک طرح‌بندی خاص کمک می‌کند، و البته از نظر بصری نیز خیره‌کننده بود.

باید بگویم که این طرح‌بندی‌ها یکی از آخرین مواردی بودند که طراحی شدند (پیش بتا)، اما من به خاطر این مقاله با آنها پیشرو هستم تا شما را با آنچه محصول انجام می‌دهد آشنا کنم. یا حداقل «محصول نهایی» آن.

 

ویرایشگر.

محصول (خود) باید کاربر را قادر سازد تا به سرعت و به سادگی وب سایت خود را با استفاده از یکی از طرح بندی های بالا به عنوان نقطه شروع ویرایش کند. رابط کاربری بسیار کم است——از مسیر خارج می شود و به شما امکان می دهد روی طراحی وب سایت خود تمرکز کنید. همه تغییراتی که ایجاد می‌کنید به صورت زنده در ویرایشگر انجام می‌شوند.

به نظر کمی بد به نظر می رسد، اما هنگام طراحی همه چیز از برند، سایت بازاریابی، و به خصوص ویرایشگر، سه چیز را در ذهن داشتم:

این باید به کاربر این امکان را بدهد که:

• به راحتی هر چیزی را که می‌توانند ببینند ویرایش کنند.
• مدیریت و افزودن محتوا.
• پیش‌نمایش پاسخگوی وب‌سایت آنها.
• یک وب سایت زنده را منتشر و به روز کنید.

در زیر مجموعه‌ای از سناریوهای ویرایش محصول (ویرایشگر) آمده است:

صفحه نمایش های مختلف از ویرایشگر. دارای عکاسی توسط کریس بورکارد و طراحی توسط اندرو کالدول

 

نقش یک طراح محصول.

نقش خودم به عنوان یک طراح در Portfolio در طول سال به طرز چشمگیری تغییر کرد، از مفهومی به راه‌اندازی. همانطور که یک محصول دیجیتال پیشرفت می کند، نقش شما به عنوان یک طراح محصول نیز بیشتر می شود. بنابراین برای بازگشت به ابتدا:

ProSite.

نمونه کارها در واقع تکامل یک محصول Behance موجود (در حال بازنشستگی) به نام ProSite است. این 5 سال است، بنابراین چیزهای زیادی می‌توانستیم از آن محصول یاد بگیریم: چه چیزی خوب کار می‌کرد؟ چه چیزی نشد؟

شبکه Behance.

همچنین، آنچه که در مورد جامعه خلاق و نمایش کار، از طریق طراحی، سرپرستی (و استفاده از!) شبکه Behance آموخته ایم، برای درک چگونگی ساخت محصولی مانند نمونه کارها بسیار ارزشمند است.

بنابراین من زمان زیادی را صرف جذب تمام این دانشی که Behance در طول سال ها به دست آورده بود، و همچنین مطالعه طرح های اولیه آنها برای تکامل ProSite صرف کردم. سوال پرسیدن. یادداشت برداری. ایده های طراحی.

شبکه Behance و ProSite

 

من همیشه با یک مداد و یک کتاب طراحی شروع می‌کنم.

نوشتن و طراحی واقعاً به من کمک می کند تمرکز کنم و ایده ها از آنجا سرازیر می شوند. گاهی اوقات من به سادگی کلماتی را که با محصول مرتبط می‌دانم می‌نویسم یا آنچه را که باید انجام دهد فهرست می‌کنم، فقط برای اینکه آن را از ذهنم بیرون کنم. این کمک می کند تا ذهن را شلوغ کنید و روی چیزهای مهم تمرکز کنید.

این کار کتاب طرح به طور طبیعی به طرح‌های رابط کاربری تبدیل می‌شود. گاهی اوقات من یک ویژگی، یا یک جزئیات کوچک UI، یا یک رویکرد جدید را به طور کامل به UI ترسیم می کنم. این یک راه سریع صرفاً و صرفاً طراحی و کاوش ایده ها است. شاید مهم‌تر از همه، مانند زمانی که از نرم‌افزار رایانه استفاده می‌کنید، حواس‌تان به کمال پیکسل، فونت‌ها، رنگ‌ها، شبکه‌ها، راهنماها و غیره پرت نمی‌شود.

همیشه زمانی وجود دارد که می‌دانید به اندازه کافی برای برداشتن آن قدم فراتر دارید و در واقع شروع به بیان این ایده‌ها می‌کنید. در گذشته من از Adobe Illustrator یا Omnigraffle برای این کار برای وایرفریم استفاده کرده ام. اما زمان برای این پروژه تنگ بود، بنابراین من مستقیماً وارد فتوشاپ شدم.

در زیر چند اسکن از دفترچه طراحی من آمده است. برخی به محصول (ویرایشگر)، برخی به سایت بازاریابی و برند مربوط می شوند:

چند اسکن از دفترچه طراحی من

تصویر جالبی که در بالا باید به آن اشاره کرد آخرین تصویر (پایین سمت راست) است. می بینید که طرح من به چیزی که در نهایت طراحی کردم نزدیک است.

 

مفهوم و نمونه سازی.

همه این ایده‌ها و طرح‌ها با ایده‌پردازی، نمونه‌سازی اولیه و بحث با تیم اطلاع‌رسانی و تکامل می‌یابند. چت کردن از طریق ایده ها با طراحان و توسعه دهندگان دیگر و حتی مخاطبان هدف در صورت امکان خوب است. به عنوان مثال: یک ایده خاص از من در مورد طرح اولیه (محصول) با یک دانشجوی تصویرسازی MFA در SVA. یک دیدگاه تازه همیشه کمک می کند، به خصوص برای محصولی با این پیچیدگی.

ما در حال کار روی بازه‌های زمانی بسیار فشرده روی این پروژه بودیم. به سادگی زمانی برای ساخت نمونه های اولیه پیچیده وجود نداشت. اما کاری که من انجام دادم این بود که با استفاده از Layer Comps در فتوشاپ، مجموعه‌ای از راهنماهای PDF ایجاد کردم که نشان‌دهنده حرکت مکان‌نمای ماوس در اطراف صفحه‌نمایش، نشان دادن هر تعامل، ویژگی و جریان کاربر در محصول بود. اینها به توسعه دهندگان (و سایر ذینفعان) اجازه می دهد تا همه عملکردها و جریان کاربر را نقد و/یا درک کنند——تا بدانند چه چیزی باید ساخته شود، و همچنین هرگونه نقص احتمالی در UI/UX را قبل از ساخت و آزمایش شناسایی کنند.

در زیر (ویدئویی) یکی از نمونه‌های این راهنماهای PDF آمده است:

نمونه اولیه/راهنمای نمایش سفارشی سازی جهانی در ویرایشگر پروژه

 

جزئیات در طراحی.

به زبان ساده: حدس و گمان را برای توسعه دهندگان حذف کنید. تیم شما باید بفهمد که چه چیزی باید ساخته شود. وظیفه آنها این نیست که جاهای خالی را پر کنند، آن را پاسخگو کنند، یا حدس بزنند که در هر سناریویی چه اتفاقی می افتد. من نمی توانم در این مورد به اندازه کافی اغراق کنم — من طراحان زیادی را تجربه کرده ام که 20 درصد از یک محصول را طراحی کرده و در نظر گرفته اند، و به همه چیز فکر نکرده اند.

علاوه بر پیش‌بینی‌ها، جریان‌های کاربر و نمونه‌های اولیه که قبلاً در مورد آنها صحبت کردم، همچنین می‌خواهم مشخصات دقیقی برای تمام اجزای رابط کاربری، ویژگی‌ها و نام تجاری ایجاد کنم. من احساس می‌کنم اینها زمانی مهم هستند که یک تیم بزرگ دارید، بنابراین همه در یک صفحه هستند، با یک نقطه مرجع مرکزی. هدف این مشخصات پوشش دادن همه سناریوها، از حالت‌های rollover، خطاها، حالت‌های فعال/غیرفعال و غیره است، و همچنین مقادیر و ابعاد px را پوشش می‌دهد (حتی تا جایی که CSS اصلی را هم شامل می‌شود).

هر چه جزئیات بیشتری در طرح های خود بگنجانید، سوالات کمتری برای توسعه دهندگان خواهد داشت و زمان کمتری را برای مدیریت ساخت صرف خواهید کرد. بنابراین می توانید روی طراحی، آزمایش و بهبود محصول تمرکز کنید.

همچنین، نکته خوب در مورد وقت گذاشتن برای ایجاد این «کیت‌های UI» این است که به‌روزرسانی محصول (طراحی) در آینده آسان‌تر است. نیازی به به روز رسانی صدها مدل نیست، فقط مشخصات را به روز کنید.

در زیر چند نمونه از این راهنماها و مشخصات است:

 

بازاریابی و نام تجاری

ماه‌ها بعد، با طراحی و ساخت محصول (ویرایشگر)، توجه خود را مجدداً به بازاریابی، راه اندازی و نام تجاری معطوف کردم. این محصول چیست؟ چگونه شروع به استفاده از آن می کنید؟ به صدا نیاز داشت یک هویت.

نام.

وقتی برای اولین بار به Behance ملحق شدم، این پروژه تا حدودی به شوخی در داخل “Prosite 2.0” نامیده می شد. محصول ProSite زمان خود را سپری کرد، اما جانشین آن به جانوری متفاوت تبدیل شده بود. علاوه بر ارتباط آنها با Behance، آنها محصولات بسیار متفاوتی بودند و هیچ همبستگی 1:1 نداشتند. این یک طراحی مجدد/راه اندازی مجدد نبود. ما در حال ساختن یک محصول جدید هیجان انگیز از ابتدا بودیم و ProSite را بازنشسته می کردیم. انتقال آن مهم بود — و با نام شروع می‌شود.

من به دفترچه طراحی خود برگشتم و تمرین تداعی کلمه را انجام دادم تا تمام کارهایی که این محصول انجام می دهد را یادداشت کنم و همچنین هر محصول مشابه موجود در بازار از چه زبانی استفاده می کند. پیشرفت طبیعی همه اینها مدام به “پورتفولیو” باز می گشت. بنابراین پس از کمی فکر، به این نتیجه رسیدم: «چرا که نه؟!»—  دقیقاً همان کاری را که روی قلع نوشته است انجام می دهد. این یک سازنده / ویرایشگر وب سایت است که به طور خاص برای ایجاد یک نمونه کار طراحی شده است. سادگی و جسور بودن نام به خوبی با طراحی و ارزش های محصول مطابقت دارد. و بنابراین ما آن را “Portfolio” نامیدیم که به زودی به “Adobe Portfolio” تبدیل شد تا با مجموعه محصولات Adobe مطابقت داشته باشد.

صفحه اصلی سایت بازاریابی با عکس تانیا تیمال

مارک.

پورتفولیو هویت و شخصیت خاص خود را دارد. نمونه کارها یک محصول شرکتی نیست (به اصطلاح). برچسب سفید است. این مال شماست که خودتان بسازید. دوستانه، ساده و قابل دسترس است. برند، سایت بازاریابی، نصب، کپی‌نویسی و پیام‌رسانی در طول تجربه کاربر (محصول) همه تلاش می‌کنند تا این را از طریق زبان مورد استفاده، تایپوگرافی، شبکه، تصاویر و رنگ‌ها منتقل کنند.

سناریوهای دیگر عبارتند از ارسال پیام‌های بی‌نظیر و تصاویر طنز. عکس پروژه توسط dua — Alexander Esslinger

 

طراحی پاسخگو.

بازگشت به نکته قبلی من در مورد جزئیات در طراحی: طراحی وب، درست مانند طراحی محصول، باید همان توجه را به جزئیات داشته باشد. در این مورد، مطمئناً مهم است که سایت بازاریابی پاسخگو باشد، اما وظیفه توسعه دهندگان این نیست که بفهمند یک وب سایت در اندازه های مختلف صفحه چگونه پاسخ می دهد.

در زیر چند نمونه از طرح‌های واکنش‌گرا وجود دارد که برای ساخت myportfolio.com به توسعه‌دهندگان تحویل داده شده است. /a>:

طراحی‌های واکنش‌گرا برای سایت بازاریابی، که نسخه اولیه هویت برند را نشان می‌دهد

مشاهده یک مطالعه موردی کامل سایت بازاریابی اینجا

طرح‌های واکنش‌گرا برای چند طرح‌بندی که سناریوهای مختلف را پوشش می‌دهد

یک مطالعه موردی کامل طرح‌بندی‌ها را در اینجا مشاهده کنید

 

آزمایش کاربر.

یک محصول دیجیتال باید به گونه ای تکامل یابد که با افرادی که از آن استفاده می کنند مناسب باشد و رفتار کاربر را در نظر بگیرد تا بهترین تجربه کاربر را ارائه دهد. در حالت ایده آل، محصولات قبل از اینکه برای همه عرضه شوند، از مرحله آلفا/بتا (نسخه های محدود) عبور می کنند. ما این کار را با Portfolio انجام دادیم. این به ما کمک کرد تا مشکلات را برطرف کنیم، بیاموزیم که آیا UI/UX “کار می کند” و بازخورد واقعی کاربر را با هدف بهبود محصول دریافت کنیم. بهتر است با یک گروه کاربری محدود تست کنید، یاد بگیرید و اصلاح کنید تا اینکه برای هزاران/میلیون نفر راه اندازی کنید و وقتی خیلی دیر است مشکلات را کشف کنید.

تست کنید. فرا گرفتن. تجدید نظر کنید. تکرار کنید.

این در طراحی محصول مهم است. شما از افرادی که از محصول استفاده می کنند چیزهای زیادی یاد می گیرید.

از آنچه کشف می کنید شگفت زده خواهید شد:

… مردم همیشه از یک محصول آنطور که شما پیش بینی می کردید استفاده نمی کنند!

• می‌آموزید،
• شما پیشرفت می کنید،
• شما در مورد محصول تکرار می کنید،
• شما به آزمایش ادامه می دهید،
• و این روند را تکرار کنید.

و صادقانه بگویم، گاهی اوقات این احساس کمی دارد:

…اما محصول برای آن بهتر خواهد بود.

 

در پایان.

اگر بخواهم چیزی را از این موضوع حذف کنم، این است:

آهسته تر.

الهام بگیرید. مخاطب خود را درک کنید. یادداشت بردارید. ایده های طرح.

مفهوم.

با تیم خود کار کنید. ایده ها را کاوش کنید به آن فکر کنید.

جزئیات در طراحی.

شخصی (دیگری) باید آنچه را که شما طراحی می‌کنید بسازد.

آزمایش و بهبود.

آیا کار می کند؟ چگونه می توانید آن را بهبود بخشید؟ همیشه می توان آن را بهبود بخشید.

یاد بگیرید.

همیشه. هر تجربه در طراحی یک تجربه یادگیری خوب است.

 

[– این مقاله ابتدا در Medium.com، با اجازه نویسنده بازنشر شد –]