Key Visual Element

icon picker
Shapes & Lines

Overview

BIG’s key visual system utilizes specifically created shapes or lines. It’s composed of 3-4 differently colored spaces through a combination of overlapping circular and linear shapes. This visual is brought out from the characteristics and execution of the BIG icon. They can be used as backgrounds, borders, and as image masks.

Backgrounds
BIG - Coda Builder - KV & Iconography - 220418-15.png
BIG - Coda Builder - KV & Iconography - 220418-01.png
BIG - Coda Builder - KV & Iconography - 220418-21.png
BIG - Coda Builder - KV & Iconography - 220418-16.png
BIG - Coda Builder - KV & Iconography - 220418-02.png
BIG - Coda Builder - KV & Iconography - 220418-22.png
Borders
BIG - Coda Builder - KV & Iconography - 220418-23.png
BIG - Coda Builder - KV & Iconography - 220418-25.png
BIG - Coda Builder - KV & Iconography - 220418-24.png
BIG - Coda Builder - KV & Iconography - 220418-26.png
Image mask
BIG - Coda Builder - KV & Iconography - 220418-27.png
BIG - Coda Builder - KV & Iconography - 220418-28.png

Construction

This step-by-step process is for Adobe Illustrator.
1. Set up your canvass dimensions and size.
1.png
2. Create the first shape. In this case, we start with a circle for the circular shape. Adjust the part of the circle you want to include in the key visual.
2.png
3. Create the second shape. For this, we form the linear shape through a quadrilateral shape.
3.png
4. Cut out an overlap from the 2 shapes. This is done in the Pathfinder window by clicking the Divide button upon selecting the 2 shapes.
4.png
5. Select and recolor the overlap shape.
5.png
6. Create a shape in the form and size of your canvass over the existing shapes.
6.png
7. Mask the shapes to take the parts outside of the canvass away from view. From the main dropdown menu, go to Object > Clipping Mask > Mask.
7.png
8. As a shortcut, you can press Command + 7 after selecting all the elements with the canvass shape on top.
8.png
9. To convert it from overlapping shapes to lines, simply render the fill color empty and assign a color the stroke. The stroke thickness will be dependent on the canvass size, so estimate and adjust it according to the provided samples.
09.png
9.png

Sample Applications

BIG - Coda Builder - KV & Iconography - 220418-14.png
BIG - Coda Builder - KV & Iconography - 220418-18.png
BIG - Coda Builder - KV & Iconography - 220418-13.png
BIG - Coda Builder - KV & Iconography - 220418-20.png


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.