قبل از شروع آموزش Adobe Xd بهتر است مروری داشته باشیم بر تجربه و رابط کاربری:
اجازه دهید کمی در زمان به عقب سفر کنیم و یک وبسایت را طراحی کنیم. یک نفر پروژه میگرفت، فکر می کرد، طرح psd میزد و آن را کد می زد، تست می کرد و تحویل می داد و این یعنی صفر تا صد آن را یک نفر انجام میداد. اما با گذشت زمان طرح ها پیچیده تر و متنوع تر شد از طرفی در حوزه کد نویسی هم تکنولوژی های متنوعی ظهور کرد و به روز و حرفه ماندن در هر دو زمینه تقریبا غیر ممکن شد.
همه تمام کارها را یاد میگرفتد و انجام می دادند اما امروزه کارها تخصصی شده است و به افرادی می شود اعتماد کرد که در یک حوزه متخصص هستند برای همین طراحی رابط کاربری از کدنویسی جدا و مستقل شد و در مجموع علم Ui و Ux را شکل داد.
پس از آن افراد با نرم افزارهای ویرایش عکس طراحی رابط کاربری ( ویکی پدیا) انجام می دادند که چون امکانات آن مخصوص عکس و عکاسی بود این نوع نرم افزارهای سنگین و پیچیده بود و از طرفی امکانات کمی برای حوزه رابط کاربری داشتند. اما به تدریس در زمینه رابط و تجربه کاربری نرم افزارهای مختلفی پا به عرصه گذاشتند که با توجه به امکانان این نرم افزارها قدرت طراحان رابط و تجربه کاربری را چند برابر می کرد.
معرفی نرم افزار Adobe Xd
نرم افزار Adobe Xd یک ابزار طراحی رابط و تجربه کاربری مبتنی بر بردار برای اپلیکیشن های موبایل و وب است که توسط کمپانی ادوبی توسعه داده شده است. این ابزار برای ویندوز و مکینتاش در دسترس است. البته نسخه هایی هم برای آی او اس و اندروید برای نمیاش زنده پروژه ارائه شده است. این نرم افزار قبلا با عنوان project comet شروع به فعالیت کرد که در سال ۲۰۱۶ ابتدا برای سیستم عامل مکینتاش و سپس برای ویندوز ۱۰ با عنوان Adobe Experience Design به صورت بتا عرضه شد.
تفاوت ادوبی Adobe Xd نسبت به Adobe Photoshp:
شاید سوالی که برای کاربران بوجود می آید این است که مگر Adobe Xd چه امکانات و ویژگی هایی دارد که باید نرم افزار معروف فتوشاپ را رها کرده و به سراغ این نرم افزار که تازه وارد عرصه طراحی رابط و تجربه کاربری شده برویم. اجازه دهید اشاراتی به تفاوت این دو نرم افزار شرکت ادوبی داشته باشیم:
شبکه تکرار یا 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 مسلط خواهید بود و نیاز به آموزش اضافه ای برای این نرم افزار نخواهید داشت.
نمونه پروژه های طراحی شده در این دوره:
چند نمونه از پروژه های طراحی شده در این دوره را می توانید مشاهده کنید:
سلام
یه سوال دارم
بعد از طراحی سایت با ایکس دی، میشه با برنامه نویسی mvc شروع به برنامه نویسی کرد؟
ممنون میشم راهنمایی کنید