Menu Close

How to Break Away from Boring Design Standards

By Vail, Sometime in 2013

Once upon a time, there was really no such thing as a set of design standards. The world wide web was fairly new, and the tools we had for design were seriously limited. In 1997, I became acquainted with a graphic designer named Moyra through a forum, who went on to launch her own modest boutique of free web graphics. She was innovating design techniques with the first consumer versions of Paint Shop Pro, and nothing else like it had been seen on the web quite like it. She became wildly popular, not just for her beautiful graphics, but because her interface concepts later on were truly unique.

Moyra had found a way to break away from the boring linear style that was terrorizing AOL and Tripod websites of the time. When the software industry caught up and web design began generating a demand, Moyra faded into memory and the boxy framed layouts of the next few years took hold.

When “Web 2.0” happened to the Internet, it brought with it a rigid trend of blue and white, late-night-TV-eque ads and graphics and a regurgitation of the same top-down layout we had been seeing since 1994, sadly undermining the potential of CSS. Web design was picking up as a legitimate industry, and several designers were carrying the creative torch by trying to beautify an otherwise ghastly web browsing experience. With the wide adoption of Flash, amazing things were happening and whole fantastical worlds were being created in the browser.

yo, remember netscape?

Fast forward to 2012 and not much has changed in several years, except Flash is now an underdog technology and few are doing its succession justice with HTML5. Perhaps a point of controversy, it seems more and more designers are getting caught up in trends and academic standards than they are truly persuing a creative passion or desire to innovate. There is a clear distinction now between design and industry. My hope is this article will inspire you to take a departure from what you “should” do, what is “safe” and use today’s technologies to find your own unique expression through the art of web design.

1 – Dare to be Different

Building upon our experiences and starting a new project based on layouts, ideas or techniques that have worked for us or others is a habitual practice we all follow. After all, efficiency is what allows us to get the most value out of the work. The problem with this approach is that it contributes to stagnation in the industry, a bottleneck of flat ideas without enough energy to propel us forward.

The first step to standing out is to rebel against your own conventions. Make the decision to stop paying attention to what everyone else is doing and pay attention to your own inner world. By grasping this newfound freedom, you are closer to doing something extraordinary than you could have been before.

 

2 – Think Outside the Box

There are literally millions of websites that use a horizontal next menu followed by an image slider, some widgets and a footer. It has become so standard, in fact, that designers design around it and clients ask for it almost without thinking anything else is possible. I’m certainly no exception – those layouts plague plenty of my own websites.

The fact is, there is nothing about HTML and CSS that force us into this pattern. Not even user experience tests can prove that boxes are best. They’re just easier. Naturally, after years of conditioning, the average website user expects this format so it isn’t practical to go completely nuts revolutionizing an experience if you are a business with the goal of reaching as many people as possible, but you can build on the barest of familiarity while giving visitors a fresh take on shape and functionality.

 

3 – Get a New Perspective

Millions upon millions of people own a mobile device or tablet, adding a whole new layer of complexity to how we design. It isn’t just about looking cool anymore, it is about how the website is used. In 2009, horizontally scrolling websites became a big trend, but haven’t really matured until now, thanks to better support for HTML5.

We’ve been taught that we must design for the lowest common denominator and that people like logos on the upper-left and menus on the top and on and on and on. This standard comes from magazine and blog design and how to optimize for the most ad clicks and brand recognition. This philosophy simply isn’t appropriate for most other scenarios. Humans are curious by nature, and will figure out new concepts quickly if we are willing to give them incentive.

In the case of Gavin Castleton’s website, the design draws visitors in with compelling imagery, entertains them with an unexpected user experience, and immediately rewards them with the content they are after – and it does it on any device no matter which way you hold it.

 

4 – Tell a Story

Ben the Bodyguard was one of the first websites to get circulation for using parallax scrolling in a unique way to promote an iPhone app by telling a story. The site features Ben strolling through town “speaking” each snippet of copy while you scroll. What we can learn from this design is that delivering marketing messages and features conversationally, while entertaining the viewer, is how TV evolved the print ad. So why don’t we evolve the boring columns of web copy?

Telling a story goes beyond the content and extends into the personality you create in your design. By thinking of your websites as people, you are better equipped to envision how they should be styled, what they should say, and who they are saying it to.

 

5 – Find Unique Sources of Inspiration

Designer Chris Biggins was inspired by his love for winter sports, combining his photos, animations and video to create an interactive experience for his visitors. His portfolio is an example of how we can take a few familiar elements such as a top navigation menu, icon links and modal windows and use them in unconventional ways. This site draws on the power of Flash technology, but the how hardly matters. As they say, it’s not the destination but the journey that marks us.

6 – Visually Design Without Restriction

What would you do if you didn’t have to worry about code, or finding the right jQuery plugin, or learning a new API? What if all you needed was your prototype, a few custom graphics or images, and could design anything you could think of in HTML5 using drag and drop, a text editor and some color wheels? An app like this actually exists.

Wix will be releasing the first full-featured HTML5-powered website builder on March 8th, which uses a visual design suite. Its comprehensive library of effects, animations, behaviors, graphics and elements gives you just about everything you need to create with absolute abandon.

Creating your own interactive portfolio doesn’t take an amazing development skillset. Rather than spending hours looking at web design showcases or trend magazines, Chris did what made sense to him using the tools available, like Wix, proving that you don’t need to be limited by your budget or what other designers are doing.

Share, like, repeat