iHMahmoodi
Visual Designer

آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟

What is Wireframe and how to design one in UI/UX?

آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟
آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟

وایرفریم ( Wireframe ) چیست؟

در این فیلم من به این می پردازم که وایرفریم چیه و چطور باید در رابط کاربری ( UI/UX ) اون رو طراحی کنیم. در واقع شما قبل از طراحی رابط یا تجربه کاربری و یا اینکه بصورت کلی در طراحی اپلیکیشن و یا وبسایت می آیید و ساختار کلی صفحه یا Layout آن را پیاده سازی می کنید.
به عبارت دیگر در طراحی Wireframe اسکلت طرح را می کشید که متوجه بشوید عناصر در صفحه در کجا قرار می گیرند.
همچنین در این فیلم تجربه خودم را در ارائه وایرفریم به کارفرما را به شما نیز می گوییم که در چه زمانی باید به کارفرما وایرفریم ارائه بدهید و چه زمانی این کار را انجام ندهید.

وایرفریم کیت را از کجا دانلود کنم؟

Wireframe Kit که در فیلم آن را معرفی کردم را می توانید از طریق لینک زیر آن را دانلود کنید

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

 

همچنین می توانید وایرفریم کیت Platforma را از سایت سازنده اش خریداری کنید.

 

وایرفریم در طراحی رابط و تجربه کاربری ( UI/UX ) چه فایده‌ای دارد؟

طراحی وایرفریم در رابط کاربری یا طراحی وبسایت به این دلیل انجام می شود که قبل از اینکه شما وارد مرحله طراحی اصلی کار ( ویژوال در رابط کاربری ( UI/UX ) یا کد نویسی در طراحی وب ) بشوید بتوانید مشکلات طرح را پیدا کرده و آن ها را رفع کنید.

وایرفریم‌­ها روی این موضوعات تمرکز دارند:

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

در نتیجه, با اینکار شما از وارد شدن هزینه های زیاد برای باز طراحی یا رفع یک مشکل در زمان طراحی کار جلوگیری می کنید.

 

چند نوع وایرفریم داریم؟

وایرفریم‌ها سطوح مختلفی از جزئیات دارند و از جهت اینکه چقدر به محصول نهایی نزدیک باشند، عموما به دو دسته Low-fidelity و High-fidelity تقسیم می‌شوند.

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

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

 

بعد از روشن کردن VPN یا فیلترشکن، بر روی تصویر یا لینک یوتیوب پایین کلیک کنید تا ویدیوی آموزش را ببینید

 

از چه ابزارهایی برای کشیدن وایرفریم برای طراحی رابط کاربری ( UI/UX ) استفاده کنیم؟

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

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

  1. ابزار های طراحی رابط کاربری ( UI/UX )
    1. Adobe XD
    2. Figma
    3. Sketch
  2. سرویس های آنلاین طراحی وایرفریم
    1. Balsamiq – پریمیوم با قابلیت استفاده 30 روزه رایگان
    2. Miro
    3. Whimsical

[better-ads type=”banner” banner=”8708″ campaign=”none” count=”2″ columns=”1″ orderby=”rand” order=”ASC” align=”center” show-caption=”1″][/better-ads]

 

طراحی رابط کاربری (UI/UX) را از صفر از کجا یاد بگیرم؟

شما می توانید با عضویت در کانال یوتیوب من آموزش های دیگر طراحی رابط و تجربه کاربری ( UI / UX ) را دنبال و یاد بگیرید.

عضویت در کانال آموزشی یوتیوب : Youtube.com/AsteriXarts

 

اگر سوالی در مورد طراحی رابط کاربری UI داشتید، می توانید در قسمت نظرات بپرسید تا به آن ها جواب دهم.

 

نمونه کارهای طراحی رابط و تجربه کاربری ( UI/UX )

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

همچنین می توانید نمونه کارهای من را ببینید و من را در این شبکه ها دنبال کنید.

  1. Dribbble.com/iHMahmoodi
  2. Behance.net/iHMahmoodi
  3. Instagram.com/iHMahmoodi

 

در صورتی که سوالی داشتید در قسمت نظرات بپرسید و حتما جواب خواهم داد.

عضویت در کانال آموزشی: Youtube.com/AsteriXarts

در صورتی که این ویدیو برای شما مفید بود, لطفا با دوستانتون در شبکه های اجتماعی به اشتراک بگذارید.

 

لینک مقالات فارسی طراحی رابط کاربری ( UI/UX ) در وبلاگ من:

آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟

اصطلاحات طراحی رابط کاربری – بخش اول: رنگها

آموزش UI/UX : اصول طراحی رابط کاربری برای تلویزیون

طراحی رابط کاربری موبایل 101: pixels, points و resolutions
آموزش UI/UX : تفاوت pt و px در طراحی رابط کاربری
طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ

 

 

 

خبرنامه هفتگی UI/UX
خبرنامه هفتگی UI/UX
هر هفته آموزش‌ها، مطالب و لینک های مفید در زمینه طراحی رابط و تجربه کاربری را در ایمیل خود داشته باشید!
شما در هر زمانی می‌توانید ارسال خبرنامه را لغو کنید.

 

در خبرنامه ما عضو شوید
در خبرنامه ما عضو شوید
آخرین مطالب آموزش های ما را هر هفته در ایمیل خود داشته باشید.
شما می توانید در هر زمان عضویت خود را لغو کنید.
عضویت
اطلاع از
guest
0 نظرات
Inline Feedbacks
نمایش همه‌ی نظرات