Category Archives: Grids & Listings

Layout grids and listings in web design: css grids, grids frameworks, layouts examples, grid based layout and websites, grid layout design rules and much more at Web & Patterns, collecting inspirational solutions for very inspired web designers.

Beautiful three columns scrolling page

Interview Magazine‘s home page is nicely split into three columns: one is for the main content, one for extra features or links and one contains a big black box with the section title.
When you scroll, the latter is fixed while the others two move down until a new section starts: when it happens, the three columns stop and align simultaneously to the bottom, creating a pleasant visual effect and suggesting the beginning of a new content area.

One column attitude

I find black and white layouts so sexy: especially when, like in this case, text is center aligned, set in a large column, with big leading and with small, lovely serifed numerals.

As for the contents, Inventory Magazine is a trendy publication dedicated to featuring on some of the most inspiring and talented people in the industry, as well as editorials, reviews and original photography.

Maison Kitsuné dresses black and white

Maison Kitsuné is

is the brainchild of Gildas Loaec & Masaya Kuroki, the meeting between a young dynamic entrepreneur from Brittany and an architecture student who switched to fashion design.

I know that b&w, minimal layouts might seem a little clichéd for you, my dear webdesign experts, but I still can’t get bored by the simple charme exuding from a single line black divider, a nice serif type or a minimal layout grid.

Muccadesign’s about page grid

Can you judge a book by its cover? And a creative agency by its about page?

I really think so: here you are a creative “about us” page form the award winning agency Muccadesign, that consists on a list of pics arranged on a simple squared grid. Faces follow your mouse movement with a nice script effect and you can read each person’s bio on a baloon that occupies exactly 4 modules.

An inspiring square based layout grid


When it comes to grid-based web design, one of the most charming and peculiar grid structure example that occurrs to me it’s UX Magazine‘s layout.

The square-based structural balance of this layout it’s quite obvious but it could have turned out annoying and boring if designers didn’t conceive some visual tricks that, breaking the grid integrity, would create surprise and regain user’s attention. Merging two or more units to create rectangular spaces is one of them and for sure the upper-left corner of this page has been astutely designed: when you see for the first time this page, the red colour grabs your attention so the eye, following the ascending red lines, reaches the photograph that unrolls its text horizontally across the grid units.

Another  smart idea is the quotation call-out box: as in the aforementioned example, I think that the eye movement starts from the bottom, from the photograph I mean, that makes itself very visible for breaking the chain progression of text boxes, and then it goes up to reach the rectangular baloon with the blue outline and the citation text.

In the end I think that you can see this layout  as a sort of a big, typographic Tetris game, where every major graphic assest falls exactly into place.

Creative pagination and listing from a Saul Bass inspired Tumblr theme


How could we possibly resist to this Tumblr theme inspired by Saul Bass’ work?

Saul Bass was a notorious American graphic and logo designer, made famous by his animated motion picture title sequences and I’m quite sure you can recognize some of them here.

Bass’ spirit  it’s clearly revoked by the protruding hands, the capricious typography and by the use of pure colours.

It’s all so Hitchcock!

Learn something every day grid and illustrations

Learn something every day inspiraitonal grid and illustration

Did you know that an average chocolate bar has 8 insect legs in it? Or that you ca make diamonds out of Tequila?

You can learn this and much more  by following Learn something every day, a stunning daily project by design studio Young.

Every day a fresh new oddity, graphically exposed, is displayed on this self-initiated gallery project: website’s layout  is organized into a liquid grid and each gallery item is framed into a card element that will expand when you click on it revealing the full image and additional informations.