For this mock-project, I began with style tiles and mood boards to determine the feel the mock-client (me, really... ) wanted for their site.
StyleTil.es presents a fascinating process for getting stylistic feedback from clients. If you have never looked into these you should.
According to Wikipedia, “A mood board is a type of collage consisting of images, text, and samples of objects in a composition.”
These are two great tools for helping graphically challenged clients make graphically important decisions.
The first image here is one of three style tiles presented to the client offering visual cues and proposed adjectives that might help the client narrow down their stylistic desires. This one goes with the left column of the mood board (the second image). The middle column is very glossy, high quality image oriented and the right column is more flat and stylistic.
The client decided to pursue both the middle and the right moods for this project. That was a particularly easy process when the client and I have such similar good taste.
The first option is more open and uses animated gifs cycling through screen shots. The mobile version is based on Apple's App Store look.
The second option has a much more pronounced hero section that is cleanly separated from the rest of the information.
The typically wishy-washy client decided they wanted to see both fleshed out a bit more.
I was working with two “stream” ideas. Originally I was thinking of streams of light, similar to the PS3 background screen, but this evolved into somthing that looked more like smoke. I also liked a more literal water stream approach.
I created these images to see what I thought of the ideas. I ended up working with both…
These are the two versions I came up with. For the responsive HTML mock-up that I created, I was determined to do it CSS Zen Garden style. I was fascinated with that site when I first learned about CSS.
So, both of these versions use the exact same HTML. The only difference is the CSS file that gets linked to it. That was a fun and worthwhile project.