آموزش طراحی وب برای کاربران وردپرس - آخرین آپدیت

سرفصل ها و درس ها

بیایید شروع کنیم Let's Start

• مقدمه‌ای بر طراحی وب Introduction to web design.

• معارفه: دوره و مدرس Introductions: Course & Instructor

طراحی وب چیست؟ What is Web Design?

• ۱۰ اشتباه رایج در طراحی که باید از آن‌ها دوری کنید Top 10 Design Mistakes to Avoid.

• نظر شما درباره این وب‌سایت‌ها چیست؟ What are your thoughts on these websites?

• عناصر طراحی Design elements.

• تأثیر طراحی بر کاربردپذیری و نرخ تبدیل How design impacts usability and conversions.

• چه چیزی باعث می‌شود یک سایت قابل اعتماد یا راحت به نظر برسد What makes a site feel trustworthy or easy to use.

نقش طراح در مقابل توسعه‌دهنده Designer vs. Developer Roles

• طراحان در مقابل توسعه‌دهندگان Designers vs developers.

• فرآیند کشف (Discovery Process) The Discovery Process

• استفاده از کاربرگ برای تعریف هدف سایت و مخاطبان هدف Using a worksheet to define the sites goal and target audience.

• مثال‌هایی از ویژگی‌های جمعیت‌شناختی و ایده‌های طراحی Example Demographics & Design Thoughts

• استفاده از هوش مصنوعی برای پیشنهاد فونت و رنگ Get AI to Suggest Fonts & Colors

شروع کار با وردپرس Getting Started With WordPress

• مزایای محیط توسعه محلی (Local) Benefit of a local environment.

• راه‌اندازی و شروع کار با Local Getting up and running with Local.

• قالب‌های وردپرس: قالب‌های بلوکی در برابر قالب‌های سنتی WordPress Themes - Block themes vs traditional themes.

• مبانی سئو برای وردپرس SEO Basics for WordPress

طراحی وب: فضای سفید و چیدمان WEB DESIGN:: Whitespace and Layout

• چیدمان‌های سیال در مقابل ثابت Fluid v Fixed Layouts

• چگونه فاصله‌گذاری خوانایی و تمرکز را بهبود می‌بخشد How spacing improves readability and focus.

• مدل باکس (The Box Model) The Box Model

• تئوری گرید (Grid Theory) Grid Theory

• سلسله‌مراتب بصری: اندازه Visual Hierarchy - Size

• سلسله‌مراتب بصری: رنگ Visual Hierarchy - Color

• سلسله‌مراتب بصری: اندازه، رنگ و جایگذاری Visual Hierarchy - Size, Color and Placement

• مجاورت (Proximity) Proximity

• تعادل (Balance) Balance

طراحی وب: مبانی تایپوگرافی WEB DESIGN:: Typography Fundamentals

• چگونه جفت‌فونت‌های مناسب را انتخاب کنیم How to Choose Good Font Pairs

• واحدهای فونت Font units.

• محدودکننده‌های فونت (Font Clamps) Font Clamps.

• اندازه‌های فونت Font Sizes

طراحی وب: تئوری رنگ‌ها WEB DESIGN:: Color Theory

• روانشناسی رنگ‌ها The Psychology of Color.

• کدهای هگز (Hex codes) Hex codes.

• طرح‌های رنگی Color Schemes.

• استفاده از Coolors برای ایجاد پالت رنگی Using Coolors to create a color palette.

برنامه‌ریزی ساختار محتوای اصلی Planning Core Content Structure

• ابزارهای وایرفریم Wireframe Tools

• پیاده‌سازی طرح‌ها در وردپرس Implementing Designs in WordPress

• فاصله‌ی بین عناصر جفت شده Space between paired elements

• ایجاد یک سند مرجع Creating a Reference Document

طراحی ریسپانسیو با گوتنبرگ Responsive Design with Gutenberg

• نصب فونت‌ها Install Fonts.

• نصب پالت رنگی Install color palette.

• تنظیم استایل‌های سراسری (Global Styles) Setting up Global Styles.

• فاصله‌گذاری بلوک‌ها Block Spacing

• تغییر فاصله‌گذاری پیش‌فرض عناصر Changing the Default Spacing of Elements

• عناصری که در موبایل روی هم قرار می‌گیرند (Stack) Elements that Stack on Mobile

• تغییر اندازه خودکار عناصر در موبایل Elements Auto-Resizing on mobile

• ترازها و عرض‌ها Alignments and Widths

• ساخت هدر ریسپانسیو Create responsive header.

• ساخت فوتر ریسپانسیو Create responsive footer.

• ایجاد قالب صفحه اصلی Creating a HomePage Template

• افزودن بخش Hero Adding a Hero Section.

• تکمیل صفحه اصلی - بخش اول Completing the Homepage - Part I

• تکمیل صفحه اصلی - بخش دوم Completing The Homepage - Part II

• صفحات فرود (Landing pages) Landing pages.

• گام بعدی چیست؟ What next?

طراحی ریسپانسیو با المنتور Responsive Design with Elementor

• نصب فونت‌ها Install Fonts.

• نصب پالت رنگی Install color palette.

• تنظیمات تایپوگرافی Setting Up Typography

• تنظیم استایل‌های سراسری Setting Up Global Styles

• فاصله‌گذاری پیش‌فرض در المنتور Default Spacing in Elementor

• نقاط شکست (Breakpoints) المنتور و موارد قابل تنظیم Elementor breakpoints & What Can Be Adjusted

• چیدمان روی هم عناصر در موبایل Element stacking on mobile.

• المنتور: مخفی کردن عناصر در دستگاه‌های خاص Elementor - hide elements on specific devices.

• پدینگ و مارجین (Padding & Margin) Padding & Margin.

• ساخت هدر ریسپانسیو Create responsive header.

• ساخت فوتر ریسپانسیو Create responsive footer.

• ساخت قالب صفحه اصلی Create HomePage Template.

• ساخت بخش Hero Create Hero Section.

• ساخت سایر بخش‌های صفحه اصلی Create the Rest of the HomePage.

• صفحات فرود Landing Pages.

• گام بعدی چیست؟ What Next?

و در نهایت... And Finally...

• ممیزی دسترسی‌پذیری (Accessibility audit) Accessibility audit.

• چک‌لیست لانچ Launch checklist.

• ۲۰ نکته برتر در طراحی وب Top 20 Web Design Tips

• درس جایزه (Bonus) Bonus lecture