The Hollywood Effect: Direct to the Web

by in Articles on 10th May 2011 · Comments

If there’s one thing we’ve learned from the movies, no matter how many genres the industry can produce, an entire range of models can be used to turn one idea into a widespread event that can be repeated at will. On the web, we regularly draw inspiration from sites that leave us breathless and in awe of their uniqueness. Yet strangely, while the ways we produce sites is very different to how movies are made, the same models can be applied to different techniques used to design and engineer an experience. Perhaps it’s a sign of the times, but we do manufacturer sites like factories!

The Hollywood Effect: Direct to the Web


Within this article, I’m going to highlight the various types of movie models that exist, except with a web orientated slant. While this isn’t a criticism of what the web has become (actually it’s a sign of the increasing diversity we have in how we approach design, either from a handcrafted or template process), it’s interesting to see how many people build experiences and victory from the works of others and follow in the footsteps of Hollywood to engineer an effect, that helps us achieve success.

Original Design

First up, we have the classic kind of design, those which are totally unique and bring an entirely new type of experience to the forefront. As we know from the movies, an original smash hit usually has the power to outdo sequels and other franchises down the line, the same is true of the web in that a unique experience catered entirely to the market audience tends to really strengthen the content and services rather than detract from it as so many designs do. While it’s true that many sites gain influence from other sites, movies are the same, having nods and references to another’s scenes.

Team Fanny Pack
Team Fanny Pack

nDesign Studio
nDesign Studio

Onetwentysix
Onetwentysix

Gardener and Marks
Gardener and Marks

eFingo
eFingo

Haafe
Haafe

How do you create an original design? Experimentation is one key principle to follow. Often we find ourselves simply sticking with convention and not really taking the time to understand how our own users take advantage of our interfaces. Listening to your audience if you have one and coming up with innovative solutions can save user’s time and effort. Don’t be afraid to break out of the grid, try several iterations of features until you’re happy and push the limits imposed by web browsers!

Signs of an original design:

  • The visual design and behaviour is built up around the needs of content.
  • Everything has been considered and built from a user-centred approach.
  • Code focuses on semantics rather than cut and paste script effects.
  • Functionality may follow trends, but provides some unique elements.
  • Others draw inspiration from your work, and find common solutions.

Sequel Design

The web is a place from which many designers draw inspiration, and a fantastic way to build a design is to look at already created experiences such as trends, conventions and patterns and use these models to build your own site, based in-part upon the work done. With movies, sequels tend not to outdo the original film the same could be true of the web when people base their design upon a site with a different audience, but it’s also true that if the work goes into the experience, the ability to improve upon the work can lead to even grander and improved works (like the Godfather Part 2).

Shiny Frog
Shiny Frog

Climate Wisconsin
Climate Wisconsin

Leafletapp
Leafletapp

Foundation Six
Foundation Six

Bronzino
Bronzino

Shyama Golden
Shyama Golden

Producing a fantastic sequel or follow up design is more straightforward than original works as there is less creativity involved. WordPress is a great example of how sequel design can be done right; just consider how so many designers have managed to turn a generic template into something in some cases unrecognisable from what we are used to seeing. If you do decide to build a sequel based on a previous layout you produced or someone else's, just remember that you want to be as unique as possible, so try and see where the layout’s weaknesses are, and strengthen the foundation.

Signs of a sequel design:

  • You base the majority of your design decisions upon inspiration works.
  • CMS systems are used as the foundation for a customised design layout.
  • Conventions, patterns and trends dictate every aspect of your website.
  • Less user testing takes place, as your builds are heavily research focused.
  • You spend time improving existing designs, not innovating from scratch.

Franchise Design

Of course, while being inspired to improve your work is a great way to try and cash in on someone else’s design success, many in the design industry take this concept far beyond what they should and churn out endless iterations of the same design to which the design itself becomes a trend upon itself (think the Web 2.0 design phase). Franchise design is similar in the movies to the web in that the main factor involved isn’t quality or getting the right audience, it’s just about factory style output like design templates which try to aimlessly keep the spirit of an original work or design alive.

Tim Van Damme
Tim Van Damme

Note: The above is an original design, which ended up becoming reproduced Ad nauseam!

Avadh
Avadh

Ryang Lover
Ryang Lover

Ilinasimeonova
Ilinasimeonova

Cyrilattias
Cyrilattias

Nexens
Nexens

Templates provide many non-design types with a creative outlet for their wish to have their own site, and while many templates can be of mixed quality depending on the source, it’s important to realise that rather than seeking out the most popular template in the marketplace, hunting down those rare undiscovered treats that will match your audience’s needs is what counts. Templates can be helpful and customised, but use due to popularity tends to be the downfall of many designers who fail to realise that what works in one situation and meets the audience needs may not work in another.

Signs of a franchise design:

  • Templates or pre-built themes forge the center of your site’s layout.
  • An emphasis is placed upon fast solutions, not customised designs.
  • Your site may have been produced by a third party, not by yourself.
  • A layout was aimed at a generic audience, not handcrafted for yours.
  • You end up using WordPress (or another engine’s) default layout.

Remake Design

Next up we have the remake or reboot. Every now and again, designers like to take a look back at something they have produced and give it some much needed improvements or tweaks, sometimes investing in an entirely new design. With movies, we occasionally get the gritty reboot or the remake (in which things look identical to the original – note the Psycho remake here). Remakes can be both pointless endeavours (if what you have works wonderfully, redesign for the sake of it isn’t a good thing) and they can be awesome opportunities to improve a layout. Consider the options carefully!

Before: Hashrocket

Hashrocket Before

After: Hashrocket

Hashrocket
Hashrocket After

Before: Finely Sliced

Finely Sliced Before

After: Finely Sliced

Finely Sliced
Finely Sliced After

Before: Neutron Creations

Neutron Creations Before

After: Neutron Creations

Neutron Creations
Neutron Creations After

If you’re planning a major redesign or revision of your site, the key point to consider is the audience as always. What are the weaknesses of the current design? What is worth retaining? It’s very rare for a site to actually require a complete redesign from scratch (and more importantly, it imposes a learning curve upon the user). Perhaps there is some new functionality your users have been asking for, maybe your layout is a bit too cluttered, or you may just want a mobile friendly design! Remakes are a way of life for designers (to stay in fashion), so don’t fall into the trap of having a lousy sequel.

Signs of a remake design:

  • Your focus is upon rebooting an existing layout, not making a new one.
  • Improvements are born out of the need to reduce bandwidth or clutter.
  • Time is spent working with users to understand and adapt to their needs.
  • Common elements from a previous site incarnation exist prominently.
  • Freshness and rebranding can often be a central consideration of design.

Direct-To-Video Design

We couldn’t make a comparison between Hollywood movies and web design techniques without taking the time to note “direct-to-video” design (those movies or sites that were a valiant effort but just missed the mark of becoming a full release). In the movie industry we’re used to seeing more and more releases that never get the cinematic experience, on the web the number of designs that had good intentions but seriously missed the mark in terms of design aesthetic, quality of code or even the user experience is quite rampant. It’s always worth avoiding this design style whenever possible.

Djs Online
Djs Online

Science Daily
Science Daily

Drudge Report
Drudge Report

Azlyrics
Azlyrics

Craigslist
Craigslist

NYTimes
NYTimes

Sometimes, there just aren’t the words to describe how painful a user experience can be, and even in this modern world of CSS3 and jQuery, many sites fail to get updates or implement a half decent design (which leaves the rest of us either laughing or crying at them). Websites should always be carefully considered as they will become the portal to your content, and designs should be forged from experience and understanding of the target audience. In many cases some may even argue that with the quality of some templates being so high, even beginners could avoid this bargain bin mess!

Signs of a direct-to-video design:

  • Time is spent with minor releases, content, patch cycles and bug fixes.
  • The focus is on speed along with an early launch, not on design quality.
  • Considerations are limited to a small budget, or basic product choice.
  • No focus is placed upon the user-experience. It’s all about the designer.
  • Inexperience leads to poor code, design, feature, or content decisions.

Oscarworthy Design

There are many different approaches to web design, some better placed on user-centred design than others. Interestingly, as the web design industry becomes increasingly refined, we may see a situation in which handcrafted sites become a luxury for only those who really want to go above and beyond in an effort to gain a competitive edge. CMS systems are only the first step to manufactured media, and frameworks are helping to turn the design process into a series of building blocks.

As you consider your options whether to copy or be unique or follow in a long line of successful conventions and trends, remember that like Hollywood, originality tends to be king. Attaching your design style to a successful brand’s attempt won’t ensure success, but producing a poor first attempt is equally bad. You should design like you’re aiming to win an Oscar, it’s a chance to show off and give users a fun, engaging experience. Be artistic, be relevant and don’t slash your commitment or investment in its success. As while a site may not be a Hollywood film, it can be designed like one!

Questions

Are you in favour of using templates, CMS pre-generated layouts, frameworks and other factory styles of design? What sites or layouts have you found that are always repeatedly copied by other designers? Do you try to innovate between the trends, conventions and patterns? Let us know!

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.