لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش Adobe XD برای طراحی وب: اصول اساسی برای UI و UX [ویدئو]
Adobe XD for Web Design: Essential Principles for UI and UX [Video]
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
طراحی وب سایت های زیبا و واکنش گرا در Adobe XD ایجاد کنید. Adobe XD از نظر ابزارهای طراحی، چیز بزرگ بعدی است. حتی اگر مبتدی باشید، شما را شبیه یک طراح حرفه ای می کند. همین الان شروع کنید و طرح های خود را به سطح دیگری ببرید.
این دوره به شما نشان می دهد که چگونه می توانید یک وب سایت زیبا از ابتدا و بدون هیچ تجربه قبلی طراحی کنید.
این دوره تمرینات ضروری را پوشش می دهد که به شما یاد می دهد چگونه مانند یک حرفه ای کار کنید. یک پروژه طراحی وب کامل، از ابتدا تا انتها، هم نسخه دسکتاپ و هم نسخه ریسپانسیو. نحوه آماده سازی طرح برای کدنویسی؛ چگونه بفهمیم مشتریان چه می خواهند و چگونه به آنها کمک کنیم تا به اهداف خود برسند. و اصول UI و UX که به شما کمک می کند تا هر وب سایتی را بدون توجه به سبک یا مشتری طراحی کنید.
این دوره برای هر کسی که به طراحی وب علاقه مند است طراحی شده است - از مبتدی تا حرفه ای، از طراحان تا برنامه نویسان، از صاحبان مشاغل گرفته تا کسانی که به دنبال شروع یک حرفه جدید یا کسب درآمد هستند.
در پایان این دوره، شما نه تنها یک پروژه زیبا برای نمونه کار خود خواهید داشت، بلکه درک عمیقی از آنچه باعث موفقیت طراحی وب سایت می شود، خواهید داشت.
بسته کد این دوره در https://github.com/PacktPublishing/Adobe-XD-for-Web-Design-Essential-Principles-for-UI-and-UX طراحی وب سایت های مدرن در Adobe XD موجود است.
اصول UI و UX را یاد بگیرید
طرح های زیبا برای شرکت های واقعی ایجاد کنید
آموزش تهیه طرح برای کدنویسی
تمرینات ضروری که به شما یاد می دهد چگونه مانند یک حرفه ای کار کنید
چگونه طراحی را برای برنامه نویسی آماده کنیم این دوره برای هر کسی که به طراحی وب علاقه مند است طراحی شده است: از مبتدی تا حرفه ای، از طراح تا برنامه نویس، از صاحبان کسب و کار تا کسانی که به دنبال شروع یک حرفه جدید یا کسب درآمد هستند – با یا بدون هیچ تجربه قبلی شما فقط به Adobe XD نیاز دارید. این یک برنامه طراحی رایگان از Adobe است. یک پروژه طراحی وب کامل، از ابتدا تا انتها، هم نسخه دسکتاپ و هم نسخه ریسپانسیو * اصول UI و UX را بیاموزید که به شما در طراحی هر وب سایتی، بدون توجه به سبک یا مشتری کمک می کند * چگونه بفهمید مشتریان چه می خواهند و چگونه به آنها کمک کنید. به اهداف خود برسند
سرفصل ها و درس ها
شروع کار با طراحی وب
Getting Started with Web Design
معرفی
Introduction
معرفی
Introduction
پاسخ سریع به سوالات رایج
Quick Answers to Popular Questions
پاسخ سریع به سوالات رایج
Quick Answers to Popular Questions
طراحی وب - آنچه شما باید بدانید
Web design - What You Need to Know
طراحی وب - آنچه شما باید بدانید
Web design - What You Need to Know
نحوه انتخاب لایه ها مانند یک طراح حرفه ای
How to Select Layers like a Professional Designer
نحوه انتخاب لایه ها مانند یک طراح حرفه ای
How to Select Layers like a Professional Designer
تمرین: انتخاب خود را تمرین کنید
Exercise: Practice Your Selecting
تمرین: انتخاب خود را تمرین کنید
Exercise: Practice Your Selecting
در اینجا چیزی است که کدگذارها با طراحی های ما انجام می دهند
Here's what Coders Do with Our Designs
در اینجا چیزی است که کدگذارها با طراحی های ما انجام می دهند
Here's what Coders Do with Our Designs
تمرین: مهارت ها و توجه به جزئیات خود را بیازمایید
Exercise: Test Your Skills and Attention to Detail
تمرین: مهارت ها و توجه به جزئیات خود را بیازمایید
Exercise: Test Your Skills and Attention to Detail
حل تمرین قبلی
Solving the Previous Exercise
حل تمرین قبلی
Solving the Previous Exercise
سه کلید برای تبدیل شدن به یک طراح وب عالی
The Three Keys to Becoming a Great Web Designer
سه کلید برای تبدیل شدن به یک طراح وب عالی
The Three Keys to Becoming a Great Web Designer
اولین پروژه کامل طراحی وب سایت ریسپانسیو ما
Our First Complete Responsive Website Design Project
مهم ترین سوال هنگام شروع یک پروژه جدید
The Most Important Question when Starting a New Project
مهم ترین سوال هنگام شروع یک پروژه جدید
The Most Important Question when Starting a New Project
چگونه برای پروژه خود تحقیق و الهام بگیرید
How to Research/Find Inspiration for Your Project
چگونه برای پروژه خود تحقیق و الهام بگیرید
How to Research/Find Inspiration for Your Project
مهم ترین قسمت چیدمان را تنظیم کنید
Set Up the Most Important Part of the Layout
مهم ترین قسمت چیدمان را تنظیم کنید
Set Up the Most Important Part of the Layout
نوار بالا را ایجاد کنید
Create the Top Bar
نوار بالا را ایجاد کنید
Create the Top Bar
نحوه انتخاب فونت برای پروژه
How to Choose Fonts for Your Project
نحوه انتخاب فونت برای پروژه
How to Choose Fonts for Your Project
چگونه رنگ های زیبا را انتخاب کنیم
How to Choose Beautiful Colors
چگونه رنگ های زیبا را انتخاب کنیم
How to Choose Beautiful Colors
نوار بالا را سازماندهی کنید
Organize the Top Bar
نوار بالا را سازماندهی کنید
Organize the Top Bar
ساختار هدر را ایجاد کنید
Create the Structure for the Header
ساختار هدر را ایجاد کنید
Create the Structure for the Header
یک سبک برای سربرگ تنظیم کنید
Set a Style for the Header
یک سبک برای سربرگ تنظیم کنید
Set a Style for the Header
توجه به جزئیات در هدر
Attention to Detail in the Header
توجه به جزئیات در هدر
Attention to Detail in the Header
ساخت منطقه قهرمان بزرگ
Building a Great Hero Area
ساخت منطقه قهرمان بزرگ
Building a Great Hero Area
طراحی مجدد منوی دسته ها
Redesign the Categories Menu
طراحی مجدد منوی دسته ها
Redesign the Categories Menu
نحوه نمایش تمام جزئیات محصول در یک شبکه
How to Display All the Product Details in a Grid
نحوه نمایش تمام جزئیات محصول در یک شبکه
How to Display All the Product Details in a Grid
در اینجا نحوه یافتن بهترین چیدمان برای شبکه محصولات آورده شده است
Here's How You Find the Best Layout for the Grid of Products
در اینجا نحوه یافتن بهترین چیدمان برای شبکه محصولات آورده شده است
Here's How You Find the Best Layout for the Grid of Products
اولین نسخه کارت محصول را ایجاد کنید
Create the First Version of the Product Card
اولین نسخه کارت محصول را ایجاد کنید
Create the First Version of the Product Card
نسخه دوم کارت محصول
The Second Version of the Product Card
نسخه دوم کارت محصول
The Second Version of the Product Card
نسخه سوم کارت محصول
The Third Version of the Product Card
نسخه سوم کارت محصول
The Third Version of the Product Card
چگونه یک بخش سؤالات متداول تمیز و مدرن طراحی کنیم
How to Design a Clean and Modern FAQ Section
چگونه یک بخش سؤالات متداول تمیز و مدرن طراحی کنیم
How to Design a Clean and Modern FAQ Section
یک فرم ثبت نام در خبرنامه ایجاد کنید
Create a Newsletter Sign Up Form
یک فرم ثبت نام در خبرنامه ایجاد کنید
Create a Newsletter Sign Up Form
چگونه یک پاورقی زیبا طراحی کنیم
How to Design a Beautiful Footer
چگونه یک پاورقی زیبا طراحی کنیم
How to Design a Beautiful Footer
تغییرات نهایی و افکار در مورد صفحه اصلی
Final Variation and Thoughts About the Homepage
تغییرات نهایی و افکار در مورد صفحه اصلی
Final Variation and Thoughts About the Homepage
اولین پروژه کامل طراحی وب سایت ریسپانسیو ما
Our First Complete Responsive Website Design Project
نحوه ایجاد صفحات داخلی
How to Create Interior Pages
تجزیه و تحلیل چگونگی بهبود صفحه محصول
Analyzing How We can Improve the Product Page
تجزیه و تحلیل چگونگی بهبود صفحه محصول
Analyzing How We can Improve the Product Page
تنظیم طرح بندی برای قسمت بالای صفحه محصول
Setting Up the Layout for the Top Part of the Product Page
تنظیم طرح بندی برای قسمت بالای صفحه محصول
Setting Up the Layout for the Top Part of the Product Page
چگونه اطلاعات زیادی را در صفحه محصول سازماندهی کنیم
How to Organize Lots of Information on the Product's Page
چگونه اطلاعات زیادی را در صفحه محصول سازماندهی کنیم
How to Organize Lots of Information on the Product's Page
نحوه اضافه کردن جزئیات کوچک که تفاوت ایجاد می کنند
How to Add Small Details that Make a Difference
نحوه اضافه کردن جزئیات کوچک که تفاوت ایجاد می کنند
How to Add Small Details that Make a Difference
چگونه حجم زیادی از متن را مدیریت کنیم
How to Handle Large Quantities of Text
چگونه حجم زیادی از متن را مدیریت کنیم
How to Handle Large Quantities of Text
ایجاد نوار کناری
Creating the Sidebar
ایجاد نوار کناری
Creating the Sidebar
نحوه ایجاد صفحات داخلی
How to Create Interior Pages
نحوه ایجاد یک طراحی واکنش گرا
How to Create a Responsive Design
مقدمه ای بر نسخه موبایل
Introduction to the Mobile Version
مقدمه ای بر نسخه موبایل
Introduction to the Mobile Version
نحوه راه اندازی نسخه موبایل برای صفحه اصلی
How to Start the Mobile Version for the Homepage
نحوه راه اندازی نسخه موبایل برای صفحه اصلی
How to Start the Mobile Version for the Homepage
نحوه تنظیم نوار بالا برای نسخه موبایل
How to Adjust the Top Bar for the Mobile Version
نحوه تنظیم نوار بالا برای نسخه موبایل
How to Adjust the Top Bar for the Mobile Version
در اینجا نحوه ایجاد هدر برای نسخه موبایل آورده شده است
Here's How You Create the Header for the Mobile Version
در اینجا نحوه ایجاد هدر برای نسخه موبایل آورده شده است
Here's How You Create the Header for the Mobile Version
ناحیه قهرمان و دسته بندی ها را برای نسخه موبایل تغییر دهید
Modify the Hero Area and Categories for the Mobile Version
ناحیه قهرمان و دسته بندی ها را برای نسخه موبایل تغییر دهید
Modify the Hero Area and Categories for the Mobile Version
بهبود ناوبری برای تجربه موبایل
Improve the Navigation for the Mobile Experience
بهبود ناوبری برای تجربه موبایل
Improve the Navigation for the Mobile Experience
شبکه ای از محصولات مناسب برای نسخه موبایل ایجاد کنید
Create a Grid of Products Suited for the Mobile Version
شبکه ای از محصولات مناسب برای نسخه موبایل ایجاد کنید
Create a Grid of Products Suited for the Mobile Version
تکمیل شبکه محصولات – نسخه موبایل
Finishing the Grid of Products – Mobile Version
تکمیل شبکه محصولات – نسخه موبایل
Finishing the Grid of Products – Mobile Version
خواندن متن را در بخش پرسشهای متداول آسان کنید
Make the Text Easy to Read in the FAQ Section
خواندن متن را در بخش پرسشهای متداول آسان کنید
Make the Text Easy to Read in the FAQ Section
نحوه درست کردن فرم خبرنامه متناسب با نسخه موبایل
How to Make the Newsletter Form Fit the Mobile Version
نحوه درست کردن فرم خبرنامه متناسب با نسخه موبایل
How to Make the Newsletter Form Fit the Mobile Version
یک طرح بندی جدید برای پاورقی ایجاد کنید
Make a New Layout for the Footer
یک طرح بندی جدید برای پاورقی ایجاد کنید
Make a New Layout for the Footer
نتیجه گیری: نسخه موبایل تجارت الکترونیک
Conclusions: E-Commerce Mobile Version
نتیجه گیری: نسخه موبایل تجارت الکترونیک
Conclusions: E-Commerce Mobile Version
نحوه ایجاد یک طراحی واکنش گرا
How to Create a Responsive Design
طراحی ریسپانسیو برای صفحات داخلی
Responsive Design for Interior Pages
نسخه موبایل برای صفحه محصول
The Mobile Version for the Product's Page
نسخه موبایل برای صفحه محصول
The Mobile Version for the Product's Page
ساختار موبایل را برای صفحه محصول ایجاد کنید
Create the Mobile Structure for the Product's Page
ساختار موبایل را برای صفحه محصول ایجاد کنید
Create the Mobile Structure for the Product's Page
چگونه به اقلام از نظر اهمیت سبک بسازیم
How to Style Items in Terms of their Importance
چگونه به اقلام از نظر اهمیت سبک بسازیم
How to Style Items in Terms of their Importance
یک تغییر برای بهبود فروش ایجاد کنید
Create a Variation to Improve Sales
یک تغییر برای بهبود فروش ایجاد کنید
Create a Variation to Improve Sales
10٪ کار بیشتر برای 50٪ نتایج بهتر
10% More Work for 50% Better Results
10٪ کار بیشتر برای 50٪ نتایج بهتر
10% More Work for 50% Better Results
یک طرح بندی دیگر برای صفحه محصول ایجاد کنید
Create Another Layout for the Product's Page
یک طرح بندی دیگر برای صفحه محصول ایجاد کنید
Create Another Layout for the Product's Page
یک ساختار هوشمندتر برای نسخه موبایل بسازید
Make a Smarter Structure for the Mobile Version
یک ساختار هوشمندتر برای نسخه موبایل بسازید
Make a Smarter Structure for the Mobile Version
نظرات و برگه های تغذیه ایجاد کنید
Create Reviews and Nutritional Tabs
نظرات و برگه های تغذیه ایجاد کنید
Create Reviews and Nutritional Tabs
اضافه کردن جزئیات کوچک مهم
Adding Small Details that Matter
اضافه کردن جزئیات کوچک مهم
Adding Small Details that Matter
بررسی طراحی روی یک گوشی واقعی
Checking the Design on a Real Phone
بررسی طراحی روی یک گوشی واقعی
Checking the Design on a Real Phone
تغییرات باورنکردنی در هیچ زمان
Incredible Variations in No Time at All
تغییرات باورنکردنی در هیچ زمان
Incredible Variations in No Time at All
طراحی ریسپانسیو برای صفحات داخلی
Responsive Design for Interior Pages
طرح را برای کدنویسی آماده کنید
Prepare the Design for Coding
آماده سازی طرح برای کدنویسی
Preparing the Design for Coding
آماده سازی طرح برای کدنویسی
Preparing the Design for Coding
چگونه به کدنویس آنچه را که از Adobe XD نیاز دارد، بدهیم
How to Give the Coder what They Need from Adobe XD
چگونه به کدنویس آنچه را که از Adobe XD نیاز دارد، بدهیم
How to Give the Coder what They Need from Adobe XD
نحوه آماده سازی گرافیک برای کدنویسی
How to Prepare Graphics for Coding
نحوه آماده سازی گرافیک برای کدنویسی
How to Prepare Graphics for Coding
محتوای سمت سرور و گرافیک چند لایه
Server-Side Content and Multi-Layer Graphics
محتوای سمت سرور و گرافیک چند لایه
Server-Side Content and Multi-Layer Graphics
بلند شدن و دویدن با زپلین
Getting Up and Running with Zeplin
بلند شدن و دویدن با زپلین
Getting Up and Running with Zeplin
بهترین راه برای مدیریت دارایی ها برای کدنویس ها
Best Way to Handle Assets for the Coders
بهترین راه برای مدیریت دارایی ها برای کدنویس ها
Best Way to Handle Assets for the Coders
در اینجا این است که چرا ضروری است آنچه را که لازم است ارائه دهید
Here's Why it is Essential You Deliver what is Needed
در اینجا این است که چرا ضروری است آنچه را که لازم است ارائه دهید
Here's Why it is Essential You Deliver what is Needed
چگونه برنامه نویس پروژه ها را می بیند
How the Coder Sees the Projects
چگونه برنامه نویس پروژه ها را می بیند
How the Coder Sees the Projects
طرح را برای کدنویسی آماده کنید
Prepare the Design for Coding
اولین کلید برای تبدیل شدن به یک طراح وب عالی
The First Key to Becoming a Great Web Designer
اولین رکن طراحی وب سایت
The First Pillar of Web Design
اولین رکن طراحی وب سایت
The First Pillar of Web Design
بهترین تنظیمات برای یک پروژه طراحی وب
Best Settings for a Web Design Project
بهترین تنظیمات برای یک پروژه طراحی وب
Best Settings for a Web Design Project
مطالعه موردی: طرحبندیهای غیر استاندارد
Case Study: Non-Standard Layouts
مطالعه موردی: طرحبندیهای غیر استاندارد
Case Study: Non-Standard Layouts
تمرین: یک طرح بندی وب سایت استاندارد ایجاد کنید
Exercise: Create a Standard Website Layout
تمرین: یک طرح بندی وب سایت استاندارد ایجاد کنید
Exercise: Create a Standard Website Layout
چگونه عناصر وب خود را به درستی اندازه گیری کنیم
How to Size Your Web Elements Correctly
چگونه عناصر وب خود را به درستی اندازه گیری کنیم
How to Size Your Web Elements Correctly
فرمول من برای متن کامل
My Formula for Perfect Text
فرمول من برای متن کامل
My Formula for Perfect Text
مطالعه موردی: لایه های متن
Case Study: Text Layers
مطالعه موردی: لایه های متن
Case Study: Text Layers
کنتراست رنگ
Color Contrast
کنتراست رنگ
Color Contrast
مطالعه موردی: رنگ ها – قسمت 1
Case Study: Colors – Part 1
مطالعه موردی: رنگ ها – قسمت 1
Case Study: Colors – Part 1
مطالعه موردی: رنگ ها - قسمت 2
Case Study: Colors – Part 2
مطالعه موردی: رنگ ها - قسمت 2
Case Study: Colors – Part 2
نحوه تراز کردن عناصر در ناحیه قهرمان
How to Align Elements in the Hero Area
نحوه تراز کردن عناصر در ناحیه قهرمان
How to Align Elements in the Hero Area
3 قانون برای آیکون های طراحی وب
3 Rules for Web Design Icons
3 قانون برای آیکون های طراحی وب
3 Rules for Web Design Icons
مطالعه موردی: تعادل بصری
Case Study: Visual Balance
مطالعه موردی: تعادل بصری
Case Study: Visual Balance
ایده هایی در مورد اولین رکن طراحی وب سایت
Thoughts on the First Pillar of Web Design
ایده هایی در مورد اولین رکن طراحی وب سایت
Thoughts on the First Pillar of Web Design
اولین کلید برای تبدیل شدن به یک طراح وب عالی
The First Key to Becoming a Great Web Designer
کلید دوم برای تبدیل شدن به یک طراح وب عالی
The Second Key to Becoming a Great Web Designer
معرفی
Introduction
معرفی
Introduction
نکته وب سایت چیست؟
What's the Point of the Website?
نکته وب سایت چیست؟
What's the Point of the Website?
کاربر در مقابل صاحب کسب و کار
The User Versus the Business Owner
کاربر در مقابل صاحب کسب و کار
The User Versus the Business Owner
تجزیه و تحلیل در طراحی وب سایت
Analytics in Web Design
تجزیه و تحلیل در طراحی وب سایت
Analytics in Web Design
قالب ها و سازندگان وب سایت – مرگ طراح وب؟
Templates and Website Builders – the Web Designer's Death?
قالب ها و سازندگان وب سایت – مرگ طراح وب؟
Templates and Website Builders – the Web Designer's Death?
مطالعه موردی: 4 نسخه از همان وب سایت
Case Study: 4 Versions of the Same Website
مطالعه موردی: 4 نسخه از همان وب سایت
Case Study: 4 Versions of the Same Website
طرح بندی صفحه اصلی تجارت الکترونیک
E-Commerce Homepage Layout
طرح بندی صفحه اصلی تجارت الکترونیک
E-Commerce Homepage Layout
نمایش نظرات