Category:

  • General Learning

Progression

ID Status Learning Item Type Related Project Date Completed
1 Not Started Design for Non-Designers Video
2 Not Started Learn UI Design Fundamentals Course
3 Not Started Grid Systems in Graphic Design by Josef Muller Brockmann Book

Introductory design videos

An introduction to design video series compiled from http://dylanbritz.com/post/web-developer-roadmap-for-2021.


Core Concepts

Basic Elements

  • Line
  • Shape
  • Form
  • Texture
  • Balance

Lines

Any connecting segment between two or more points.

Weight, color, texture, and style all greatly influence the “tone” expressed by lines.

When paired with text, lines can convey organization, emphasis, or help direct users.

Shape

Any 2D object with a recognizable boundary.

Two key classifications of shapes:

  • Geometric (Regular)
    • Think circles, rectangles, and stars.
  • Organic
    • Freeform shapes, such as a bean.

Shapes can help to organize information, convey information themselves through illustrations, and add visual interest.

Form

Three-dimensional shapes.

Forms can exist either in the real world, or be implied through the use of light, shadow, and perspective to give the appearance of depth.

The use of forms can give a sense of realism and place to elements in a composition.

Texture

The physical quality of a surface.

Textures can be three dimensional or implied, similar to forms.

They add depth and tactility to images, which can add interest. Too much texture, however, can be overwhelming to viewers.

Balance

The equal distribution of visual weight, or how much every element in a design attracts the viewer’s eye.

Affected by:

  • Color
  • Size
  • Number
  • Negative space

Developing balance takes intuition and practice.

There are two main types of balance:

  • Symmetrical
  • Asymmetrical

Asymmetrical balance follows the Rule of Thirds:

Given a 3x3 grid overlaying the scene, the focal object is placed on one of the lines.

The reasoning for this is that, typically, the human eye will follow a similar path when scanning an image.

Color Theory

Basics

Primary colors

  • Red
  • Yellow
  • Blue

Secondary colors

  • Orange
  • Green
  • Purple

Tertiary colors are the half-steps between all primary and secondary colors, and this forms the Color Wheel.

Color wheel showing the relation between primary and secondary colors.

Hue Saturation Value

Resources