Wireframing یا نمونه سازی بخش مهمی از فرآیند طراحی است که اغلب هم توسط با تجربه ترین طراحان نیز نادیده گرفته می شود. ترسیم Wireframe می تواند دقیقا بخش های مختلف و عناصر به کار گرفته شده را به صورت خام یا بصری به نمایش درآورد و کار را برای خود طراح و کارفرمای پروژه آسانتر نماید و ارتباط بین طراح و مشتریان را دو چندان کند.
اما برای ایجاد یک Wireframe باید از چه فرآیندی استفاده نمود ؟ باید از کاغذ و قلم یا نرم افزار استفاده کرد ؟ پس چه نرم افزاری را باید استفاده کرد ؟
امروز در اینجا مبحث را بر پایه تکنیک Wireframes گذاشته ایم و به همه این سوالات جواب خواهیم داد که امیدوارم تا انتها با ما باشید!
wireframe چیست ؟
اگر بخواهیم در فرآیند طراحی وب سایت یک گزینه را اول انتخاب کنیم ، آن فقط بخش ترسیم اسکچ و وایرفریم ها است که برای نمایش کلیات طرح به مشتری و به اعضای تیم توسعه مورد استفاده قرار می گیرد.
اسکچ یعنی طراحی سریع. اسکچ یا وایرفریم تکنیکی است که توسط طراحان برای پروژه‌های وب و طراحی گرافیک استفاده می‌شود. وقت هایی که حس می کنید در روند طراحی یک وب سایت گیر کرده اید و کار جلو نمی‌رود، یک کاغذ و مداد می‌تواند کمک بزرگی برای شما باشد.
چرا باید طراحی را بر پایه Wireframe انجام داد ؟
عملیات نمونه سازی یا Wireframe اولین گام در فرآیند طراحی وب بشمار می رود. اغلب در طراحی وب به اینصورت است که طرح های ساده را با یک ذهنیت قبلی طراحی می کنند ، اما در طرح های پیچیده و بزرگ از روش Wireframe برای معین کردن بخش های مختلف استفاده می شود تا مشخص شود که صفحه ها و عناصر باید چگونه و با چه هدفی در طراحی بکار رود.
ایجاد Wireframe شما را قادر می سازد تا ایده های خود را به شکل تصویر بر روی کاغذ یا هر چیز دیگری پیاده کنید و به صورت شفاهی و تصویری می توانید رابط کاربری ایجاد شده را راحتتر به مشتری خود نمایش دهید.
وایرفریم ها یک راهنمای تصویری کامل از رابط کاربری وب سایت قبل از شروع طراحی است که چهارچوب بندی کلی سایت را مشخص می کند و معمولا طراحان حرفه ای این مورد را در کار خود لحاظ می کنند.
به طور کلی استفاده از طراحی اسکچ طرح اولیه بسیار در مقدار زمان صرفه جویی کرده و به راحتی امکان تغییر و تحولات را بر روی طرح پایه ایجاد می کند.
تفاوت بین Wireframe , Mockup , Prototype
شاید در تعریف اول از Wireframe , Mockup , Prototype به یک معنی مترادف برسیم ، اما آنها برای سه چیز مختلف استفاده می شوند و هر یک هدف و تعریفی جداگانه در فرآیند طراحی دارند.
Wireframe: تصاویر اولیه از ساختار و اجزای یک صفحه وب است که به طور کلی اولین گام در فرآیند طراحی هستند.
مزایای استفاده از Wireframe:
- صرفه جویی در وقت طراح
- عدم سردرگمی طراح برای پیاده سازی طرح کلی
- داشتن یک پیش نمایش از وب سایت قبل از شروع طراحی
- مشخص کردن عناصر و المان های قرار گرفته بر روی طرح
- تغییر و تنظیم راحت عناصر و بخش های مختلف
Mockups : به طور کلی استفاده از Mockups برای طراحی بصری و عناصر گرافیکی سایت استفاده می شود مثل گرافیک ، تایپوگرافی و چیزهای دیگر که بیشتر فایل های تصاویری را هدف قرار می دهند.
Prototypes: منظور از Prototypes نمونه های اولیه و طرح بندی کلی یک صفحه وب است. نمونه اولیه یا Prototype معمولا به صورت HTML/CSS یا ترکیبی از هر دو ساخته شده و به مشتری نمایش داده می شود. شاید این مرحله از طراحی نتواند انتظارات یک مشتری را برآورده سازد ، اما روند کار و شبیه سازی صفحات وب را برای کارفرما میسر کرده و یک طرح نهایی از کار را نمایش می دهد.
مزایای استفاده از پروتوتایپ در طراحی :
- نمایش ساختار کلی سایت به صورت تصویری
- نمایش قابلیت های سایت
- آسان تر کردن کار طراحان
- صرفه جویی در زمان
- ارائه طرح کلی مشخص و دقیق
- تمرکز بر اهداف اصلی
ایجاد یک wireframe می تواند یک کار ساده یا پیچیده باشد که از کشیدن طرح بر روی یک کاغذ ساده شروع شده و ممکن است به یک طرح کشیده شده به صورت دیجیتالی که حتی قابل کلیک کردن بر روی عناصر موجود در آن است ختم شود.
نوع wireframe به نوع و درخواست کارفرما از یک پروژه بر می گردد که بنا به پیچیدگی یا سادگی طرح خواسته شده می تواند پیچیده یا ساده انجام و به اتمام برسد.
Wireframing یا طراحی با فتوشاپ ؟
جایگزین برای نقاشی و طراحی بصری در حال حاضر برنامه فتوشاپ است که دارای مزایا و معایبی برای کار است. شاید در وهله اول فتوشاپ یک نرم افزار قدرتمند برای ایجاد ایده و نمونه کار باشد ، اما اجازه تمرکز بر روی عناصر اولیه طراحی را نمی دهد.
اگر شما بدون هیچ ذهنیتی شروع به کار با فتوشاپ نمایید به احتمال زیاد تمرکزتان به سمت رنگ ها ، عکس ها یا فونت ها خواهد رفت . پس آیا کاغذ سریع ترین راه نیست ؟ شاید بتوانید از فتوشاپ برای تکمیل ایده و پروژه خود استفاده نمایید ، اما من توصیه می کنم که قبل از استفاده از فتوشاپ حتما یک ایده روشن را در ذهن داشته باشید تا به درستی به طرح خود برسید.
اما دلیل اصلی استفاده از wireframe اینست که تمرکز اصلیتان را بر روی ایجاد بخش های مختلف سایت جمع می کند که هر صفحه وب باید دارای چه قسمت هایی بوده و چه عناصری را در خود جای دهند و بعد از این مرحله است که عناصر گرافیکی مثل رنگ ها ، فونت ها یا … مهم تلقی می شود.
چه چیزی باید در wireframe قرار بگیرد ؟
فرم یا ساختار wireframe باید منعکس کننده هر آنچه که باید در وب سایت قرار است به کار بسته شود ، باشد مثل هدر ، فوتر ، ستون های کناری ، بخش های محتوا و منوی ناوبری ، کادر جستجو …
برای راحتی کار می توان ابتدا المان های عمومی مثل : سربرگ ها ، فوترها ، نوار سایدبار ، محل محتوای درونی را مورد ترسیم قرار دهید و سپس به سراغ بخش های مخصوص مثل : نوار جستجو ، منوی ناوبری ، رنگ ، گرافیک ، آیکون ها و … بروید.
ابزار برای wireframe
بسیاری از ابزارهای عالی برای wireframe در اختیار شما قرار دارد که بعضی به طور خاص برای wireframe و بعضی دیگر برای مقاصد مختلف طراحی شده اند. اگر بخواهیم بگوییم که بهترین برنامه و ابزار برای wireframe چیست ، شاید بتوان گفت که بهترین وجود ندارد . بلکه آن نرم افزار یا ابزاری که کار را برای شما راحت و ساده می کند بدرتان می خورد.
قلم و کاغذ
مداد یا قلم و کاغذ یکی از اساسی ترین ابزارها برای رسم و ایجاد wireframe است. استفاده از یک کاغذ و قلم می تواند فرصت خوبی را برای ایجاد طرح های جالب داشته باشد که بدون نیاز به هیچ ابزار خاصی می توان طرح های اولیه مناسبی را ترسیم کرد.
ابزارهای مبتنی بر وب
ابزارهای بسیار خوبی بر روی وب وجود دارد که کار برای ترسیم یک wireframe را راحتتر می کنند و حتی امکان اشتراک گذاری طرح با دیگر اعضای گروه یا خود کارفرما را ساده می نمایند که برخی از این ابزارها به شرح زیر معرفی شده اند :
سایت Mockingbird یک ابزار ساده و اما قدرتمند برای مرورگرهای فایرفاکس ، کروم ، سافاری است که دارای ویژگی های منحصربفرد زیادی است. یکی از این ویژگی ها صرفه جویی در زمان برای تغییر اندازه متن ، اندازه دکمه ها یا عناصر دیگر در صفحه وب است.
- Mockingbird
سایت Mockingbird یک ابزار ساده و اما قدرتمند برای مرورگرهای فایرفاکس ، کروم ، سافاری است که دارای ویژگی های منحصربفرد زیادی است. یکی از این ویژگی ها صرفه جویی در زمان برای تغییر اندازه متن ، اندازه دکمه ها یا عناصر دیگر در صفحه وب است.
- Lovely Charts
سایت Lovely Charts یک ابزار دوست داشتنی برای ترسیم wireframe ها است که رسم انواع نمودار و فلوچارت ها را با یک رابط کاربری جالب امکان پذیر می نماید.
- Cacoo
سایت Cacoo یکی دیگر از ابزارهای آنلاین برای سرعت بخشیدن به روند ترسیم wireframe است که با استفاده از ویژگی کشیدن و رها کردن می تواند ویژگی های خوبی مانند یک تابلو نقاشی را در اختیار قرار دهد.
- Lumzy
سایت Lumzy یک برنامه رایگان است که به شما اجازه ترسیم wireframe و mockups تعاملی را می دهد که شامل ویژگی های چت زنده و غیره نیز می شود.
- Jumpchart
سایت Jumpchart یک ابزار عالی برای هر دو عامل wireframing و prototyping است که با ویژگی ها و ابزارهای مختلف می توان طرح ها و نمونه های اولیه مناسبی را ایجاد کرد.
- Google Drawings
سرویس Google Drawings گوگل یک ابزار عالی برای ایجاد wireframing است که به طور خاص برای انواع طراحی ایجاد شده است.
- Creately
سایت Creately یک ابزار و یک برنامه آنلاین برای رسم است که شامل کتابخانه ای از عناصر و اشکال مختلف و ویژگی کشیدن و رها کردن را در خود دارد.
ابزارهای دسکتاپی wireframe
علاوه بر سایت های آنلاین ، ابزارهای دسکتاپی که به صورت نرم افزار قابل دانلود هستند نیز وجود دارد که برخی از آنها به شرح زیر هستند:
- MockFlow
نرم افزار MockFlow یک برنامه ترکیبی آنلاین و آفلاین است که برای ایجاد wireframes از آن استفاده می شود که شامل یک کتابخانه بزرگ از اجزا و عناصر مختلف برای طراحی است.
- iPlotz
نرم افزار iPlotz یک برنامه و یک ابزار برای ترسیم mockups و wireframes است که هم به صورت رایگان و هم به صورت پولی به کاربران ارائه می شود.
- Pencil
Pencil یک افزونه برای فایرفاکس است که بر روی مرورگر کار می کند که شامل ابزارهای استاندارد برای نقاشی و ترسیم انواع طرح ها و نمونه های اولیه به صورت wireframes یا prototypes است.
استفاده از Wireframes
طراحی از طریق Wireframes می تواند یک راه حل بسیار عالی برای طراحی وب سایت و ایجاد یک نمونه اولیه از یک طرح کلی باشد که بدون استفاده از فتوشاپ یا برنامه نویسی ایجاد می شود. به هیچ وجه از Wireframing یا ایجاد یک طرح اولیه چه بر روی کاغذ یا با استفاده از برنامه های آنلاین یا دسکتاپی نترسید و شاید در نگاه اول یک چیز غیرعادی به نظر برسد ، اما می توانید با این روش در وقت و کار خود صرفه جویی نمایید و خلاقیت خود را هر چه بیشتر در کارهایتان لحاظ کنید.
تحویل نمونه پروژه با Wireframe
ارائه پروژه و یک طرح نمونه با استفاده از Wireframe به مشتری می تواند یک راه حل ارزشمند باشد که در آن موقعیت ها و بخش های مختلف یک طرح را بدون هرگونه پیچیدگی برای کارفرمای خود ترسیم کرده اید. البته استفاده از این روش ها می تواند یک نگرش خوب و مناسب را نسبت به کارتان ایجاد نماید و مشتریان شما را برای همیشه راضی نگه دارد.
شما برای کارفرمای خود از چه روشی نمونه و طرح اولیه را به او نمایش می دهید؟
کامنت جدید ...