آموزش یادگیری طراحی وب Responsive در مرورگر

مقدمه Introduction

• خوش آمدی Welcome

• قبل از شروع این دوره چه باید بدانید What to know before you start this course

1. آماده سازی طراحی 1. Design Preparation

• از مرورگر به عنوان بوم طراحی استفاده کنید Use the browser as a design canvas

• برای سایت خود زبان طراحی کنید Establish a design language for your site

• پیش نمایش طرح بندی با قلم و کاغذ Draft layouts with pen and paper

• ظروف را با کشیدن جعبه ها نقشه کنید Map out containers by drawing boxes

• طراحی را مدولار کنید Modularize the design

• ✓ چالش: یک نقشه کانتینر ایجاد کنید و طرح را بصورت مدولار تنظیم کنید ✓ Challenge: Create a container map and modularize the design

• olution راه حل: یک نقشه کانتینر ایجاد کنید و طرح را مدولار کنید ✓ Solution: Create a container map and modularize the design

2. طراحی بصری در مرورگر 2. Visual Design in the Browser

• ابزارها و تنظیمات Tools and setup

• با یک تنظیم اصلی شروع کنید Start with a core setup

• یک سند پایه را با HTML5 ایجاد کنید Create a baseline document with HTML5

• نوار کناری: یک اصل ساده RWD Sidebar: A simple RWD principle

• قلم ها و تایپوگرافی های پاسخگو را اعمال کنید Apply fonts and responsive typography

• همزمان با یک ماژول کار کنید Work on one module at a time

• یک رویکرد عملی برای طراحی وب پاسخگو A practical approach to responsive web design

• برای ساده سازی فرایند طراحی از فناوری های مدرن استفاده کنید Use modern technologies to simplify the design process

• با Flexbox طرح بندی های پاسخگو ایجاد کنید Create responsive layouts with Flexbox

• ابزارهای رنگی در مرورگر Color tools in the browser

• آزمایش رنگ و ارزش HSLA Color experimentation and the value of HSLA

• ✓ Challenge: صفحه مقاله را در مرورگر طراحی کنید ✓ Challenge: Design the article page in the browser

• ✓ راه حل: صفحه مقاله را در مرورگر طراحی کنید ✓ Solution: Design the article page in the browser

3. طراحی تعامل در مرورگر 3. Interaction Design in the Browser

• طراحی تعامل از طریق CSS Interaction design through CSS

• CSS تبدیل می شود CSS transforms

• آزمایش از طریق فیلترهای تصویر Experimentation through image filters

4- طراحی مضامین وردپرس در مرورگر 4. Designing WordPress Themes in the Browser

• مضامین پاسخگو وردپرس را در مرورگر طراحی کنید Design responsive WordPress themes in the browser

مراحل بعدی Next Steps

• متشکرم! Thank you!