آموزش طراحی زیبایی شناسی برای وب

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

مقدمه Introduction

• خوش آمدی Welcome

• با استفاده از پرونده های تمرینی Using the exercise files

1. درباره زیبایی شناسی 1. About Aesthetics

• زیبایی شناسی چیست؟ What is aesthetics?

• نمونه هایی از هنر و طراحی Examples from art and design

2. با استفاده از عناصر طراحی 2. Using Elements of Design

• شناخت عناصر طراحی Understanding the elements of design

• استفاده از رنگ برای تنظیم روحیه سایت Using color to set the site’s mood

• برای افزودن کنتراست مقدار رنگ را افزایش می دهد Tweaking color value to add contrast

• با استفاده از بافت برای افزودن عمق Using texture to add depth

• تکرار اشکال برای یکپارچه سازی طراحی خود Repeating shapes to unify your design

• طرح خود را با فرم تنظیم کنید Structuring your layout with form

• استفاده از فضا برای سازماندهی طرح خود Using space to organize your design

• تنظیم مرزها با خطوط Setting boundaries with lines

• برقراری ارتباط با قلمهای مناسب Communicating with the right fonts

• چالش: کار با رنگ Challenge: Working with color

• راه حل: کار با رنگ Solution: Working with color

3. ترکیب اصول طراحی 3. Incorporating Principles of Design

• شناخت اصول طراحی Understanding the principles of design

• استفاده از تضاد برای مجموعه مناطق مورد علاقه Using contrast to set areas of interest

• استفاده از سبک های قلم برای تأکید Applying font styles to show emphasis

• تراز کردن اشیاء برای رسیدن به تعادل Aligning objects to achieve balance

• استفاده از سبکهای لینک به منظور ایجاد وحدت Using hyperlink styles to create unity

• استفاده از الگوهای پس زمینه Applying background patterns

• اضافه کردن پیمایش و انیمیشن Adding scrolling and animation

• استفاده از سبک های مرزی برای اضافه کردن ریتم Using border styles to add rhythm

• رسیدن به نسبت با مقیاس بندی اشیاء Achieving proportion by scaling objects

• ایجاد سادگی Creating simplicity

• استفاده از درجه بندی برای ایجاد چشم انداز Using gradation to create perspective

• چالش: تبلیغ بنر Challenge: Banner ad

• راه حل: آگهی بنر Solution: Banner ad

4- صنعت و روندهای طراحی وب 4. Web Design Industry and Trends

• تاکید: طراحی حرکات دست Emphasis: Designing for hand gestures

• تایپوگرافی: انتخاب و استفاده از فونت های وب Typography: Choosing and using web fonts

• تعادل: ویرایش تصاویر برای رسانه های اجتماعی Balance: Editing images for social media

• فرم: حرکت فراتر از طرح تخت Form: Moving beyond flat design

• رنگ: نظریه و روند Color: Theory and trends

• حرکت: افزودن نوع از طریق ویدیو Movement: Adding type over video

• الگوی و درجه بندی Pattern and gradation

• چالش: نوع ویدیو را تایپ کنید Challenge: Type over video

• راه حل: فیلم را تایپ کنید Solution: Type over video

نقش و نقش کار طراح گردش کار 5. Designer’s Role and Web Design Workflow

• مسئولیت پذیری: درک نقش طراح Responsibility: Understanding the designer’s role

• تحقیق: فرم زیر عملکرد را دنبال می کند Research: Form follows function

• ترکیب: با استفاده از شبکه Composition: Using the grid

• دسترسی: با استفاده از اندازه و رنگ Accessibility: Using size and color

• زیبایی شناسی پاسخگو: CSS برای دستگاه ها Responsive aesthetics: CSS for devices

• ارتباطات: بینندگان را از طریق یک طرح هدایت می کند Communication: Leading viewers through a design

• اصالت: پله خارج از جعبه Originality: Stepping out of the box

• چالش: نقش طراح Challenge: The designer's role

• راه حل: نقش طراح Solution: The designer's role

نتیجه Conclusion

• مراحل بعدی Next steps