آموزش طراحی وب UI و UX با استفاده از Adobe XD - طراحی تجربه کاربری

UI & UX Web Design using Adobe XD - User Experience Design

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

نمای کلی

سلام، نام من دن است، من یک مربی دارای گواهینامه Adobe هستم. ما با هم می خواهیم نحوه استفاده از Adobe XD را یاد بگیریم. ما از این ابزار طراحی UX و UI برای ایجاد یک تجربه کاربری ساده با رابط کاربری زیبا استفاده خواهیم کرد.

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

هدف این دوره برای افرادی است که در طراحی تجربه کاربری جدید هستند. ما درست از ابتدا شروع می کنیم و قدم به قدم راه خود را طی می کنیم.

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

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

پروژه‌ای وجود دارد که می‌توانید در طول این کلاس تکمیل کنید که به توسعه مهارت‌های شما کمک می‌کند و چیزی برای نمونه کارها به شما می‌دهد.

اکنون زمان آن است که خود را ارتقا دهید و Adobe XD را یاد بگیرید.

الزامات چیست؟

  • به یک کپی از Adobe XD 2018 یا بالاتر نیاز دارید. یک نسخه آزمایشی رایگان از Adobe قابل دانلود است.
  • هیچ تجربه طراحی قبلی لازم نیست.
  • هیچ مهارت قبلی Adobe XD مورد نیاز نیست.

از این دوره چه چیزی می‌خواهم بگیرم؟

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

مخاطب هدف چیست؟

  • این دوره برای مبتدیان است.
  • برای افرادی که تازه وارد دنیای طراحی تجربه کاربری شده اند.
  • هیچ تجربه قبلی Adobe XD لازم نیست.
  • برای هر کسی که نیاز دارد "طراحی UX" را به مجموعه خود اضافه کند.

سلام به افراد دوست داشتنی Skillshare.

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

مشتری:

لپ تاپ خود را بیاورید - آموزش ویدیویی آنلاین.

توضیحات

طراحی جدیدی برای صفحه ویدیویی رو به رو دانش آموز خود ایجاد کنید. در اینجا نمونه ای از صفحه ای است که آنها می خواهند دوباره تصور کنند: www.bringyourownlaptop.com/xdproject

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

- گزینه B: شما می توانید همان پروژه را با ایده/کسب و کار/مشتری خود اجرا کنید.

این برای چه کسی است؟

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

لیست ویژگی (الزامات محصول)

  • پخش کننده ویدیو
    • سایت باید ویدئو محور باشد. مشاهده و حرکت به ویدیوی بعدی باید اولویت اصلی طراحی باشد.
  • پیمایش
    • صفحه اصلی، دوره ها، منابع، تماس، سوالات متداول، ورود، ثبت نام
  • عنوان دوره
  • عنوان ویدیو
  • نظرات
  • رونویسی های ویدئویی
  • نوار جستجو
  • دانلود فایل‌های مربوط به دوره «دانلود فایل‌های تمرین».

الهام بخش رقبا

  • Lynda.com
  • Teamtreehouse.com
  • Pluralsight.com

محصولات تحویلی

  • Wireframes برای تایید مشتری.
    • فایل های JPG در بخش نظرات آپلود شدند.
  • نمونه اولیه با وفاداری بالا.
    • فایل های JPG در بخش نظرات آپلود شدند.
  • نمونه سازی سیم
    • هنگامی که در حالت نمونه اولیه هستید، تمام عناصر پروژه خود را انتخاب کنید و یک اسکرین شات بگیرید تا تمام سیم های آبی نشان داده شود. بنابراین می توانیم جریان کاربر شما را ببینیم.
  • پیوندها
    • پیوندهای اشتراک گذاری برای هر دو پروژه XD با وفاداری بالا وایرفریم ایجاد کنید.
  • رفتار
    • طرح ها را در نمونه کارها Behance خود آپلود کنید تا مهارت های جدید خود را نشان دهید.

هزینه

  • شما 0 دلار بودجه دارید :) 

سرفصل ها و درس ها

درس ها Lessons

  • وایرفریم با وفاداری پایین در Adobe XD Wireframing low fidelity in Adobe XD

  • ویژگی های پنهان برای Adobe XD Repeat Grid Hidden features for Adobe XD Repeat Grid

  • نحوه استفاده از Character Styles در Adobe XD How to use Character Styles in Adobe XD

  • معایب کار با تصاویر در داخل Adobe XD The pros cons for working with images inside Adobe XD

  • تمسخر یک برنامه در Adobe XD Mocking up an App in Adobe XD

  • شروع کار با پروژه Adobe XD Getting started with your Adobe XD project

  • پروژه کلاس برای Adobe XD Class Project for Adobe XD

  • اشتراک گذاری Wireframes برای نظرات در Adobe XD Sharing Wireframes for comments in Adobe XD

  • تست کاربر UX در Adobe XD UX User Testing in Adobe XD

  • نحوه ایجاد تاری گرادیان در Adobe XD How to make a gradient blur in Adobe XD

  • نمادهای رایگان برای پروژه های Adobe XD UX UI شما Free icons for your Adobe XD UX UI projects

  • رابط کاربری UI در مقابل UX در مقابل تجربه کاربری چیست What is UI vs UX User Interface vs User Experience

  • چرا به یک شبکه ۱۲ ستونی در Adobe XD نیاز دارید؟ Why do you need a 12 column grid in Adobe XD

  • نحوه صادرات کد تصاویر از Adobe XD برای توسعه دهندگان How to export images code from Adobe XD for developers

  • نحوه ایجاد یک شبکه 12 ستونی در Adobe XD 2018 how to create a 12 Column Grid in Adobe XD 2018

  • مقدمه ای بر Adobe XD Introduction to Adobe XD

  • کار با کیت های رابط کاربری موجود در Adobe XD Working with existing UI kits in Adobe XD

  • میانبرها و برگه تقلب برای Adobe XD Shortcuts & Cheat Sheet for Adobe XD

  • کار با تایپ در وایرفریم های XD Working with type in your XD wireframes

  • نتیجه گیری برای دوره آموزشی Adobe XD Conclusion for Adobe XD training course

  • چگونه یک مدل پاپ آپ در Adobe XD با پس زمینه تار بسازیم How to make a popup model in Adobe XD with a blurred background

  • نحوه استفاده از نمادها در Adobe XD How to make use symbols in Adobe XD

  • ایجاد داشبورد کارت 12 ستونی با استفاده از ابزار تکرار گرید در Adobe XD Creating 12 column card dashboard using the repeat grid tool in Adobe XD

  • کار با رنگ های داخل Adobe XD CC Working with colors inside Adobe XD CC

  • ایجاد دکمه های واقعی در Adobe XD با ویژگی های چسباندن Creating realistic buttons in Adobe XD with paste properties

  • یک نسخه APP از پروژه Adobe XD UX خود بسازید Make an APP version of your Adobe XD UX project

  • یک نمونه اولیه ترفند جعلی عمق میدان برای ماکت One more Prototype trick faking depth of field for mockup

  • فیلم تولیدی افزودن دکمه های فیلدهای متنی در Adobe XD Production Video Adding text fields buttons in Adobe XD

  • چگونه در Adobe XD ماسک کنیم How to mask in Adobe XD

  • شخصیت مختصر پروژه زندگی واقعی ما B The brief persona for our real life project B

  • منابع Mood Boards برای طراحی رابط کاربری سلام وفاداری در Adobe UX Mood Boards resources for Hi fidelity UI design in Adobe UX

  • نحوه ایجاد دکمه های چک باکس فرم ها در Adobe XD How to create forms checkboxes buttons in Adobe XD

  • نمونه سازی پیشرفته با استفاده از منوهای کشویی دکمه ها در Adobe XD Advanced prototyping using buttons dropdown menus in Adobe XD

  • تولید ویدئو دیدگاه های دانشجویی Production video student views

  • آموزش ساخت ماکت گوشی موبایل با Adobe XD Photoshop How to make a mobile phone mockup with Adobe XD Photoshop

  • از فونت های ایمن وب یا فونت های خاص iOS یا Andriod در Adobe XD استفاده کنید Use Web safe fonts or iOS or Andriod specific fonts in Adobe XD

  • ProtoTyping افزودن تعامل به Adobe XD ProtoTyping adding interactivity to Adobe XD

  • کار با Illustrator Photoshop InDesign در Adobe XD Working with Illustrator Photoshop InDesign in Adobe XD

  • چگونه آیکون های سفارشی خود را در Adobe XD رسم کنید How to draw your own custom icons in Adobe XD

  • استفاده از شبکه تکرار در Adobe XD Using the repeat grid in Adobe XD

  • تولید داشبورد صفحه ثبت نام ویدیو Production Video Sign up screen Dashboard

  • نحوه استفاده از برنامه XD در آیفون اندروید How to use the XD App on iPhone Android

نمایش نظرات

آموزش طراحی وب UI و UX با استفاده از Adobe XD - طراحی تجربه کاربری
جزییات دوره
5h 25m
42
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
752
4 از 5
ندارد
دارد
دارد
Daniel Walter
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Daniel Walter Daniel Walter

Adobe Certified Trainer & UI/UX Expert

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

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

من یک همسر (یک دختر دوست داشتنی ایرلندی) و بچه دارم. من در بسیاری از مکان‌ها زندگی و کار کرده‌ام (همانطور که کیوی‌ها تمایل دارند) - اما بیشتر ۱۴ سال خلق و تدریس من یک موضوع مهم داشته است: همراهی دیگران برای سوار شدن در حالی که همه ما سعی می‌کنیم دنیا را با داستان‌هایمان تغییر دهیم. ، کار عشق و هنر ما.

من یک مربی معتبر Adobe (ACI) در ایرلند هستم. من همچنین یک متخصص Adobe Certified (ACE) هستم و دوره آموزشی Adobe Certified Associate (ACA) را گذرانده ام. و من فقط Adobe کار نمی کنم. به یاد داشته باشید، رسانه یک اصطلاح بسیار گسترده است - دیجیتال مرزها را شکست، بنابراین همه ما دائماً در حال یادگیری هستیم.

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

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

اکنون تمرکز من روی Skillshare است. این ماموریت من است که بهترین آموزش را برای رسانه های دیجیتال در Skillshare به شما ارائه دهم.

دانیل والتر