وایرفریمینگ برای طراحی ریسپانسیو

با توجه به اینکه خیلی‌ها با موبایل وب‌گردی می‌کنن، دیگه طراحی ریسپانسیو یه انتخاب نیست؛ اجباره! سایت باید روی هر دستگاهی—دسکتاپ، لپ‌تاپ، تبلت و موبایل—خوب دیده بشه. وایرفریم هم یکی از مهم‌ترین قدم‌ها برای رسیدن به یه طراحی ریسپانسیو درسته.

وایرفریم‌های ریسپانسیو مجموعه‌ای از وایرفریم‌ها هستن که نسخه‌های مختلف یه صفحه رو برای اندازه‌های مختلف نشون می‌دن. یعنی کمک می‌کنن ببینی محتوا چطور روی عرض‌های مختلف شبکه (Grid) تغییر می‌کنه و ساختار صفحه چطور تطبیق پیدا می‌کنه.

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

ریسپانسیو چیه؟

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

الان (مثل سال ۲۰۲۱ که تو آمارش گفته) بیشتر از نصف کاربران اینترنت با موبایل میان. ولی واقعیت اینه که اکثر مردم از چند دستگاه استفاده می‌کنن.

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

• Gridهای سیال
• عکس‌های منعطف
• Media Query

و نتیجه‌ش یه UX خوب برای همه‌ست؛ چه از مانیتور بزرگ بیان چه از موبایل کوچیک.

شناسایی محتوای سایت

محتوا دلیل اصلیه که کاربر وارد سایت می‌شه. پس اولین کار اینه که مشخص کنی سایت چه نوع محتواهایی خواهد داشت.

مثلاً تو یه سایت فروشگاهی، ممکنه لازم باشه:

• صفحه اصلی
• دسته‌بندی‌ها
• صفحه جزئیات محصول
• صفحه سبد خرید
• صفحه تأیید سفارش

بعدش باید مشخص کنی تو هر صفحه چه بخش‌هایی اجباریه و چه بخش‌هایی اختیاری. مثلاً صفحه اصلی معمولاً هدر، منوی اصلی، بنر، فوتر و … داره.

تعریف جریان کاربر (User Flow)

بعد از اینکه فهمیدی هر صفحه چه محتوایی داره، باید جریان کاربر رو طراحی کنی. یعنی مسیرهایی که کاربر برای رسیدن به هدفش طی می‌کنه.

این کار کمک می‌کنه بفهمی به چه وایرفریم‌هایی نیاز داری و چطوری باید به هم وصل بشن.

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

انتخاب گرید (Grid)

Gridهای انعطاف‌پذیر جزء پایه‌های طراحی ریسپانسیو هستن. از Grid برای دسته‌بندی محتوا و ایجاد نظم استفاده می‌شه.

طراح‌ها معمولاً از گرید ۱۲ ستونه استفاده می‌کنن، چون به راحتی به ۲، ۳، ۴ یا ۶ بخش قابل تقسیمه. اینجا عرض ستون ثابت می‌مونه ولی تعداد ستون‌ها بسته به دستگاه کم و زیاد می‌شه:

• ۱۲ ستون: دسکتاپ
• ۸ ستون: تبلت
• ۴ ستون: موبایل

گریدهای دیگه هم وجود دارن و بسته به نوع محصول و محدودیت‌ها می‌تونی انتخاب کنی.

عرض معمول ستون‌ها بین ۶۰ تا ۸۰ پیکسله، که معمولاً تعیین‌کننده عرض محتواست.

تعیین اندازه صفحه‌ها و لایه‌ها

بعد از انتخاب گرید باید تعیین کنی برای چه اندازه‌هایی طراحی می‌کنی. حداقل باید برای سه حالت طراحی کنی:

• دسکتاپ
• تبلت
• موبایل

می‌تونی از فریم‌ورک‌های آماده مثل Bootstrap و Foundation هم کمک بگیری که Breakpointهای پیش‌فرض دارن.
مثلاً:

• تبلت عمودی بوت‌استرپ: ۷۶۸px
• موبایل: ۴۸۰px یا کمتر

اگه تو ابزار طراحی کار می‌کنی، Breakpointها رو دستی تنظیم می‌کنی، ولی وقتی به کدنویسی می‌رسی باید با Media Query پیاده‌سازی بشن.

تعیین نواحی محتوا (Content Zones)

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

برای هر Template ریسپانسیو باید یه Zone Diagram بسازی. این زون‌ها مشخص می‌کنن چه نوع محتوایی قرار خواهد گرفت و ساختار کلی صفحه چطوریه.

اضافه کردن محتوا و عناصر UI

وقتی از ساختار راضی شدی، کم‌کم محتوای واقعی و عناصر UI رو اضافه کن.
به این موارد توجه کن:

• ترتیب نمایش اطلاعات چطور باشه؟
• کدوم بخش‌ها بیشتر دیده می‌شن؟
• اسکن صفحه برای کاربر سریع و راحته؟

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

همچنین تست کن که طرح روی اندازه‌های مختلف دستگاه چطور نمایش داده می‌شه.
ذهنیت «اول موبایل» خیلی کمک می‌کنه.

فقط صفحه‌های کلیدی رو وایرفریم کن

لازم نیست تک‌تک صفحات ممکن رو وایرفریم کنی؛ فقط مهم‌هاش کافیه. وایرفریم فقط باید انقدر اطلاعات بده که بشه تصمیم‌گیری کرد و ساخت واقعی شروع بشه.

وقتی ساختار اصلی جواب داد، می‌تونی وارد مراحل بعدی (مثل طراحی و کدنویسی) بشی.

اشتراک‌گذاری با تیم و مشتری

وقتی وایرفریم‌های ریسپانسیو آماده شد، حتماً با تیم توسعه و مشتری به اشتراک بذار.
مزیت‌ها:

• درک شکل نهایی راحت‌تر می‌شه
• می‌تونن طرح رو روی اندازه‌های مختلف تست کنن
• توسعه‌دهنده‌ها دقیقاً می‌فهمن چی باید بسازن

خیلی وقت‌ها حتی می‌تونن بخش‌هایی از کد رو از ابزار وایرفریم بردارن.
مشتری هم باید تایید کنه اولویت‌بندی محتوا درست هست یا نه.

نکته حرفه‌ای:
به هر صفحه یک شماره بده تا صحبت‌ها و بررسی‌ها راحت‌تر بشه.