Alignment
One
alignment.
The place and spacing of each part are fixed. What changes is the shape inside that area.
Forma, an independent design study
One order,
six parts.
Six areas of the same size, with round and straight edges. Forma is an independent graphic study in which I repeat one measure in different shapes.
- Work
- Forma
- Kind
- Independent design
- Focus
- Layout, measure and repetition
- Implementation
- HTML and CSS
Visual layout
Different parts.
Shared measures.
I placed the parts in areas of the same size. I rounded the corners of some and left others straight. By keeping the gaps fixed, I let those differences stand out.
Light shades of green keep company with the yellow part between them. Repeated measures hold the changing shapes together in one composition.
One
Rhythm
Measured
repetition.
I paired straight edges with curves. While repeating one measure, I left each part a small difference.
Color
A limited
palette.
I completed close shades of green with a single yellow part.
Implementation
One layout,
two views.
In the second view I turned all the parts 180 degrees together and wrote “rhythm” in place of “forma”. With the same parts, the composition changed direction.
I made the shapes with CSS and the layout with CSS Grid. With no separate image file, the composition shrinks as one piece as the screen narrows.
Your site
What carries over
to your site?
In Forma I fitted six different parts onto one grid. The same approach works on a site with many services and pages.
Even when each page carries different content, it sits on a shared layout; headings, spacing and links are in the same place everywhere. Visitors never lose track of where they are.
Let’s think about your site together.
Just tell me what you do and what kind of site you need.