Basic UI Design
- 2017 June 30 Friday
- 3 min. read (667 words)
- Shape
- Color
- Examples
- References
Visual art can be broken in to 2 broad subjects: shape, and color. Many rules come in pairs of opposites. It allows us to create contrast. We can use contrast to prioritize UI elements. We might want the most important part of the UI to stick out first, then the second most important, then the third most, etc.
Shape
A shape is an outline. The outline can be implied. We can tell the below image is a circle even through part of it is missing.
UI's are made of buttons and menus (menu bar, tool bar, accordion menu, panels, etc.). They tend to be rectangular shapes. For icon design, we will need an intermediate understanding of shapes.
Stroke, proportion, space, gesture, and perspective all influence shape. UI mostly focuses on strokes, proportions, and space. UI is 2D, so perspective is limited. Gesture is more used in character design and animation.
Stroke
A stroke is a continuous line. Strokes can be a straight, curvy, edgy, or random. Combining a bunch of strokes creates a shape.
Horizontal or vertical lines are used to divide groups or UI widgets. Long lines imply the groups are distinct choices. Short lines imply the groups are related. Colors and spacing can do the job of the stroke, but the stroke can be used to add theming style. For instance, a saw tooth stroke might fit a horror theme.
Proportions
People naturally compare shapes. 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.
One aspect of proportion is size. Bigger means important. Stick to 2 to 3 sizes to maintain consistency. Example, text sizes: title, subtitle, regular text.
Spacing
Space is everything that is not part of the shape's outline/ border. UI designers like to add lots of space to make each UI element stick out clearly.
UI elements that are closer together are related, like a tool bar. Elements that are farther away are distinct. In the example below, the list and grid are distinct, because they are far apart. Similarly, there is space between a title and paragraph to make them distinct.
Color
Color has 3 properties.
- Hue = the color: red, orange, yellow, green, blue, etc.
- Saturation = colorfulness, or how close the color is to gray
- Value = lighting, light and dark
Hue
The purpose of hue is to 1) individualize, 2) blend the object into the environment. People perceive different hues as individuals. A red and green apple are apples, but they feel like individuals. If we had a bunch of apples with slightly different red colors, then they would seem like a group or family.
To maximize individuality, we pick pairs of opposite colors. Artists call opposite colors complementary colors. To get complementary colors on the color wheel, move the hue 180 degrees.
Saturation
The purpose of saturation is to contrast liveliness with death. A grayed out button could be interpreted as dead or disabled. In comparison, a colorful red button is screaming “click me”.
Value
In normal art, value is how humans tell an object is 3D. With UI, value is used to hide or show UI elements.
If the image is dark overall, 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.
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.
Examples
