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

مرور کلی دوره Course Overview

• مقدمه دوره Course Introduction

عدم غرق شدن در جزئیات: وایرفریم‌ها Not Getting Caught up in the Details: Wireframes

• مقدمه هفته اول Introduction to Week 1

• آشنایی با وایرفریم‌ها Introduction to Wireframes

• طراحی ریسپانسیو: اندازه وب‌سایت شما چقدر باید باشد؟ Responsive Design: What size should your website be?

• سیستم‌های ناوبری (Navigation) Navigation Systems

• راهیابی (Wayfinding) Wayfinding

• الگوهای رایج طراحی وب Common Web Design Patterns

• عناصر رایج فرم‌ها Common Form Elements

• نمونه‌هایی از استراتژی‌های محتوای صفحه اصلی Examples of Homepage Content Strategies

• ابزارهای وایرفریمینگ Wireframing Tools

• وایرفریم‌ها: بردلی Wireframes: Bradley

• وایرفریم‌ها: آلیسون، بخش اول Wireframes: Alyson, part 1

• وایرفریم‌ها: آلیسون، بخش دوم Wireframes: Alyson, part 2

• چرا بررسی همتا (Peer Review)؟ Why Peer Review?

• نکاتی برای بررسی همتا Peer Review Tips

• نحوه اعمال بازخوردها How to apply feedback

در نهایت، آن را زیبا کنید: مرحله موکاپ Finally, Make it Beautiful: The Mockup Phase

• مقدمه هفته دوم Introduction to Week 2

• موکاپ‌های بصری Visual Mockups

• اصول طراحی Design Principles

• فضای سفید (Whitespace) چیست؟ What is whitespace?

• استفاده از فضای سفید برای استایل‌دهی به فرم Using whitespace to style a form

• مقایسه بصری A visual comparison

• فونت‌های وب Web Fonts

• تایپوگرافی وب: چند نکته Web Typography: A few tips

• ایجاد موکاپ‌های بصری Creating Visual Mockups

• مثال موکاپ‌های بصری Visual Mockups Example

• مودبوردها و موکاپ صفحه اصلی: بردلی Moodboards and Homepage Mockup: Bradley

• موکاپ صفحه اصلی: آلیسون Homepage Mockup: Alyson

• محتوای جایزه: مصاحبه با راب هوپ درباره روندهای طراحی وب Bonus Material: Interview with Rob Hope on Web Design Trends

سفری به دنیای کدنویسی An Excursion to Codelandia

• مقدمه هفته سوم Introduction to Week 3

• آیا نیاز است کدنویسی یاد بگیرم؟ Do I Need to Learn How to Code?

• بررسی فناوری‌های وب Survey of Web Technologies

• مقایسه HTML در مقابل CSS و جاوا اسکریپت: یک ماجراجویی استعاری HTML vs. CSS vs. Javascript: A metaphorical adventure

• مبانی HTML HTML Basics

• مبانی CSS CSS Basics

• ابزار Inspect وب Web Inspector

• محتوای جایزه: مصاحبه با راب هوپ، بخش دوم Bonus Material: Interview with Rob Hope, Part 2

جمع‌بندی نهایی: ارائه پایانی Putting it all Together: Final Presentation

• مقدمه هفته چهارم Introduction to Week 4

• مثال پروتوتایپ قابل کلیک بخش اول Clickable Prototype Example Part 1

• مثال پروتوتایپ قابل کلیک بخش دوم Clickable Prototype Example Part 2

• دسترسی‌پذیری (Accessibility) Accessibility

• محتوای جایزه: مصاحبه با مارگارت اندرسن Bonus Material: Interview with Margaret Andersen

• موکاپ‌های کامل: بردلی Full Mockups: Bradley

• موکاپ‌های کامل: آلیسون Full Mockups: Alyson