Are you tired of your typical columned and boxed layout? It is time to learn how to break out of the box and do something creative. In this post, I've collected some of the best examples that are designed out of the box. I've also provided some quick CSS tips with demo files on how to break out of the box by creatively using background images and the CSS position property.
Example 1: Huge Inc
What really captured my attention on the Huge site is the header design. Notice how the design elements are extended out of the box.
Example 2: Jason Santa Maria
With the amount of effort and details that Jason input on his site, no doubt it is one of the best designer sites around. Click through the posts, you will find that almost each post is unique and has a different stylesheet. Some visual images are within the grid, some are out of the box.
Example 3: A Brief Message
Similar to Jason Santa Maria's website, each post on ABriefMessage.com features a different image and CSS stylesheet. Unlike the other typical blog sites, the text on the site is perfectly layouted, so it runs around the image (it is like reading a print design).
Example 4: Trent Walton
TrentWalton.com puts the focus on the header, where each post displays a different background image and typesetting.
Example 5: Wonderbra Ultimate Strapless
Although there are some accessibility issues with the Wonderbra site (eg. the font is not scalable), but it is a lovely design. The content and images are nicely put together. At the first glance, I thought it was a Flash site. Then, I checked the source code and found it is done by CSS and a Javascript text replacement, cufon.
Example 6: Fox
Fox - Fringe web site broke the boring boxed layout by using spectacular background images that blend from top to bottom. Also, the slant cuts in between the boxes make it look more interesting. Don't forget to check the other Fox TV show sites.
Example 7: Mezzoblue
Mezzoblue made the image extend off the grid. This can be easily achieved by using the margin-left property with negative value.
Quick CSS Tutorials
Using CSS Absolute Position (view demo)
The following tutorial imitate the result as seen on the Huge website using the position property. Use position:absolute to place each element. Then set higher z-index for the logo, nav, and content area (so they are placed above the image box).
Using background image (view demo)
In this example, the logo and the text are embed in the background image. To make the logo text clickable, first specify the H1 to absolute position, then use text-indent to hide the text in the H1 a.
For the Click Here button, use absolute position to place it in exact location. Specify a background image to it and use text-indent to hide the text. On the hover, change the background position to bottom.
Using margin-left (view demo)
This one is extremely simple. Just specify the image with negative margin-left and float:left.
Got to say I’m not a big fan over using too many postion: absolutes on a page but they do play a very important part in design layout. Nice post
I have noticed that some people change their blog designs like others of us change the oil in our cars or more. It is great for them, but for me? Not so much.
i would kill to work with you! i pretty much only use CSS and love it. I have so many design ideas that are completely out of the box yet everyone wants me to stick to the common layouts so that it doesn’t confuse people who are not so internet friendly. i think the only way to change this is to have more people have cool designs like you so that people get used to diff. layouts. nothings gonna change in the design world if we have to keep to the web standards of boring sites. god i wish we could design sites together.. they would be sick! i loveee you outlook on web design. awesome!
This is the next wave in innovative design. There are some great examples here. The big challenge is using innovation without adding too many elements and confusing people who may not be completely Internet savvy.
Like your posts so much
thanks very much it’s best collection I had ever seen
WOW!!! I can only dream of what you can do!
Pedz Rodulfo
great tutorial thanks
I love your websites design, wonderful!
Excellent ideas to design out of the box, it’s an eye opener :)
Thanks
i think the only way to change this is to have more people have cool designs like you so that people get used to diff.
I’m one of the ones changing my website design regularly (for me that’s like every 2+ years). I find that in an ever evolving industry such as web design, it’s not so much as “keeping up with the Jones’s” but more an exercise in applying one’s newly learned ideas. Thanks for the great post!
cool beans! http://www.valetmag.com/ has a pretty good layout too. each post is styled differently
When finishing your web. Submit site to search engine to make the best ranking.
Great article. I love looking at different, unique and stylish website design like that. Gives me some good ideas for my own work.
Thanks.
Great examples. It’s nice to see these screen shots side by side. Thanks for the post!
wow OUT of the BOX!!! really really great…. As a Philippines Freelance Designer i appreciate all the collection here… two thumbs up!!! nice design and perfect…
喜欢你们的设计与技术，常来看看
I love all the illustrations on this site ..it’s truly inspiring and even though i’m not artistic and it is a noob question but what program or programs do i have to learn to create such art? I’ve dabbled in Photoshop and i’m super keen to learn .
Thanks
I’m doing work experience with the people that designed the WonderBra site. :P
Really looking forward to it, it’ll be in May.
thanks for the tutorials of jquery they really good.