وایرفریم ( Wireframe ) چیست؟
در این فیلم من به این می پردازم که وایرفریم چیه و چطور باید در رابط کاربری ( UI/UX ) اون رو طراحی کنیم. در واقع شما قبل از طراحی رابط یا تجربه کاربری و یا اینکه بصورت کلی در طراحی اپلیکیشن و یا وبسایت می آیید و ساختار کلی صفحه یا Layout آن را پیاده سازی می کنید.
به عبارت دیگر در طراحی Wireframe اسکلت طرح را می کشید که متوجه بشوید عناصر در صفحه در کجا قرار می گیرند.
همچنین در این فیلم تجربه خودم را در ارائه وایرفریم به کارفرما را به شما نیز می گوییم که در چه زمانی باید به کارفرما وایرفریم ارائه بدهید و چه زمانی این کار را انجام ندهید.
در آموزش وایرفریم چیست و چطور یک Wireframe برای UI و UX بکشیم، چه مواردی بررسی می شود؟
موضوعاتی که در فیلم آموزشی بررسی می شود شامل:
- 00:42 | Wireframe یا وایرفریم چیست؟
- 01:15 | روش های کشیدن وایرفریم
- 01:42 | پیشنهاد شما برای کشیدن وایرفریم کدام ابزار است؟
- 02:12 | چند نوع وایرفریم داریم؟
- 03:04 | کاربرد و مزایای وایرفریم کشیدن چیست؟
- 03:56 | مراحل و روش من برای کشیدن وایرفریم
- 04:36 | در طراحی دیجیتال وایرفریم چه نکاتی را رعایت کنیم؟
- 05:19 | ابزارهای کشیدن وایرفریم
- 05:59 | معرفی کیت های وایرفریم برای دانلود
- 06:15 | نکته و تجربه کاری در ارائه وایرفریم به کارفرما
- 08:16 | نکاتی در استفاده از وایرفریم کیت ها در ابتدای کار
- 08:45 | معرفی سرویس کشیدن وایرفریم بالزامیک – Balsamiq
- 09:49 | معرفی سرویس رایگان کشیدن وایرفریم ویمسیکال – Whimsical
- 10:28 | کشیدن یک وایرفریم فروشگاه اینترنتی در سرویس Whimsical
- 15:11 | معرفی و دانلود وایرفریم کیت رایگان
وایرفریم کیت رایگان را از کجا دانلود کنم؟
Wireframe Kit که در فیلم آن را معرفی کردم را می توانید از طریق لینک زیر آن را دانلود کنید
همچنین می توانید وایرفریم کیت Platforma را از سایت سازنده اش خریداری کنید.
وایرفریم در طراحی رابط و تجربه کاربری ( UI/UX ) چه فایده‌ای دارد؟
طراحی وایرفریم در رابط کاربری یا طراحی وبسایت به این دلیل انجام می شود که قبل از اینکه شما وارد مرحله طراحی اصلی کار ( ویژوال در رابط کاربری ( UI/UX ) یا کد نویسی در طراحی وب ) بشوید بتوانید مشکلات طرح را پیدا کرده و آن ها را رفع کنید.
وایرفریم‌ها روی این موضوعات تمرکز دارند:
- چگونگی عملکرد محصول
- اولویت‌های نسبی اطلاعات و عملکردها
- قوانین نمایش انواع اطلاعات
- اثر سناریوهای مختلف روی نمایش محصول
در نتیجه, با اینکار شما از وارد شدن هزینه های زیاد برای باز طراحی یا رفع یک مشکل در زمان طراحی کار جلوگیری می کنید.
چند نوع وایرفریم داریم؟
وایرفریم‌ها سطوح مختلفی از جزئیات دارند و از جهت اینکه چقدر به محصول نهایی نزدیک باشند، عموما به دو دسته Low-fidelity و High-fidelity تقسیم می‌شوند.
وایرفریم‌های دسته اول یک طرح و مدل اولیه هستند که به سرعت تهیه شده و برای ایجاد ارتباطات تیم در یک پروژه و استفاده در مراحل اولیه پروژه کاربرد دارد؛ در اینجا خبری از محتوای متنی و تصاویر نیست و برای مثال، به جای استفاده از تصاویر واقعی، یک مستطیل نگهدارنده استفاده می‌شود.
دسته دوم وایرفریم‌هایی هستند که اغلب برای مستندسازی به کار می‌روند و از آنجا که در سطح بالایی مطابق با طراحی صفحه وب واقعی ساخته می‌شوند، ایجادشان مدت زمان بیشتری طول می‌کشد.
از چه ابزارهایی برای کشیدن وایرفریم برای طراحی رابط کاربری ( UI/UX ) استفاده کنیم؟
بطور کلی شما از هر ابزاری که بشود چیزی با آن کشید می توانید برای کشیدن وایرفریم استفاده کنید، حال این می تواند یک قلم و کاغذ ساده باشد تا اپلیکیشن ها طراحی.
در زیر من چند ابزار و سرویس برای طراحی و کشیدن وایرفریم به شما معرفی میکنم، بعضی از این سرویس ها دارای حالت رایگان هستن که می توانید به تعداد محدود برای کشیدن Wireframe از آن ها استفاده کنید.
- ابزار های طراحی رابط کاربری ( UI/UX )
- Adobe XD
- Figma
- Sketch
- سرویس های آنلاین طراحی وایرفریم
چطور در دوره های آموزشی طراحی شما ثبت نام کنیم؟
از جمله این دوره ها که در حال ضبط و آماده سازی است می توان به
- آموزش طراحی رابط کاربری – UI Design
- آموزش طراحی تجربه کاربری – UX Design
- آموزش صفحه آرایی کتاب، مجله و روزنامه با ایندیزاین
- آموزش طراحی گرافیک با فتوشاپ
این دوره ها در حال آماده سازی است اما شما می توانید با ثبت ایمیل خود از طریق لینک زیر در این دوره ها پیش ثبت نام کنید.
کسانی که قبل از انتشار دوره ها ایمیل خودشان را ثبت می کنند، از امتیاز هایی برخوردار می شوند.
گروه تلگرام برای بحث و تبادل نظر در حوزه دیزاین رابط و تجربه کاربری
این گروه تلگرامی با هدف رفع اشکال و راهنمایی طراحان UI/UX و طراحان محصول ایجاد شده است. برای عضویت در این گروه بر روی لینک زیر کلیک کنید.
عضویت در گروه تلگرام UIXFamily
کانال تلگرام برای معرفی کتاب ها و نکات کاربردی و آموزش های مختلف
شما می توانید با عضویت در کانال تلگرامی AsteriXarts به محتوای تخصصی در حوزه دیزاین و به خصوص UI/UX دسترسی داشته باشید. برای عضویت بر روی لینک زیر کلیک کنید:
دوره آموزش جامع طراحی رابط کاربری ( UI Design ) - Learnuix.ir
عضویت در کانال تلگرام AsteriXarts
آموزش های اختصاصی طراحی در اینستاگرام
همچنین شما می توانید با دنبال کردن کانال AsteriXarts در اینستاگرام، به محتوا تخصصی در حوزه دیزاین، بیزینس، فریلنسینگ و … دسترسی داشته باشید. برای دنبال کردن کانال بر روی لینک زیر کلیک کنید:
دنبال کردن AsteriXarts در اینستاگرام
خبرنامه هفتگی دیزاین شامل مقالات، آموزش ها و منابع کمکی طراحی
بهترین مقالات، فیلم های آموزشی در حوزه دیزاین و به خصوص UI/UX و منابع کمکی طراحی را هر پنجشنبه در ایمیل خود داشته باشید. برای عضویت در این خبرنامه می توانید از طریق فرمی که در پایین همین صفحه قرار دارد، ثبت نام کنید و یا اینکه از طریق لینک زیر در وبسایت dexigner news عضو خبرنامه شوید.
عضویت در خبرنامه هفتگی دیزاین Dexigner News
طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟
همچنین برای اینکه قسمت های بعدی آموزش طراحی UI/UX و دیگر آموزش های پایه طراحی و دیزاین را از دست ندهید می توانید علاوه بر عضویت در خبرنامه وبلاگ، در کانال یوتیوب نیز عضو شوید تا از جدیدترین فیلم های آموزشی ما سریعا مطلع شوید.
نظر شما در مورد آموزش تئوری رنگ ها در طراحی رابط کاربری و گرافیک – صفر تا صد – قسمت اول چیست؟ در بخش نظرات برای ما بنویسید که به چه موضوعی بیشتر در طراحی و دیزاین علاقه دارید تا بیشتر در مورد آن محتوای آموزشی تولید شود.
لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( UI/UX ) در وبلاگ من:
آموزش طراحی UI/UX با Figma از صفر در 30 دقیقه با مثال کاربردی
آموزش جامع Figma – کار با ابزارها و محیط فیگما 2021 – قسمت اول
آموزش جامع Figma – کار با پنل Design در فیگما 2021 –قسمت دوم
10 ترفند فوق العاده کاربردی فیگما 2021 – قسمت اول
آموزش طراحی یک عنصر با بینهایت حالت با Variants در Figma
5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت اول
5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت دوم
آموزش جامع طراحی Adobe Xd – محیط ظاهری و آرتبورد ها – قسمت اول
آموزش طراحی شکل های مختلف و تنظیمات آنها در Adobe Xd – قسمت دوم
آموزش ابزار متن و فارسی نویسی در Adobe Xd – قسمت سوم
آموزش کار با تصاویر و ماسک کردن در Adobe Xd – قسمت چهارم
آموزش طراحی آیکان با Pathfinder در Adobe Xd – قسمت پنجم
آموزش Adobe XD – معرفی 5 پلاگین فوق العاده کاربردی – قسمت دوم
معرفی 5 پلاگین فوق العاده کاربردی برای Adobe Xd- قسمت اول
آموزش Adobe Xd - یک دکمه برای همه جا در طراحی رابط کاربری
10 افزونه فوق العاده کاربردی برای طراحان رابط کاربری
آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟
آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟
چطور طرح رابط کاربری را در اختیار برنامه نویس و کارفرما قرار دهیم؟
لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟
اصطلاحات طراحی رابط کاربری – بخش اول: رنگها
آموزش UI/UX : اصول طراحی رابط کاربری برای تلویزیون