Skip to content
Experiments

Studio shelf, drawn and photographed

Objects from the studio next to their isometric twins.

Tile engines figured out draw order decades ago. Sort by the sum of the column and row, draw from the smallest sum to the largest, and most scenes just work. Tall objects that span several tiles need special care, but the simple rule covers floors, walls and small props, which is most of what a blog illustration needs.

6 imagesJPG, 1200 × 1200

Download ZIP 1 MB

Accessibility for decorative art is mostly about getting out of the way. If an illustration adds no information, hide it from assistive technology with aria-hidden on its wrapper. If it does carry meaning, such as a chart, give it a text alternative that says what the picture shows, not how it was built.

Choosing the three face colours

Workshops taught us more than any tutorial. Watching people fold paper cubes and then rebuild them in CSS showed exactly where the mental model breaks: the order of rotations, the origin of each face, and the moment a block turns inside out. Most of our tutorials now start with the paper version for that reason.

Share

Written by

Inês Duarte

Inês is Cubefold's colour and type lead. She believes every isometric scene needs exactly one warm accent, and not two.

All 16 posts by Inês Duarte

4 comments

  1. Bea Kowalski

    This finally made the order of rotations click for me. I had them the wrong way round for weeks.

    Reply to Bea Kowalski
    1. Hana Sato

      Fixed now, thanks for spotting it.

      Reply to Hana Sato
  2. Kofi Mensah

    Short and useful. More quick tips like this, please.

    Reply to Kofi Mensah
  3. Soren Dahl

    Any plans for a video version of this one?

    Reply to Soren Dahl

Leave a comment

Your email address won’t be published. Required fields are marked.