13
Apr
2008
Breaking the square
Web pages are basically made up of a bunches of squares and rectangles. Some of the rectangles are images, and some of them contain text, but basically everything is pretty boxy.
Because of that the average web page ends up looks pretty rigid and linear, and thus rather boring. Its partly because so many websites end up looking the same, but also because the rigid lines and fixed grid lacks visual tension and rarely lead the human eye from one point of interest to another.
When you are trying to get passing traffic to stop and look at you this is not a good thing.
Instead we have got increasingly interested in bending and breaking these conventions. We call it breaking the square.
As compelling as possible
At the end of the day we want every one of our websites to be as compelling as possible. To do this we pay attention to key areas like:
- Content - the words and story contained within the story
- Calls to action - the provoking statements that target customers' motivations and provoke action
- Design - the visual presentation of the website
Breaking the square
Breaking the square is one way to create visually compelling design. Breaking the square is all about hiding the inherent boxiness of a website's construction. Angles, curves and overlapping shapes all break down the visual grid of a website and give it a greater sense of interest and energy. They can often lead a reader's eye more effectively and more harmoniously through a website, as well as becoming design highlights. Design elements that break the square automatically gather more reader attention than those elements that obey the grid. We can use this to attract a reader's attention to key page features like calls to attention, thus increasing a website's overall conversion rate.
Attracting attention
Here's an example from The Next Step Program. Here we designed a number of key calls to action in the top right hand side of the design. To highlight them for the reader we coloured them a hot yellow. Yet, when the number of actions grew to three we really wanted to emphasize the first one, which encourages readers to subscribe to their newsletter.
Our solution was to place a label over the most important button, making it high contrast, but more importantly tilting it off the level so that it displays a subtle angle. By breaking the square it automatically catches the reader's attention.
Its very important to remember the two key points of your website strategy. 1/. Traffic - how many people are stopping to look at your website? 2/. Conversion. What percentage of these visitors are becoming subscribers or customers?
Of the two, conversion is often the cheapest to improve, so anything that increases the percentage of people completing key workflows and clicking on key buttons is to be welcomed.
Gloves On has curves
With Gloves On, a boxing coaching business, we went a further step, creating a design with sweeping curves that stepped away from harsh verticals. By refusing to be constrained by the box constraints of traditional design we have created a website that says something about the business's target market and professional goals as well as creating a website that immediately demands a second look.
We have also placed the key call to action so that it overlaps one of the boundary lines of the page - breaking another key web page convention. By doing this the big red button becomes even more attractive to the readers's attention, encouraging them to click through for the free session.
Doing away with the box all together.
We are currently working on a design for The Agency of Sculpture. This client is looking for a site with galleries that really show off the visual design of their products. With this site our goal is to throw away the box grid all together, creating fluid shapes and repeated circles that evoke a completely different sense of layout from a conventional web design. Here is a demonstration design proposal.
Cutting edge programming
By using extensive stylesheets to style the page content its much easier to break the square than when using other, older techniques. Using stylesheets we can use structures and tools over and over again, but style each instance in a uniqe and meaningful way. This is how we can deliver website after website with unique and meaningful designs for each one.
stay informed
Join our mailing list to receive a regular copy of the Acorn Web Newsletter
Comments