The year was 2011, and Twitter, unsatisfied with having merely built a product that would eventually reveal the possible horrors of social media, decided to unleash something called “Bootstrap” onto an unsuspecting developer world. The “hero image” was born, and shortly thereafter creativity filed for a leave of absence.
In fairness to Bootstrap, it never intended to suburbanize the web. It provided an excellent (for the time) framework that dealt effectively with many of CSS’s shortcomings and gave developers tools to rapidly build websites with a clean and modern aesthetic. It was the ibuprofen and Gatorade to our collective Web 2.0 hangover.
Website templates had existed since time immemorial, but Bootstrap became the de facto web template for everyone. Early on it seemed innocuous, at worst the beginning of yet another web trend, but as it rose in ubiquity something unintended started to happen: Every website began to look the same.
In the midst of this turn toward branded interchangeability, a new and still relevant conversation began to form around the merits of creative and distinctive user interfaces vs. the utilitarian benefits of design convention.
The argument for convention
Convention gets a bad rap. It’s rigid, unsexy, and seemingly at odds with the creative process. It’s also wildly useful.
Design and development conventions allow us to present a site or application to a user in a format they likely already know. Logo in the top left, main navigation bar to the top right, contact info in the footer, etc. These are valuable concepts that increase our effectiveness and give our users an experience they don’t have to learn before using.
The argument for convention suggests this utilitarian value is more important than creativity in design, as, after all, we are building tools to be used.
The argument for creativity
If there’s a list of most loved words or concepts, “creativity” would have to be somewhere near the top. As designers, we celebrate the creative spirit and take joy in its manifestations, with some going so far as to describe themselves simply as “a creative.”
Creativity finds ways to innovate and push boundaries, at its best resulting in more refined and improved processes. It’s beautiful and thought-provoking, but can also be unfocused and overwhelming. Let us never forget the many blasphemies committed in the time of Flash.
The argument for creativity expects more of the user, and in exchange offers a more engaging experience.
Why it’s a false choice
Despite the seemingly disparate starting points of creativity and convention, truly effective design only exists as a function of the two.
How do we blend the creative and the conventional in new ways that can both serve a purpose as well as avoid replication?
Creativity, given free reign, could in theory result in a website where instead of clicking on an underlined link to reach another page, you moved your cursor up over a specific word to trigger the navigation. Is this creative? Absolutely. Is it intuitive or useful? Absolutely not. This is a contrived example, but it illustrates the fact that unchecked, the line between constructive creativity and frustrating novelty can get very blurry.
On the other end of the extreme, convention, taken to its logical end-point, would have us all back in the birth stages of the internet: walls of text separated by vibrant blue underlined links that take us to more walls of text. Is a specific function served? Again, absolutely. Is this the most effective way to share information? Again, absolutely not.
So how do we, as designers and developers, blend the creative and the conventional in new ways that can both serve a purpose as well as avoid replication?
Use really excellent photography
If we concede to convention the general content-box scaffolding of a website, then the way we fill those boxes becomes exponentially more important in our goal to serve creativity. Finding truly unique and visually striking photography is a great first step toward that end. Moreover, finding photographs that tonally and visually work together can help establish an overarching aesthetic experience that will help minimize the more conventional aspects of the design.
Micro-interactions such as hover animations offer a way to insert a ton of creativity into even the most conventional designs. Replacing a simple background-change hover state with something more dynamic can help establish a personality for a site. Codepen has some amazing examples of incredibly creative micro-interactions you can adapt for your own designs.
In a sea of sites with white backgrounds and blue accents, playing with new and unusual color schemes can radically change the feeling of even a very conventionally laid out design. CSS-Tricks recently launched their redesign, and it’s an absolute masterclass in the creative use of color. Chris Coyier and his team put together a bold and innovative color scheme blending some of the more neglected areas of the color wheel through deft usage of transparency and placement.
Ultimately, the balance of convention and creativity is something each designer or developer has to find on their own. It is my sincere hope, however, that we come to a place where we emphasize that word “balance,” rather than viewing them as contradictory forces. It is only through that balance that we’re able to create both beautiful and highly functional designs.