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

شاید  بسیاری از توسعه دهندگان و طراحان وب کارشان را از یک صفحه HTML و یا یک صفحه PHP و یا حتی یک پروژه VS شروع می کنند. اما یک قدم تقریبا ضروری وجود دارد که باید قبل از همه اینها انجام شود.این قدم ترسیم  وایر فریماست. Wireframing در واقع یک مرحله ضروری است که قبل از طراحی هر صفحه و برای هر سایز صفحه نمایش باید برداشته شود. در واقع این کار باعث این می شود که طراحیتان بیشتر معنی پیدا کند. بهتان کمک می کند که آرایش صفحتان را بهتر مشخص کنید. بهتر تصمیم بگیرید که میخواهید کاربران اطلاعات سایت تان را چگونه پردازش کنند.

در واقع می توان گفت Wireframe مثل یک نقشه ساختمانیست (یک نقشه دو بعدی و سیاه و سفید) که معمار آن می کشد و آن ساختمان را از روی نقشه می سازند. به همین ترتیب نمیتوان فوتوشاپ را باز کرد و پیکسل به پیکسل شروع به طراحی گرافیک سایت و کرد و تازه بعد از آن شروع به نوشتن انبوهی کد های HTML و برنامه نویسی کرد بدون اینکه بدانیم در واقع می خواهیم چه چیزی را بسازیم.

حتی برای توسعه دهنده و برنامه نویس وب هم داشتن یک 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 را راحتتر می کنند و حتی امکان اشتراک گذاری طرح با دیگر اعضای گروه یا خود کارفرما را ساده می نمایند که برخی از این ابزارها به شرح زیر معرفی شده اند :

1. Mockingbird:

سایت Mockingbird یک ابزار ساده و اما قدرتمند برای مرورگرهای فایرفاکس ، کروم ، سافاری است که دارای ویژگی های منحصربفرد زیادی است. یکی از این ویژگی ها صرفه جویی در زمان برای تغییر اندازه متن ، اندازه دکمه ها یا عناصر دیگر در صفحه وب است.

1. Lovely Charts

سایت Lovely Charts یک ابزار دوست داشتنی برای ترسیم wireframe ها است که رسم انواع نمودار و فلوچارت ها را با یک رابط کاربری جالب امکان پذیر می نماید.

1. Cacoo:

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

1. Lumzy

سایت Lumzy یک برنامه رایگان است که به شما اجازه ترسیم wireframe و mockups تعاملی را می دهد که شامل ویژگی های چت زنده و غیره نیز می شود.

1. Jumpchart

سایت Jumpchart یک ابزار عالی برای هر دو عامل wireframing و prototyping است که با ویژگی ها و ابزارهای مختلف می توان طرح ها و نمونه های اولیه مناسبی را ایجاد کرد.

1. Google Drawings

سرویس Google Drawings گوگل یک ابزار عالی برای ایجاد wireframing است که به طور خاص برای انواع طراحی ایجاد شده است.

1. Creately

سایت Creately یک ابزار و یک برنامه آنلاین برای رسم است که شامل کتابخانه ای از عناصر و اشکال مختلف و ویژگی کشیدن و رها کردن را در خود دارد.

ابزارهای دسکتاپی wireframe

علاوه بر سایت های آنلاین ، ابزارهای دسکتاپی که به صورت نرم افزار قابل دانلود هستند نیز وجود دارد که برخی از آنها به شرح زیر هستند:

1. MockFlow

نرم افزار MockFlow یک برنامه ترکیبی آنلاین و آفلاین است که برای ایجاد wireframes از آن استفاده می شود که شامل یک کتابخانه بزرگ از اجزا و عناصر مختلف برای طراحی است.

1. iPlotz

نرم افزار iPlotz یک برنامه و یک ابزار برای ترسیم mockups و wireframes است که هم به صورت رایگان و هم به صورت پولی به کاربران ارائه می شود.

1. Pencil

Pencil یک افزونه برای فایرفاکس است که بر روی مرورگر کار می کند که شامل ابزارهای استاندارد برای نقاشی و ترسیم انواع طرح ها و نمونه های اولیه به صورت wireframes یا prototypes است.

نتیجه گیری:استفاده از Wireframes

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