Website Design: Beyond the Box

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 1 person | Log in to rate

Ranked #2,689 in Tech & Geek, #63,134 overall

The traditional box-shaped website still has its place. Many people still like conventional, solid layouts and design.

Others, however, wish to "break the box" mould. This truly stunning R J Mineral Cosmetics website shows what can be done by designers who have both the vision and the technical skills.

We can't all of us be this creative, but there ARE tips to break the box mould and create modern "beyond the box" websites.

Wide Screen Designs 

Using a Wide-Screen Background

This website for Kate Westall makes use of an effective backgound over which a picture of the singer is superimposed. The text is then contained in a semi-opaque box over the top of the background - very effctive.




Blending the Background and the Box

This wedding website used the same colour for the background and the main website content, thus losing the boxy feel.






Horizontal Not Vertical Colour Bands

Our own web design Bury St Edmunds website has no vertical "box" lines but instead uses a dramatic black band of colour going across the screen which sets off the web designs we have done.

"Burst" Out of the Box 

An easy way to add a feeling of energy to your website is to have the top picture "burst out of the box" as these groceries do in Mobile Grocery Shop Suffolk website. To do this, the top slogan appears (within the masthead) on a background colour that is identical to the main background colour. In this website, we used CSS to place the grocery van and the timetable box over the edge of the main website, thus again "breaking the box" mould.


In this Bury St Edmunds nursery website, we edited out the backgound picture for the children on the log thus making them appear to "burst out of" the top section. As with the grocery website, we used CSS to place the testimonial box over the edge of the main website.

Different Shapes 

Experiment with a Different Shaped Masthead

Experiment horizontally as with this So Cool website.


Or experiment vertically as with this Quick House Sale and Ipswich flat rentals website.

.







Leave Space Between Sections

This Belvedere website achieves its effect by using a background image and then leaving space between the navigation and the content and between the left column and the right column - and by having that quirky, different shape to the navigation of course!


This web design Suffolk website uses the same colour for the website and the background, thus avoiding a boxy feel. Very subtle shading is used to distinguish the "Recent Suffolk Website Design" box from the main content, but there are no other vertical lines, thus creating a very open feel.

Great Stuff on Amazon 

The Principles of Beautiful Web Design

Amazon Price: $26.37 (as of 01/08/2010) Buy Now

Church Website Design: A step by step approach

Amazon Price: $18.99 (as of 01/08/2010) Buy Now

Another Web Design Lens 

If you've enjoyed this lens, you might want to read another web design lens I've written:
Attractive Web Design
Tips for designing attractive websites - note that this lens mainly refers to "within the box" websites.

by jjj1

Hi everyone. My name is John and I am a busy father of 4, husband, resource analyst, website developer and property investor - not to mention an avid... (more)

Explore related pages

Create a Lens!