explanation
Design for Developers is a full-length tutorial designed for programmers throughout the entire process of working from concept to design and industrial use. We’ll also design rules for being a companion, and let our design team members make better suggestions for you.
What you’ll learn in the Design for Developers course:
- Armed with the basic concepts of design work, you will become familiar with working as a designer alongside a developer.
- Familiarity with layout and balance between symmetry and non-structure, history of layout, objects and layouts
- Learn about layouts in CSS, using tools, and other tools for masking aspects to learn ClipPath and CSS Flexbox.
- Learn color theory. Combination of colors and various modes Color, engraving and color code and coding. Creating dynamic views of palettes and gradients
- Typography, principles, basics, colors and fonts applicable to typography
- Learn how to get inspired by other people’s work
- Includes images and their various capabilities, images in various formats, tips, output decisions, and more. SVG format
- sample preparation. User experience and tools
Specification period
Publisher: FrontendMasters
teacher: Sarah Drasner
Language: English,
Education level: Beginner to advanced;
Number of classes: 63
Duration: 4 hours 20 minutes
This process:
introduction
introduction
right brain vs left brain
What are the settings for this course?
very
designer vs developer
carefully listed
Introduction to layout, grid,
balance, symmetry
balance asymmetry
Explore asymmetry learned in art history,
shape
Resize and Crop
grid
layout tools
Photoshop keyboard shortcuts
Layout and Configuration Demo
basic shapes, movements,
Review basic shapes
CSS Layout
Layout in CSS
CSS Grid Demo
Grid naming example
CSS Flexbox
Using other masking tools in Clippath
CSS writing mode
Grid as an example demo
Layout Practice
layout qa
color theory
color mode
color mixing
color modes and properties,
Color your code
color variable
limited colors
color tools
animated gradients
How to make a palette
Data visualization using hsl, example
Create a palette demo
Palette making practice
Typography
typography basics
typography resources
Font pairing
Typography for Lawyers
typographic colors
term
typography demo
Typography, movement, and qa
Inspiration
remixing
source of inspiration
UI kit demo
Image and Performance
Image formats, resources,
export tips
SVG
SVG, processed and full page backgrounds
Images, demos, image overlays, effects,
Layout, demo coding, configuration
Images and layout practice
prototyping
loader
user Experience Tools,
Motion Design Language
Types of Prototypes
page transition
interactive exercise
finish
conclusion
precondition:
image
sample video
installation manual
After extracting, use the back player to select the desired view.
Subtitles: English
Quality: 1080p
download link
Password file: free download software
file size
1.5 GB