logo type image

Web Design: Desolation & Zen Garden

This project is an entry in the Zen Garden set of websites that challenges web developers to create a front-end treatment entirely with CSS. I worked with Erin Smith, another Web Developer on this project. You can view the Desolation page here.

01

02

03

04

05

06

07

08

09

10

Desolation Banner Image
The top section of the Desolation Zen Garden page.

Inspiration

Desolation was a concept that came to me as I considered how to visually create a mood that allowed for us to explore depth, darkness and isolation by how we treated the visual content for the website. It started with the idea of an old west gunslinger and the use of silhouette. The landscape chosen was delapidated industrial with the idea that far elements would be shown as lighter, medium distance elements as darker, and foreground elements as nearly black.

Image of Desolation Inspiration
Image of Desolation Inspiration

Online Reference

There were the obvious inspiration sources, like Clint Eastwood westerns, The Dark Tower series by Stephen King, The Walking Dead and various online graveyard images. We created a Pinterest board to be a repository for influential images for us.

The Dark Tower illustrations usually contain the depth elemets we focused on with the tower in the far distance, desolate landscapes, the appearence of an occasional raven and the gunslinger in the foreground. It's use of combined genre (and old west gunslinger in a fantasy environment) was also a juxtaposition that afforded interest.

Element Design: Headstones

These images contain an initial list of features and how they map to the smartphone and tablet platform as well as the dekstop application. The feature list then gets translated into screen sketches that start to layout the real estate of the various functions in grouped screens with priority given to the variables of usability.

Not shown is the work I did to create a Persona and Scenarios to assist in testing the prototypes. These aid in creating a heuristic analysis in the testing phases to bring the needed issues to the forefront for iterating the design until design goals are met. The Persona represents the target user base. The scenarios help create a testing script and focus on the key tasks the user must perform to accomplish their goals.

Image of Desolation headstones
Image of Desolation gunslinger

Element Design: Gunslinger

The gunslinger we chose was one who was based more on Clint Eastwood and wears a duster. He carries a rifle and a handgun. This was a profile we felt was mor iconic than the Dark Tower gunslingers or the Rick Grimes character from The Walking Dead.

All of the graphics for the project were created in Adobe Illustrator and exported as SVG elements.

Element Design: Landscape

The landscape elements are the most important environment elements in the Desolation page. They set the stage for the other elements and set the mood. The two basic parts of landscape are the backdrop of the delapidated power plant and the factory windows and trees that frame the other elements.

One of the bigger challenges was to design a scrollable element that would frame the other elements such as the gunslinger, the raven, and the headstones without being distracting or awkward. The solution was using tree imagery to bring in the framing elements from the sides and encase the windows shape in the center.

Image of Desolation mockup
Desolation Banner Image