A simple and fun avatar design based on a 6x5 circle grid.

Modular design fun

Foundational grid thinking and how to apply it as a concept

Modularity is the cornerstone of current digital creative production. Modular thinking serves us to bring some sort of reference into chaos and overstimulation.

The setup of a basic grid can bring much needed clarity of design. And the results can be surprising.

Grids can get created based on columns, rows and shapes. For digital screen set-ups, its base value element is a rectangle, referred to in width and height in various size specifications (px, rem, vw, vh, %).

For our illustrative and fun-based approach, we use circles as a grid design element.

Set a grid based on an elemental circular shape and build out a number of columns and rows.

Choose a color scheme. Start color coding your grid shapes and fill in the negative spaces.

Figure 1: Composing a portrait avatar

In this modular grid of 5x5 circles with a minimal in-between space, two adjacent circles are rendered as eyes or eye-glasses. Unique faces appear out of blending other circles within themself.

The two eye dots stand out by choices of colors and surrounding shapes. Infinite possibilities await by arranging the circles on this grid.

A grid is composed out of 5 circles across and 5 circles down. It forms the base foundation for these avatar designs. Negative spaces are filled in to compose color fields that render the faces. The variations are fun and always relate back to the base grid module.

Figure 2: Symmetry pictograms

Symmetry as a grid design concepts builds a base structure for iconic design. A modular grid with an even-number set-up of columns and rows sets the foundation for symmetry.

We can combine elements by joining them through their negative spaces. Some of them can be mirrored, others changed through colors and fills. Thus, interesting and stunning icons emerge.