قبل از طراحی و پیاده سازی یک وب سایت، داشتن اطلاعاتی کامل از جزئیات طرح الزامی است. به طور کلی وایر فریم (wireframe) یک راهنمای تصویری کامل از وب سایت قبل از شروع طراحی است که چهارچوب کلی سایت را مشخص می کند و معمولا طراحان حرفه ای سایت این مورد را از مشتریان خود می خواهند. بعنوان مثل اگر بخواهیم یک وب سایت درباره یک محصول طراحی و پیاده سازی کنیم،ابتدا باید اطلاعات کاملی از این محصول داشته باشیم تا بتوانیم طرح را پیاده کنیم. مواردی مثل: طول سایت، محل قرارگیری سربرگ، تعداد بلوک های سایت، مکان قرار گیری آخرین اخبار، تعداد ستوی های سایت و... هستند که در ادامه به جزئیات آن همراه با نمونه هایی از Wireframe و نحوه ساختن آنها بیشتر می پردازیم و به شما می گوییم که wireframe چیست و چگونه آن را بسازیم.
در یک Wireframe نباید نهایت گرافیک را به کار برد! با یک قلم و کاغذ معمولی و یا با نرم افزار Point ویندوز هم می توان Wireframe را ایجاد کرد. این کار باعث می شود تا به قول خودمان دست طراح را برای زدن طرح بیشتر باز کنیم!
چگونه یک وایر فریم بسازیم؟
برای کشیدن یک وایر فریم نیاز به ابزار خاصی نیست و راه های زیادی برای این کار وجود دارد. استفاده از برنامه های گرافیکی، نرم افزار paint ،photoshop و... یا حتی استفاده از یک قلم و کاغذ معمولی!
وب سایت هایی هم برای ساختن Wireframe وجود دارد که از معروف ترین آنها میتوان به cacoo.com ،gomockingbird.com ،wireframe.cc ،lumzy.com و ... اشاره کرد.
نمونه وایرفریم
در ادامه نگاهی به جدیدترین وایرفریم های موجود میندازیم. این وایرفریمها شامل بستهها یا کتابخانههایی هستند که روند طراحی صفحات وب یا اپلیکیشنهای موبایلی را تسریع میبخشند. شما میتوانید از این نمونهها برای صفحات وب یا برنامههای تلفن همراه خود استفاده کرده یا در صورت تمایل از آنها ایده بگیرید.
Webpage Wireframe Stencil (AI & EPS): این بسته کلیه ابزارهای لازم برای طراحی عناصر Ui را در اختیار شما میگذارد. برخی از این ابزارها عبارتند از منو ناوبری، زیر ناوبری، اسلایدر، تبها، دکمهها، آیکونهای دلخواه، ورودیها، عناصر فرم، جعبه و صفحهبندی.
Wireframe Kit (PSD): این نمونه وایرفریم توسط Rafal Tomal ساخته و منتشر شده است. المانهای رایج در هر وبسایتی مانند سرچ باکس، بخش عضویت، ویدیوها، تصاویر، فیلدهای فرم، انواع هدر، پاراگرافها، لیستها و بنرهای گوناگون در این بسته عرضه شده است.
Vector Wireframe kit & Symbol Library (AI): این بسته وایر فریم یا wireframe توسط Giles Newman ساخته شده و شامل تمام عناصر مرسوم و المنتهای سفارشی شده با کمک ایلوستریتور است. با استفاده از این قابلیتها میتوانید تمام عناصر را به طور کامل تغییر دهید. همچنین کتابخانه عناصر موجود در این بسته به شما کمک میکند که با ترکیب عناصر موجود عناصر جدیدتری خلق کنید.
در ادامه اسامی تعداد دیگری از wireframeهای زیبا و آماده برای طراحی وب و تلفن همراه را گردآوری کردهایم:
- Shades 1.0 Wireframing Vector Kit (AI)
- Sally Blocks (PSD)
- Wireframe Kit (Sketch)
- Free Wireframes 15 (AI)
- Windows Phone 8 Wireframe Kit (AI)
- Android Vector Wireframing Toolkit (AI)
طراحی وایرفریم در فیگما
فیگما (Figma) نام دیگری در زمینه طراحی وایر فریم و نمونهسازی است. این نرمافزار وکتور طراحی و انیمیشن نیز مانند سایر نرمافزارهای رایج در این زمینه امکانات و قابلیتهای متعددی را برای وایر فریمینگ در اختیار کاربر قرار داده و در نهایت طرح نهایی را تحویل او میدهد. فیگما به تیمهای طراحی سایت و سئو اجازه میدهد که به صورت گروهی روی پروژه کار کنند.
پلاگینهای Figma را میتوان یکی از کاربردیترین ویژگیهای این نرمافزار محبوب دانست. این پلاگینها ضمن گسترش عملکرد نرمافزار به کاربران امکان ایجاد وایرفریمهای سفارشی را برای پروژههایشان میدهند. استفاده از این پلاگینها مزایای بسیاری به همراه دارد. برای مثال، پلاگینهای فیگما به کاربران اجازه میدهند که قابهای سفارشی مطابق با نیازهای خاص خود ایجاد کنند. همچنین پلاگینهای مورد اشاره با خودکار کردن پروسه ساخت Wireframe موجب صرفهجویی در زمان کاربران میشوند. کیفیت بالای وایرفریمهای ساخته شده توسط فیگما نیز از دیگر مزایای کار با این نرمافزار است.
بنابراین میتوان گفت که افزونههای فیگما Wireframe یک ابزار کاربردی برای افرادی است که نیاز به ایجاد و سفارشیسازی وایرفریمهایی با کیفیت بالا برای پروژههای وب یا اپلیکیشنهای موبایلی دارند. کاربرپسند بودن و سهولت استفاده از دیگر ویژگیهای این افزونهها هستند. با امتحان هر یک از آنها متوجه خواهید شد که کدام یک به بهترین شکل ممکن نیاز شما را برآورده میسازند.
نمونه وایرفریم سایت
رسم نمونه اولیه یکی از باارزشترین بخشهای طراحی سایت است. وایرفریمینگ باعث میشود که بتوانید به راحتی ساختار یک طرح را به مشتری یا برنامهنویس منتقل کنید. همچنین وایرفریمها به طراح کمک مینمایند که بدون توجه به حواشی یک طرح نظیر محتوای آن، رنگ المانها، ساختار و غیره یک نمونه را ایجاد کند. البته نوع محتوا برای رسم یک وایر فریم مهم است. چرا که طراح باید درباره اینکه چه المانهایی با چه فرمتهایی در کجا باید قرار بگیرند، اطلاعاتی داشته باشد. اما خود محتوا در این زمینه مهم نیست.
شکل زیر یک نمونه وایرفریم سایت را نشان میدهد. همانطور که گفته شد، به محتوای طرح کاری نداشته و فقط نوع محتوا مهم است. در طرح اولیه، محل قرارگیری تصاویر و متون را مشخص کرده و سپس در مراحل بعدی به سراغ انتخاب تم رنگی و غیره برای طرح میروند.
مراحل و مزایای ساخت وایر فریم
طراحی و رسم فریم یا نمونهسازی را پس از انجام مراحلی مانند جمعآوری اطلاعات، آنالیز دادهها، تعیین ویژگیها و قابلیتهای محصول آغاز میکنند. در واقع وایرفریمینگ بعد از مشخص شدن صفحات محصول با توجه به امکانات آن انجام میشود. به دو صورت میتوان wireframe را رسم کرد:
- با کاغذ و قلم
- با استفاده از نرمافزارهای طراحی
در جلسه برگزار شده با تیم طراحی UX اهداف طراحی نمونه سایت مشخص میشود. سپس، مشتری نیازهای کاربران سایت خود نظیر تعداد صفحات، عناصر و المانهای مورد نیاز در هر صفحه را بیان کرده و درباره ساختار سایت پیشنهاداتی را ارائه میدهد. تیم طراحی پس از جمعآوری دادههای مربوطه بر اساس آنها طراحی را آغاز میکند.
سپس تیم طراحی وایر فریم را به مشتری تحویل میدهد. با وجود اینکه در wireframe ساختار و ویژگیهای صفحات مشخص میشوند، اما بعد از هر بار ارائه ممکن است که هر طرح نیاز به چندین مرتبه ویرایش داشته باشد.
در این مرحله به تست کاربر نزدیک میشود. ممکن است که مشتری با مشاهده دموی محصول تمایل به اجرای ایدههای جدید داشته باشد. شناسایی و رفع ایرادات محصول، پیش از هدر رفتن زمان و هزینه زیاد، از مزایای ساخت وایرفریم است. در نهایت تیم طراحی UX ایدههای مشتری را اصلاح و اعمال میکند. تیم طراحی UX بعد از کسب رضایت مشتری به کمک تیم طراحی UI طرح تایید شده را به یک ماکت تبدیل مینماید.
همانطور که بیان شد، وایرفریمینگ مزایای زیادی دارد که به برخی از آنها اشاره کردیم. چند نمونه دیگر از مزایای این تکنیک عبارت است از:
- ساده سازی و امکان اعمال تغییرات در همه قسمتها
- نمایش بهتر محتوا
- نمایش بهتر عملکرد سایت
- الهام بخش بودن برای اعضای پروژه
مزایای استفاده از وایر فریم
- صرفه جویی در وقت
- عدم سردرگمی طراح برای پیاده سازی طرح
- داشتن یک پیش نمایش از سایت قبل از شروع به طراحی
- مشخص کردن عناصر قرار گرفته بر روی طرح
- تغییر و تنظیم عناصر کاربری
کاربردهای وایرفریم چیست
یکی از اصلیترین کاربردهای وایر فریم یا wireframe در طراحی نمای سایت، اپلیکیشن و برنامههای دسکتاپ است. در واقع وایر فریم پیادهسازی layout یا طرحبندی اولیه صفحه سایت و برنامه است که محل قرارگیری تمام عناصر موجود در صفحه در آن مشخص میشود.
اگر بخواهید بدون نمونهسازی به طراحی سایت یا برنامه بپردازید، باید آن را همزمان اجرا کنید. در این صورت اگر طراحی شما خیلی مناسب نباشد، باید طرح را مجددا کدنویسی نمایید. این امر وقت و هزینه زیادی را از طراح، برنامهنویس و مشتری خواهد گرفت. اما طرح اولیه وایرفریم از دوبارهکاریها جلوگیری کرده و در کاهش زمان اجرای طراحی نیز موثر است.
از آنجایی که وایر فریم یک طرح اولیه است، همه چیز در آن در سادهترین شکل ممکن است و پیچیدگیهای طراحی بصری در این عناصر وجود ندارد. هدف از ساخت وایرفریم خلق طرحی زیبا و شکیل نیست. طراحان میخواهند با ایجاد چنین طرحی به یک ساختار اولیه بصری دست پیدا کنند که در پروسه توسعه سایت راهنمای مسیر آنها باشد.