Website - Crash site
interactive animated scene development (2021)
Art Direction: Anwar Bey ||| Developer || Chase Dyker | Artist: Travis Burgess
Flatlay website scene (final)
Project Overview
PLASMAworlds: Sci-fi action adventure storyworld was soon to launch its Kickstarter campaign for Book of WOLDU.
We needed a super cool website that would grasp attention and provide a unique interactive informative experience at the same time. Always looking to reuse assets.
Platform: Website
Role: Director, Art Director, Producer and Lead Designer
Team: 1 artist - Travis Burgess and 1 website developer - Johnathan Dyker
Objective: Build a welcoming attention grasping website that introduces audience to PLASMAworlds
Focuses: Cinematic storytelling, interactive, Immersive, desktop
A walk-through of the completed PLASMAworlds site (circa 2020).
Back in 2018 a very talented Web developer named I’d recently met named JD reached out with an idea. He expressed that he was excited to test a new technology for interactive websites. He said we could overlap and overlay images in the same he’d noticed I had been developing my animations - 2D parallax style. The difference here is the animation would take place as the finger scrolls or the twist of a mouse wheel, that is how the animation will active and progress. I thought it was an interesting idea and I got right to sketching designs on my phone - with my Samsung note and screen pen. Though the words are not so easily legible, you get the idea - I broke the site scene into 3 levels (scenes).
(below) Initial design sketch for how the site will work
[Story beats]
(1) Ship crashes on alien world -
(2) Alien flora scene transition.
(3) Flatlay elements from the crash
scene sequence sketch & breakdowns
(below) Storyboards for ship crash.
1- scene one - developing the ship crash (Below)
- sketches and design process for creating world view of crash scene
- notes from conversation with Art Director and artist
- we communicate by using art, design, paintovers and written feedback
ship- escape pod design sketches
final background plate for ship crash scene
2- scene two - setting up the floral transition
(Below) You will see my initial designs (left) layout sketches utilized as art direction that communicated to the artist the art orientation needed (left) and how to break it down into layers, so that we can animation the this transition scene.
- I needed to utilize the flora leaves to seamlessly navigate from the front facing camera used in the crash sequence (above) to an over the top facing camera view to show the personal effects from the crash that are laying on the ground (below).
ideation design notes for transition scene creation
ideation design notes for transition scene creation
phase two - a bunch of initial alien flora/ plants designs - each will be separated on to unique layer
phase three - transition flora, more plants are needed.
phase four - each flora is on an individual layer to give the effect of immersive multi-plane movement
3- scene three - creating the flat lay
initial design notes
initial design notes
refined design notes, with device sketches and exploration
flatlay reference
flatlay reference
utility belt reference
scene/ picture layout sketches - clothing references
device sketches and exploration
device designs and family picture refined
adding the utility belt
lighting pass
colour ways
final scene
Midpoint site mockup