Frontend Masters – Design for Developers 2019-1

در تاریخ: 1400/01/14 10:06:59

توضیحات

Design for Developers، یک دوره آموزش کامل طراحی برای برنامه نویسان در طول تمام پروسه انجام کار از مفاهیم تا طراحی و بکار گیری میباشد. ما همچنین قوانین طراحی را برای تبدیل شدن به یک همکار بهتر برای اعضای تیم طراحی به شما ارائه خواهیم داد.

آنچه در دوره Design for Developers یاد خواهید گرفت:

شما با مفاهیم مبانی کار طراحی آشنا خواهید شد و به تفاوت کار طراح با توسعه دهنده پی خواهید برد.
آشنایی با طرح بندی و بالانس کردن متقارن و غیرمتقارن، تاریخچه طرح بندی، اشیا و ابزار های طرح بندی
یادگیری طرح بندی در CSS، استفاده از ابزار های ClipPath و دیگر ابزار های Masking در کنار یادگیری CSS Flexbox
یادگیری نظریه رنگ ها، ترکیب رنگ ها و انواع حالت رنگ، خصوصیت ها و رنگ ها در کد نویسی، ساخت Palette و گردینت های پویا نمایی شده
فن چاپ، اصول مبانی، رنگ بندی و فونت های قابل استفاده برای تایپوگرافی
یادگیری چگونگی الهام گرفتن از آثار دیگران
تصاویر و عملکرد های مختلف مربوط به آنها، شامل انواع فرمت تصاویر، نکات خروجی گیری، فرمت SVG
نمونه سازی، تجربه کاربری و ابزار های مربوط

مشخصات دوره

ناشر: FrontendMasters
مدرس: Sarah Drasner
زبان: انگلیسی
سطح آموزش: مقدماتی تا پیشرفته
تعداد دروس: 63
مدت زمان: 4 ساعت و 20 دقیقه

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

Introduction

introduction
right vs left brain
what this course is setup
perfection
designer vs developer

Layout

introduction to layouts grids
balance symmetry
balance asymmetry
exploring asymmetry learning from art history
shape
scale and cropping
grid
layout tools
photoshop keyboard shortcuts
layout and composition demo
primitive shapes exercise
primitive shapes review

CSS Layout

layout in css
css grid demos
grid naming example
css flexbox
using clippath other masking tools
css writing mode
grid by example demo
layout exercise
layout q a

Color Theory

color modes
color mixing
color modes and properties
color in code
color variables
limited color
color tools
animated gradients
how to create a palette
data visualization with hsl a example
creating a palette demo
creating a palette exercise

Typography

typography basics
typography resources
pairing fonts
typography for lawyers
typographic color
terminology
typography demo
typography exercise and q a

Inspiration

remixing
sources of inspiration
ui kit demo

Images and Performance

image formats resources
exporting tips
svg
svg handling and full page background
images demo image overlay effects
layout demo coding compositions
images layout exercise

Prototyping

loaders
user experience tools
motion design language
types of prototypes
page transitions
interaction exercise

Wrapping Up

conclusion