وایرفریم چیست و چه کاربردی در طراحی صفحات وب دارد؟

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

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

وایرفریم چیست؟

وایرفریم یک طرح کلی دو بعدی از یک صفحه وب یا برنامه است. Wireframe یک نمای کلی از ساختار صفحه، طرح بندی، چیدمان اطلاعات، عملکرد و رفتارهای مورد نظر ارائه می‌دهد. بسته به جزئیات مورد نیاز می‌توان Wireframe را به صورت دستی یا دیجیتالی ایجاد کرد. در اصل Wireframe یک طرح اولیه یا اسکلت طراحی برای کمک به طراحان تجربه کاربری UX و برنامه نویسان، در مورد ساختار وب سایت یا نرم افزارهای در حال ساخت است. در واقع، برای آنکه بتوانید ایده‌های اولیه طراحی و تولید وب سایت و نرم افزار را به نمونه اولیه تبدیل کرده و آن‌ها را تست کنید، باید از Wireframe استفاده کنید.

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

نحوه طراحی وایرفریم چگونه است؟ 

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

• طراحی Wireframe با کاغذ و قلم

• رسم و طراحی Wireframe با استفاده از نرم افزارهای طراحی

سطح جزئیات وایرفریم‌ها به چه صورت است؟

اصطلاح سطح جزئیات Level of detail تعداد جزئیات یک Wireframe محسوب می‌شود. هر چه یک Wireframe  از نظر ظاهری و عملکردی به طراحی نهایی شباهت بیشتری داشته باشد، سطح جزئیات آن بیشتر است و هر چه Wireframe ساده‌تر باشد سطح جزئیات آن کم‌تر است. به طور کلی Wireframe به سه دسته تقسیم می‌شود: جزئیات کم، جزئیات متوسط و جزئیات زیاد.

Low-fidelity Wireframes یا نمونه سازی با جزئیات کم

این نوع وایرفریم ها که به low-fi معروف هستند، همان طور که از نام آن‌ها مشخص است دارای کم‌ترین سطح از جزئیات هستند و بیشتر با هدف حفظ ایده‌های اولیه، جانمایی اولیه المان‌های مختلف رابط کاربری در صفحه و نمایش کلیات هر صفحه طراحی می‌شوند. معمولا این نوع از وایرفریم‌ها برای ارائه به کاربر یا کارفرما استفاده نمی‌شوند و مخاطب آن‌ها طراحان یا تیم‌های طراحی هستند که معمولا از خودکار و کاغذ استفاده می‌کنند.  

Mid-fidelity Wireframes یا نمونه سازی با جزئیات متوسط

رایج‌ترین نوع نمونه سازی‌هایی که مورد استفاده طراحان قرار می‌گیرد Mid-fidelity Wireframes یا Low-fidelity Wireframes هستند. در این نوع از نمونه سازی از سطح جزئیات بیشتری نسبت به Low-fidelity Wireframes استفاده می‌شود. برای مثال در این نوع Wireframe متن‌ها به صورت مشخص‌تری نوشته می‌شوند در حالی در Low-fidelity Wireframes بسیاری از متن‌ها را با خطوط مواج رسم می‌کنند. هر چند که در این نوع Wireframe جزئیات سطح بیشتری دارند اما بازهم مواردی مانند: تصاویر و رنگ‌ها جایی ندارند و ابعاد هم چندان رعایت نمی‌شود. Mid-fidelity Wireframes با استفاده از ابزارهایی مانند: قلم، کاغذ و یا نرم افزارهای طراحی رسم می‌شوند.

High-fidelity Wireframes یا وایرفریم با جزئیات بالا

Wireframe High-fidelity جزء با کیفیت‌ترین و با جزئیات‌ترین نوع Wireframe می‌باشد که طبیعتا طراحان باید زمان یشتری را صرف طراحی کنند. حتی در ادامه مطلب...