آموزش طراحی ui سایت با Adobe XD – پروژه محور

(دیدگاه کاربر 1)

(طراحی تمام صفحات یک فروشگاه اینترنتی)

تعداد جلسات: 14 جلسه

مدرس: پدرام پورزینلی
نحوه دسترسی به دوره: بعد از اتمام فرایند سفارش، میتوانید از پنل کاربری دانلود نمایید.
حداقل سیستم مورد نیاز: دوره دارای لایسنس است و برای نمایش ویدئوها شما به یک کامپیوتر ویندوزی یا مک نیاز دارید

  تومان

توضیحات

    • می‌خواهید Ui قالب وردپرسی و ووکامرسی اختصاصی خودتان را بسازید؟
    • می‌خواهید به عنوان طراح گرافیک سایت کسب درآمد کنید؟
    • می‌خواهید رابط کاربری سایت خود را به صورت حرفه‌ای شخصی‌سازی کنید؟
    • میخواهید با حقوق عالی به عنوان طراح ui سایت در یک شرکت استخدام شوید؟

با دوره‌ی ۰ تا ۱۰۰ آموزش طراحی ui سایت و فروشگاه اینترنتی، با تکیه بر قدرت نرم‌افزار ادوب ایکس دی میتوانید به تمام سوال‌های بالا جواب مثبت دهید. با این آموزش می‌توانید ظاهر هر نوع سایت خبری و فروشگاهی را با طراحی اختصاصی در نرم افزار adobe xd اجرا کنید. علاوه بر این شما یاد می‌گیرد با کمک مفاهیم اولیه بوت‌استرپ سایت خود را ریسپانسیو طراحی کنید تا بهترین نمایش را در مویایل و تبلت داشته باشد تا در زمان کد نویسی دغدغه دیگری نداشته باشید. این تمام ماجرا نیست. شاید شما بخواهید تصویر کاور ویديو و یا پست اینستاگرام طراحی کنید، که این کار را براحتی و با سرعت بالا در نرم افزار adobe xd انجام دهید. با دیدن این دوره شما می‌توانید به عنوان طراح گرافیک سایت کسب درآمد کنید.

 

ضمانت این دوره به چه صورت است؟

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

هدف از طراحی این دوره برای ما، افزایش تخصص و مهارت شماست… 


سرفصل های پکیج آموزش طراحی ui سایت با نرم افزار adobe XD:

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

 

سایر مطالبی که در این دوره با آن کار میکنیم:

  • طراحی بر اساس گرید های فریم ورک بوت استرپ
  • کار با پروتوتایپ ها
  • کار با Repeat Grid نرم افزار adobe xd
  • تشریح قسمت های مختلف وب سایت فروشگاهی

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

آموزش طراحی با Adobe XD

Adobe XD چیست؟

Adobe XD یک نرم افزار vector-based است، که برای طراحی تجربه کاربری مورد استفاده قرار می گیرد. از این نرم افزار می شود برای طراحی وبسایت ها و اپلیکشن های موبایل استفاده کرد. Adobe XD برای ویندوز و مک موجود می باشد. همچنین شامل نسخه های اندروید و ios، برای پیش نمایش طراحی ها، می باشد.

از Adobe XD، مخفف adobe experience design برای ساخت وایرفریم، پروتوتایپ برای وبسایت ها و اپلیکیشن موبایل ها استفاده می شود.

Adobe XD چه زمانی منتشر شد؟

بعد از انتشار نسخه های آزمایشی، این نرم افزار در سال ۲۰۱۷ از حالت آزمایشی خارج شد. شرکت ادوبه در این سال، نرم افزار با همین نام Adobe XD منتشر کرد.

Adobe XD به دلیل دارا بودن امکانات مختلف برای طراحی سایت و ui، همیشه گزینه خوبی برای استفاده بوده است. همچنین این نرم افزار دارای یک پلن رایگان هم می باشد.

کتابخانه های قابل اشتراک

یکی از ويژگی های خوب Adobe XD، قابلیت اشتراک فایل ها در کتابخانه های آن می باشد.اگر تغییری در یک طراحی ایجاد کنید، در کتابخانه ادوبه نیز این تغییرات اعمال می شود. اگر در یک تیم کار می کنید، این قابلیت می تواند فرایند تولید تجربه کاربری و سایت را سرعت ببخشد.

قابلیت پیش نمایش هم زمان سرعت بخش طراحی سایت

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

آموزش طراحی UI سایت با نرم افزار ADOBE XD – پروژه محور
آموزش طراحی UI سایت با نرم افزار ADOBE XD – پروژه محور

 

آموزش طراحی با Adobe XD

چرا باید از Adobe XD در طراحی سایت استفاده کنیم؟

می توانید ایده ها را اول تست کنید

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

ساخت یک تجربه کاربری یکدست

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

با یادگیری اصول طراحی در Adobe XD، طراحی سایت بهتری خواهید داشت

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

چرا از Adobe XD بعنوان جایگزین Photoshop استفاده کنیم؟

Adobe XD در مقایسه سرعت در حد فتوشاپ قرار می گیرد. اما فایل های فتوشاپ به سرعت سنگین می شوند و سرعت پایین می آید. بهینه بودن و داشتن سرعت یکی از امتیازات مهم این روز ها است. در نتیجه Adobe XD را می توان گزینه بهتری برای طراحی سایت و تجربه کاربری در نظر گرفت.

سبک بودن این نرم افزار = طراحی سایت سریع تر

همانطور که بالا گفته شد، در مقایسه با فتوشاپ، Adobe XD می تواند سرعت بیشتر داشته باشد. یکی دیگر از ويژگی های این نرم افزار کم حجم بودن فایل های آن می باشد. بطور تقریبی فایل های Adobe XD ده برابر حجم کمتری نسبت به فایل های فتوشاپ دارند. این ويژگی انتقال فایل هارا راحت تر می کند. همچنین فضای کم تری در سیستم شما خواهد گرفت. این ويژگی ها واقعا می تواند به فرایند طراحی سایت شما سرعت ببخشد. فتوشاپ به دلیل داشتن امکانات زیاد(فیلترها، تنظیمات رنگ، سه بعدی و … ) دارای حجم زیاد است که پردازش بالای سیستم را می طلبد اما Adobe Xd به دلیل اینکه به خیلی از این امکانات نیازی ندارد دارای حجم کم بوده و سرعت بالا نسبت به فتوشاپ دارد.

ساخت چند ارت بورد همزمان

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

شبکه تکرار یا Repeat grid:

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

انیمیشن:

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

پروتوتایپ یا نمونه سازی:

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

جابجایی و مرتب سازی سریع با ویژگی stacks:

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

تعامل با سایر ابزارها:

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

کامپوننت:

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

طراحی واکنش گرا:

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

پلاگین ها:

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

اشتراک و بازخورد:

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

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

 

آموزش طراحی با Adobe XD

توضیحات تکمیلی

brand

پارسه وب

1 دیدگاه برای آموزش طراحی ui سایت با Adobe XD – پروژه محور

  1. پیام

    با سلام
    واقعا عالی بود. ممنون از شما

    • پدرام (مالک تایید شده)

      سلام و عرض ادب
      خواهش میکنم. خوشحال میشم نقطه نظراتتون رو بدونم

دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.