چگونه + چرا باید از یک الگوی Wireframe وب سایت استفاده کنیم


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

هر دو نوع وایر فریم به همان اندازه بخش مهمی از روند طراحی و تکرار هستند.

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

الگوی فریم ورک وب سایت چیست؟

الگوی فریم ورک وب سایت

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

یک الگوی wireframe وب سایت یک کیت شبه UI است که به جای اجزای رابط کاربر ، عناصر سیم سیم را تشکیل می دهد. بسیاری از قالب ها از “کیت UI wireframe” به اسم استفاده می کنند ، اگرچه دقیقاً دقیقاً همان چیزی نیستند که هستند. (اما منظور را فهمیدی.)

یک الگوی wireframe برای Sketch یا Adobe XD یا Photoshop است. الگویی که انتخاب می کنید باید با ابزار و گردش کار شما مطابقت داشته باشد.

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

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

5 دلیل استفاده از الگوی Wireframe

الگوی wireframe

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

  1. الگوهای Wireframe در وقت شما صرفه جویی می کند ، و به شما کمک می کند تا به سرعت و به شکلی حاضر بتوانید ایده آل شوید.
  2. Wireframes به شما کمک می کند نقص های طراحی و مشکلات قابلیت استفاده را در ابتدای کار مشاهده کنید.
  3. قالب های Wireframe به شما کمک می کند در مورد انواع مختلف صفحات و عناصر صفحه فکر کنید ، بنابراین چیزی را ترک نمی کنید.
  4. Wireframes پایه و اساس طراحی جامد ایجاد می کند.
  5. قالب های Wireframe می توانند در دراز مدت به عنوان روشی برای کمک به مشتریان در درک یک طرح بدون سرمایه گذاری در یک مدل کامل ، در دراز مدت پس انداز شما کنند.

نحوه استفاده از یک الگوی Wireframe

اکثر قالب های wireframe مانند کیت های UI با عناصری کار می کنند که می توانید در نرم افزار مورد نظر خود حرکت کنید.

استفاده دقیق به ابزار شما بستگی دارد.

اکثر قالب های واید فریم دارای صفحاتی هستند که عموماً به خوبی ساخته شده اند ، بنابراین فقط باید در طرح کلی پروژه خود تغییرات ساده ای ایجاد کنید.

من تمایل دارم گزینه کشیدن و رها کردن را دوست داشته باشم. فایل های لایه فتوشاپ نیز زیبا هستند. اما ، باز هم ، خیلی وابسته به ترجیح شخصی و گردش کار است.

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

چگونه می توان الگوی Wireframe را دریافت کرد

هنگامی که نوبت به استفاده از یک الگوی فریم ورک وب سایت می رسد ، دو انتخاب دارید:

  • خودتان را بسازید
  • یک قالب premade را بارگیری کنید

راه حل اول می تواند سفارشی ترین راه حل را به شما ارائه دهد ، اما می تواند وقت گیر باشد.

مورد دوم طیف گسترده ای از انواع مختلف قالب را ارائه می دهد و گزینه های رایگان و پریمیوم برای انتخاب وجود دارد.

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

5 قالب Wireframe برای امتحان کردن

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

کیت UI را برای طراحی زبر تمیز کنید

الگوی wireframe

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

جریان کیت Wireframe iOS

الگوی wireframe

این قالب wireframe Sketch یک شروع عالی برای مفاهیم وب سایت برنامه یا موبایل است. عناصر قاب سیم ساده و کاربردی هستند.

کیت Wireframe Wirey

الگوی wireframe

Wirey شامل الگوهای فتوشاپ و Sketch است و انعطاف پذیری سیم را برای شما فراهم می کند. این قالب شامل بیش از 200 مؤلفه و 1000 عنصر است ، بنابراین هر آنچه شما نیاز دارید درست در اینجا است.

کیت وای فای پاسخگو

الگوی wireframe

این قالب wireframe برای Figma و Sketch به گونه ای طراحی شده است که از طریق نمونه سازی اولیه ، شما را از ابتدای کار سیم کشی زود هنگام سوق دهد. این شامل تعداد زیادی بلوک و قالب برای اندازه های رومیزی ، تلفن همراه و رایانه های لوحی برای کمک به تمرکز روند تفکر پاسخگو شما است.

Wireframe UX Workflow و خالق نقشه سایت

الگوی wireframe

این قالب wireframe با گزینه هایی با صفحات و نقشه های نقشه آماده است که برای استفاده آماده هستند. در صورت نیاز به كمك كمك برای شروع ، الگویی مانند این می تواند به شما در برنامه ریزی كمك كند.

نتیجه

قالب های قالب وب سایت یکی از آن میانبرهایی است که می تواند طراحی را آسان تر کند.

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

اگر سعی نکرده اید از الگوی قاب سیم استفاده کنید ، من به همین دلیل آن را اکیداً توصیه می کنم. یکی از مثالهای بالا را بگیرید یا حتی خودتان را در نظر بگیرید که می توانید از آن استفاده کنید و از آن استفاده مجدد کنید.



Source link

آموزش طراحی سایت

برچسب ها

ممکن است به این موارد نیز علاقه مند باشید:

0 دیدگاه در “چگونه + چرا باید از یک الگوی Wireframe وب سایت استفاده کنیم”

پاسخی بگذارید

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