حراج!

آموزش طراحی صفر تا صد سایت فروشگاهی با Adobe XD و HTML و CSS

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

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

تعداد جلسات: ۴۵ جلسه

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

۱,۲۰۰,۰۰۰
۴۵۰,۰۰۰  تومان

450,000تومان

توضیحات

  • آیا میخواهید به عنوان طراح رابط گرافیک شروع به فعالیت و درآمدزایی کنید؟
  • آیا میخواهید بدون داشتن هیچ پیش زمینه ایی بر زبان های کد نویسی HTML و CSS مسلط شوید؟
  • آیا میخواهید برخی تغییرات وب سایت خود را شخصا انجام دهید؟
  • آیا میخواهید بطور کامل بر فریم ورک بوت استرپ مسلط شوید؟

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

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

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

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

” تمام قسمت های آموزشی در این دوره بصورت صفرتا صد و بدون نیاز به پیش نیاز های قبلی بوده “

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

  1. صفحه اصلی سایت
  2. صفحه تماس با ما
  3. صفحه درباره ما
  4. صفحه سوالات متداول
  5. صفحه لاگین
  6. صفحه ثبت نام
  7. صفحه سبد خرید
  8. صفحه آرشیو محصولات
  9. صفحه محصول
  10. صفحه آرشیو مقالات
  11. صفحه مقاله

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

نکته مهمی که حائز اهمیت است، اینه که تمام کد نویسی های ما توسط فریم ورک بوت استرپ کاملا رسپاسیو و واکنش گرا بوده تا بتوان در سایز های مختلف ال سی دی بطور مناسب نمایش داد. در این دوره علاوه بر اینکه از بوت استرپ برای واکنش گرایی سایت استفاده شده بلکه از قدرت آن برای تولید المان های مختلف سایت نیز استفاده شده. حتی مفاهیم فلکس باکس های CSS    ا (Flex Box) توسط کلاس های بوت استرپ توضیح داده شده است.

در این قسمت مفاهیم کلی در ارتباط با پیش پردازنده Sass نیز داده شده است تا بتوانید در پروژه های خود استفاده کنید. و همچنین از کتابخانه جی کوئری (jquery) نیز برای ساخت اسلایدر های سایت و بعضی از المان های دیگر استفاده میکنیم که در این راستا آموزش های مقدماتی این زبان نیز داده میشود.

آموزش html و css و adobe xd
آموزش html و css و adobe xd

یک هفته ضمانت بازگشت وجه، در صورت عدم رضایت شما از این دوره آموزشی

آموزش طراحی صفر تا صد سایت فروشگاهی با Adobe XD و HTML و CSS

مواردی که در این دوره آموزش داده میشود شامل موارد زیر می باشد:

  1.  آموزش کامل نرم افزار ادوب ایکس دی
  2.  آموزش کامل Html
  3.  آموزش Css به همراه مفاهیم فلکس باکس ها
  4.  آموزش کامل فریم ورک بوت استرپ ( Bootstrap ) برای  واکنش گرایی و تولید المان های حرفه ایی
  5.  آموزش پیش پردازنده Sass
  6.  آموزش سرچ در اینترنت
  7.  آموزش دیباگ کردن و رفع مشکلات کدنویسی

 

Adobe XD چیست؟

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

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

با یادگیری اصول طراحی در 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 و HTML و CSS

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

brand

پارسه وب

1 دیدگاه برای آموزش طراحی صفر تا صد سایت فروشگاهی با Adobe XD و HTML و CSS

  1. محمد

    عالی بود، بخش وردپرس دوره کی آماده میشه؟

    • پدرام

      سلام و عرض ادب
      در حال ضبط و تدوین هستیم و سعی میکنیم بزودی آماده کنیم

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *