طراحی wireframe یا پیش الگوی طراحی با Balsamiq

متاسفانه نبودن Prototype یا نمونه اولیه و wireframe ها در طراحی نرم افزار یکی از معضلات اساسی هستش که اگر برنامه نویس و یا گرافیست باشید حتما چند بار در محل کارتون یا پروژه های شخصی باهاش دست و پنجه نرم کردید !!!

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

عواقب نبود Prototype یا wireframe صفحات

در زمان شروع یک پروژه طرح کلی و نیازهای اصلی پیدا میشن و نهایتا مشخص میشه مشتری چی می خواد و تیم فنی باید چی رو تحویل بدن. حالا من یک پروژه وب سایت رو مثال میزنم : فرض کنید یک وب سایت از بالای طرح یعنی بنر و header گرفته تا پایین یعنی footer می تونه المان ها یا آیتم های خاصی رو داشته باشه.

مثلا اگر وب سایت خبری باشه , باید اون بالا منو دسته بندی , فرم جستجو , یا لوگو و حتی باکس های تبلیغات رو در نظر بگیریم ... یا در پایین لیست اخبار و منوهای سمت راست که به راحتی کاربر بتونه اخبار رو دنبال و محتوای مورد نظر رو پیدا کنه !

مشکل کار کجاست ؟ متاسفانه تو بعضی پروژه ها بخاطر تنبلی مسئول فنی یا بقیه اعضاء فنی یا حتی بخاطر نبود نیروی UX این طرح ها و یا چارچوب طراحی نمیشه و ابتدا گرافیست یک طرح اشتباه رو طراحی و بعدا برنامه نویس پیاده سازی می کنه که بعدا بخاطر هماهنگ نبودن خروجی با نیاز مشتری دعوا و درگیری و مشکلات تیمی بوجود میاد ...

ولی اگر همان روز اول با یک جلسه ساده و طراحی طرح های اولیه جلو بریم این مشکلات به صفر میرسه و کمتر درگیری و دور افتادن از deadline های مربوطه داریم !

نرم افزار بالزامیک - Balsamiq

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

این نرم افزار در توسعه وب اپلیکیشن ها هم بسیار بسیار کاربردی هستش !!!

شما در وب اپلیکیشن ها فرم های خاصی دارید که بعضا پیچیدگی دارند و باید Relation های مربوط بین فیلدها مشخص بشه و step by step یک فرم رو طراحی کنید. با کمک بالزامیک wireframe فرم هارو طراحی کنید و یک document ساده هم براش بنویسید , تجربه ثابت کرده روی کاغذ با خودکار کار کردن بعدا مشکل آفرین میشه و کار بهم میریزه.

اگر برنامه نویس Front-end هستید بهتون توصیه می کنم این نرم افزار رو داشته باشید و کنار آنالیزهای کوچیکی که روی کامپوننت یا صفحات دارید خروجی رو باهاش طراحی کنید و توضیحات مختصر رو کنار طرح ها بنویسید که بعدا برای پیاده سازی دچار مشکل نشید !!!

دانلود بالزامیک - Balsamiq

لینک دانلود برای این نرم افزار زیاد وجود داره , با یک جستجو ساده توی گوگل می تونید نسخه کرک شده رو به راحتی پیدا و دانلود کنید ...

البته سایت اصلی هم اینه : https://balsamiq.com

موفق باشید