وایر فریم چیست؟ آموزش طراحی وایر فریم (Wireframe) - نمونه وایرفریم سایت
برای لحظه ای خود را مشتری طراحی سایت فرض کنید، قطعا نیازهایی از پیش تعیین شده دارید و از طراح انتظار دارید تا آن ها برآورده شوند در اینجاست که طرح اولیه سایت یا اصطلاحا وایر فریم کاربرد پیدا میکند.
وایر فریم چیست؟ تعرفی جزئی تر …
به طرح ابتدایی از نمونه ی اولیه طراحی سایت گفته می شود همانند اسکچ. این طرح معمولا در ابتدا با استفاده از مداد بر روی کاغد طراحی شده و سپس پس از تایید اولیه وارد مرحله طراحی توسط فتوشاپ می شود.
طراح UX سایت با استفاده از نرم افزار فتوشاپ (یا هر نرم افزار دیگری که تخصص آن فرد است) یک طرح کلی از ظاهر سایت را برای مشتری آماده سازی کرده و در جلسه برای تایید به وی نمایش می دهد.
این تصویر تصویری نمونه از یک وایر فریم طراحی شده می باشد:
هدف از طراحی وایر فریم چیست؟
هدف کلی از طراحی وایر فریم ایجاد طراح اولیه از وب سایت است. به لیست زیر توجه کنید:
- مطابقت ایده اولیه با محصول خروجی
- مشترک شدن با با ایده های مشتری در پروژه
- سرعت بخشیدن به تکمیل هر چه زوتر پروژه طراحی وب سایت یا موبایل اپلیکیشن
از وایر فریم چطور استفاده می شود؟
- برای استفاده از وایر فریم ابتدا یک جلسه مشترک میان تیم UX و مشتری برگزار می شود.
- در این جلسه مشتری مشخص می کند که به چه المان (بخش) هایی در وب سایت خود نیاز دارد.
- طرح اولیه کشیده شده.
- در انتها محصول نهایی بر اساس چیدمان انجام شده در وایفرم تولید می گردد.
Prototype یک نمونه اولیه و قابل مشاهده می باشد.
استفاده از وایر فریم چه مزایایی دارد؟
- رضایت مشتری
- بالا رفتن سرعت انجام پروژه
- مشخص شدن بهتر هر یک از بخش های وب سایت
- وجود یک پیش نمایش از محصول نهایی
- عدم سردگمی تیم طراحی
- وجود یک نقشه راه
این نکات را در هنگام طراحی وایر فریم رعایت کنید
- تحقیق در مورد نیاز های مشتری قبل و بعد از طراحی
- طراح اولیه بهتر است با استفاده از مداد به صورت اسکچ کشیده شود
- بهتر است طرح اولیه تا حد ممکن ساده و قابل فهم باشد
- پس از اتمام طرح اولیه، بر روی نیازهای کاربر تمرکز بیشتری کنید
- طرح وایر فریم را تا حد ممکن راحت طراحی کنید تا برای همه قابل فهم باشد
- طرحی اولیه وایفریم را که با مداد طراحی کردید با ابزارهای گرافیکی به فرمت Jpg یا Png تغییر دهید
- کمتر از رنگ ها استفاده کنید
معرفی چند نرم افزار طراحی وایر فریم
در ادامه سه ابزار معروف و پرکاربرد در طراحی وایر فریم ها را معرفی می‌کنیم.
۱- بالزامیک (Balsamiq)
اولین ابزار بالزامیک (Balsamiq) است که در دونسخه رایگان و پلاس (+) در دسترس قرار عموم قرار دارد.
برای تست این نرم افزار می‌توانید از نسخه ابری (+) استفاده کنید که به مدت ۳۰ روز به صورت رایگان در اختیار شما قرار می گیرد. در بالزامیک طراح های اسکپ از پیش‌ساخته‌ای وجود دارد که می توان برای سرعت بخشیدن به کار طراحی از آن‌ها استفاده کرد.
۲- اسکچ (Sketch)
ابزار دوم اسکچ (Sketch) نام دارد که در سال ۲۰۱۰ و برای طراحی وایر فریم های پیشرفته و تخصصی ارائه شده است این ابزار ویژه کاربران مک می باشد.
در حال حاضر اسکچ بزرگترین رقیب محصولات کمپانی معروف و خوش نام ادوبی (Adobe) به شمار می ورد چرا ارزان تر است، با وکتور طراحی شده و از فرمت های جدید مانند SVG نیز پشتیبانی می کند.
۳- ادوبی ایکس دی (Adobe XD)
سومین نرم افزار برای طراحی وایر فریم سایت ادوبی اکس‌دی (Adobe XD) نام دارد؛ XD مخفف عبارت (Experience Design) بوده و این ابزار اولین نرم‌افزار شرکت ادوبی برای طراحی وایر فریم اپلیکیشن و وب‌سایت‌ها محسوب می شود.
چند نمونه وایر فریم سایت
برچسب ها : ,