وایر فریم
5/5 - (1 امتیاز)

چگونه + چرا باید از قالب Wireframe در وبسایت استفاده کرد ؟

 

نمونه سازی (وایرفریمینگ) یکی از آن فرایندهای طراحی است که به طور طبیعی و عمدی اتفاق می­افتد. چند بار شده که در طول یک جلسه، ایده­ای ترسیم (اسکچ) کنید؟ چند بار، یک وایرفریم قابل ارائه برای جلسه با مشتریان آماده کرده­ اید؟

هر دو نوع وایرفریم، در فرآیند طراحی و تکرار، به یک اندازه مهم هستند.

ساخت دومی، مستلزم کمی تلاش بیشتر است و در اینجاست که قالب وایرفریم وارد عمل می­شود. در اینجا همه مواردی که باید در مورد استفاده موثر از این قالب­ها بدانید را به شما می­گوییم و اینکه چگونه این قالب­ها می­توانند در صرفه جویی در وقت به شما کمک کنند. همچنین به شما می­گوییم که چگونه کیفیت وایرفریم­های خود را بهبود دهید و به شما کمک می­کنیم تا ایده­های خود را در قالب فیزیکی بیاورید.

 

قالب Wireframe در وبسایت چیست؟

وایرفریم، یک تصویر پایه از مفهوم طراحی وبسایت است. هر نوع صفحه­ای می­تواند وایرفریم مخصوص به خود را داشته باشد. این طرح­ها اغلب به شکل اسکچ شروع می­شوند و در نهایت می­توانند به ماکت یا نمونه­های اولیه تبدیل شوند. قالب وایرفریم یک وبسایت، به جای مولفه­های رابط کاربری، از یک کیت شبه UI با المان­های وایرفریمینگ تشکیل شده است. بسیاری از قالب­ها، در ظاهر، از “کیت رابط کاربری وایرفریم” استفاده می­کنند، گرچه واقعا اینگونه نیست. (اما منظور را فهمیدید.)

از یک قالب وایرفریم، برای Sketch یا Adobe XD یا Photoshop استفاده می­شود. قالبی که انتخاب می­کنید باید با ابزار و جریان کاری شما مطابقت داشته باشد. یک قالب وایرفریم خوب، دارای المان­هایی برای انواع مختلف صفحات است و بیش از حد فانتزی نیست. بلوک­های تصویری، بلوک­های متنی، بلوک­های دکمه­ای و المان­های موجود بر روی صفحه (دسکتاپ، موبایل) مورد نیاز شما، قطعات رایج هستند.

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

 

5 دلیل برای استفاده از قالب Wireframe

اگر قبلاً از وایرفریمینگ استفاده نکرده­اید، این می­تواند یک ابزار عالی در روند طراحی باشد. قالب­ها، سرعت همه چیز را بالا می­برند.

قالب­های Wireframe، باعث صرفه جویی در وقت می­شوند، و به شما کمک می­کنند تا سریعاً و به روشی قابل ارائه، ایده پردازی کنید.

قالب­های Wireframe، به شما کمک می­کنند تا نقایص طراحی و مسائل موجود در قابلیت استفاده را زودتر تشخیص دهید.

قالب­های Wireframe، به شما کمک می­کنند تا انواع مختلف صفحات و المان­های صفحه را در نظر بگیرید تا چیزی را کنار نگذارید.

قالب­های Wireframe، یک پایه و اساس محکم برای طراحی در اختیار شما قرار می­دهند.

قالب­های Wireframe، می­توانند در طولانی مدت، به صرفه جویی در هزینه کمک کنند، چون به نوعی به کلاینت­ها کمک می­کنند تا بدون سرمایه گذاری روی یک ماکت کامل، طرح را درک کنند.

 

نحوه استفاده از قالب­ Wireframe

اکثر قالب­های Wireframe مانند کیت­های UI کار می­کنند و دارای المان­هایی هستند که می­توانید آنها را در نرم افزار مورد نظر خود جابجا کنید.

نوع استفاده، به ابزار شما بستگی دارد.

بیشتر قالب­های Wireframe دارای صفحاتی هستند که به طور کلی از ساختار خوبی برخوردارند، بطوریکه برای پروژه خودتان فقط لازم است تغییرات ساده­ای در طرح (لی اوت) کلی ایجاد کنید.

من تمایل دارم از گزینه کشیدن و رها کردن استفاده کنم. فایل­های لایه فتوشاپ هم خوب هستند. اما باز هم اکثراً بستگی به اولویت شخصی و گردش کار دارد.

نکته کلیدی در استفاده موثر از یک قالب  wireframe، این است که چیزی را انتخاب کنید که منعکس کننده گردش کار شما باشد، از نرم افزاری که می­خواهید استفاده کنید پشتیبانی کند، و بتواند در تمام مراحل با شما همراه باشد. بسیاری از ابزارها به شما این امکان را می­دهند که وایرفریم­ها را به مدل­هایی با کیفیت بالاتر توسعه دهید. اگر این بخشی از گردش کار برنامه ریزی شده­ی شما باشد، باید قالبی متناظر با آن انتخاب کنید.

 

نحوه دریافت یک قالب Wireframe

هنگام استفاده از یک قالب Wireframe برای وبسایت، دو گزینه پیش رو دارید:

قالب خودتان را بسازید

یک قالب از پیش ساخته دانلود کنید

گزینه اول، احتمالا شخصی­ترین راه حل را در اختیار شما قرار می­دهد، اما ممکن است وقت گیر باشد.

گزینه دوم، طیف گسترده­ای از انواع قالب­های مختلف را در اختیار شما قرار می­دهد و دارای گزینه­های رایگان و ویژه­ای است که می­توانید از بین آنها انتخاب کنید.

اینکه کدام گزینه را انتخاب می­کنید، احتمالاً به زمان بستگی دارد و اینکه چقدر زود می­خواهید با یک قالب کنید. استفاده از یک الگوی پیش ساخته، اغلب مسیر سریع­­تری است. سخت­ترین قسمت احتمالاً جستجو در بین همه گزینه­های موجود برای رسیدن به انتخاب درست می­باشد.

 

5 قالب Wireframe که می­توانید از آنها استفاده کنید

آیا آماده هستید که کار خود را با یک قالب wireframe شروع کنید؟

در اینجا پنج قالب مختلف را معرفی می­کنیم که می­توانید آنها را امتحان کنید و ببینید که آیا برای پروژه­هایتان مناسب هستند یا خیر.

 

Clean UI Kit for Rough Sketching

طراحی وایر فریم

این قالب وایرفریم مینیمال، دارای قسمت­های قابل تعویض است که سبک آن، یک سبک تقریباً از پیش ترسیم شده برای طراحی­های سریع می­باشد.

 

 

Flow iOS Wireframe Kit

فایرفریم ios

این الگوی wireframe اسکچ، شروع بسیار خوبی برای کانسپت­های وبسایت در موبایل یا اپلیکیشن است. المان­های این وایرفریم، ساده و کاربردی هستند.

 

 

Wirey Wireframe Kit

Wirey دارای قالب­های فتوشاپ و اسکچ است و به شما قابلیت انعطاف در زمینه وایرفریمینگ می­دهد. این قالب شامل بیش از 200 مولفه و 1000 المان است، بنابراین هر آنچه شما نیاز دارید در این قالب وجود دارد.

 

 

Responsive Wireframe Kit

این قالب وایرفریم برای Figma و Sketch به گونه­ای طراحی شده است که شما را از وایرفریمینگ اولیه، وارد نمونه سازی اولیه می­کند. این قالب شامل تعداد زیادی بلوک و قالب­هایی برای دسکتاپ، موبایل و تبلت است تا به شما کمک کند که فرایند تفکر پاسخگوی خود را متمرکز کنید.

 

 

UX Workflow Wireframe و Sitemap Creator

این قالب Wireframe، دارای گزینه­هایی همراه با صفحات و راهنمای سایت می­باشد که آماده استفاده هستند. اگر برای شروع کار، کمی به کمک نیاز دارید، این قالب می­تواند در برنامه ریزی پروژه­ها به شما کمک کند.

 

نتیجه

قالب­های Wireframe در وبسایت، یکی از آن میانبرهایی است که می­توانند فرایند طراحی را آسان­تر کنند.

من یک وایرفریم کار هستم که روی کاغذ اسکچ (ترسیم) می­کنم، اما این طرح­ها برای کلاینت­ها آماده نیستند. بنابراین، من از قالب­ها استفاده می­کنم تا شکل­هایی که با مداد کشیده­ام را به چیزی قابل نمایش تبدیل کنم. قالب­ها این کار را بسیار سریع­تر و راحت­تر کرده­اند.

اگر تا به حال از قالب­های wireframe استفاده نکرده­اید، به همین دلیلی که در بالا اشاره کردم، استفاده از آنها را به شدت توصیه می­کنم. یکی از نمونه­های بالا را انتخاب کنید یا حتی می­توانید خودتان یک قالب بسازید که بتوانید از آن استفاده کنید.

 

 

برچسب‌ها:, , , , ,


نظرات