You can mix the content of this dynamic grid layout using a simple but brilliantly styled slider.
A minimal grid meets a horizontal scrolling in this interesting, minimal, website about design and typography.
The vertical expansion of this beautiful portfolio and its geometrical construction match perfectly the architectural content displayed.
This layout, made of different of pieces of paper haphazardly mixed, creates a strange yet fascinating effect.
The layout grid become visibles thanks to the background pattern so you can see how every thing falls neatly in the right place.
Though it’s often seen in prints, displaying a multilanguage text using two continguos columns is quite an unusual trick for the web. Classy.
I don’t know what’s wrong with myself but the more websites I see, the more I love these one/two columns minimal layouts, stripped of any redundant graphic element.
Another elegant example of minimal, high-impact layout, based exclusively on columns subdivision and thin horizontal subdivisions.
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.
Love the opposition between the overall, orthogonal layout grid and the lozange masked photo.
CitySounds.fm is an online radio (and iphone app) that lets you discover music produced in cities around the world.
I love the simple and uniform grid, based on a austere rectangular scheme, which conveys the idea of a gigantic button board.
I find it very classy when text is set across two columns, especially when followed by full width images.
Listgeeks is a social network designed for creating and sharing lists of things: lists boxes are neatly set on a 3 columns, almost square-based, grid; their vivid colours invigorate a strongly geometrical sequence that, otherwise, could have turned out cold and “discouraging”.
area 22 is a nice portfolio from the San Francisco based designer Sonia Chan and a beautiful example of minimal design as well.
Apart from that, I love the tiny text snippets that introduce each section: they give a really personal touch to the browsing experience.
The Twitter timeline streamed on the page left of Travelled is really delicious.
A nice black and white page using a three column layout: the nonaligned content boxes break the design scheme, bringing this page to life.
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.
You can’t get much simpler (and elegant) than this: a silhouette logo mark, clean typography, two-toned color scheme and sparse graphic elements.
Oh, this blend tastes so good!
Grain & Gram is an online magazine for gents, based on a two-colums grid with strong horizontal subdivisions. The big amount of blank space gives emphasis both to titles and teasers, where nicely styled pictograms and pull-out quotes break the columns, avoiding a stern effect and adding a classy touch to the whole page.
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.
As new year’s resolution I’ll try to update more often this website. For now, here you have a nice example of good minimal b&w blog design. If you like the lettering, you’ll be happy to know that the type used is Tex Gyre Schola and you can download it for free here.
The Swish Life displays a classic two columns grid that unusually splits asymmetrically into several, differents modules.
An example of extremely minimal, black and white layout, taken from Trent Walton‘s personal blog.
On Justquoted you can find tons of interesting famous quotes that can make your conversation even smarter than they already are.
The full-option listing it’s designed not only to display gracefully these witty quotes but also to promote conversation about them.
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.
With a smooth, nice transition, thin layout guides drop into place while fancy typographic headlines fill columns blank spaces: Balsamstudio‘s portfolio provides an outstanding layout, simple and elegant, while showcasing a lot of interesiting identity projects.
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.
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!
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.