آموزش ایجاد یک سیستم شبکه (هفته 6 بوت کمپ UI)

Create A Grid System (UI Bootcamp Week 6)

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

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

هفته 6: یک سیستم شبکه‌ای ایجاد کنید
انواع شبکه‌های مورد استفاده در طراحی و برخی از محدودیت‌های فنی برای طراحی برنامه‌های کاربردی مدرن.
چگونه اطمینان حاصل کنیم که شبکه‌ها را در نرم‌افزار طراحی خود تنظیم کرده‌ایم تا هنگام توسعه کار کنند برنامه های کاربردی.

آیا این دوره برای من است؟
در حالت ایده آل، شما قبلاً مدتی را صرف طراحی وب سایت ها و/یا برنامه های کاربردی کرده اید. هر جنبه ای از دوره با در نظر گرفتن مبتدیان ایجاد می شود، اما اگر قبلاً برخی از طرح ها را ایجاد کرده باشید، ممکن است متوجه شوید که از دوره بیشتر بهره می برید. همچنین باید بدانید که چگونه از برخی نرم افزارهای طراحی استفاده کنید. من Figma را توصیه می‌کنم، اما Adobe XD، Invission Studio، Sketch یا نرم‌افزارهای مشابه نیز مشکلی ندارند.

این دوره با در نظر گرفتن طراحان ایجاد شده است، اما ممکن است برای توسعه دهندگان فرانت اند یا صاحبان محصول نیز جالب باشد.

یک شبکه اصلی ایجاد کنید که همه اجزای خود را هم تراز کنید.
موجودات را با این شبکه تراز کنید و شبکه‌های جداگانه برای هر جزء ایجاد کنید
عناصر را با کامپوننت تراز کنید (با خیال راحت اجزای موجود را کپی کنید. طراحی برنامه یا برنامه ای که در گذشته روی آن کار کرده اید)

* از نرم افزار طراحی خود اسکرین شات بگیرید تا بتوانیم شبکه نمایش داده شده را ببینیم (اگر تصویر را صادر یا ذخیره کنید، شبکه روی تصویر نمایش داده نمی شود)

یک شبکه اصلی ایجاد کنید.
با یک شبکه عمودی شروع کنید. این می تواند خطوط عمودی با ارتفاع حدود 4 پیکسل باشد، اما ممکن است بسته به نوع بدنه خود ارتفاع آن را متفاوت کنید.
افراد اغلب از 12 ستون استفاده می کنند، اما می توانید با تعداد دیگری از ستون ها آزمایش کنید.
یک حاشیه و عرض ناودان را انتخاب کنید که نسبت به شبکه عمودی است.
یک اسکرین شات آپلود کنید.

افزودن مؤلفه ها
برخی مؤلفه ها را اضافه کنید... (آنها فقط می توانند کادرهایی در صفحه باشند)
اجزاء را با شبکه تراز کنید.
به هر جزء حداقل یک سطر و یک ستون با حاشیه ای نسبت به شبکه عمودی اصلی خود بدهید.

عناصر را اضافه کنید
متن، تصویر، نماد یا هر چیز دیگری را که دوست دارید اضافه کنید.
نگران نباشید که منطقی است روی آن متمرکز و مرتب به نظر برسد. به راحتی می توانید عناصر یک طرح موجود را کپی کنید.



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

درس ها Lessons

  • انواع گرید Types of Grid

  • اهمیت شبکه ها Importance of Grids

  • ساخت شبکه ما - قسمت 3 Building our Grid - Part 3

  • تراز کردن با Grid Align to Grid

  • شبکه جاسازی شده Embedded Grid

  • مقدمه Intro

  • Css Grid Css Grid

  • خلاصه Summary

  • ساخت شبکه ما - قسمت 2 Building our Grid - Part 2

  • آناتومی یک شبکه - قسمت 2 Anatomy of a Grid - Part 2

  • پاسخگو در مقابل سیال Responsive vs Fluid

  • جعبه مدال Box Modal

  • خلاصه Summary

  • هندسه Geometry

  • آناتومی یک شبکه - قسمت 1 Anatomy of a Grid - Part 1

  • ساخت شبکه ما - قسمت 1 Building our Grid - Part 1

  • فلکس باکس Flex Box

نمایش نظرات

آموزش ایجاد یک سیستم شبکه (هفته 6 بوت کمپ UI)
جزییات دوره
1h 27m
17
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
92
از 5
ندارد
دارد
دارد
Rob Sutcliffe
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Rob Sutcliffe Rob Sutcliffe

طراح و توسعه دهنده UI