Layout on a hexagonal grid

Layout on a hex-grid happens from the center-out.
The app always keeps the user's focus at the center of the screen.
The most common choice is placed at the center
and less common choices are placed in concentric rings around the center
Usually the first ring around the center which has 6 elements
is enough to satisfy the current needs of a UI.

Figure 2. The first ring in the hex-grid.

Most of the time, layout involves the placement of on-screen controls
at the center or in the first ring around the center.
A designer has to choose an ordering of the elements of the first ring
This ordering will depend on the number of elements used.
If only 2 elements are used, they may be placed to the right and left of the center
If 3 elements are used, they may be placed at right, NW and SW of the center.
4 elements -- NE, NW, SW, SE.
5 or 6 elements -- E, W, NE, NW, SW, SE.


Figure 3. A pyramid layout.


Figure 4. A trap layout.


Figure 5. A keyboard friendly layout.


Figure 6. Another keyboard friendly layout.


Figure 7. A screen-friendly layout.


Figure 8. A 2-ring layout.


Figure 9. A stacked layout.

Sizing onscreen controls

Text on a hexagonal grid