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

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

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

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

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

طراحی UI سایت

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

جلسه ۱۰ پیاده سازی اسلایدر بزرگ محصولات

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

جلسه ۱۱ پیاده سازی بنر تصویری چهارتایی

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

جلسه ۱۲ پیاده سازی بنر های دوتای و اسلایدر

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

جلسه ۱۳ پیاده سازی بنر یک تصویر بزرگ و اسلایدر محصولات

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

جلسه ۱۴ پیاده سازی footer جلسه اول

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

جلسه ۱۵ پیاده سازی منوی footer

• پیاده سازی منو در footer
• پیاده منوی راهنمایی خرید
• پیاده سازی منوی خدمات مشتریان
• پیاده سازی منوی با دیجی کالا
• پیاده سازی خبر نامه دیجی کالا
• پیاده سازی بخش کلید های شبکه های اجتماعی
• و غیره …

جلسه ۱۶ طراحی قالب دیجی کالا پیاده سازی بخش پشتیبانی و اتمام صفحه اصلی

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

جلسه ۱۷ طراحی قالب دیجی کالا پیاده سازی صفحه داخلی  یا sigle-product

• ساخت صفحه sigle-product
• پیاده سازی راهنمایی محصول
• پیاده سازی باکس توضیحات محصول
• پیاده سازی دگمه های شبکه های جتماعی
• پیاده سازی تصویر محصول
• پیاده سازی عنوان محصول
• پیاده سازی زیر عنوان محصول
• و غیره …

جلسه ۱۸ طراحی قالب دیجی کالا پیاده سازی صفحه داخلی  یا sigle-product جلسه دوم

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

جلسه ۱۹ طراحی قالب دیجی کالا پیاده سازی صفحه داخلی  یا sigle-product جلسه سوم پیاده سازی باکس توضیحات

• پیاده سازی باکس توضیحات محصول
• پیاده سازی عنوان توضیحات
• پیاده سازی تب های محصولات
• پیاده سازی تب مشخصات محصول
• پیاده سازی تب نظرات کاربران
• پیاده سازی تب پرسش و پاسخ
• و غیره …