دوره جامع UI و UX – طراحی با فیگما

طراحی رابط کاربری (UI) و تجربه کاربری (UX) روحِ یک وب‌سایت یا اپلیکیشن است. اگر به دنیای طراحی علاقه دارید و می‌خواهید از یک ذوق ساده به یک تخصص پول‌ساز برسید، این دوره همان نقشه راهی است که نیاز دارید. ما در این دوره، بدون نیاز به هیچ پیش‌نیاز فنی یا کدنویسی، شما را از قدم صفرِ طراحی با نرم‌افزار قدرتمند فیگما (Figma) تا رسیدن به یک طراح متخصص همراهی می‌کنیم. این دوره نه تنها یک آموزش تئوری، بلکه یک تجربه کاملاً پروژه‌محور برای ورود مستقیم شما به بازار کار است.

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

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

حالت دوم روشی است که طرح اولیه و کلی ( یا همان ذهنیت ) روی کاغذ پیاده شده و تحویل UI کار داده شود . در این حالت ، UI کار به کمک نرم افزارهای طراحی همچون AdobeXd یا Figma طرح روی کاغذ را به یک طرح گرافیکی تبدیل خواهد کرد که کاملا دارای رنگ و لعاب است و بخوبی تمامی جلوه‌ها و صفحات سایت را نمایش می‌دهد . مزیت این روش این است که شخص فرانت‌اند کار تماما به جزئیات کار آگاه است و دقیقا طرح تحویلی از UI کار را ، تبدیل به قالب خواهد کرد . معایب این روش نیز در این است که کمی بازه طراحی سایت افزایش پیدا خواهد کرد و ممکن است چند روز پروسه کلی کار عقب بیفتد اما ارزش عقب افتادن را دارد !

چرا طراحی UI و UX یکی از پول‌سازترین مشاغل دنیاست؟

امروزه همه کسب‌وکارها برای دیده شدن به یک چهره‌ی جذاب و کارآمد نیاز دارند. طراح UI و UX کسی است که هم زیبایی بصری (UI) را خلق می‌کند و هم مسیرِ کار کردن کاربر با سایت (UX) را به شکلی طراحی می‌کند که مخاطب از گشت‌وگذار در آن لذت ببرد. برخلاف برنامه‌نویسی که درگیر پیچیدگی‌های کد و باگ‌های فنی است، شما در این مسیر خالقِ تصوی و احساس برند هستید. به همین دلیل، طراحی در فیگما یکی از بهترین گزینه‌ها برای درآمد دلاری است؛ چرا که نمونه‌کارهای شما در سایت‌هایی مثل Dribbble یا Pinterest نیاز به هیچ ترجمه یا توضیحی ندارند و زبانِ بین‌المللیِ طراحی، همان چیزی است که کارفرماهای خارجی به دنبال آن هستند.

پیشنهادی : دوره آموزش CSS ، جامع و تضمینی ، نابغه CSS

پس طراحی UI یک شغل و یک شغل پردرآمد است ! امروزه متاسفانه بسیاری از وب سایت ها جلوه و قالب مشابه دارند خصوصا در کشور ما که طراحان وب سایت یا کارفرمایان علاقه ندارند تا هزینه مختصری را به UI کار پرداخت نموده و طرح بسیار جذابی را تحویل بگیرند !

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

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

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

آبا UI به تنهایی کافی است یا باید UX نیز یاد گرفت ؟

میتوان گفت UI و UX هردو در کنار هم معنی پیدا خواهند کرد . در گام اول شما باید به روش های طراحی و همچنین اصول UI اشراف داشته باشید . در مرحله دوم باید حین طراحی ، موضوع UX را نیز درنظر بگیرید . اما UX چیست ؟

اول از بحث UI شروع کنیم ! UI مخفف User Interface است یعنی رابط کاربری ! به عبارت ساده یعنی هرچیزی که مخاطب شما در ظاهر سایت شما مشاهده می کند ، شامل دکمه ها ، باکس ها ، فرم ها ، رنگ این المان ها و محل قرارگیری آنها ! اما UX چیست ؟

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

فصل اول دوره ، سیر تا پیاز مباحث UI و UX

فصل اول این دوره هرچیزی که از UI و UX نیاز دارید را خدمتتان ارائه خواهد کرد . در مبحث یوآی موارد بسیار زیادی وجود دارند که باید به آنها شناخت داشته باشید . برای مثال چند نوع آیکون مختلف در زمینه طراحی وجود دارد و هر آیکون را باید در چه پروژه هایی به کار برد . یا برای مثال چند نوع خانواده فونت کاربردی وجود دارد و چه وزن هایی برای چه طراحی هایی مناسب است .

چگونه میتوانیم تصاویر خوب و باکیفیت را برای پروژه دانلود و یا خرید کنیم و در پروژه به شکل درست استفاده کنیم . یا برای مثال مباحثی همچون روانشناسی رنگ که بسیار اهمیت دارد و باید دقیقا بدانیم که چه رنگ هایی باید بایکدیگر تناسب داشته باشند و در یک طرح به کار بروند . برای هریک از این مباحث 1 الی 2 قسمت اختصاص داده شده است تا شما با سیر تا پیاز هر مورد آشنا شوید .

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

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

طراحی با فیگما

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

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

روش آموزش از قدم صفر است ، یعنی ذهنیت بر این است که مخاطب ما حتی با روش دانلود و نصب نرم افزار نیز آشنایی ندارد و لذا از این جهت آسوده خاطر خواهید بود . مباحث نیز گام به گام تدریس شده است به شکلی که ابتدا با تمامی المان ها و ویژگی هایی که میتوان روی آنها اعمال کرد آشنا خواهید شد و کم کم به سمت مباحث پیشرفته تر همچون Grid System و Auto Spacing و Auto Layout و … خواهیم رفت .

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

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

این دوره دقیقاً برای چه کسانی طراحی شده است؟

این دوره هیچ پیش‌نیازی ندارد. اگر تا به حال حتی یک خط کد هم ننوشته‌اید، اصلاً نگران نباشید؛ چون این مسیر، مسیرِ کدنویسی نیست. این دوره برای افرادی طراحی شده که:

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

پس می‌توانید همین حالا و بدون هیچ ترس و استرسی این دوره را شروع کنید … البته مجدد محتوای چند خط بالاتر را فراموش نکنید ، این دوره قرار نیست هرچیزی که در دنیا وجود دارد را به شما آموزش دهد! خلاقیت ، ذوق و کمی استعداد در ذهن طراح شما ، مسبب این خواهد بود تا از این دوره در قالب یک طراح کاربلد خارج شوید .

در این دوره چه مهارتی کسب خواهید کرد؟

ما در این دوره، از مبانیِ تئوری طراحی شروع می‌کنیم. یاد می‌گیریم که چطور رنگ‌شناسی و تایپوگرافی را به شکلی اصولی در طراحی‌هایمان پیاده کنیم. سپس سراغِ یادگیریِ تخصصیِ فیگما می‌رویم. شما یاد می‌گیرید چگونه وایرفریم (Wireframe) بکشید، چگونه اجزای سایت (دکمه‌ها، فرم‌ها، باکس‌ها) را حرفه‌ای طراحی کنید و چطور پروتوتایپ‌های تعاملی بسازید که کارفرما حس کند با یک سایت واقعی طرف است. در نهایت، شما یاد می‌گیرید که چگونه ایده‌های ذهنی خود را به صورت تصاویر باکیفیت و جذاب درآورده و آماده پیاده‌سازی توسط تیم‌های برنامه‌نویسی کنید.

چرا این دوره متفاوت است؟

بسیاری از دوره‌ها فقط ابزار را آموزش می‌دهند، اما ما در این دوره، «خروجی‌گرا» حرکت می‌کنیم. هر چیزی که در این ۱۵ ساعت ویدیو آموزش داده شده، با نگاه به بازار کار انتخاب شده است. یعنی شما قرار نیست وقت‌تان را با ابزارهای غیرکاربردی تلف کنید. تمام اصولِ UI و UX که آموزش می‌دهیم، بر پایه تجربه‌های واقعیِ پروژه‌هایی است که نیازِ مخاطب را درک می‌کنند. پشتیبانی این دوره نیز در کنار شماست تا اگر در هر مرحله‌ای به چالشی برخورد کردید، مسیرتان متوقف نشود.

چرا همین حالا باید یادگیری UI و UX را شروع کنید؟

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

مهم‌ترین برتری یک طراح UI و UX نسبت به بسیاری از مشاغل دیگر، قابلیت «نمایش سریع نتیجه» است. شما نیازی ندارید منتظر بمانید تا یک سایت کامل کدنویسی و راه‌اندازی شود تا بتوانید کارتان را ببینید؛ طرح‌های شما از همان روزهای اولِ آموزش، به‌صورت تصویری درخشان قابل ارائه هستند. همین موضوع باعث می‌شود بتوانید نمونه‌کارهای خود را در کمترین زمان ممکن در سایت‌های معتبر بین‌المللی مانند Dribbble و Pinterest منتشر کنید و نظر کارفرماهای داخلی و خارجی را به سمت خود جذب کنید.

در دنیای امروز، دیگر طراحی ظاهری یک سایت فقط یک «امتیاز اضافه» نیست؛ بلکه یک انتظار اصلی از هر کسب‌وکار آنلاین است. کاربران با دیدن یک رابط کاربری حرفه‌ای، کیفیت و اعتبار برند را هم قضاوت می‌کنند. به همین دلیل، یادگیری اصول UI و UX نه‌تنها یک مهارت فردی، بلکه یک سرمایه‌گذاری هوشمندانه برای آینده شغلی شماست.

ترکیب مهارت طراحی با دانش فنی

هرچه در این دوره جلوتر بروید، بهتر درک خواهید کرد که یک طراح UI و UX موفق، فقط کسی نیست که طرح‌های زیبا می‌کشد؛ بلکه کسی است که بتواند با تیم فنی (فرانت‌اند کاران و برنامه‌نویسان) درست ارتباط برقرار کند و نیازهای واقعی کاربر را در طراحی خود لحاظ کند. این همان دیدگاه حرفه‌ای است که کارفرماهای امروزی به دنبال آن هستند. اگر این مهارت را با درکی عمومی از نحوه عملکرد وب‌سایت‌ها همراه کنید، تبدیل به یک طراح کاملاً حرفه‌ای و چندبعدی خواهید شد که در هر تیمی ارزشمند است.

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