Some interfaces present the user with a collection of non-overlapping tiles of different sizes. For example:

Ubuntu phone interface

Similar layouts include Pinterest and Windows 8 / Xbox, but looking at screenshots these are more regular - they seem to define global columns or rows but there are none enforced in my visual example above. I'm thinking more Packery than Masonry (unless the same term applies to both and it's just a matter of degree).

Is there in fact a name for this layout?

  • 1
    I refer to this as "masonry" but I think that's based on the JavaScript library and not necessarily a widespread name for the pattern.
    – Matt Obee
    Jul 11 '14 at 11:56
  • @MattObee what about "cascading grid layout"?
    – lofidevops
    Jul 11 '14 at 12:25
  • Thanks to Google + I want to call it "cards" but that's not quite right. It's certainly a rising trend, and it's well beyond the point where it can be called just "pinterest like"
    – Ben Brocka
    Jul 11 '14 at 13:22
  • @BenBrocka yes, I think cards are often the widget involved, but it doesn't capture simply the layout (cause cards could be laid out in a regular grid) - but great link!
    – lofidevops
    Jul 11 '14 at 13:31

I've not specifically heard it used for UI but I think the word to describe it is "tesselated":

If someone said a UI was using "tesselated irregular tiles", I'd understand a Win8/Flickr photostream/Pinterest type layout.

  • tessellation is definitely too regular for what I'm thinking of, but thanks - I'm aware my question could do with a visual example, and as soon as I have one I will post one
    – lofidevops
    Jul 11 '14 at 12:02
  • My understanding of tesselation was that regularity/repetition isn't a nessesity but rather the most common form. See the Voronoi tiling example at the bottom of the wikipedia page. (This doesn't mean you're wrong or I'm right - if most people understand tesselation to be regular then it's not the right word.)
    – edeverett
    Jul 11 '14 at 12:07

Mosaic Interface

Since "tiled" implies regularity, I'd call that a "mosaic" interface to include tiles of various sizes/orientations.


Isogonal (regular/irregular) tiling.

  • This seems visually similar but I've never seen the term applied to a UI.
    – Ben Brocka
    Jul 11 '14 at 13:21
  • 1
    The wikipedia explanation of isogonal figures was a bit mind-numbing. There's a screenshot labelled isogonal in the Tesselation article that looks right, but nothing in the isogonal article seems right. Can you provide any direct examples, explanations. FWIW I don't mind a mathematical/geometric term - if the hat fits...
    – lofidevops
    Jul 11 '14 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.