آموزش طراحی وب ریسپانسیو 101: با استفاده از Sketch، رابط کاربری خود را زنده کنید

Responsive Web Design 101: Bringing your UI to life using Sketch

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

به طراح دیجیتال بپیوندید تا به شما یاد می دهد که چگونه رابط کاربری خود را در دستگاه های مختلف با استفاده از Sketch زنده کنید. وقتی کریستینا شما را در فرآیند طراحی تجربیات آنلاین موفق راهنمایی می‌کند، یاد خواهید گرفت که پاسخگو فکر کنید. در این کلاس با موارد زیر آشنا خواهید شد:

• RWD چیست 

• نحوه انتخاب بین رویکرد اول موبایل در مقابل دسکتاپ

• ایجاد طرح کلی محتوا

• قالب بندی و نمونه سازی طرح های شما

• اصول استفاده از Sketch

• ایجاد شبکه های پاسخگو

• چیدمان طرح های خود در طرح

• بهینه سازی تصاویر، نوع و عناصر رابط کاربری

• کدنویسی سایت شما

• نحوه رسیدگی به واگذاری دارایی ها به تیم های توسعه

این کلاس برای هر کسی است که علاقه مند به یادگیری نحوه استفاده از Sketch برای پاسخگو کردن سایت های خود است، چه در حال ایجاد یک صفحه splash یا یک سایت پیچیده تر باشید. بعد از این کلاس، دانش زیادی در مورد طراحی واکنشگرا و نحوه اعمال آنها در پروژه طراحی وب بعدی خود خواهید داشت.

تکلیف

می‌خواهید صفحه‌ای طراحی‌شده را به قالب‌های دسک‌تاپ، رایانه لوحی و تلفن همراه ترجمه کنید.


پردازش

با استفاده از:

یاد خواهید گرفت که چگونه پاسخگو فکر کنید
  1. ایجاد خطوط کلی محتوا برای سازماندهی اطلاعات شما.
  2. بر اساس سؤالات طرح کلی محتوای خود، تصمیم خواهید گرفت که آیا فریم‌های سیمی با وضوح تصویر ایجاد کنید یا نمونه‌های اولیه با کیفیت بالا.
  3. سپس طرحی را که ایجاد کرده‌اید انتخاب می‌کنید یا از فایل‌های نمونه‌ای که در منابع گالری پروژه این دوره ارائه کرده‌ام استفاده می‌کنید. هنگامی که طرح مورد نظر خود را انتخاب کردید و درس های باقی مانده را طی کردید، تنها کاری که باید انجام دهید این است که توجه طراحی خود را جلب کرده و جادوی پاسخگو بسازید.
  4. طراحی‌های وب واکنش‌گرای خود را در نقاط لمسی مختلف دستگاه به نمایش خواهید گذاشت.

پروژه تمام شده شما نمونه خوبی از توانایی شما در تفکر پاسخگو خواهد بود. این قطعه ای است که می توانید برای نشان دادن مشتریان بالقوه به مجموعه کار خود اضافه کنید. همچنین لطفا پروژه نهایی خود را به اشتراک بگذارید زیرا با اشتراک گذاری می توانیم از یکدیگر الهام بگیریم و از یکدیگر بیاموزیم تا طراحان بهتری شویم. من نمی توانم صبر کنم تا ببینم طرح های خود را چگونه ترجمه می کنید!


منابع

برای Wireframing:

برای نمونه سازی:



برای بهینه سازی عناصر رابط کاربری:



برای یادگیری کدنویسی:

(قبلاً Lynda.com)



Plugins Sketch برای کدنویسی:



افزونه‌های طرح برای انتقال دارایی‌ها:


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

درس ها Lessons

  • بهینه سازی تصاویر، نوع و عناصر رابط کاربری برای بهترین نتایج Optimizing Images, Type, and UI Elements for Best Results

  • مبانی طراحی در اسکچ Basics of Designing in Sketch

  • وایرفریم و نمونه سازی Wireframing and Prototyping

  • محتوا پادشاه است - پس بیایید از اینجا شروع کنیم Content is King - So Let's Start Here

  • طراحی سایت ریسپانسیو چیست؟ What is Responsive Web Design?

  • طرح خود را در طرح Laying Out your Design in Sketch

  • کدنویسی سایت برای RWD Coding your site for RWD

  • ایجاد یک شبکه پاسخگو Creating a Responsive Grid

  • نتیجه Conclusion

  • اول بهترین موبایل یا دسکتاپ کدام است؟ Which is best Mobile or Desktop first?

  • معرفی Introduction

  • واگذاری دارایی ها به توسعه دهندگان Handing Off Assets to Developers

درس ها Lessons

  • ایجاد یک شبکه پاسخگو Creating a Responsive Grid

  • طراحی سایت ریسپانسیو چیست؟ What is Responsive Web Design?

  • محتوا پادشاه است - پس بیایید از اینجا شروع کنیم Content is King - So Let's Start Here

  • مبانی طراحی در اسکچ Basics of Designing in Sketch

  • وایرفریم و نمونه سازی Wireframing and Prototyping

  • اول بهترین موبایل یا دسکتاپ کدام است؟ Which is best Mobile or Desktop first?

  • واگذاری دارایی ها به توسعه دهندگان Handing Off Assets to Developers

  • نتیجه Conclusion

  • معرفی Introduction

  • بهینه سازی تصاویر، نوع و عناصر رابط کاربری برای بهترین نتایج Optimizing Images, Type, and UI Elements for Best Results

  • طرح خود را در طرح Laying Out your Design in Sketch

  • کدنویسی سایت برای RWD Coding your site for RWD

نمایش نظرات

آموزش طراحی وب ریسپانسیو 101: با استفاده از Sketch، رابط کاربری خود را زنده کنید
جزییات دوره
34m
12
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
462
4 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Christina Barsan Christina Barsan

طراح دیجیتال

یک طراح دیجیتال است که در شهر نیویورک متولد و پرورش یافته است. او همچنین یکی از بنیانگذاران شرکت Eat Design Sleep است که بر کمک به طراحان در زمینه‌های صنعت طراحی تمرکز دارد. او با مشتریانی از هر طبقه‌ای از مد، زیبایی، مسافرت، سلامت و تندرستی تا غیرمنفعت کار کرده است. او کار خود را با چاپ، بسته‌بندی محصولات آغاز کرد و در 15 سال گذشته در حوزه دیجیتال کار کرده است. سال ها. تجربه متنوع او به او این امکان را می دهد که بتواند یک پروژه را از منظرهای مختلف ببیند. او از تدریس و به اشتراک گذاری دانش خود با دیگران لذت می برد.

به عنوان یک عشایر دیجیتال او برای همیشه کنجکاو است و تا آنجا که ممکن است عاشق کاوش است. اگر او روی یک پروژه دیجیتال جدید کار نمی کند، می توانید او را در آموزش یوگا، عکس گرفتن، یا دوچرخه سواری در اطراف نیویورک بیابید.