A presentation at Webclerks Meetup Vienna in in Vienna, Austria by Max Böck
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.
How can we break out of our design habits? I went over to dribbble in search of fresh webdesign ideas - and tried to build a non-standard layout, given the modern CSS tools we have today.
The following resources were mentioned during the presentation or are useful additional information.
Code Demo
Detailed Blog Post
Here’s what was said about this presentation on social media.
for free. You
can too.