آموزش طراحی UI سایت,طراحی قالب دیجی کالا در فتوشاپ

تا حالا به این فکر افتاده بودید که سایتی مثل دیجی کالا داشته باشید؟
یا بتونید سایتی مشابه اون رو طراحی کنید؟

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

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

شاید بارها براتون سوال پیش آمده باشد که دیجی کالا چرا انقدر رشد کرد؟

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

طراحی UI سایت

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

با چه ابزاری قالب دیجی کالا طراحی کنیم؟

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

آیا نیازی است که من فتوشاپ را بلد باشم ؟

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

مزیت های این آموزش برای من چیه؟

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

در این دوره آموزش طراحی قالب دیجی کالا چه چیز ها طراحی خواهیم کرد ؟

ما در این دوره آموزش تمام قسمت های قالب دیجی کالا به صورت کامل طراحی و پیاده سازی خواهیم کرد بخش های که باهم پیاده سازی خواهیم موارد زیر خواهد بود .
  • طراحی صفحه اصلی دیجی کالا به صورت کامل.
  • طراحی صفحه دسته بندی محصولات.
  • طراحی صفحه single product
  • طراحی صفحه سبد خرید
  • طراحی صفحه تکمیل سفارشات
  • طراحی صفحه ثبت نام
  • طراحی صفحه ورود
  • و کلی امکانات دیگه که داخل دوره آموزش داده خواهد شد.

تصویر از بخش های که طراحی خواهیم کرد.

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

صفحه اصلی قالب دیجی کالا

 

صفحه اصلی قالب دیجی کالا

صفحه داخلی  قالب دیجی کالا

 

صفحه داخلی  قالب دیجی کالا 

صفحه  آرشیو یا category قالب دیجی کالا

صفحه  آرشیو یا category قالب دیجی کالا

صفحه ورود به سایت قالب دیجی کالا

صفحه ورود به سایت قالب دیجی کالا

صفحه ثبت نام قالب دیجی کالا

صفحه ثبت نام قالب دیجی کالا

 

تمام سر فصل های دوره این قسمت قرار خواهد گرفت

جلسه اول دوره آموزش طراحی قالب دیجی کالا

  • ساخت سند برای قالب
  • معرفی عرض و ارتفاعات برای طراحی انواع قالب
  • معرفی و نصب فونت برای طراحی قالب
  • استفاده فوت آسم داخل طراحی قالب
  • تعریف شورت کدهای کوتاه برای طراحی راحتر قالب
  • تقسیم بندی سند برای طراحی
  • و غیره …

جلسه دوم پیاده سازی اعلانات بالا هدر و هدر وسط

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

جلسه سوم پیاده سازی منوی اصلی قالب دیجی کالا

  • پیاده سازی پس زمینه منوی اصلی
  • پیاده سازی متن های منو
  • پیاده سازی آیکونهای منو
  • پیاده سازی broder برای منو
  • وغیره …

جلسه ۴ پیاده سازی اسلایدر اصلی قالب دیچی کالا

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

جلسه ۵ پیاده سازی باکس های پیشنهاد شگفت انگیز

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

جلسه ۶ پیاده سازی باکس های پیشنهاد شگفت انگیز قسمت دوم

  • وارد کردن تصویر محصول
  • وارد کردن عنوان محصول
  • وارد کردن قیمت محصول
  • طراحی قیمت تخفیف محصول
  • طراحی قیمت اصلی محصول
  • طراحی مشاهده همه محصول
  • و غیره …

جلسه ۷ تکمیل پیشنهاد شگفت انگیز پیاده سازی باکس های پیشنهادی

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

جلسه ۸ پیاده سازی بنر تصویر دوتایی و اسلایدر محصولات

  • تعریف چایگاه بنر
  • استفاده از باکس با پس زمینه
  • قرار دادن دوتا بنر
  • پیاده سازی اسلایدر محصولات با عرض ۱۰۰۰ px
  • پیاده سازی باکس محصولات ساید بار
  • پیاده سازی پیشنهاد لحظه ای
  • قرار دادن تصویر
  • قرار دان عنوان
  • قرار دادن border
  • و غیره …

جلسه ۹ پیاده سازی باکس های محصولات دوم

  • ایجا باکس های محصولات
  • فاصله گذاری باکس ها
  • وارد کردن تصویر محصول
  • عنوان محصول قیمت محصول
  • استفاده از drop shadow
  • چیدن باکس های محصول کنار هم
  • و غیره …

 

نظر شما در این‌باره چیست؟

قوانین ثبت دیدگاه
دیدگاه خود را بنویسید

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

  1. زمان الله ابراهیمی مدیر امتیاز 5 از 5

    اولین کسی باشید که دیدگاهی می نویسد “آموزش طراحی UI سایت,طراحی قالب دیجی کالا در فتوشاپ”

    دی 7, 1399 - 5:59 بعد از ظهر