در باب اهمیت رسم mockup

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

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

mockup

یه نکته مهم دیگه که به نظرم باید بهش دقت کنید اینه که طراحی mockup رو برای خودتون سخت نکنید. برای مثال نیازی نیست که شما دقیقا تفاوت بین mockup و wireframe رو بدونید یا از جزئیات باید و نبایدها تو طراحی و رسمشون با خبر باشید. حتی نیازی نیست یک خط اضافه‌تر از این پست وبلاگی در موردش بخونید. به mockup بیشتر به دید یه ابزار ساده‌ و یه نقاشی برای رسم کلیت چیزی که میخواید در آینده بسازید نگاه کنید. نه یه چیزی که باید ابتدا رسمش یاد بگیرید!

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

من خودم مدتیه که با balsamiq mockup آشنا شدم و ازش استفاده میکنم. بالزامیک بهتون این امکان رو میده که به سادگی هر چیزی که تو ذهنتنونه رو پیاده سازی کنید و خودش ابزار خوبی برای نمایش نهایی ایده‌تون در اختیارتون میذاره. هم خودش مجموعه‌ای از آیکونهای پیشفرض داره و هم میتونید خودتون هر عکس و آیکونی که خواستید رو تحت عنوان asset بهش اضافه کنید. برای مثال من اولین کاری که کردم این بود که عکس یه نکسوس۵ رو بهش اضافه کردم تا بتونم mockup هایی که برای پروژه‌های اندروید رسم میکنم رو داخل کار نکسوس۵ بکشم. بالزامیک هم برای ویندوز و هم برای مک وجود داره و میتونید نسخه trialش رو از سایت خودش دانلود کنید.

امیدوارم که تونسته باشم تو این نوشته کوتاه اهمیت استفاده از mockup رو توضیح داده باشم. چیزی که مهمه اینه که فراموش نکنیم که mockup هم در نهایت یک ابزاره برای اینکه بتونیم کار رو راحتتر کنیم. نه یه چیزی که خودش بخواد وقت اضافه‌تری از ما بگیره.

7 پاسخ به “در باب اهمیت رسم mockup”

  1. محمد گفت:

    خیلی خوب بود … ممنون

  2. حامد گفت:

    یه ابزار دیگه هم هست، تحت عنوان Pixate که ساخت خود Google هم هس! به نظرت بهتر نیس که از همین استفاده کنیم چون خب گوگل و اندروید و این حرفا…
    منتهی کار کردن باهاش خیلی سخته، من نفهمیدم!

    • آرش خوئینی گفت:

      باید ازت تشکر کنم برای معرفی Pixate. تا به حال ندیده بودمش و از دیدنش شگفت زده شدم. ابزار کاملیه که برات کد نیتیو هم میسازه. فقط همونطوری که خودت هم گفتی کار کردن باهاش راحت نیست و باید حتما توضیحات خودش رو بخونی . به نظرم بیشتر به درد طراح‌های UI میخوره که میخوان جزئیات و انیمیشن‌ها رو هم به تصویر بکشن.
      اگه فرصت شد سعی میکنم یه مطلب در موردش بنویسم.

  3. یحیی گفت:

    چیز جالبیه، خیلی بهتر از اینه که رو کاغذ چیزهایی بکشیم که اصلا به هیچی شبیه نیست. و یا اینکه بصورت ذهنی چیزی رو شروع کنیم و در آخر با اینکه نتیجه اصلا شبیه او چیز اولیه نیست؛ اصلا متوجه نمیشیم، چون چالش‌های طراحی خود طرح رو تغییر دادن، بجای اینکه ی راهی برای رسیدن به طرح پیدا کنن.

    • آرش خوئینی گفت:

      دقیقا این چالش‌هان که آدم رو بیچاره میکنند! من هم قبلا با این مشکل زیاد رو به رو میشدم که چیزی که در نهایت بهش میرسیدم تفاوت زیادی داشت با چیزی که ابتدا تو ذهن داشتم. نکته خطرناکش اینه که گاهی حتی به اشتباه فکر میکنیم که این چیزی که بهش رسیدیم همونیه که میخواستیم.

  4. سروش گفت:

    مرسی از ابزار خوبی که معرفی کردی ، pop prototype رو هم چک کن چیز باحالیه .

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

android application Google I/O HomeBrew ImageMagick Material Design mobile PogressBar RecyclerView splash TEDxKish ux آموزش اندروید الوین تافلر اندروید اپلیکیشن برنامه نویسی برنامه نویسی اندروید برنامه‌نویسی برنامه‌نویسی اندروید تداکس کیش تعمیر تغییر سایز عکس با ترمینال خلاصه کتاب دانش داده دانشگاه دانشگاه ایده‌آل دزد دیتا ساینس رشته مهندسی کامپیوتر ریکامندرسیستم سیستم‌های توصیه‌گر فری‌لنس لپتاپ متریال دیزاین معرفی کتاب موج سوم نوار پیشرفت همایش هوش مصنوعی ُجزیره کیش کار کسب و کار یادگیری عمیق یادگیری ماشین