Posts tagged "christmas"
For the holidays, we wanted to make the normal gift guide idea a little more interesting. The answer was a flow chart that narrows down the type of person you’re shopping for and then suggests appropriate gifts for their particular sub-culture. Lizzie Crocker and Isabel Wilkinson did a great job coming up with the categories like (Nostalgic Outdoorsman, The Closet ‘50 Shades’ Fan, Hipster Techie) and then Lizzie and I (Michael) put our heads together to make a (hopefully) witty flowchart. Our photo department headed by Marcia Allert was also a huge help.
There’s nothing fancy under the hood. The only semi-trick was our Daily Beast font family Titling isn’t always too legible at smaller sizes on the web. To fix that, we made the blue circles in Illustrator and exported them as PNGs. To do the hovers, you duplicate the image below your main image like this and make sure your image container is only tall enough to show one at a time: 

To do the hover then, your CSS is something like .img-class:hover{ background-position: 0 -102px;} The benefit to this is you don’t load a second picture when you hover so there’s no delay. This is a pretty standard way of doing this so it’s nothing revolutionary but for some reason you still see a lot of sites that have delays on their image hovers that would be better off using this technique.
Why not make the flowchart interactive too?
We decided in favor of a static image for the flowchart as opposed to something interactive since I think the wittiness of flowcharts comes across in seeing how the possibilities flow from one another and the different results in choosing one adventure over another. Also, at the sake of sounding blasphemous, interactivity can be thought of as a last resort only when you can’t fit everything onto the screen at once, or doing so would work against a focused narrative. It’s much easier for readers to scan a page full of information and see how these options unfold, in my view, than it is for them to click 10+ times and only see the options that stem from their responses. 
To continue the trend to show some shots from our failures, here’s a screenshot of the drafting process for the flowchart. We really wanted to work mud into it somewhere since it could have split off nicely with Adrenaline Junkie or Wee Ones (since kids love mud), but it didn’t quite work out. The second one is what we settled on.




-michael

For the holidays, we wanted to make the normal gift guide idea a little more interesting. The answer was a flow chart that narrows down the type of person you’re shopping for and then suggests appropriate gifts for their particular sub-culture. Lizzie Crocker and Isabel Wilkinson did a great job coming up with the categories like (Nostalgic Outdoorsman, The Closet ‘50 Shades’ Fan, Hipster Techie) and then Lizzie and I (Michael) put our heads together to make a (hopefully) witty flowchart. Our photo department headed by Marcia Allert was also a huge help.

There’s nothing fancy under the hood. The only semi-trick was our Daily Beast font family Titling isn’t always too legible at smaller sizes on the web. To fix that, we made the blue circles in Illustrator and exported them as PNGs. To do the hovers, you duplicate the image below your main image like this and make sure your image container is only tall enough to show one at a time: 

image

To do the hover then, your CSS is something like .img-class:hover{ background-position: 0 -102px;} The benefit to this is you don’t load a second picture when you hover so there’s no delay. This is a pretty standard way of doing this so it’s nothing revolutionary but for some reason you still see a lot of sites that have delays on their image hovers that would be better off using this technique.

Why not make the flowchart interactive too?

We decided in favor of a static image for the flowchart as opposed to something interactive since I think the wittiness of flowcharts comes across in seeing how the possibilities flow from one another and the different results in choosing one adventure over another. Also, at the sake of sounding blasphemous, interactivity can be thought of as a last resort only when you can’t fit everything onto the screen at once, or doing so would work against a focused narrative. It’s much easier for readers to scan a page full of information and see how these options unfold, in my view, than it is for them to click 10+ times and only see the options that stem from their responses. 

To continue the trend to show some shots from our failures, here’s a screenshot of the drafting process for the flowchart. We really wanted to work mud into it somewhere since it could have split off nicely with Adrenaline Junkie or Wee Ones (since kids love mud), but it didn’t quite work out. The second one is what we settled on.

Gift Guide Failure

Gift Guide Final

-michael

Notes and images from an ever-growing digital newsroom.

Newsweek & The Daily Beast

Contributors:
Brian Ries & Sam Schlinkert

Formerly:
Michael Keller, Andrew Sprouse, Lynn Maharas, & Clarisa Diaz

view archive