558 subscribers
163 photos
10 videos
48 links
کارگاه UI/UX | به اشتراک گذاری تجربیات دیزاین

اگه چیز با ارزشی برای مطرح شدن دارین،
با من در میون بگذارین.

@Amin_Masihzade
Download Telegram
Forwarded from فلسفه دیزاین (Ramin Khatibi)
پیش از دیزاین، داستان بنویسید

چند روز پیش، در شرکت برای دیزاین صفحه Landing وبِ دو سرویس اخیرمون با بچه‌های تیم گپ می‌زدیم. بچه‌ها می‌دونستن که سرویس‌ها دقیقا چی هستن، جز به جزش رو خودشون دیزاین کرده بودند ولی برای نهایی کردن صفحه Landing مشکل داشتند و نمی‌تونستند به یک ایده خوب، جامع و منسجم برای دیزاینش برسن.
بهشون پیشنهاد کردم از اول شروع کنند، ولی این‌بار قبل از نشستن پشت کامپیوتر، لحظاتی رو به نوشتن چیزی که دقیقا می‌خوان بگن اختصاص بدن. در چند جمله بگن که این سرویس چی هست، ویژگی‌هایی که به نظرشون مهم هست چیا هستند و …

برام جالب بود که بعد از این گپی که داشتیم، به مقاله‌ای برخوردم که این روش رو به شکلی منسجم‌تر توضیح داده بود. آقای Fabricio Teixeira، نویسنده مقاله امروز توضیح میده که سال‌ها این روش رو استفاده می‌کرده ولی هیچوقت به شکل یک «تکنیک» بهش نگاه نکرده بود. اتفاقی که دقیقا برای خود من هم طی این سال‌ها افتاده بود.
ایشون اسم این روش رو Storyframing گذاشته، اون رو مشابه نوشتن فیلمنامه در نظر گرفته و توضیح میده که هر رابط کاربری داره داستانی رو نقل می‌کنه. پس بهتره پیش از ساختن هر رابط کاربری، برای دوری از شلوغی‌های رنگ‌ها، المان‌های و یا هر نوع تصمیم دیزاینی که بعضا حتی در wireframing و اسکچ زدن هم اتفاق می‌افته، اول عصاره اون صفحه رو که داستانی هست که نقل می‌کنه، بنویسیم.
سپس مرحله به مرحله داستان‌مون رو به المان‌های دیزاین مثل متن‌ها، انیمیشن‌ها، تصویرسازی‌ها و … تبدیل کنیم.

نوشته امروز این روش رو بصورت یک روند ۴ مرحله‌ای توضیح میده و برای فهم بهتر موضوع، مثال‌های از سرویس‌های Dropbox، Airbnb و NY Times میاره.

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

https://uxdesign.cc/storyframes-before-wireframes-starting-designs-in-the-text-editor-ec69db78e6e4

(زمان حدودی مطالعه، ۱۰ دقیقه و نصف لیوان قهوه)

#تکنیک #رابط_کاربری #داستان_نویسی #وب
@Dexign دیزاین

___