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

UI به معنی رابط کاربری و UX به معنی تجربه کاربری است.

قصد داریم تا در این دوره آموزشی شما را با اصول و سبک‌های طراحی نرم افزار البته بومی شده آشنا کنیم و فوت‌های کوزه گری این هنر و حرفه را به شما آموزش دهیم.

UI یعنی چه؟

وقتی در مورد طراحی حرف می‌زنیم اغلب مردم به طراح دیداری یا همان گرافیست فکر می‌کنند و دلیل آن این است که قابل فهم تر می‌باشد. طراحان دیداری کارشان این است که رنگ و تصاویر مناسب را انتخاب می‌کنند. لوگو را طراحی می‌کنند و … . این نوع طراحی همان چیزی است که بیشتر مردم به آن می گویند: “هنر”.

اگر طراحی دیداری هنر باشد، طراحی رابط کاربری یک علم است.

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

تعاریف متعددی از UI وجود دارد اما اگر بدانیم که UI علامت اختصاری User Interface می‌باشد، پی خواهیم برد که می‌توان UI را رابط کاربری تعریف کرد. هرجا که صحبت از کار کاربر با نرم افزار باشد، بی شک رابط کاربری حضور دارد.

پس UX یعنی چه؟

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

بله… این حس به ۱۰−۱۲ سال پیش مربوط می‌شود و حالا همه یک گوشی موبایل دارند. کسی به خاطر موبایلش احساس غرور نمی‌کند! اما این موضوع را همین الان هم می‌شود به شکل دیگری دید. فکر می‌کنید حس داشتن یک iPhone 6+ برای کسی که یک گوشی کلاسیک Nokia 2200‌ دارد چگونه است؟

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

تجربه‌کاربری یعنی نگاه به کاربرد محصول از بیرون. یعنی از همان سمتی که مردم به نحوه عملکردش نگاه می‌کنند

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

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

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

و حتما برای شما پیش آمده است که از میان چند محصول نرم افزاری یکی را انتخاب کرده اید و جالب‌تر آن که پس از نصب خیلی از نرم افزارها بدون آموزش خاصی بلد بوده‌اید با آن کار کنید!

این همان جادوی رابط و تجربه کاربری است.

مخاطبین دوره آموزش جامع UI و UX:

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

درآمد و فرصت های شغلی:

مبحث UI-UX در دنیای امروز برنامه نویسی از جایگاه ویژه ای برخوردار است و تمام تیم های برنامه نویسی حتماً و لزوماً باید یک متخصص در این زمینه را درون مجموعه خود داشته باشند . شرکت های بزرگ برنامه نویسی در ایران ،امروزه به این نتیجه رسیده اند که واگذاری کل پروژه به یک نفر که هم طراحی و کد نویسی را انجام دهد ، نتیجه خوبی ندارد و از این رو تصمیم گرفتند به صورت کاملاً تخصصی ،یعنی استخدام یک متخصص UI-UX، در این زمبنه وارد شوند .

آنچه در دوره آموزش جامع UI و UX خواهید دید:

بخش اول – آنچه که باید بدانید

•  مقدمه
•  رابط کاربری، واسط کاربری، تجربه کاربری چیست؟
•  نقشه راهی برای حرفه ایی شدن
•  فرآیند طراحی UX, UI – بخش اول – اصول طراحی پرسونا
•  فرآیند طراحی UX,UI – بخش دوم – از نقشه سفر مشتری تا تست A / B
•  فرآیند طراحی UX, UI – بخش سوم – نکاتی برای طراحی رابط کاربری
•  هرآنچه که شما به آن نیاز خواهید داشت

بخش دوم – مقدمه

• تیزر معرفی
• مهارت های یک طراح تجربه و رابط کاربری – بخش اول
• مهارت های یک طراح تجربه و رابط کاربری – بخش دوم
• معرفی Wirefirming – هر آنچه که نیاز دارید
• تمرین و کار در خانه

بخش سوم – شناخت کاربر یا کاربرپژوهی

• تیزر معرفی
• مختصری راجع به روش انجام کار
• جایگاه کاربران در طراحی تجربه کاربری
• فرضیه های طراحی و تجزیه و تحلیل داده
• دستور العمل هایی برای افزایش کیفیت طراحی
• شناخت کاربر – کاربر پژوهی
• تکنیک ها و روش های کاربر پژوهی
• کاربرپژوهی – آزمون کاربرد پذیری
• آن چیزی که از آزمون کاربرد پذیری نمی دانید!
• تکنیک های تحلیل اطلاعات حرفه ایی
• مثال کاربرپژوهی در ایران (نمونه عینی و عملی)
• خطاهای رایج در کاربر پژوهی

بخش چهارم – روانشناسی تخصصی در طراحی UI و UX

•  روانشناسی تخصصی تجربه کاربری – هدایت بصری
•  تیزر معرفی
•  روابط بصری – تئوری گشتالت
•  روانشناسی در طراحی لوگو
•  کنترل چشم کاربر – هدایت بصری
•  روانشناسی تخصصی طراحی تجربه کاربری
•  micro interaction
•  چشم طراح – چشم حقیقت بین
•  تفکر طراحی
•  روانشناسی تخصصی رنگ – تأثیر رنگ بر مخاطب
•  روانشناسی تخصصی رنگ – طراحی برای افراد مبتلا به کوررنگی
•  فضای منفی – حضور هیچ در طراحی
•  تست ۵ ثانیه ایی – آزمون شفافیت

بخش پنجم – دانش و علم طراحی

• تصویر در طراحی محصول
• چطور یک فیل را یک جا بخوریم؟!
• سبک‌های طراحی- مینیمالیسم
•  سبک‌های طراحی – طراحی تخت یا felat
•  سبک‌های طراحی – متریال دیزاین
•  طراحی اتومی – Atomic design
•  منابع مورد نیاز طراحان
•  چطور در کمتر از ۱ ساعت فتوشاپ را کاربردی یاد بگیریم؟
•  دست گرمی – طراحی آیکون IOS

بخش ششم – مبانی تایپ و کارکرد آن

• متن در طراحی محصول – تایپوگرافی
• مبانی تایپ و کارکرد آن
• تکنیک‌های خلق تایپوگرافی
• اولین همایش آینده طراحی وب- خط، محتوا ﻭ فونت فاﺭسی، ﺍﺯ گذشته تا ﺁیندﻩ

بخش هفتم – طراحی رابط کاربری با فتوشاپ 

• معرفی
• تنظیمات اولیه سند کاری
• ایجاد اشکال
• چطور پیکسل‌ها می‌توانند اشتباه کنند؟
• چگونگی ساخت اشکال زنده
• کار با استروک با استفاده از لایه‌ها
• کار با متن‌ها
• سازماندهی محتوا
• چالش خلق یک پوشش ویدیویی
• ایجاد دارایی‌های پایدار
• ایجاد شیپ های سفارشی
• استفاده از کیت‌های رایگان وایرفریم
• ساختن کیت‌های رابط کاربری سفارشی
• زخیره کردن اولیه نمونه‌ها
• آنچه که قراره خلق کنیم!
• طراحی صفحات فرود: آبمیوه فروشی
• تعادل استفاده از متن و تصویر
• طراحی اپلیکیشن: صفحه ثبت نام
• قدم به قدم با ساخت دکمه‌های فلت
• طراحی اپلیکیشن: موزیک پلیر

بخش هشتم – ساخت پروتوتایپ های کاغذی

•  معرفی بخش اول دوره؛ پروتوتایپ چیست؟
• پروتوتایپ کاغذی، آری؟ یا نه؟ (نمایش کاربردی بودن پروتوتایپ های کاغذی)
•  ویژگی های یک پروتوتایپ خوب – بخش اول
•  ویژگی های یک پروتوتایپ خوب – پروسه طراحی
•  معایب و مزایای نمونه های اولیه کاغذی
•  آنچه که قراره خلق کنیم!
•  پروسه User-Centered Design یا UCD
• ساخت عملی اولین پروتوتایپ کاغذی
• تست نمونه های اولیه کاغذی
• معرفی تمامی ابزار هایی که برای ساخت پروتوتایپ نیاز دارید
•  آموزش تبدیل PSD به پروتوتایپ با کمک invision
•  آموزش اسکچ – گوگل
• آموزش کار با ابزار آنلاین Flinto

بخش نهم – طراحی رابط کاربری و پروتوتایپ با نرم افزار Adobe XD

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

پروژه اول: نرم‌افزار گردشگری

•  طراحی رابط کاربری نرم‌افزار
•  ایجاد تعامل بین ARTBOARD ها
•  گرفتن خروجی مناسب برای Developer ها

پروژه دوم: کارگاه آموزشی FoodeX

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

پروژه سوم: کارگاه آموزشی LionPC

•  ویدیو اول طراحی UI – ایجاد اسلایدر سایت
•  ویدیو دوم طراحی UI – ایجاد محتوا سایت
•  ایجاد اتوماتیک انیمیشن در ادوب ایکس دی – درقالب پروژه LIke
•  آموزش کار با پلاگین های نرم افزار
•  مثال استفاده از animate auto
•  ساخت دکمه سوئیچ

بخش دهم – تکنیک‌های پرورش خلاقیت

• چرا دایناسورها منقرض شدند؟
•  ۳ گام اصلی حرکت به سمت خلاقیت
• مواد لازم برای پختن خلاقیت
•  ذهن چطور کار می‌کند؟
•  نیمکره‌های مغز ما و نحوه استفاده از آن
•  ۳ روش پردازش اطلاعات در افراد
•  ضمیرهای تفکر
•  روش‌های تفکر
•  مهارت‌های لازم برای تفکر خلاق
•  طوفان ایده به پا کنید!
•  تمرین‌های حرفه ایی خلاقیت در UI
•  قدم بعدی
•  ۳ کلید که کیفیت ایده را افزایش می‌دهد
•  مهندسی ارزش در طراحی محصولات نرم افزاری
•  آموزش گام به گام ساماندهی فرآیند طراحی با نقشه ذهنی
•  دیگر کاربردهای نقشه ذهنی
•  ۵ گام رسم نقشه ذهنی
•  دو روش تقویت محصولات و ایده‌های خام
•  تکنیک تجسم عینی
•  رازهای افزایش کیفیت جلسات طوفان فکری
•  فرصت‌ها را خلق یا پیدا کنیم؟
•  با این تمرینات خلاقیت و نوآوری را تمرین کنید!
•  مسئولیت‌های طراح تجربه و رابط کاربری
•  گام بعدی
•  ۳ عامل رشد خلاقیت
•  محیط کار خلاق
•  مهندسی ارزش
•  کمینه محصول پذیرفتنی MVP
•  نقش طراح تجربه و رابط کاربر در استارتاپ ها
•  ما دقیقاً چه کاری انجام می‌دهیم؟
•  معرفی منابع الهام گیری
•  ترفندهای گوگل
•  ۵ راه برای تشخیص ایده‌های عالی

بخش یازدهم – جلب توجه مخاطب با motion

• شاهکار شکست خورده
•  محصول خوب، محصول بد
•  اشیاء جالب بهتر کار می کنند.
•  طراحی بر اساس نگاه کاربر
• گرافیک حرفه ایی
• استفاده از رنگ
• ماشین حساب رنگ
• قیف تصاویر
• نکاتی راجع به تصاویر
• فضای منفی
• نوشته ها در طرح
• نکاتی نوشته متون تبلیغاتی
• ۵ انگیزاننده اصلی خرید
• کپی رایتینگ
• صفحه محصول
• Motion In UI
• روش های درگیر کردن مخاطب
• نتیجه گیری
• میکرواینتراکشن ها
• کجا از انیمیشن استفاده کنیم؟
• ۵ چیزی که باید در ۵ ثانیه اول به کاربران القا کنید.
• ابزار های طراحی
• منابع آماده انیمیشن
• کار عملی با فتوشاپ
• معرفی SVGator
• معرفی undraw
• نظر سنجی
• آموزش کار با photograph
• انیمیشن حرفه ایی در ادوب ایکس دی
• انیمیشن حرفه ایی در افتر افکت

بخش دوازدهم – تکنیک های حرفه ای تجربه کاربری در محیط استارتاپی ایران

• صحبتی با دانشجویان دوره آموزشی UX-UI
• راهنمای گام به گام استفاده از نقشه همدلی
• فرمول طلایی درک نیاز های واقعی کاربران
• دلایل عمده شکست استارتاپ های ایرانی
• دلایل عمده شکست محصولات ایرانی
• معرفی سرفصل های چالش های واقعی یک طراح UX  در ایران
• فوت و فن های کوزه گری در UX  : تفاوت دورکاری و فضای استارتاپ
• فوت و فن های کوزه گری در UX  : آموزش گام به گام نمودار BCG -بخش اول
• فوت و فن های کوزه گری در UX  : آموزش گام به گام نمودار BCG -بخش دوم
• فوت و فن های کوزه گری در UX  : دستور العمل KIID
• معرفی کتاب Hooked  :  راهنمای گام به گام ایجاد عادت در کاربران
• افزایش وفاداری مشتریان با UX
• فوت و فن های کوزه گری در UX  : تکنیک ۵ چرا – بخش اول
• فوت و فن های کوزه گری در UX  : تکنیک ۵ چرا – بخش دوم
• طراحی تجربه کاربری داده محور : کاربرد اطلاعات بر UX
• چرا و چگونه یک محصول خلق می شود؟
• فوت وفن های کوزه گری در UX  : به قابلیت های جدید ” آری بگویید”
• فوت و فن های کوزه گری در UX : تکنیک های تست محصولات
• یکی از کاربرد های گیمیفیکیشن در UX
• کاربرد پذیری در عمل – بخش اول
• کاربرد پذیری در عمل – بخش دوم
• کاربرد پذیری در عمل – بخش سوم
• سخن پایانی و چیز هایی که از قلم افتاد
• آموزش کار با Hotjar