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

 

معرفی کوچک.

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

001

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

 

Adobe Portfolio چیست؟

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

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

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

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

002
003

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

 

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

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

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

004
005
006

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

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

007

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

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

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

 

ویرایشگر.

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

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

ساده، تمیز و زیبا.

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

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

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

013

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

 

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

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

ProSite.

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

شبکه Behance.

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

درک مخاطبان خود یک نقطه شروع عالی است.

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

028

شبکه Behance و ProSite

 

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

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

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

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

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

030

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

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

 

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

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

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

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

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

 

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

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

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

ارتقا/تشویق کمال پیکسل در ساخت. با مثال رهبری کنید و نوار را بالا بگذارید.

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

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

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

039
040
041
042
043
044
045

 

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

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

نام.

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

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

046

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

مارک.

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

047

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

 

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

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

اگر از حدس و گمان برای آنها استفاده نکنید، بهترین دوست توسعه دهنده خواهید بود. باور کن 🙂

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

048
049

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

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

050
051

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

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

 

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

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

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

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

بهترین راه برای دانستن اینکه آیا کار می کند یا نه استفاده از آن است.

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

052

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

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

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

053

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

 

در پایان.

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

آهسته تر.

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

مفهوم.

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

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

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

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

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

یاد بگیرید.

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

 

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

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.