The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

Forget the Wireframes, Throw Away Your Boxy Layouts – Design BIG!

Guest post by Wendell Fernandes
Wendell is the CEO and Creative Director at Dellustrations, which was founded in 1998 to deliver creative and innovative solutions to his local community. Go check out his site if you need some design work done -- there is even some freebies in the work section.

Thinking outside the box can make your designs “pop”, and having good ideas can help you become successful – but what if you could not only think outside the box, but play with the box, kick the box, smash the box all over the place.

The secret is to design BIG!

Designing for others is one of the most boring things you can ever do because it is always about what they want, and not what you want – right? Wrong!

We can learn that even if clients ask us to do something, we have total freedom to do whatever we want, with one rule: “Stay inside the box”. The thing to remember is that the actual “box”, or wireframe, can only be in one single shape or form, not your design!

Thinking this way, we can get away from the conventional design and the usual look and feel. We can finally jump into a new design atmosphere, create new things and get that “WOW” that makes us smile.

Below you will find samples and ideas to make your design “pop” even more. I hope to help you to create eye catching layouts with little work. Also, I want to share with you a few tips on how to get the “WOW” we all deserve. After all, sleepless nights have to pay off at some point!

1. The usual look and feel... RUN!

If you agree with me, many online portfolios out there have much of the same old look and feel: boxy, wireframed and boring look. My suggestion is to get away from this usual, tired style. These types of layouts are overdone, and even after Web 2.0 came along we still see a lot of them. Here are a few samples of what I think you should NOT do/follow:



If we take a close look at the image above (A), we notice that it uses a somewhat usual style. There is nothing wrong with this layout. The brand element is on the upper left corner, the “hero” image is inside a banner, we can see a navigation menu on the left side, and everything else happens to just fit in the right place. There is nothing different, nothing new, or nothing that would make you say “wow”.

Take a look at the image below and we can see similar points.


The layout above (B) shows a very similar look and feel to the layout (A) – a simple and straightforward style. Another simple WordPress template: Banner on top, navigation buttons, the left side has the usual heavy content and the right side we have links and so on. Nothing special, right?

In the next layout we can see a slightly better approach. It uses a better image for the main offer and we can also see some nice curves throughout the whole page – but again, these layouts are overdone. Take a quick look below:



These are just too boring – the same old usual look and feel as most websites out there. The question is, can we do better? Can we get more creative and design stuff that is real eye-candy? Can we do it all in a few samples? Yes, we can! Take a look at the examples below.

2. Freshing up the look - Design BIG!



Looking at the above layout (A), it seems like another usual design, but we can see some details, which when added up can make a big difference.

The navigation bar has a lot more room to breathe and adding an indent to the current page adds a little more to the look and feel. Keep the least amount of colors throughout the layout for consistency, unless you are doing some special project – and even then, be careful. Look at the left side, behind the form, instead of using a simple banner, we use an illusion effect, so it seems that a page is floating and moving behind it.



Another great layout can show us how to think different and design BIG. The above layout (B) uses a very different frame than most layouts. There is an actual notebook page used as the frame for the content. It makes your page unique on its own and it can generate the “wow” you want to achieve. Using graphical elements like the pen also adds a lot to the overall look.



Using the same concept and BIG ideas, here is another layout (C). Notice that the banner runs away from the usual and conventional website layout. The vehicle is outside of the main banner making the the site feel a lot more welcoming.

Same goes to the shadow used behind the “Avis where2” container. These are small details but they go a long way. It’s always good to remember that your design has to look different from others, and needs to stand out. You can only achieve that if you think aggressively.



There are a few details in the above layout (D) that can make your design “pop”. Here are some of the things I think you should keep in mind:



Now, the layout above (E) is a real ”out of the box” idea. This was an actual e-mail design that was sent out to my department when I left the company I worked for. I had enjoyed my time there and wanted to send the team my personal “thanks”; and since that company was an e-mail based company it was a good fit.

Okay, back to some tips. I used a nice curved paper effect, so it gives the idea of an actual post card. The BIG type helps with the “modern” look, and the red shade all over the place, is a warm way of saying “thank you”. Another good way of getting these effects to “pop” is the detailed use of the shadow. Imagine how this would be in real life, and try mimicking it. The results can be amazing.







Notice that the player is outside of the box or page, while the email page is somewhat floating. This type of design is a very aggressive approach, and should be experimented and explored fully before delivering to any client, especially when we talk about NFL.

3. To conclude...

Coming up with something unique and interesting is a must. Create nice icons and symbols – these are elements that can add a lot to one single page. Throughout these last few layouts we’ve explored a few different ideas to help you innovate a your designs.

This can be as simple as changing the shadow around, moving lines, and always, watch your pixel margins. Focusing attention on the details doesn’t hurt anybody. Sometimes you can design something that gives the reader an illusion as to something is about to move, or fall off the page, this is not only a way to think “outside of the box” but it is definitely, playing with the box!

Some Tips & Suggestions

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: