همه چیز درمورد وایر فریم

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

مزایای طراحی وایر فریم:

۱٫ مشخص شدن عناصر مورد نیاز:

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

۲٫ هماهنگی با مشتری:

زمانی که وایر فریم پروژۀ خود را در اختیار مشتری قرار دهید به او این امکان را می‌دهید تا قبل از نهایی شدن کار بتواند نظراتش را اِعمال کند. باز طراحی یک وایر فریم از یک طرح نهایی آسان‌تر است.

۳٫ صرفه جویی در زمان:

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

چگونه یک وایر فریم طراحی کنیم؟

آسان‌ترین راه استفاده از کاغذ و قلم است. با بررسی قالب‌های مختلف وبسایت، اپلیکیشن یا اینفوگرافیک‌ها به یک ایدۀ ذهنی برسید و آن را روی کاغذ پیاده کنید.

وابیر فریم

راه دیگر استفاده از نرم‌افزارهایی مانند Sketch, Pencil Project, Affinity Designer, Photoshop و … که در مقاله‌های بعدی درمورد نحوۀ کار با این نرم‌افزار‌ها توضیح خواهیم داد.

وایر فریم دیجیتال

نکات طراحی وایر فریم:

۱٫ استفاده از اَشکال هندسی:

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

۲٫ از پرداختن به جزییات بیش از حد بپرهیزید:

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

وایر فریم ساده

۳٫ از رنگ استفاده نکنید:

در طراحی وایر فریم سعی کنید فقط از رنگ‌های سفید، سیاه و خاکستری استفاده کنید.

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

1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (18 5, میانگین: 5٫00 از 5)
Loading...

12 دیدگاه

  • فردو

    بسیار عالی
    در چه مرحله ای ارتباط بین طراح وایر فریم و برنامه نویس برقرار می شود؟

    • مائده امیری

      طراح بر اساس یک قالب های استاندار وایر فریم را طراحی میکنه و بعد طرح رو به برنامه نویس ارائه میکنه. در مرحله بعد که طرح رو با مشتری به اشتراک گذاشت، اگر مشتری تغییرات ساختاری تو طرح ایجاد کرد مجدد باید با طراح هماهنگ بشه.

  • حیدرزاده

    بسیار عالی و کارامد👌

    • مائده امیری

      خیلی متشکرم.

  • ابراهیم مرتضوی اصل

    جالب بود ممنون

    • مائده امیری

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

  • SA

    مفید بود
    ممنون

    • مائده امیری

      تشکر☺

  • محمدرضا

    عالی.. مثل مطالب قبلی👌

    • مائده امیری

      تشکر☺

  • مسعود

    بسیار عالی بود استفاده کردم

    • مائده امیری

      خیلی ممنون که وقت گذاشتید و مطالعه کردید ☺

  • نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *