قبل از اینکه رنگ ها، فونت ها، تصاویر و ظاهر نهایی یک سایت طراحی شوند، باید مشخص شود هر صفحه چه بخش هایی دارد و این بخش ها با چه ترتیبی در اختیار کاربر قرار می گیرند. وایرفریم یا Wireframe برای همین مرحله استفاده می شود.
وایرفریم یک طرح ساده از ساختار صفحه است که جایگاه بخش هایی مانند منو، عنوان اصلی، تصاویر، خدمات، محصولات، فرم ها و دکمه های اقدام را مشخص می کند؛ بدون اینکه طراح درگیر جزئیات ظاهری نهایی شود.
می توان وایرفریم را به نقشه اولیه یک ساختمان تشبیه کرد. در نقشه ساختمان مشخص می شود اتاق ها و مسیرها کجا قرار دارند، اما هنوز درباره رنگ دیوار یا نوع مبلمان تصمیم گیری نشده است. در طراحی سایت نیز وایرفریم ابتدا ساختار و مسیر کاربر را مشخص می کند و طراحی بصری در مرحله بعد انجام می شود.
Figma وایرفریم را نوعی نقشه اولیه برای سایت یا محصول دیجیتال معرفی می کند که به تیم کمک می کند ساختار صفحات، مسیرهای کاربر و اجزای ضروری را قبل از ورود به جزئیات بصری مشخص کند.
در پروژه اصولی طراحی سایت، وایرفریم کمک می کند بسیاری از مشکلات ساختاری قبل از شروع طراحی رابط کاربری و برنامه نویسی شناسایی شوند.
وایرفریم به زبان ساده چیست؟
وایرفریم نمایش ساده و معمولا کم جزئیات از یک صفحه سایت یا اپلیکیشن است.
به جای تصویر واقعی ممکن است یک کادر خاکستری قرار بگیرد. به جای طراحی کامل دکمه فقط یک مستطیل با عبارت «خرید» دیده شود و محتوا نیز با چند خط ساده نمایش داده شود.
هدف وایرفریم پاسخ به سوال هایی مانند این موارد است:
- منوی اصلی کجا قرار بگیرد؟
- مهم ترین پیام صفحه چیست؟
- دکمه اصلی کاربر کجا باشد؟
- محصولات چگونه نمایش داده شوند؟
- فرم در چه قسمتی قرار بگیرد؟
- چه محتوایی ابتدا دیده شود؟
- کاربر برای رسیدن به هدف خود چه مسیری طی کند؟
- نسخه موبایل چه ساختاری داشته باشد؟
بنابراین در مرحله وایرفریم تمرکز روی ساختار، اولویت محتوا و تجربه کاربری است؛ نه زیبایی ظاهری صفحه.
وایرفریم چه چیزهایی را مشخص می کند؟
یک وایرفریم می تواند بخش های مختلف صفحه را مشخص کند.
برای مثال وایرفریم صفحه اصلی سایت ممکن است شامل این ساختار باشد:
- هدر و منوی اصلی
- بخش معرفی اولیه یا Hero
- معرفی خدمات
- مزیت های کسب و کار
- نمونه کارها
- نظرات مشتریان
- سوالات متداول
- فرم درخواست مشاوره
- فوتر
در یک فروشگاه اینترنتی ساختار ممکن است متفاوت باشد:
- منو و جستجو
- بنر اصلی
- دسته بندی ها
- محصولات پرفروش
- تخفیف ها
- محصولات جدید
- مزایای خرید
- مطالب آموزشی
- فوتر
در این مرحله هنوز لازم نیست تصاویر واقعی، فونت برند یا رنگ دکمه ها مشخص باشند.
چرا قبل از طراحی سایت وایرفریم می سازیم؟
مهم ترین مزیت وایرفریم این است که می توان ساختار صفحه را زمانی اصلاح کرد که تغییر آن هنوز سریع و کم هزینه است.
فرض کنید طراح از ابتدا وارد طراحی گرافیکی صفحه اصلی شود و پس از چند روز مشخص شود بخش مهمی مانند نمونه کارها باید قبل از معرفی خدمات قرار بگیرد.
در این شرایط ممکن است بخش بزرگی از طراحی نیاز به بازنگری داشته باشد.
اما اگر همین تغییر در وایرفریم انجام شود، معمولا فقط کافی است چند کادر جابه جا شوند.
Balsamiq نیز هدف وایرفریم را ایجاد یک طرح اولیه برای بحث، تست و دریافت بازخورد پیش از شروع کدنویسی معرفی می کند.
مهم ترین مزایای وایرفریم در طراحی سایت
مشخص شدن ساختار قبل از طراحی
تیم پروژه پیش از ورود به جزئیات بصری می داند هر صفحه از چه بخش هایی تشکیل شده است.
تمرکز روی تجربه کاربری
رنگ و تصویر می توانند توجه افراد را از مشکلات ساختاری منحرف کنند. وایرفریم ساده باعث می شود تمرکز روی نیاز کاربر باقی بماند.
کاهش تغییرات پرهزینه
جابه جایی یک بخش در وایرفریم بسیار ساده تر از تغییر همان قسمت پس از طراحی یا برنامه نویسی است.
هماهنگی میان کارفرما و طراح
کارفرما می تواند ساختار صفحات را پیش از اجرای نهایی بررسی و تایید کند.
کمک به تیم تولید محتوا
وقتی وایرفریم مشخص باشد، نویسنده می داند برای هر صفحه چه نوع محتوایی لازم است.
کمک به برنامه نویس
توسعه دهنده تصویر روشن تری از اجزا، فرم ها و رفتارهای مورد نیاز صفحه خواهد داشت.
انواع وایرفریم
وایرفریم ها معمولا براساس میزان جزئیات به سه سطح تقسیم می شوند.
وایرفریم Low Fidelity چیست؟
Low Fidelity Wireframe ساده ترین نوع وایرفریم است.
ممکن است فقط شامل:
- کادر
- خط
- عنوان
- دکمه ساده
- جای تصویر
- یادداشت
باشد.
این نوع وایرفریم را حتی می توان با مداد روی کاغذ طراحی کرد.
کاربرد Low Fidelity
برای:
- بررسی ایده اولیه
- جلسه با کارفرما
- مقایسه چند ساختار
- مشخص کردن مسیر کاربر
- تصمیم گیری سریع
مناسب است.
در این مرحله دقت پیکسلی اهمیت ندارد.
وایرفریم Mid Fidelity چیست؟
Mid Fidelity Wireframe جزئیات بیشتری دارد و ساختار صفحه واقعی تر نمایش داده می شود.
مواردی مانند:
- اندازه تقریبی بخش ها
- عنوان واقعی بعضی قسمت ها
- محل دکمه ها
- ساختار فرم
- ترتیب محصولات
- نحوه نمایش کارت ها
می توانند مشخص شوند.
معمولا رنگ های زیاد و تصاویر واقعی هنوز وارد طرح نمی شوند.
وایرفریم High Fidelity چیست؟
High Fidelity Wireframe نسبت به دو مدل قبلی جزئیات بیشتری دارد و به طراحی نهایی نزدیک تر است.
ممکن است شامل:
- متن واقعی
- ابعاد دقیق عناصر
- ساختار کامل فرم
- آیکون ها
- جزئیات منو
- حالت های مختلف صفحه
باشد.
با این حال، اگر طراحی شامل رنگ بندی نهایی، تصاویر، تایپوگرافی و هویت کامل برند شود، معمولا دیگر وارد محدوده Mockup یا UI Design شده ایم.
Figma نیز وایرفریم ها را براساس میزان Fidelity به سطوح مختلف تقسیم می کند و تاکید دارد که در نسخه های ابتدایی، سادگی کمک می کند تیم روی ساختار و جریان کاربر تمرکز کند.
تفاوت وایرفریم و Mockup چیست؟
این دو اصطلاح گاهی به جای یکدیگر استفاده می شوند، اما هدف متفاوتی دارند.
وایرفریم
روی ساختار تمرکز دارد.
در وایرفریم مشخص می شود:
- چه چیزی کجا قرار دارد؟
- چه اطلاعاتی مهم تر است؟
- کاربر چه مسیری دارد؟
Mockup
روی ظاهر نهایی تمرکز دارد.
در Mockup موارد زیر مشخص می شوند:
- رنگ ها
- فونت ها
- تصاویر
- آیکون ها
- استایل دکمه ها
- سایه ها
- فاصله دقیق عناصر
به زبان ساده:
Wireframe = اسکلت صفحه
Mockup = ظاهر نهایی صفحه
Balsamiq نیز تفاوت اصلی را همین موضوع می داند؛ وایرفریم ساختار و عملکرد را مشخص می کند، در حالی که Mockup بیشتر نشان می دهد محصول نهایی از نظر بصری چگونه خواهد بود.
تفاوت وایرفریم و Prototype چیست؟
Prototype یا نمونه اولیه برای شبیه سازی تعامل کاربر ساخته می شود.
برای مثال در Prototype ممکن است:
- روی منو کلیک کنید.
- صفحه دیگری باز شود.
- Modal نمایش داده شود.
- فرم مراحل مختلف داشته باشد.
- مسیر ثبت نام قابل آزمایش باشد.
Prototype می تواند ساده یا بسیار شبیه نسخه نهایی باشد.
تفاوت اصلی:
| مورد | هدف |
|---|---|
| Wireframe | مشخص کردن ساختار |
| Mockup | مشخص کردن ظاهر |
| Prototype | آزمایش تعامل و مسیر کاربر |
| سایت نهایی | محصول واقعی و قابل استفاده |
گاهی Wireframeهای چند صفحه ای به یکدیگر متصل می شوند و یک Prototype ساده می سازند.
وایرفریم در چه مرحله ای از طراحی سایت ساخته می شود؟
فرایند طراحی سایت می تواند براساس نوع پروژه متفاوت باشد، اما معمولا ترتیب منطقی به این شکل است:
1. شناخت کسب و کار
ابتدا باید مشخص شود:
- کسب و کار چه خدماتی دارد؟
- مخاطبان چه کسانی هستند؟
- هدف سایت چیست؟
- سایت قرار است چه نتیجه ای ایجاد کند؟
قبل از طراحی ساختار باید مدل کسب و کار روشن باشد. در مقاله آموزش راه اندازی کسب و کار اینترنتی این مرحله از شناخت ایده و مشتری تا انتخاب زیرساخت بررسی شده است.
2. مشخص کردن صفحات
برای مثال:
- صفحه اصلی
- درباره ما
- خدمات
- صفحه هر خدمت
- نمونه کار
- مقالات
- تماس با ما
3. معماری اطلاعات
ارتباط میان صفحات و ساختار منو مشخص می شود.
4. تعیین مسیر کاربر
بررسی می شود کاربر چگونه از صفحه ورودی به هدف اصلی برسد.
5. طراحی وایرفریم
جایگاه بخش ها و ترتیب محتوا مشخص می شود.
6. طراحی UI
رنگ، فونت، تصاویر و هویت بصری روی ساختار تایید شده اجرا می شوند.
7. پیاده سازی
طراحی به سایت واقعی تبدیل می شود.
8. تست
عملکرد سایت در موبایل، مرورگرهای مختلف و مسیرهای کاربر بررسی می شود.
وایرفریم صفحه اصلی سایت چگونه طراحی می شود؟
قبل از ساخت وایرفریم صفحه اصلی باید مشخص شود کاربر در اولین ورود باید چه چیزی بفهمد.
معمولا بخش اول باید پاسخ دهد:
- این کسب و کار چه کاری انجام می دهد؟
- برای چه کسی مناسب است؟
- مزیت اصلی چیست؟
- کاربر بعد از آن چه اقدامی انجام دهد؟
برای مثال ساختار وایرفریم می تواند این باشد:
هدر
- لوگو
- منو
- شماره تماس
- دکمه مشاوره
Hero
- عنوان اصلی
- توضیح کوتاه
- CTA
- تصویر
خدمات
سه یا چهار خدمت اصلی
مزایا
دلایل انتخاب مجموعه
نمونه کارها
چند پروژه منتخب
فرایند همکاری
مراحل انجام پروژه
نظرات مشتریان
برای اعتمادسازی
سوالات متداول
پاسخ به اعتراضات اصلی
CTA نهایی
فرم یا دکمه درخواست مشاوره
هدف این ساختار ایجاد مسیر منطقی از شناخت تا اقدام است.
وایرفریم سایت فروشگاهی چه بخش هایی دارد؟
در طراحی سایت فروشگاهی وایرفریم اهمیت بیشتری دارد؛ زیرا فقط صفحه اصلی مطرح نیست و کاربر باید یک مسیر کامل خرید را طی کند.
باید برای این صفحات وایرفریم جدا طراحی شود:
- صفحه اصلی
- دسته بندی
- نتایج جستجو
- صفحه محصول
- سبد خرید
- تسویه حساب
- حساب کاربری
وایرفریم صفحه محصول
برای مثال:
- مسیر Breadcrumb
- گالری تصاویر
- نام محصول
- قیمت
- انتخاب رنگ یا سایز
- وضعیت موجودی
- دکمه افزودن به سبد
- ارسال و ضمانت
- توضیحات
- مشخصات
- نظرات
- محصولات مرتبط
ترتیب این عناصر باید براساس نیاز مشتری محصول طراحی شود.
برای فروشگاه پوشاک، سایز و رنگ مهم هستند. برای تجهیزات صنعتی ممکن است مشخصات فنی در اولویت قرار بگیرند.
وایرفریم سایت شرکتی چگونه است؟
در طراحی سایت شرکتی معمولا هدف اصلی معرفی مجموعه و تبدیل بازدیدکننده به سرنخ فروش است.
صفحه اصلی می تواند شامل:
- معرفی شرکت
- خدمات
- مزیت رقابتی
- مشتریان
- نمونه پروژه ها
- آمار واقعی
- فرایند همکاری
- مقالات
- فرم درخواست مشاوره
باشد.
در وایرفریم باید مشخص شود کدام بخش ها بیشترین اهمیت را برای مشتری دارند.
برای یک شرکت مهندسی، پروژه ها و توان فنی ممکن است قبل از مقالات قرار بگیرند. در یک شرکت مشاوره، معرفی خدمات و تجربه تیم اهمیت بیشتری دارد.
وایرفریم سایت خدماتی چگونه طراحی می شود؟
در طراحی سایت خدماتی هدف معمولا فروش مستقیم آنلاین محصول نیست. کاربر ابتدا باید خدمت را بشناسد و سپس تماس یا درخواست مشاوره ثبت کند.
ساختار صفحه خدمت می تواند این باشد:
- عنوان و توضیح خدمت
- مشکل مشتری
- راه حل ارائه شده
- مزایا
- مراحل انجام
- نمونه کار
- هزینه یا روش قیمت گذاری
- سوالات متداول
- CTA
وایرفریم کمک می کند تمام صفحات خدمات ساختار منطقی و هماهنگی داشته باشند.
آیا برای نسخه موبایل هم وایرفریم جدا لازم است؟
در بسیاری از پروژه ها بله.
کوچک کردن ساده وایرفریم دسکتاپ همیشه کافی نیست.
ممکن است در موبایل:
- ترتیب بخش ها تغییر کند.
- منو متفاوت باشد.
- بعضی عناصر کنار هم قرار نگیرند.
- CTA در محل دیگری نمایش داده شود.
- فیلتر فروشگاه داخل Drawer قرار بگیرد.
- جدول به کارت تبدیل شود.
به همین دلیل طراحی Mobile-first یا حداقل بررسی مستقل نسخه موبایل اهمیت دارد.
پس از پیاده سازی نیز باید صفحات با روش های مختلف تست شوند. مقاله تست رسپانسیو بودن سایت به بررسی سایت در عرض های مختلف، Chrome DevTools و دستگاه واقعی می پردازد.
وایرفریم را با چه ابزاری طراحی کنیم؟
برای ساخت وایرفریم ابزارهای مختلفی وجود دارند.
Figma
Figma یکی از ابزارهای شناخته شده طراحی رابط کاربری و همکاری تیمی است.
می توان با آن:
- وایرفریم ساخت.
- کامپوننت ایجاد کرد.
- چند صفحه را به هم متصل کرد.
- کامنت دریافت کرد.
- Prototype ساخت.
- طراحی نهایی UI را انجام داد.
Figma ابزارها و منابع مخصوص Wireframing نیز ارائه می دهد.
FigJam
FigJam برای ایده پردازی، User Flow و وایرفریم های ابتدایی مناسب است.
در جلسات تیمی می توان ساختار صفحات را سریع تر بررسی کرد.
Balsamiq
Balsamiq به صورت تخصصی روی Low Fidelity Wireframe تمرکز دارد.
ظاهر عناصر عمدا ساده طراحی شده تا اعضای تیم به جای رنگ و جزئیات گرافیکی روی ساختار تمرکز کنند. Balsamiq خود این محصول را ابزاری برای ساخت سریع وایرفریم و هماهنگی پیش از توسعه معرفی می کند.
کاغذ و قلم
برای اولین ایده ها حتی به نرم افزار نیاز ندارید.
یک وایرفریم دستی می تواند برای:
- جلسه اولیه
- Brainstorm
- مقایسه چند چیدمان
- توضیح ایده
کاملا کافی باشد.
هدف کیفیت گرافیکی وایرفریم نیست؛ هدف مشخص شدن ساختار است.
آیا وایرفریم باید به کارفرما نمایش داده شود؟
در پروژه های حرفه ای بهتر است ساختارهای اصلی قبل از طراحی نهایی با کارفرما هماهنگ شوند.
اما لازم است کارفرما بداند وایرفریم طرح نهایی نیست.
ممکن است وایرفریم:
- خاکستری باشد.
- تصاویر واقعی نداشته باشد.
- فونت نهایی مشخص نباشد.
- ظاهر ساده ای داشته باشد.
بازخورد این مرحله نیز بهتر است درباره ساختار باشد.
برای مثال:
- «بخش نمونه کار باید زودتر نمایش داده شود.»
- «کاربر باید قیمت را راحت تر پیدا کند.»
- «فرم بیش از حد طولانی است.»
نه اینکه:
- «رنگ این کادر را دوست ندارم.»
رنگ در مرحله UI بررسی می شود.
وایرفریم خوب چه ویژگی هایی دارد؟
یک Wireframe مناسب باید:
- هدف صفحه را مشخص کند.
- ترتیب محتوا را نشان دهد.
- CTA اصلی را مشخص کند.
- ساختار ناوبری را نشان دهد.
- عناصر غیرضروری نداشته باشد.
- مسیر کاربر را قابل فهم کند.
- قابل اصلاح باشد.
- جزئیات متناسب با مرحله پروژه داشته باشد.
Figma نیز تاکید می کند وایرفریم نباید بیش از حد زود وارد تصمیمات بصری نهایی شود؛ زیرا هدف اصلی آن ایجاد فضای مناسب برای بررسی ساختار و دریافت بازخورد است.
اشتباهات رایج در طراحی وایرفریم
شروع مستقیم با طراحی گرافیکی
باعث می شود مشکلات ساختاری دیرتر مشخص شوند.
توجه بیش از حد به زیبایی
وایرفریم قرار نیست زیبا باشد؛ باید کاربردی باشد.
استفاده از متن بی معنی در همه بخش ها
Lorem Ipsum برای بعضی قسمت ها مناسب است، اما عنوان اصلی یا CTA بهتر است مفهوم واقعی داشته باشند؛ زیرا طول و معنی محتوا روی ساختار تاثیر می گذارند.
طراحی فقط صفحه اصلی
صفحات داخلی، فرم ها، محصول، سبد خرید و حالات خطا نیز اهمیت دارند.
نادیده گرفتن موبایل
ساختاری که در دسکتاپ خوب است ممکن است در موبایل مناسب نباشد.
اضافه کردن امکانات بدون هدف
هر Carousel، Tab یا Popup باید دلیل مشخصی داشته باشد.
ساخت وایرفریم بدون شناخت مشتری
بدون شناخت رفتار کاربر نمی توان اولویت اطلاعات را درست مشخص کرد.
آیا همیشه به وایرفریم نیاز داریم؟
خیر. میزان جزئیات فرایند به اندازه پروژه بستگی دارد.
برای یک لندینگ بسیار ساده ممکن است یک Sketch سریع کافی باشد.
اما هرچه پروژه پیچیده تر باشد، اهمیت وایرفریم بیشتر می شود.
وایرفریم برای این پروژه ها بسیار مفید است:
- فروشگاه اینترنتی
- سایت شرکتی بزرگ
- سامانه خدماتی
- پنل مدیریت
- داشبورد
- اپلیکیشن موبایل
- سامانه رزرو
- بازارگاه
- پلتفرم آموزشی
در پروژه ای که ده ها صفحه و User Flow دارد، شروع مستقیم برنامه نویسی بدون ساختار اولیه می تواند تغییرات زیادی در ادامه ایجاد کند.
وایرفریم چقدر باید جزئیات داشته باشد؟
پاسخ به مرحله پروژه بستگی دارد.
در جلسه ایده پردازی، چند کادر ساده کافی است.
هنگام تحویل به طراح UI یا توسعه دهنده ممکن است نیاز باشد این موارد مشخص باشند:
- عنوان بخش
- نوع محتوا
- دکمه ها
- حالت های صفحه
- فیلدهای فرم
- ساختار Navigation
- رفتار بعضی عناصر
نباید Wireframe را آن قدر کامل کرد که عملا زمان طراحی UI دوباره در آن صرف شود.
هدف، ایجاد حداقل جزئیاتی است که تیم بتواند درباره ساختار تصمیم بگیرد.
سوالات متداول
1. وایرفریم چیست؟
وایرفریم طرح ساده و اولیه یک صفحه سایت یا اپلیکیشن است که جایگاه محتوا، منوها، دکمه ها و عناصر اصلی را قبل از طراحی گرافیکی مشخص می کند.
2. تفاوت Wireframe و Mockup چیست؟
Wireframe روی ساختار و تجربه کاربری تمرکز دارد، اما Mockup ظاهر نهایی شامل رنگ، فونت، تصویر و استایل عناصر را نمایش می دهد.
3. آیا برای طراحی سایت حتما باید وایرفریم داشته باشیم؟
برای پروژه های بسیار کوچک ممکن است Sketch ساده کافی باشد؛ اما در سایت های فروشگاهی، شرکتی بزرگ و سامانه های دارای صفحات متعدد، وایرفریم می تواند از تغییرات پرهزینه در مراحل بعد جلوگیری کند.
4. بهترین ابزار طراحی وایرفریم چیست؟
Figma، FigJam و Balsamiq از ابزارهای کاربردی هستند. برای ایده اولیه حتی کاغذ و قلم نیز کافی است.
5. وایرفریم قبل از UI طراحی می شود یا بعد از آن؟
وایرفریم معمولا قبل از طراحی UI ساخته می شود. ابتدا ساختار و مسیر کاربر مشخص می شوند و سپس رنگ، فونت، تصویر و هویت بصری روی همان ساختار طراحی می شوند.
جمع بندی
وایرفریم یا Wireframe نقشه اولیه صفحات سایت است. قبل از اینکه تیم درباره رنگ ها، تصاویر و ظاهر نهایی تصمیم بگیرد، وایرفریم مشخص می کند هر صفحه چه بخش هایی دارد و کاربر چگونه میان آن ها حرکت می کند.
استفاده از وایرفریم باعث می شود مشکلات ساختاری، فرم های طولانی، CTAهای نامناسب و ترتیب اشتباه محتوا پیش از شروع طراحی نهایی شناسایی شوند.
Low Fidelity برای بررسی سریع ایده، Mid Fidelity برای مشخص کردن دقیق تر ساختار و نسخه های جزئی تر برای هماهنگی تیم توسعه قابل استفاده هستند.
در سایت فروشگاهی، وایرفریم مسیر محصول تا پرداخت را مشخص می کند. در سایت شرکتی و خدماتی نیز کمک می کند اطلاعات مهم و CTAها براساس نیاز مخاطب اولویت بندی شوند.
آژانس خلاقیت آرتا در فرایند طراحی سایت، ساختار و مسیر صفحات را قبل از ورود به جزئیات گرافیکی بررسی می کند تا طراحی نهایی فقط از نظر ظاهری جذاب نباشد و کاربر را به شکل منطقی به هدف صفحه هدایت کند.
