The Layouts of Tomorrow

A lot of todays sites look the same. Why is that? Two Reasons. 1st: we're trained to think that way. We have a mental Image of what a website looks like, and design towards that. We break a design into logical parts.

I catch myself doing these automatic steps. Open up a new sketch file, draw a grey rectangle across the top for the header. Our brains create these boxes to fill with content.
Is there another approach?

I'm a big fan of gigposter art. Start with a blank canvas, think about what text to put on there. What's the content? Hierarchy, Structure?

Then, what does the band sound like, what am I trying to communicate? You don't just go for the "metal" template.

Design from the content out, for each purpose.

But Websites have to be readable. responsive. functional. 2nd reason for these common layouts: they work well with the limits we have on the web. anything too crazy or creative is hard, feels hacky / unstable.

New Tools! They were not around at the time the "standard layouts" emerged. These make a lot of things easier; but the point is not to build the same stuff with different tech - more potential: they give us the chance to create something new.

I wanted to take some of these new tools for a spin and see what can be done. So I searched dribbble for "unconventional" layouts. There is some great stuff out there.

I decided on this one. It's visually interesting but also quite flexible, responsive. How hard is it to build something like this?

Demo on Codepen

CSS Grid for Tiles, 3D Transforms for parallax without JS, Scroll Snap Points, Object-Fit, Responsive...

This is just one implementation. I'd like to encourage you to look at new ways of doing layout, play around with it a bit. get a feeling for the new possibilities. We don't have to reinvent the wheel, but maybe we'll find new solutions.