FrontendMasters – Design for Developers 2019-1

Description

Design for Developers is a complete design training course for programmers throughout the entire process of doing work from concepts to design and implementation. We will also provide you with design rules to become a better partner for design team members.

What you will learn in the Design for Developers course

You will learn the basics of design work and the difference between a designer and a developer.

Familiarity with symmetric and asymmetric layout and balancing, layout history, layout objects and tools

Learn layout in CSS, use ClipPath and other Masking tools along with learning Clex Flexbox

Learn color theory, color combinations and types of color modes, properties and colors in coding, palette and dynamic display grids

Printing technique, basics, color scheme and fonts that can be used for typography

Learn how to be inspired by the work of others

Images and their various functions, including a variety of image formats, output tips, SVG format

Prototyping, user experience and related tools

Course information

Publisher: FrontendMasters Instructor: Sarah Drasner English language Level of training: basic to advanced Number of courses: 63 Duration: 4 hours and 20 minutes

Topics

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

Installation

After Extract, watch with your favorite Player.

English subtitle

Quality: 1080p