Is the boxy style getting a little too comfy for you? This is in reference to that two-dimensional, square design found on so many great sites. Designing outside the box could make them so much better, but it helps to have a bit of inspiration to get started. These examples below give you just that. They’re all ways to get your design outside those four static lines you’re so familiar with and into the whole new dimension.
A Brief Message
This versatile design creates a blog unlike most others. Each post displays a different image. What’s more, the text layout allows text to flow around the image in every post, maintaining great white space. This is an excellent plus for attracting readers with a clever combination of image and text – without the boring box.
We know. We know. Old habits die hard, but this Fox site should be adequate motivation to venture into the new territory. Notice how the lines slant from box to box, and let’s not forget the stand out feature – larger-than-life background images that are both sharp and intriguing.
Maybe you’re not ready to take a huge leap off the grid just yet, but c’mon! Start with a few baby steps. You can take your cue from Mezzoblue. Notice how the image here extends just outside the grid. It’s a simple adjust with a huge effect on first impression. Best of all it’s a very easy technique to manage in CSS. Just give your margin-left property a negative value and voile – a little something different.
WonderBra Ultimate Strapless
WonderBra Ultimate Strapless offers plenty outside-the-box goodness for those expecting a little something more. We’ve got nice slanted edges up top and great curvy image in the middle. Both coincide nicely with the content – an excellent way to keep audiences coming back for more.
One of the best things about leaving your design comfort zones is that you really get the opportunity to connect with your audience in unconventional ways. The Huge Inc. site does this very well with lively, in-your-face header design. The audience can appreciate the content better and will walk away with a lasting impression.
Clearly, Trent Walton’s design style is not for squares. Again, each blog post boasts a new and different image allowing readers to make a connection between image and content. Each image departs the grids at various angles, shapes and sizes, creating a dynamic visual experience.
Jason Santa Maria
Variety is the spice of life, and it also makes for interesting and appealing web pages. This site has infinite character because its designers have taken a highly detailed approach to its design. There’s a new style sheet for almost every page. Like the site above, each post features a different image, and the grid just can’t hold them back.
The traditional box has it perks, but it’s always a good idea to venture forth creatively from time to time. These examples show the excellent results of a few pretty simple CSS tricks, and so should make their way into your design repertoire in no time. Enjoy!