1

Recently I stumbled over a Homepage which had a sort of tiled design on the homepage consisting of several black/dark rounded boxes positioned next to each other. Similar to stack exchange view all sites, but with just a few boxes of different size above the fold.

However I forgot which site it was, and am now looking for successful implementations of that design in the wild and possibly if there is a name for this other than tiles?

(Tiles seems to be something slightly different, involving functionality)

This is how it looks like:

enter image description here

The aim here is to replace a slider with something like that.

So basically I am asking if this design has a name, and what well known websites use it on their homepage instead of a slider (news sites don't count).

7
  • 1
    It looks like simply fitting rectangles into a page. What comes to my mind is "newspaper layout" but that's not an established term for a layout style. Can you give us more clues as to what you're after beyond this general idea?
    – obelia
    Commented Mar 16, 2013 at 23:53
  • I need to present several things on the homepage. Marketing msges, webinar, maybe news, etc but I dont want to use a slider. A news homepage has however very specific needs, so I don't want to look at news homepages. Commented Mar 16, 2013 at 23:55
  • Basically im looking for established brochure type websites, who do not use a slider but still have various msges above the fold, and maybe these rectangles have a name as design pattern? Commented Mar 16, 2013 at 23:57
  • 1
    It's fairly common to have diverse units of functionality arranged in tight fitting rectangles on a page. I don't think there's a specific style or pattern that applies.
    – obelia
    Commented Mar 17, 2013 at 0:04
  • 1
    How are you differentiating between the grid style design (that is often associated with web pages) and the tile style design (that seems to be associated with apps)? I think the real difference is in the interaction and not the layout, and it would probably be impractical for websites to have the Windows 8 style of interaction.
    – Michael Lai
    Commented Mar 17, 2013 at 23:13

1 Answer 1

1

These sites are similar.

  1. http://www.istockphoto.com
  2. http://flipboard.com (used on app but not website)
  3. And jQuery Masonry is the js plugin used to make the "Tiles" Design. They have a showcase of sites using it. http://masonry.desandro.com
3
  • masonry seems to be the right idea. Commented Mar 18, 2013 at 15:12
  • Glad to help. Let me know if mine is the best answer.
    – Danger14
    Commented Mar 19, 2013 at 20:07
  • yours is the only answer so far - so it is the best, the worst and everything else as well ;) Commented Mar 20, 2013 at 0:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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