Map concept I did for a dark RPG

Basic UI Design

2D art can be broken in to 3 broad subjects: shape, perspective, and color & light. Since UI deals mostly with 2D shapes, perspective is not as important, and I will not be covering it. Many rules come in pairs of opposites. This is how contrast is created. We use contrast to control the flow of visual information. We might want the most important part of the image to stick out first, then the second most important, and finally optional information. I will point out this contrast as x versus y.

Shape

A shape is an outline. The outline can be implied. For example, we can tell the below image is a circle even through part of it is missing.

An incomplete circle

Strokes, proportions, negative space, and gesture are all properties of shape. Gesture is more often used in character design and animation, but does not apply to UI design as much, so I will not be covering it.

Stroke

A stroke is created by placing the tip of the pencil on the paper, moving the pencil, and lifting the pencil off the paper. Strokes can be a line, curvy, edgy, or random. Combining a bunch of strokes creates a shape.

The most common stroke in UI is a line. Horizontal or vertical lines are often used to divide groups or UI widgets. Long lines imply the groups are distinct choices. Short lines imply the groups are related. Lines contrast short versus long.

Demonstration of vertical lines being used

Even though colors and spacing will do the job of the stroke, the stroke presents an opportunity to add extra theming style. For instance, adding a saw tooth stroke between buttons on a horizontal menu might fit a horror theme.

Proportions

People naturally compare shapes. For example, an orange is rounder than a watermelon. Comparing shapes is called proportions. The human height has a proportion of 7 heads. The human height is being compared to a human head. A proportion is just a fraction.

The most common shape in UI is a rectangle. Big proportions in size means the button is important and should be clicked. Size should not be abused, limit the variation from 2 – 3. Shape proportions contrast big versus small.

Comparing big and small shapes

Negative Space

The inverse of an outline is called negative space. If we have an outline of a square, we can see there is space outside the square, but negative space points out there is also space inside the square. Anywhere the outline is not, is negative space.

UI elements that are closer together are related, like a tool bar. Elements that are farther aways are distinct, like the space between a title and paragraph. Spacing is often used to layout panels on the page. Negative space contrasts far versus close distance.

Grid vs list layout

Color & Light

Color has 3 properties.

  1. Hue = the color: red, orange, yellow, green, blue, etc.
  2. Saturation = colorfulness or how close the color is to gray
  3. Value = lighting, the light and dark

Hue

The purpose of hue is to 1) individualize, 2) blend the object into the environment. People perceive different hues as distinct individuals. Consider a red and green apple, although they are related, a person might prefer one over the other, when rationally, they are both apples.

Similar to line strokes and spacing, hue contrasts individual vs group. To maximize individuality we pick pairs of opposite colors. Artists call these complementary colors. To get complementary colors on the color wheel, move the hue 180 degrees.

Shows where hue, saturation, and value are placed on the color wheel

Saturation

The purpose of saturation is to contrast liveliness with death. A grayed out button could be interpreted as dead or disabled. In contrast, a colorful red button is screaming “click me”.

Saturation swings from lively to death.

Value

The purpose of value is to contrast light and dark. Value is a synonym for lighting or shading. In normal art, value is how humans tell an object is 3D. With UI, value is also used to contrast hiding and showing.

The value of text should either be close to black or close to white, so that it easily pops up on the page. Sometimes a gray value is used for optional text.

If the image is overall dark, then making a button darker will hide it, while making it lighter will reveal it. On the other hand, if the image is overall bright, then making text brighter will hide it, while making it darker will reveal it.

Examples

Here are a bunch of examples where I point out how shape and color are used.

Saturation swings from lively to death. Saturation swings from lively to death. Saturation swings from lively to death.

References