قبل از شروع آموزش Adobe Xd بهتر است مروری داشته باشیم بر تجربه و رابط کاربری:

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

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

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

نکته
نمونه لندینگ پیج طراحی شده با Adobe Xd و کد شده را می توانید در صفحه طرح ضیافت دانش مشاهده کنید

معرفی نرم افزار Adobe Xd

آموزش Adobe Xd
آموزش adobe xd

نرم افزار Adobe Xd یک ابزار طراحی رابط و تجربه کاربری مبتنی بر بردار برای اپلیکیشن های موبایل و وب است که توسط کمپانی ادوبی توسعه داده شده است. این ابزار برای ویندوز و مکینتاش در دسترس است. البته نسخه هایی هم برای آی او اس و اندروید برای نمیاش زنده پروژه ارائه شده است. این نرم افزار قبلا با عنوان project comet شروع به فعالیت کرد که در سال ۲۰۱۶ ابتدا برای سیستم عامل مکینتاش و سپس برای ویندوز ۱۰ با عنوان Adobe Experience Design به صورت بتا عرضه شد.

نکته
با عضویت در کانال @learnxd مطالب رایگان از جمله آموزش، کیت طراحی و آخرین اخبار را دریافت و اطلاعات خود را در زمینه Adobe Xd بروز نگه دارید.

تفاوت ادوبی Adobe Xd نسبت به Adobe Photoshp:

شاید سوالی که برای کاربران بوجود می آید این است که مگر Adobe Xd چه امکانات و ویژگی هایی دارد که باید نرم افزار معروف فتوشاپ را رها کرده و به سراغ این نرم افزار که تازه وارد عرصه طراحی رابط و تجربه کاربری شده برویم. اجازه دهید اشاراتی به تفاوت این دو نرم افزار شرکت ادوبی داشته باشیم:

تفاوت ادوب ایکس دی نسبت به Adobe Photoshp
تفاوت ادوبی Adobe Xd نسبت به Adobe Photoshop

شبکه تکرار یا Repeat grid: امکان تکرار عناصر(لایه یا گروه) در adobe xd بسیار ساده است و می توان به راحتی لیست و یا گالری تصویر ایجاد و آن را ویرایش کرد اما در فتوشاپ این کار کمی وقت گیر و سنگین است.

انیمیشن: ادوبی فتوشاپ امکان انیمیشن را به صورت خیلی محدود به کاربر میدهد اما adobe xd می تواند انیمیشن های جذابی که در موبایل و وب استفاده می شود را به طرح بدهد و طرح را زنده تر، پویاتر و جذاب تر نمایش دهد.

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

تعامل با سایر ابزارها: adobe xd میتواند فایل های ایلاستریتور، فتوشاپ، اسکچ و افترافکتز را باز کند بعلاوه می تواند به سایر نرم افزارهای مرتبط مثل مایکروسافت تیم، جیرا و زپلین متصل شود. در ضمن امکان انتقال پروژه از مکینتاش به ویندوز هم به راحتی امکان پذیر است.

طراحی و تعامل صوتی: طراحی و تعامل با پروژه Adobe Xd می تواند به صورت صوتی باشد که به جای کلیک کاربر با فرمان صوتی به بخش های مختلف پروژه حرکت کند

کامپوننت: یکی از بخش های جالب Adobe Xd بخش کامپوننت است که قبلا با عنوان سمبل شناخته می شد به این ترتیب می توانید عنصر خود را ایجاد و در تمام بخش پروژه یا پروژه های خود استفاده و آن را سفارشی کنید و کامپوننت استفاده شده در تمام پروژه را یکباره ویرایش کنید.

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

پلاگین ها: با توجه به اینکه هر توسعه دهنده می تواند برای Adobe Xd پلاگین بنویسد. ایکس دی دامنه وسیعی از پلاگین های مختلف و کاربردی را دارد که از طراحی گرفته تا انیمیشن و نمونه سازی را شامل می شود.

اشتراک و بازخورد: کاربران Adobe Xd این امکان را دارند که پروژه خود را به اشتراک بگذارند و از کاربران و یا تیم خود بازخورد بگیرند

ویرایش همزمان: برای کاربران Adobe Xd که روی یک فایل میخواهند کار کنند این امکان فراهم است که همزمان طراحی کنند و همه افراد به صورت زنده تغییران سایر افراد هم داشته باشند.

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

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

آنچه در دوره آموزش adobe xd خواهید آموخت:

در این دوره تمام مباحث مرتبط با طراحی در Adobe Xd را فراخواهید گرفت، کار با تمام ابزارها و تنظیمات، تکنیک های مختلف طراحی، رسم نمودار منحنی و دایره ای و در طی دوره چند پروژه کوچک طراحی را هم با هم طراحی خواهیم کرد. می توانید سر فصل های دوره را مشاهده کنید.

  • فصل اول: مقدمات

    • تعریف رابط و تجربه کاربری
    • درباره دوره
    • درباره مدرس
    • معرفی نرم افزار adobe xd
    • مقایسه Adobe xd و Adobe Photoshop
    • پیش نیازهای دوره
    • سیستم مورد نیاز
    • نصب از طریق ادوبی کلود
    • نصب دستی Adobe Xd
    • پنجره خوش آمد گویی
    • معرفی محیط Adobe Xd
    • بزرگنمایی و جابجایی در سند Adobe xd
    • مفهوم رنگ ها در دنیای دیجیتال
  • فصل دوم: طراحی

    • ابزار چهارضلعی و تنظیمات آن
    • مفهوم لایه ها و گروه بندی
    • رنگ محتوا و حاشیه
    • سایه ها
    • ساخت وایرفریم ساده پنل کاربری تنها با چهارضلعی
    • ابزار بیضی و ساخت اصولی نمودار دایره ای
    • ابزار چندضلعی و ستاره
    • ابزار خط و رسم چند آیکون
    • ویژگی چیدمان و توزیع لایه ها
    • ابزار متن و پاراگراف
    • رفع مشکل چیدمان و اعداد در زبان فارسی
    • استفاده از فونت آیکون FontAwesome
    • آرت بورد و سیستم ستونی و مربعی
    • درهم آمیزی لایه ها
    • ابزار قلم و رسم نمودار منحنی
    • تبدیل شکل ها و متن به مسیر
    • وارد کردن پروژه فتوشاپ
    • وارد کردن پروژه اسکچ
    • وارد کردن پروژه ایلاستریتور
    • وارد کردن تصاویر
    • حالت های ترکیبی لایه ها
    • ویرایش مستقیم عکس در فتوشاپ
    • طراحی پست با ساختار کاشی
    • شبکه تکرار
    • طراحی پیشخوان پنل کاربری بخش منو
    • طراحی پیشخوان پنل کاربری بخش نقشه و نمودار منحنی
    • طراحی پیشخوان پنل کاربری بخش آخرین دیدگاه ها
    • طراحی پیشخوان پنل کاربری بخش جدول سفارشات
    • استفاده از Svg
    • ویژگی بلور یا تار(blur)
    • تکنیک سایه درونی با استفاده از Blur و Mask
    • ویژگی Padding
    • رنگ ها در پنل Assets
    • استایل های متن در پنل Assets
    • کامپوننت چیست؟
    • طراحی و ایجاد کامپوننت به همراه سفارشی سازی
    • مدیریت وضعیت های کامپوننت
    • استفاده از کامپوننت برای وضعیت هاور در منو
    • کامپوننت های تور در تو یا فرزند
    • استفاده از کتابخانه CC
    • استفاده از کلود و مدیریت نسخه پروژه
    • مدیریت پلاگین یا افزونه ها
    • درباره کیت های طراحی یا UiKits
    • تعامل های نرم افزاری با adobe xd
    • واکنشگرا کردن طرح و تبدیل به تبلت و موبایل و برعکس

 

گام بعدی یادگیری آموزش adobe xd:

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

میتونین دوره پیشرفته را از لینک زیر مشاهده کنید:

دوره adobe xd

آموزش Adobe Xd – پیشرفته

پس از طی این دوره شما به صورت کامل روی Adobe Xd مسلط خواهید بود و نیاز به آموزش اضافه ای برای این نرم افزار نخواهید داشت.

۲۹۰,۰۰۰ تومان ادامه مطلب

نمونه پروژه های طراحی شده در این دوره:

چند نمونه از پروژه های طراحی شده در این دوره را می توانید مشاهده کنید:

پیشخوان پنل کاربری طراحی شده با Adobe Xd

طراحی پخش کننده در Adobe Xd
طراحی پخش کننده در adobe xd
لندینگ پیج طراحی شده در دوره Adobe Xd
لندینگ پیج طراحی شده در دوره Adobe Xd
Adobe XD