آموزش دوره کارشناسی ارشد UX و طراحی وب: استراتژی، طراحی، توسعه

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

بررسی اجمالی دوره Course Overview

• خوش آمدید: برای تعریف، طراحی و کدنویسی آماده شوید! Welcome: Get Ready to Define, Design and Code!

• کتاب راهنمای دوره 30 صفحه ای BONUS را دانلود کنید Download the BONUS 30-page Course Guidebook

• مقدمه ای بر UX Introduction to UX

تعریف: برنامه ریزی برای موفقیت Definition: Planning for Success

• چرا ما داریم این کار را می کنیم؟ Why Are We Doing This?

• سه سوال حیاتی (باید بپرسید) Three Crucial Questions (You Must Ask)

• چه کاری ارزش انجام دادن دارد؟ What's Worth Doing?

• ما چه چیزی خلق می کنیم؟ What Are We Creating?

• چه ارزشی ارائه می دهد؟ What Value Does It Provide?

• استراحت میان وعده: کاربران شما چه کسانی هستند؟ SNACK BREAK: Who Are Your Users?

• تمرین: تعیین ارزش و فرصت استراتژیک Exercise: Determining Value & Strategic Opportunity

تعریف: برنامه ریزی برای موفقیت قسمت دوم Definition: Planning for Success Part II

• این فقط در مورد کاربران نیست: حلقه ارزش UX It's Not Just About Users: The UX Value Loop

• تحقیق سهامداران کسب و کار Business Stakeholder Research

• شناسایی اهداف تجاری Identifying Business Goals

• استراحت میان وعده: اهداف تجاری شما (یا مشتری) چیست؟ SNACK BREAK: What Are Your (or Your Client's) Business Goals?

• تحقیق کاربر: اولویت دادن به مردم User Research: Putting People First

• شناسایی نیازهای کاربران Identifying User Needs

• مسیرهای تصمیم: ارتباط نیازهای کاربر با استراتژی Decision Paths: Connecting User Needs with Strategy

• تمرین: یک مسیر تصمیم ایجاد کنید Exercise: Create a Decision Path

• مقدمه ای بر الزامات Introduction to Requirements

• ایجاد نیازهای معنادار Generating Meaningful Requirements

• سه نوع نیاز Three Kinds of Requirements

• الزامات مستندسازی Documenting Requirements

• تعیین محدوده پروژه Determining Project Scope

• کنترل خزش دامنه Controlling Scope Creep

• تمرین: محدوده پروژه هوشمند Exercise: Smart Project Scoping

تعریف: برنامه ریزی برای موفقیت قسمت سوم Definition: Planning for Success Part III

• برنامه ریزی برای تست کاربر Planning for User Testing

• ایجاد یک برنامه آزمایشی: برای چه کسی آزمایش می کنیم؟ Creating a Test Plan: Who Are We Testing For?

• اولویت بندی پشتیبانی از دستگاه و مرورگر Prioritizing Device and Browser Support

• چه چیزی را آزمایش کنیم: عملکرد What to Test: Functionality

• چه چیزی را آزمایش کنیم: قابلیت استفاده What to Test: Usability

• چه چیزی را آزمایش کنیم: خطاها و استثناها What to Test: Errors and Exceptions

• چه چیزی را آزمایش کنیم: سازگاری What to Test: Compatibility

• چه چیزی باید آزمایش شود: عملکرد What to Test: Performance

• چه چیزی را آزمایش کنیم: امنیت What to Test: Security

• تعریف غذاهای آماده: چیزهایی که باید به خاطر بسپارید Definition Takeaways: Things to Remember

معماری اطلاعات: ایجاد یک بنیاد جامد Information Architecture: Creating a Solid Foundation

• معماری اطلاعات: سازماندهی محتوا و جریان Information Architecture: Organizing Content and Flow

• معماری اطلاعات (IA) چیست؟ What IS Information Architecture (IA)?

• استراتژی محتوا: شناسایی، سازماندهی و ارائه Content Strategy: Identifying, Organizing and Delivering

• تعیین الزامات محتوا Determining Content Requirements

• تمرین: شناسایی گردش کار محتوا Exercise: Identifying Content Workflows

• نکات من برای مدل سازی اطلاعات موفق IA My Tips for Successful Information IA Modeling

• ایجاد و اولویت بندی IA Creating and Prioritizing IA

• برچسب گذاری محتوا Content Labeling

• نام گذاری فایل File Naming

• گروه بندی و طبقه بندی محتوا Grouping and Classifying Content

• تمرین: تعیین اولویت اطلاعات Exercise: Determining Information Priority

معماری اطلاعات: ایجاد یک پایه جامد قسمت دوم Information Architecture: Creating a Solid Foundation Part II

• تمرین: تبدیل اولویت اطلاعات به مدل IA Exercise: Turning Information Priority into an IA Model

• مدل های IA: کدام یک برای سایت من مناسب است؟ IA Models: Which One's Right for My Site?

• مدل IA درخت سلسله مراتبی Hierarchical Tree IA Model

• لیست تودرتو مدل IA Nested List IA Model

• مدل هاب و اسپک IA Hub and Spoke IA Model

• بنتو باکس مدل IA Bento Box IA Model

• مدل IA نمای فیلتر شده Filtered View IA Model

• ترکیب مدل های IA Combining IA Models

• ابزارهایی برای ایجاد مدل های IA Tools for Creating IA Models

• اجتماعی کردن و اعتبارسنجی مدل IA شما Socializing and Validating Your IA Model

• استراحت میان وعده: یک مدل IA برای وب سایت خود ایجاد کنید SNACK BREAK: Create an IA Model for Your Website

معماری اطلاعات: ایجاد یک پایه جامد بخش سوم Information Architecture: Creating a Solid Foundation Part III

• طراحی ناوبری Navigation Design

• ناوبری اولیه و ثانویه Primary and Secondary Navigation

• ناوبری جهانی و محلی Global and Local Navigation

• ناوبری برای انواع مختلف کاربر Navigation for Different User Types

• اعتبار سنجی طرح ناوبری شما Validating Your Navigation Scheme

• تمرین: تعیین مسیرهای ناوبری کلیدی Exercise: Determining Key Navigation Paths

• وایرفریم 101 Wireframing 101

• چه چیزی Wireframe نیست What a Wireframe ISN'T

• Wireframe چیست What a Wireframe IS

• نکات من برای ایجاد نمونه های اولیه وایرفریم موفق My Tips for Creating Successful Wireframe Prototypes

• ایجاد Wireframes: ابزارهای تجارت Creating Wireframes: Tools of the Trade

• استراحت میان وعده: سعی کنید خودتان یک Wireframe پایه ایجاد کنید SNACK BREAK: Try Creating a Basic Wireframe on Your Own

• تمرین: ایجاد یک Wireframe B2B با Axure RP Pro Exercise: Creating a B2B Wireframe with Axure RP Pro

• اجتماعی کردن و اعتبارسنجی Wireframes Socializing and Validating Wireframes

• نکات اولیه معماری اطلاعات: چیزهایی که باید به خاطر بسپارید Information Architecture Takeaways: Things to Remember

طراحی: اطلاعات، تعامل و رابط Design: Information, Interaction and Interface

• "چه شکلی خواهد بود؟" مقدمه ای بر طراحی "What's It Gonna Look Like?" An Introduction to Design

• تعریف طراحی رابط کاربری (UI) مناسب Defining Appropriate User Interface (UI) Design

• چگونه تعریف و IA از طراحی UI اطلاع رسانی می کند How Definition and IA Inform UI Design

• اصول طراحی UI بی زمان، قسمت 01 Timeless UI Design Principles, Part 01

• اصول طراحی UI بی زمان، قسمت 02 Timeless UI Design Principles, Part 02

• اصول طراحی UI بی زمان، قسمت 03 Timeless UI Design Principles, Part 03

• اصول طراحی UI بی زمان، قسمت 04 Timeless UI Design Principles, Part 04

• استراحت میان وعده: اصول طراحی را در یک رابط کاربری موجود شناسایی کنید SNACK BREAK: Identify Design Principles in an Existing UI

طراحی: اطلاعات، تعامل و رابط قسمت دوم Design: Information, Interaction and Interface Part II

• نکات من برای حل مشکلات بصری My Tips for Solving Visual Problems

• سازماندهی اطلاعات بصری - قسمت 01 Organizing Visual Information - Part 01

• سازماندهی اطلاعات بصری - قسمت 02 Organizing Visual Information - Part 02

• طراحی سلسله مراتب بصری مناسب Designing Appropriate Visual Hierarchy

• طراحی برای انتظار مخاطب Designing for Audience Expectation

• طراحی برای تعامل Designing for Interaction

• تمرین: یک طراحی UI برای یک وب سایت B2B ایجاد کنید Exercise: Create a UI Design for a B2B Website

• تمرین: یک طرح بندی طراحی رابط کاربری برای وبلاگ وردپرس ایجاد کنید - قسمت 01 Exercise: Create a UI Design Layout for a WordPress Blog - Part 01

• تمرین: یک طرح بندی طراحی رابط کاربری برای وبلاگ وردپرس ایجاد کنید - قسمت 02 Exercise: Create a UI Design Layout for a WordPress Blog - Part 02

• تمرین: یک طرح بندی طراحی رابط کاربری برای وبلاگ وردپرس ایجاد کنید - قسمت 03 Exercise: Create a UI Design Layout for a WordPress Blog - Part 03

• تمرین: یک طرح بندی طراحی رابط کاربری برای وبلاگ وردپرس ایجاد کنید - قسمت 04 Exercise: Create a UI Design Layout for a WordPress Blog - Part 04

• تمرین: یک طرح بندی طراحی UI برای یک وب سایت تجارت الکترونیک ایجاد کنید Exercise: Create a UI Design Layout for an Ecommerce Website

• استراحت میان وعده: طراحی رابط کاربری خود را ارزیابی کنید SNACK BREAK: Evaluate Your UI Design

• نکات اولیه طراحی: چیزهایی که باید به خاطر بسپارید Design Takeaways: Things to Remember

توسعه - ساخت یک وب سایت B2B با HTML و CSS Development - Building a B2B Website with HTML & CSS

• توسعه: کدنویسی، سفارشی سازی و پیکربندی Development: Coding, Customizing and Configuring

• رویا در کد: شما قدرت را دارید! Dreaming in Code: You've Got the Power!

• ملاحظات میزبانی و دامنه Hosting & Domain Considerations

• ساختار فایل و FTP: سازماندهی و آپلود File Structure and FTP: Organizing & Uploading

• ساختار اصلی HTML: ساختن یک پایه جامد Basic HTML Structure: Building a Solid Foundation

• برچسب ها، عناصر و ویژگی ها: توصیف محتوای HTML Tags, Elements and Attributes: Describing HTML Content

• در یک نام چیست؟ عناوین و سرفصل ها What's In a Name? Titles and Headings

• قالب بندی پاراگراف ها: ایجاد و سبک سازی محتوای متن Formatting Paragraphs: Creating and Styling Text Content

• سازماندهی کد شما: با استفاده از تورفتگی و نظرات Organizing Your Code: Using Indentation and Comments

• ایجاد اولین صفحه وب: به کارگیری آنچه آموخته اید Creating Your First Web Page: Applying What You've Learned

• عناصر محتوا – هایپرلینک ها: رسیدن از اینجا به آنجا Content Elements – Hyperlinks: Getting from Here to There

• عناصر محتوا – لیست های نامرتب و مرتب: ایجاد و قالب بندی Content Elements – Unordered and Ordered Lists: Creating and Formatting

• عناصر محتوا – تصاویر: افزودن تصاویر و تعریف ویژگی ها Content Elements – Images: Adding Images and Defining Attributes

• عناصر محتوا – صدا و تصویر: افزودن رسانه به صفحه وب شما Content Elements – Audio and Video: Adding Media to Your Web Page

• سبک قلم: تعریف سبک، رنگ و اندازه Font Styling: Defining Style, Color and Size

• تمرین: افزودن تصاویر، لیست های نامرتب و هایپرلینک ها Exercise: Adding Images, Unordered Lists and Hyperlinks

• CSS - یک ظاهر طراحی محتوا: افزودن پوست خوب به استخوان های خوب CSS – Content Styling: Adding Good Skin to Good Bones

• CSS – درون خطی، داخلی یا خارجی؟ هوشمند شدن CSS – Inline, Internal or External? Getting Smart

• CSS – وراثت: به اشتراک گذاری ویژگی ها به طور موثر CSS – Inheritance: Sharing Attributes Efficiently

• CSS – رنگ و تصویر پس‌زمینه: ایجاد جلوه‌های پس‌زمینه CSS – Background Color and Image: Creating Background Effects

• CSS – رنگ و وزن قلم: تأثیر و تأکید بر متن CSS – Font Color and Weight: Giving Text Impact and Emphasis

• CSS – کلاس‌ها و گستره‌ها: خاص شدن با استایلینگ CSS – Classes and Spans: Getting Specific with Styling

• CSS – کار با Divs: تقسیم و تسخیر با کلاس ها و شناسه ها CSS – Working with Divs: Dividing and Conquering with Classes and IDs

• CSS - سبک پیوند: با استفاده از تزئین متن CSS – Link Styling: Using Text Decoration

• تمرین - ایجاد یک منوی پیمایش: استفاده از CSS برای Wayfinding Exercise – Creating a Navigation Menu: Leveraging CSS for Wayfinding

• ساختار جدول پایه: سازماندهی محتوا Basic Table Structure: Organizing Content

• طراحی جداول با CSS: افزایش ارتباطات و خوانایی Styling Tables with CSS: Enhancing Communication and Readability

• حاشیه و بالشتک: ایجاد فضای منفی هدفمند Margins and Padding: Establishing Purposeful Negative Space

• نمایش و موقعیت یابی: چه، کجا و چگونه Display and Positioning: What, Where and How

• مدل جعبه: قطعات و کل The Box Model: The Parts and the Whole

• Float and Clear: Controlling Visual Flow Float and Clear: Controlling Visual Flow

• Nested Layouts: استفاده از Divs برای دقت و انعطاف پذیری Nested Layouts: Using Divs for Precision and Flexibility

• فرم ها: ایجاد ورودی (و خروجی) خوب Forms: Creating Good Input (and Output)

• ایجاد فرم ها: گروه بندی داده های فرم Creating Forms: Grouping Form Data

• شکل دادن به فرم ها با CSS: ایجاد سازگاری و قابلیت استفاده Styling Forms with CSS: Creating Consistency and Usability

تمرینات: یک وب سایت B2B با HTML و CSS بسازید Exercises: Build A B2B Website with HTML & CSS

• تمرین: سربرگ وب سایت B2B خود را ایجاد کنید Exercise: Create Your B2B Website Header

• تمرین: محتوای وب سایت B2B خود را ایجاد کنید Exercise: Create Your B2B Website Content

• تمرین: پاورقی وب سایت B2B خود را ایجاد کنید Exercise: Create Your B2B Website Footer

• تمرین: صفحه وب B2B خود را ایجاد کنید: همه چیز را در کنار هم قرار دهید Exercise: Create Your B2B Web Page: Putting It All Together

• تست مرورگر: نکات و ابزار Browser Testing: Tips and Tools

توسعه – سیستم مدیریت محتوای وردپرس (CMS) Development – WordPress Content Management System (CMS)

• نصب خودکار وردپرس: با استفاده از سی پنل ارائه دهنده هاست خود Installing WordPress Automatically: Using Your Hosting Provider's CPanel

• نصب دستی وردپرس: با استفاده از یک سرویس گیرنده FTP Installing WordPress Manually: Using an FTP Client

• داشبورد وردپرس: یک تور سریع از ویژگی ها و عملکردها The WordPress Dashboard: A Quick Tour of Features and Functions

• نوشته ها در مقابل صفحات: ایجاد محتوا در وردپرس Posts vs. Pages: Creating Content in WordPress

• دسته بندی ها: سازماندهی محتوای وردپرس Categories: Organizing WordPress Content

• برچسب ها: اضافه کردن زمینه به پست های خود Tags: Adding Context To Your Posts

• نظرات: اتصال و مدیریت مکالمات Comments: Connecting and Managing Conversations

• قالب بندی متن: با استفاده از ویرایشگر متن وردپرس Formatting Text: Using the WordPress Text Editor

• افزودن هایپرلینک: ایجاد و مدیریت لینک در وردپرس Adding Hyperlinks: Creating and Managing Links in WordPress

• افزودن تصاویر: درج و مدیریت تصاویر در وردپرس Adding Images: Inserting and Managing Images in WordPress

• افزودن ویدئو: درج و مدیریت ویدئو در وردپرس Adding Video: Inserting and Managing Video in WordPress

• کار با افزونه ها: گسترش ویژگی ها و توابع وردپرس Working with Plugins: Extending WordPress Features and Functions

• تمرین: افزودن یک افزونه فرم تماس Exercise: Adding a Contact Form Plugin

• استفاده از ابزارک ها: بهبود طرح بندی وردپرس شما Using Widgets: Enhancing Your WordPress Layout

• تمرین: افزودن ویجت Exercise: Adding a Widget

• انتخاب تم وردپرس: یافتن، ارزیابی و نصب Choosing a WordPress Theme: Finding, Evaluating and Installing

• سفارشی کردن تم شما: ساختار، محتوا و ظاهر Customizing Your Theme: Structure, Content and Appearance

• ایجاد منوهای سفارشی: جایگزینی منوهای تم Creating Custom Menus: Replacing Theme Menus

• با استفاده از ویرایشگر کد: تغییر قالب وردپرس شما Using the Code Editor: Modifying Your WordPress Theme

• تنظیمات وردپرس: عمومی، خواندن، نوشتن و پیوندهای ثابت WordPress Settings: General, Reading, Writing and Permalinks

• کاربران و نقش ها: تخصیص دسترسی و امتیازات وردپرس Users and Roles: Assigning WordPress Access and Privileges

• پشتیبان گیری از وردپرس: پشتیبان گیری از وبلاگ و پایگاه داده خود WordPress Backup: Backing Up Your Blog and Database

• به روز رسانی وردپرس: به روز رسانی خودکار و دستی Updating WordPress: Automatic and Manual Updates

تمرینات: با وردپرس یک وبلاگ بسازید Exercises: Build A Blog with WordPress

• تمرین: سفارشی کردن هدر تم، قسمت 01 Exercise: Customizing Your Theme Header, Part 01

• تمرین: سفارشی کردن هدر تم، قسمت 02 Exercise: Customizing Your Theme Header, Part 02

• تمرین: سفارشی کردن محتوای صفحه Exercise: Customizing Your Page Content

• تمرین: سفارشی کردن پاورقی Exercise: Customizing Your Footer

توسعه - وب سایت تجارت الکترونیک با ووکامرس Development - Ecommerce Website with WooCommerce

• نصب ووکامرس Installing WooCommerce

• تنظیمات اولیه: شروع کار با WooCommerce Basic Settings: Getting Started with WooCommerce

• تنظیمات محصول: پیکربندی محصولات در ووکامرس Product Settings: Configuring Products in WooCommerce

• تنظیمات مالیات: پیکربندی مالیات فروش در ووکامرس Tax Settings: Configuring Sales Tax in WooCommerce

• تنظیمات پرداخت: پیکربندی گزینه های پرداخت در ووکامرس Checkout Settings: Configuring Checkout Options in WooCommerce

• تنظیمات حمل و نقل: پیکربندی حمل و نقل در ووکامرس Shipping Settings: Configuring Shipping in WooCommerce

• تنظیمات حساب: پیکربندی حساب های مشتری در ووکامرس Account Settings: Configuring Customer Accounts in WooCommerce

• دسته بندی محصولات: افزودن دسته بندی محصولات در ووکامرس Product Categories: Adding Product Categories in WooCommerce

• افزودن محصولات ساده در ووکامرس Adding Simple Products in WooCommerce

• افزودن محصولات متغیر در ووکامرس Adding Variable Products in WooCommerce

• افزودن محصولات مجازی و قابل دانلود در ووکامرس Adding Virtual and Downloadable Products in WooCommerce

• افزودن محصولات مرتبط و مرتبط در ووکامرس Adding Linked and Related Products in WooCommerce

• ایجاد کوپن: پیکربندی پیشنهادات ویژه در ووکامرس Creating Coupons: Configuring Special Offers in WooCommerce

• سفارشی کردن ایمیل: سفارشی سازی پیام های ایمیل در ووکامرس Customizing Email: Email Messaging Customization in WooCommerce

• مدیریت سفارشات با ووکامرس Managing Orders with WooCommerce

• مدیریت موجودی با ووکامرس Managing Inventory with WooCommerce

• گزارش گیری: گزارش فروش در ووکامرس Reporting: Sales Reporting in WooCommerce

• پیکربندی ناوبری دسته محصولات در ووکامرس Configuring Product Category Navigation in WooCommerce

تمرینات: با WooCommerce و WordPress یک وب سایت تجارت الکترونیک بسازید Exercises: Build An Ecommerce website with WooCommerce and WordPress

• تمرین: ایجاد صفحه اصلی ویترین خود، قسمت 01 Exercise: Creating Your Storefront Home Page, Part 01

• تمرین: ایجاد صفحه اصلی ویترین خود، قسمت 02 Exercise: Creating Your Storefront Home Page, Part 02

• تمرین: ایجاد صفحه اصلی فروشگاه خود، قسمت 03 Exercise: Creating Your Storefront Home Page, Part 03

• تمرین: ایجاد صفحه اصلی ویترین خود، قسمت 04 Exercise: Creating Your Storefront Home Page, Part 04

• تمرین: ایجاد صفحه فرود دسته بندی شما Exercise: Creating Your Category Landing Page

راه اندازی و فراتر از آن Launch and Beyond

• برای راه اندازی آماده شوید! تایید، تست، اشکالات و فراتر از آن Prepare to Launch! Approval, Testing, Bugs and Beyond

• چک لیست قبل از راه اندازی: قبل از راه اندازی چه کاری باید انجام دهید Pre-Launch Checklist: What to Do Before You Launch

• امتیاز: متقاعد کردن مشتریان/ذینفعان برای گنجاندن UX در کار نیازمندی ها Bonus: Convincing Clients/Stakeholders to Include UX in Requirements Work