From the course: Design Aesthetics for the Web
Schalten Sie den kompletten Kurs noch heute frei
Join today to access over 23,400 courses taught by industry experts.
Using gradation to create perspective
From the course: Design Aesthetics for the Web
Using gradation to create perspective
- [Narrator] The 10th principle of design is called gradation, which explores the concept of steps or stages in a design. When applied thoughtfully, gradation can add a wonderful, yet subtle sense of movement and interest to your designs. To put it simply, gradation in design refers to any gradual change that occurs by a series of steps, degrees, or stages, where there is an obvious visual shift from one state to another. Gradation is most apparent when you shift your design's elements in size and color. However, you can also add gradation to value, direction, line, shape, and even texture. Let me show you what I mean. Gradation in color happens when you shift from one hue to another. For instance, you could apply a gradient blend from warm to cool to the background or header area of your page, like this. This can create a nice aerial perspective and give the visitor a visual path to follow from top to bottom. Similarly, when you shift an element's color from light to dark, or dark to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Inhalt
-
-
-
-
-
(Locked)
Understanding the principles of design1m 45s
-
(Locked)
Using contrast to set areas of interest3m 8s
-
(Locked)
Applying font styles to show emphasis5m 23s
-
(Locked)
Aligning objects to achieve balance4m 40s
-
(Locked)
Using hyperlink styles to create unity4m 10s
-
Applying background patterns3m 14s
-
(Locked)
Adding scrolling and animation3m 31s
-
(Locked)
Using border styles to add rhythm2m 57s
-
(Locked)
Achieving proportion by scaling objects2m 43s
-
(Locked)
Creating simplicity3m 21s
-
(Locked)
Using gradation to create perspective3m 34s
-
(Locked)
Challenge: Banner ad1m
-
(Locked)
Solution: Banner ad39s
-
(Locked)
-
-
-