جلسه ی 20 آموزش فیگما / طراحی وایرفریم دسکتاپ | Desktop Wireframe in Figma

درود به شما همراهان گرامی. در این ویدئو از دوره رایگان آموزش طراحی رابط و تجربه کاربری، قصد داریم وایرفریم نسخه دسکتاپ را به صورت عملی و کاربردی برای طراحی uiux آموزش دهیم. ویدئو مجزای دیگری نیز برای طراحی وایرفریم نسخه موبایل تهیه شده است که پس از این ویدئو و در جلسه بعدی درج شده است. گاهی وقتا ممکن است یک طراح کلی زمان بگذارد و طرح را با تمام جزئیات پیاده سازی کند. اما در آخر مورد قبول کارفرما قرار نگیرد. چه اتفاقی می‌افتد؟ بدون شک کلی زمان از دست می‌رود. اما می‌توان همین روند را ابتدا با طراحی وایرفریم آغاز کرد تا تاییدیه اولیه طرح را بگیریم. سپس با خیال راحت می‌توانیم به جزئیات بیشتر مانند رنگ، استایل، تایپوگرافی، کامپوننت در فیگما و تصاویر بپردازیم. در این پکیج آموزش ui ux رایگان از آژانس نوآوری رسام قصد داریم به طراحی وایرفریم در فیگما یا همان low fidelity بپردازیم. همچنین می‌خواهیم به سوال وایرفریم چیست؟ پاسخ بدهیم. با یادگیری این مباحث زمان بیشتری را در طراحی صرفه جویی می‌کنیم. پس از شما دعوت می‌کنیم تا پایان این جلسه از آموزش ui رایگان ما را همراهی کنید. طراحی low fidelity و high fidelity همانطور که در جلسات قبل بیان شد، طراحی رابط کاربری به دو بخش low fidelity design (طراحی اسکچ و وایرفریم) و high fidelity design (طراحی پروتوتایپ) تقسیم می‌شود. البته به شکل دیگری هم می‌توان تقسیم‌بندی کرد. اینجا منظور تقسیم‌بندی از نظر حجم جزئیات است. در اسکچ و طراحی وایرفریم جزئیات وجود ندارد. رنگ‌ها، کامپوننت‌های پیچیده، تصاویر، اینترکشن‌ها و حتی ممکن است تایپوگرافی و گریدسیستم نیز با آن دقت پروتوتایپ وجود نداشته باشد. طراحی اسکچ – Sketch اسکچ یک طرح دستی است که توسط طراحان اجرا می‌شود. این طرح صرفا شامل رابط کاربری نیست. معماران، نقاشان، طراحان چهره، طراحان لوگو، حتی طراحان فرش از این روش استفاده می‌کنند تا آنچه در ذهن خود دارند را پیاده‌سازی کنند. در طراحی رابط کاربری، اسکچ مشابه سایر تخصص‌های نام برده، به صورت ساده با کاغذ و قلم اجرا می‌شود. گاهی طراحی اسکچ در ui، حاشیه‌نویسی می‌شود تا جزئیات آن بعدا بهتر یادآوری شوند. حتی ممکن است به جای متون واقعی، از خط خطی کردن استفاده شود. مشابه تصویری که می‌بینید در برخی قسمت‌ها این کار انجام شده است. اسکچ همان طرحی است که در ذهن شما قرار دارد. حالا می‌خواهید آن را روی کاغذ بیاورید. بدیهی است که این طرح، ساده است و جزئیات طراحی در آن وجود ندارد. حتی ممکن است خط و خطوط آن منظم نباشد. برخی حتی از خط‌کش هم برای ترسیم استفاده نمی‌کنند و این موضوع لزوما در طراحی اسکچ ایرادی ندارد چون قصد نداریم وقت زیادی روی آن بگذاریم. طراحی وایرفریم – Wireframe وایرفریم همان اسکچ است اما کمی خوش‌چهره تر! در واقع وایرفریم، اسکچ وارد شده به نرم‌افزار است که کمی جزئیات بیشتری نسبت به اسکچ دارد. وایرفریم‌ها نیز ممکن است برخی ساده‌تر طراحی شده و برخی نیز کمی جزئیات بیشتری داشته باشند. اما چیزی که در همه طراحی وایرفریم‌ها مشترک است، نبودن رنگ‌بندی، تصاویر، اینترکشن‌ها و کامپوننت‌های پیچیده و هرچیزی که اجرای آن پروژه را زمان‌بر کند. اگر بخواهیم برای اجرای طراحی وایرفریم یک دلیل بیاوریم، باید بگوئیم که وایرفریم و یا به طور کل طراحی low fidelity باعث می‌شود در هزینه و زمان صرفه‌جویی کنیم. ما وقتی طراحی را به صورت وایرفریم در فیگما اجرا می‌کنیم، با هزینه و زمان بسیار کمتری، کل طراحی جلو می‌رود. سپس گفتگو با برنامه‌نویسان، سایر اعضای تیم طراحی محصول و به طور کل ذینفعان و کارفرما، به ما کمک می‌کند تا از خطاها و مشکلات احتمالی در آینده، تا جای ممکن جلوگیری کنیم. این نگاه پیش‌گیرانه، خصوصا در محصولات بزرگ‌مقیاس، کمک بسیاری در پیشبرد کار و صرفه‌جویی در منابع و نیروی انسانی را به همراه خواهد داشت. بسیاری از طراحان حرفه‌ای قبل از طراحی سایت (بدون اینکه کارفرما از آن‌ها طرح اولیه یا وایرفریم خواسته باشد) ممکن است یک طرح اسکچ یا وایرفریم با جزئیات کمتر برای پیشبرد بهتر کار خود پیاده سازی کنند. وایرفریم در چه مرحله ای از فرآیند UX طراحی می‌شود؟ بعد از انجام پرسونای مشتری و تحقیقات کاربری، بدیهی است که هنوز با اجرای ui فاصله داریم. موضوعات دیگری همچون دسترسی‌پذیری، کاربردپذیری و معماری اطلاعات نیز باید انجام شود. (البته برخی از این موارد بعد از ui نیز دنبال می‌شوند و چرخه ux همیشه برقرار است). وایرفریم بعد از معماری اطلاعات انجام می‌شود. یعنی زمانی که شما تست‌های Card Sorting و طراحی Useflow را انجام داده‌اید. ✅ هر سوالی داشتید در بخش کامنت ها بپرسید و این آموزش را برای دوستان علاقمند خود ارسال کنید. موفق باشید🌹 uiux uiux design uiuxfigma uiux tutorial for beginners figma figma tutorial figma tutorial for beginners figma tutorial step by step figma course figma 2025 figma color style فیگما آموزش فیگما آموزش uiux آموزش uiux با فیگما رابط کاربری تجربه ی کاربری طراحی سایت آموزش رایگان uiux آموزش رایگان فیگما آموزش فیگما پروژه محور آموزش فیگما برای طراحی سایت آموزش فیگما 2025 آموزش فیگما فارسی آموزش کامل فیگما و uiux ✅ جلسه ی قبل👇    • جلسه ی 19 آموزش فیگما / کامپوننت و واریانت...   #فیگما #رابط_کاربری #تجربه_کاربری #دوره_رایگان_ui #دوره_رایگان_ux #آژانس_نوآوری_رسام #علیرضا_حمداللهی #آموزش_فیگما #کاربردپذیری #طراحی_سایت #وایرفریم #figma #uiux #uiuxdesign #ui_design #ux_design #Alireza_Hamdollahi #ui #ux #usability #typography #autolayout #wireframe