آموزش مقدمه ای بر طراحی وب سایت واکنش گرا: یک طراحی برای هر دستگاه
An Introduction to Responsive Web Design: One Design for Every Device
برای این کلاس مقدماتی طراحی واکنشگرا به Skillshare Product Designer Spencer Schimel بپیوندید. اصول ایجاد یک سیستم شبکه زیرین با نقاط شکست را بیاموزید — سیستمی که به طراحی شما اجازه می‌دهد بین صفحه‌های دسکتاپ، تبلت، و موبایل با هر اندازه‌ای به‌طور مناسب تنظیم شود.
چه با طراحی جدید شروع کنید یا یک طرح موجود را تطبیق دهید، صفحاتی ایجاد خواهید کرد که عالی به نظر می رسند و برای بازدیدکنندگان در هر دستگاهی قابل استفاده تر هستند.
یک صفحه اصلی پاسخگو طراحی کنید که برای دسکتاپ، تبلت و موبایل کار می کند
یک طراحی صفحه اصلی ایجاد کنید که در یک شبکه پاسخگو کار کند. اگر وب سایتی دارید که در حال حاضر به صورت واکنش گرا طراحی نشده است، بیایید آن را برطرف کنیم. در غیر این صورت، وب‌سایت رستوران مورد علاقه‌تان را تغییر دهید. آنها به طور کلی ساده هستند و به احتمال زیاد پاسخگوی واقعی نیستند (بر اساس اندازه صفحه نمایش تنظیم نمی شود).
یک نکته سریع: می توانید با کشیدن مرورگر کوچکتر و دیدن اینکه آیا متن و تصاویر به تغییر عرض "پاسخ" می دهند، بررسی کنید که آیا یک وب سایت پاسخگو است یا خیر.
مراحل پروژه
- یک اسکرین شات از صفحه اصلی اصلی که در حال تعمیر هستید آپلود کنید.
- عناصر آن طرح را با شبکه انتخابی خود در دسکتاپ تراز کنید.
ممکن است دارایی های تصویر تمیزی را که برای این کار نیاز دارید نداشته باشید، بنابراین در صورت لزوم از سایر تصاویر، طرح ها یا مستطیل های رنگی استفاده کنید. - شبکه خود را که برای رایانه لوحی تنظیم شده نمایش دهید، و عناصر طراحی را به روز کنید تا متناسب با آن باشد.
- شبکه خود را که برای تلفن همراه تنظیم شده است نمایش دهید و عناصر طراحی را متناسب با آن به روز کنید.
اگر می‌خواهید از سیستم شبکه Skillshare استفاده کنید، فایل Illustrator پیوست را دانلود کنید.
برای مشاهده نحوه انجام این پروژه برای صفحه اصلی Skillshares، من را بررسی کنید.
درس ها Lessons
-
تعیین نقاط شکست Determining Breakpoints
-
نسخه نمایشی نقطه شکست زنده Live Breakpoint Demo
-
پروژه: طراحی یک صفحه اصلی به صورت واکنشگرا Project: Design a Homepage Responsively
-
معرفی Introduction
-
طراحی را در Skillshare کاوش کنید Explore Design on Skillshare
-
نتیجه Conclusion
-
ایجاد یک شبکه Creating a Grid
-
سیستم گرید چیست؟ What is a Grid System?
-
پیشگفتار: چرا پاسخگو مهم است Preface: Why Responsive is Important
https://donyad.com/d/1cc511
Spencer Schimel
طراح UX/UI، معلم و مربی
سلام، من اسپنسر هستم، یک طراح UX/UI مستقر در Silicon Alley (نیویورک). در طول 8 سال گذشته، من روی تیم‌های محصول برای استارت‌آپ‌های در حال رشد مانند Artsy و Skillshare، و همچنین مشارکت طولانی‌مدت با مشتریان اصلی مانند نایک و والمارت کار کرده‌ام.
من دوست دارم آنچه را که می دانم با دیگر طراحان (و طراحان در حال آموزش) به اشتراک بگذارم، و امیدوارم بتوانید از تجربیات من استفاده کنید و از کلاس های من چیزی به دست آورید. من تمرکز زیادی بر بهبود فرآیندهای طراحی دارم، زیرا معتقدم که یک فرآیند خوب این است که چگونه بتوانید طرح‌های با کیفیت بالا را در مدت زمان مناسب ارائه دهید.
خارج از دفتر، من یک استاد کمکی در دانشکده هنرهای تجسمی در شهر نیویورک برای طراحی تعامل، و یک مربی طراحی UX با Out In Tech هستم.
نمایش نظرات