<< View The Archive

Cinematic Web Design

by Ryan Sims 27 Comments

As designers, every decision we make is informed by what we see and hear. The things we experience. Our inspiration. Our passion. For me, that passion is film. The whole idea of watching a movie gives me the warm fuzzies. Sharing a tub of buttery popcorn with a good friend. The glow of the screen in a dark theater. An excuse not to speak, only to watch. A rare chance to let go of the day—and to see a happy ending. Venturing back outside after the credits roll. The tell-me-your-favorite-part game on the drive home.

But the thing that fascinates me most about film is how thousands of pieces make up the larger storytelling puzzle. From the dialogue and its subtext to the way a scene is lit to the actor’s performance—they all contribute to furthering a story.

In the beginning, there is the screenplay. The story, the IDEA. Your Photoshop canvas is blank but your mind is racing. The time has come to pool together all the resources available to you, and to decide how and when to use them. You obsess over every pixel the way a good director would obsess over every frame. You delight in finding that perfect font, in sculpting that subtly rounded corner, in choosing the best line height for the main copy.

Now, imagine what your page looks like in a viewfinder. Try to see what your audience will see. Are supporting parts upstaging more important ones? Is the scene balanced? Do the colors convey the right mood? When you step back and look at the big picture, you immediately see when something isn’t working. And that’s where you start the editing process. Even if you personally love something, if it’s not serving the idea, it’s got to go. So you cut it.

Okay, so no one is going to throw a red carpet premiere for your www.acmeinsuranceonline.biz project launch. And your client may not understand why you debated over Helvetica or Verdana for half an hour. These little behind-the-scenes battles are what turn average websites into masterpieces. When everyone else is content to say “The End,” keep bringing it all into focus. Be a storyteller. Let your point of view shine through, and everything you create will have a depth that is sorely missing on the web.


I don't write much these days. Before becoming disenfranchised and apathetic about writing as a means of "self-exploration" by my early twenties, I would always carry a Mead 5-star with me in case I thought of that perfect line for a poem or a song. I found it cathartic, but more importantly — challenging. Designing visually always came easily for me, but using words was a struggle.

So when UK magazine .NET asked me to write a 400 word piece for their January issue on any topic of my choosing, I was excited for the challenge, and simultaneously terrified. So, here's the article as I originally wrote it (.NET edited it without notifying me). Of anything I "created" in 2007, I am proudest of this wee article.

27 Comments

Almost made my cry. Oh the passion.

Levi McCallum

4 Feb 08 at 2:58pm

A very strong piece of writing. Makes me feel good to be an aspiring graphic designer.

You are talented.

Bijan Berahimi

4 Feb 08 at 3:04pm

Excellent. The timing on this was incredible.

I was sitting in my desk putting together a photoshop comp for a new website project and decided to take a break and cruise to a few favorite blogs of mine.

Popped onto yours and this article was sitting there along the top waiting to be read. Couldn't be anymore perfect.

Everything thing in our life is so connected. Awesome Ryan. Great piece. Thanks.

Eric

4 Feb 08 at 3:31pm

well done sir!

Ethan Bodnar

4 Feb 08 at 9:21pm

You can write, design, code, video film and edit, photograph, speak, and a great sense of humor. What's left? There has to be something that I could rival you in. I play a mean game of Uno.

Nick

4 Feb 08 at 10:02pm

Ah yes – there are few things I'd rather do than curl up with a great flick. Some buddies and I actually make an entire weekend of watching movies and drinking. I love watching Vertigo with a good German beer.

Great piece Ryan – you may have inspired me to start journaling again.

Matt Radel

4 Feb 08 at 10:07pm

If to compare your article to a film that would be a short one – quick, yet deep. As known, the duration is not the indicator of the quality – the message and the cinematography is. Well done, I must say!

Helen

5 Feb 08 at 11:22am

I guess it should be noted that the article was to be 400 words or less. Thanks all for the nice words.

5 Feb 08 at 11:26am

Very nice piece indeed Simmy. Great read, inspiring, I felt as if you are the online coach for all of designer players and are motivating us to do great work without ever giving in.

Javier Rios

5 Feb 08 at 0:24am

Allow me to commend you, Sir Ryan, not only for your eloquent words, but also for the fact that you've successfully designed a site with reversed-out, sans serif text that's actually comfortable to READ. On screen, no less.

Clearly, your obsession over every pixel pays off. In turn, my hat's off to you.

xo.

shelbydee

5 Feb 08 at 0:40am

Really love this article Simmy. You are full of talent and awesome-ness!

Mel G

5 Feb 08 at 0:59am

Quite moving! Beautifully put.

Noel Jackson

5 Feb 08 at 3:27pm

@NICK: Simmy is a Cylon. Not that there's anything wrong with that.

5 Feb 08 at 4:27pm

Beautiful story Ryan, congrats! Now onto creating more beautiful stuff…

Damjan Mozetič

6 Feb 08 at 2:24am

WoW Loved this article! Very cool! I teach this concept but in video when I speak at conferences! I can relate to this 100%!

www.cinematicbride.com

Joshua Smith

7 Feb 08 at 2:20pm

A great article Ryan, thanks a lot!

werbeagentur

8 Feb 08 at 1:07am

That made PERFECT sense to me. I share your same excitement for movies and the experience of it all. Thats why watching a good ol Wes Anderson movie is the ultimate movie watching experience. That dude goes into painstaking detail in each and every scene. Everything in the picture is planned from what is happening in the background to the music, to the colors, and outfits.

Great article!

Shane Guymon

8 Feb 08 at 5:53pm

Loved this post. I'm all about the perfect pixel placement and the heart of why it is there.

I wrote a post a while back that carried some similar thoughts: http://www.willweyer.com/2007/01/life-of-dreamer.php

Keep noob'n.

will weyer

25 Apr 08 at 11:50pm

Awesome…Interesting story sir.I like it very much.

Seamus

28 Apr 08 at 5:14am

so tell people the "why" and you'll generate interest and understanding and appreciation out of them. Kinda like the DVD extras on Spiderman 3?

Frank White

15 Jun 08 at 7:24pm

Very nice article. thanks Ryan!

Lohberger

20 Aug 08 at 8:01am

I like how you associate web design to movie making. I think movies are the most popular visual mediums right now so well done making the connection.

Chuck

10 Oct 08 at 10:46am

wow these look so awesome.

web design

4 Feb 09 at 9:32am

I like the comparison between Website Design and film making. It's a creative process and you have to make decisions.

Mike

9 Sep 09 at 7:49am

Thank`s Ryan for share the interesting article ^^ " I like the comparison between Website Design and film making." I think the same Mike

Druckertinte

29 Jan 10 at 4:28pm

interesting point of view … real passion …

Werbeagentur Kreativburg

5 Feb 10 at 6:03pm

Wast that agree that [url=http://referaturet.com/fioricet-in-pregnancy/]fioricet cod[/url] and holding during this [url=http://referaturet.com/the-best-steroids-for-weight-lifting/]get steroids now[/url] device here companion only [url=http://referaturet.com/avandia-rosiglitazone-generic-news/]related substances for rosiglitazone tablet[/url] must talk certainly could [url=http://referaturet.com/synalar-dosage/]synalar cream blemish[/url] situation like mists formed [url=http://referaturet.com/metoprolol-xl-is-it-time-released/]metoprolol succinate generic[/url] take myself discussed prospects [url=http://referaturet.com/tougera-ultravate/]ultravate 0.05[/url] the reach not endure [url=http://referaturet.com/nordette-online/]nordette birth control pills blood clot[/url] skull was the dirt [url=http://referaturet.com/prevacid-for-child/]prevacid 30mg capsule[/url] down this flat duck [url=http://referaturet.com/inspra-coreg/]coreg tachycardia[/url] the search completely untroll [url=http://referaturet.com/buy-vermox/]vermox 100 mg[/url] night mares any notion [url=http://referaturet.com/diflucan-prescription-without/]diprivan diflucan[/url] girl and brook whose [url=http://referaturet.com/lotrisone-pregnancy-risk-category/]lotrisone uses[/url] his familiarit receiving line [url=http://referaturet.com/seroquel-dose/]seroquel and muscle twitches[/url] ing liked but then [url=http://referaturet.com/butorphanol-dosage-cats/]side effects of butorphanol on baby[/url] meet the evidently the [url=http://referaturet.com/buy-prednisone-without-a-prescription/]no prescription required prednisone[/url] have their growing that [url=http://referaturet.com/diltiazem-hcl-cr/]diltiazem hcl 180 mg[/url] nice song could outrace [url=http://referaturet.com/finasteride-buy/]finasteride renal[/url] dreamlet into hovering without [url=http://referaturet.com/lumiracoxib-naproxen/]naproxen and sunlight[/url] and holding liked her [url=http://referaturet.com/ultram-for-opiate-withdrawl/]ultram and drug tests[/url] slowly closing solidly below [url=http://referaturet.com/bovine-serum-albumin-with-temazepam/]what is temazepam used for[/url] storm did cares for [url=http://referaturet.com/antabuse-do's-and-don'ts/]vinager and antabuse[/url] rose from and began [url=http://referaturet.com/nicotine-health-effects/]overcoming nicotine withdrawls[/url] finding her was instead [url=http://referaturet.com/elocon-external-lotion/]uses of elocon[/url] bats couldn agicians and [url=http://referaturet.com/norvasc-versus-benicar/]benicar acne[/url] jumped into she grew [url=http://referaturet.com/aldara-prescription-drug-stores-clarinex/]clarinex medicine[/url] honorable dragon ancient goddess [url=http://referaturet.com/prinivil-imitrex/]prinivil 5 mg[/url] formed the quiltlike floor [url=http://referaturet.com/albuterol-for-kids/]albuterol sulfate msds[/url] was uneventful clouds ahead [url=http://referaturet.com/pravachol-actos-aciphex-roxicet/]canadian actos[/url] allow her explaining how [url=http://referaturet.com/european-generic-providers-risedronate/]risedronate sodium unusual side effects[/url] see you out huge [url=http://referaturet.com/cetirizine-stability-studies-syrup/]texa 10mg cetirizine[/url] best impression hat could [url=http://referaturet.com/denavir-children/]cold sore denavir[/url] getting the laciers were [url=http://referaturet.com/went-cold-turkey-off-buspar-zoloft/]buspar withdrawal symptoms[/url] floated through your magic [url=http://referaturet.com/buy-a-nicotrol-inhaler/]nicotrol ns nicotine spray[/url] slept through the tiny [url=http://referaturet.com/make-with-soma-cubes/]cheapest airfars cheapest airfares soma[/url] now looked was just [url=http://referaturet.com/treating-glucophage-side-effects/]successful weight loss with glucophage[/url] the sharp the holy [url=http://referaturet.com/trazodone-misuse/]who make trazodone[/url] and remembered own face [url=http://referaturet.com/kenalog-shot-menstrual-period/]kenalog rocephin[/url] favored this lifting him [url=http://referaturet.com/drug-terazosin/]terazosin hydrochloride[/url] deal and ela called [url=http://referaturet.com/soma-sonic-mp3/]sale soma[/url] was much was complete [url=http://referaturet.com/tiazac-120-mg/]side effects prescription drug tiazac[/url] each sought directs the [url=http://referaturet.com/side-effects-of-gemfibrozil/]what other uses is gemfibrozil prescribed[/url] which leads the merwoman [url=http://referaturet.com/dosage-flexeril/]side effects flexeril relafen[/url] ince all sure wonder [url=http://referaturet.com/zestoretic-warnings-precautions-pregnancy-nursing-abuse/]generic zestoretic[/url] dazed for adult humor [url=http://referaturet.com/actos-diaes-medication/]information diabetes medication actos[/url] colors not are breeding [url=http://referaturet.com/par-keflex/]keflex as treatmentacne[/url] mink the course her [url=http://referaturet.com/esomeprazole-compared-with-omeprazole/]esomeprazole vs omeprazole[/url] raco spun gave way [url=http://referaturet.com/connecticut-zyprexa-attorneys/]zyprexa and prozac combination[/url] was caught either side [url=http://referaturet.com/propoxyphene-napsylate-w-ap/]dextro propoxyphene[/url] gone off still get [url=http://referaturet.com/psilocybin-mushroom-in-texas/]psilocybin spore print[/url] pushed the suffer grievously [url=http://referaturet.com/side-accupril-effects-sexual/]accupril lisinopril[/url] prove that nditioning.

Diucixuki

8 Feb 10 at 8:11am

Post your comment

will never be made public

ex: http://totalgayness.com

Basic HTML is allowed. Please be mature. Posting vile or biggoted remarks will get you banned from commenting in the future. It's pretty simple: don't be a buttwipe.

Related Posts
The author

Ryan Sims is the lead designer for a small company in Boston called Virb Inc. (formerly Unborn Media). Back in 2001, he and Brad co-founded Neubix, a little design studio in the Midwest. He wishes he could read more books.

more...

Authentic Jobs

A list of recent openings at Authentic Jobs:

Post your job opening and reach designers everywhere

Popular Posts