Designing a showcase site featuring or personal projects and a style
✏ Visual Design
📱 Mobile
🥳 User Experience
When Will Tanna and I started working on Luna, we decided that we wanted to wrap our collabrations within an organization of some sort. We both have similar enough interests that it made sense, and it would be a little weird for us to divide all the work we do together between two different personal sites. With that, WESTWARD was born!
Besides continuing our work on Luna, the first decision we made was to put together a site. We wanted something that was simple, but also interesting enough to make a statement about our design and development work. After kicking around a few ideas, we decided on doing a showcase mountain scene and a simple page that featuring Luna, some avatars, and a contact form. We both also loved the parallax on the Firewatch site, so we set out to roll our own version.
Concept & Initial Design
While Will was building our beautiful parallax scroller, I started drawing the mountain scene. Being from the NW, mountains have always played a big part in mine and Will's lives, and are a major feature of Seattle. I've collected a bunch of interesting photos hiking in the cascades and Rainer, and there was a specfic photo captured the right vibe:
After figuring out how many layers we wanted to use, I started blocking out the shapes of the hills and mountains, i.e making a bunch of jagged swipes with the pen tool until it looked "mountain-y". It's a bit of an interesting challenge when you try and draw something that's going to move around, and I ended up spending a lot of time blocking the shape, draggin the layer around, and then filling in the gaps.
Initial blocking. Still missing a few layers
fleshed out blocking: Including a foreground with trees and an initial color experiment
After getting all the rough shapes in place, I started working on the color and some light texturing to add a bit of depth to the large blocky shapes. We went through several iterations before settling on a slightly modified base Sketch gradient.
Final set of mountain layers with gradient and shadows
Parallax & Page Design
I ended up expanding the gradient range a bit, added a few more trees, some color swipes, and Will added the awesome CSS blinking stars, which was a fantastic final touch! It all led to this amazing parallax scrolling header:
