wireframe چیست؟ این آموزش طراحی UX به شما نشان خواهد داد

اگر در نظر دارید که یک وبسایت بسازید، می‌توانید به سرعت و به آسانی یک wireframe ایجاد کنید. حتی برای انجام این کار نیاز نیست که یک طراح گرافیک باشید.

تمام آن چیزی که برای شروع نیاز دارید یک قلم و کاغذ است. (یا اگر می‌خواهید خیلی فانتزی کار کنید، می‌توانید از iPad یا iPencil استفاده کنید).

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

در اینجا چند مرحله وجود دارد که ما در این مقاله شرح خواهیم داد:

۱. تنظیم sitemap

۲. ایجاد صفحه اصلی wireframe

۳. استفاده از نشانه‌گذاری در wireframe‌ها

۴. کامپوننت‌های wireframe (سربرگ، منو، پاورقی)

۵. wireframe کردن Feature Page و Contact Page

۶. wireframe‌های واکنش‌گرای موبایل

مرحله اول: تنظیم sitemap

شروع wireframe کردن با یک sitemap خوب آغاز می‌شود. قبل از این که یک صفحه wireframe ایجاد کنید، یک sitemap به شما ساختار و اساس کار را نشان خواهد داد. به این ترتیب، شما خواهید فهمید که چه صفحاتی را می‌خواهید ایجاد کنید و چگونه همه آن‌ها به یکدیگر متصل خواهند شد.

اکثر سایت‌های کوچک به sitemap نیازی ندارند. آن‌ها معمولا فقط دارای یک لندینگ پیج یا چند صفحه مشترک مانند ویژگی‌ها، درباره و تماس با ما هستند. به محض این که وبسایت یا برنامه شما بزرگ‌تر و پیچیده‌تر شود، شما به یک sitemap نیاز خواهید داشت. sitemap مختصری از مکان‌های موجود و نحوه اتصال آن‌ها را به شما ارائه می‌دهد.

در مثالی که می‌زنیم، ما یک sitemap ساده ایجاد خواهیم کرد که فقط شامل صفحه اصلی، صفحه ویژگی‌ها و صفحه تماس با ما باشد.

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

مرحله دوم: ایجاد wireframe صفحه اصلی

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

- کادرهایی با خطوط مورب برای نشان دادن تصاویر

- خطوط افقی برای نشان دادن پاراگراف‌های متن

- و یک دایره با یک L در آن که نشان‌دهنده لوگوی شماست.

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