Studio Diva - Digital Design Work
Overview
During my time at Studio Diva in Bristol, I worked on a range of large marketing campaigns for AAA game titles. I was responsible for tasks such as creating HTML5 banners, social media statics, video cut downs, and homepage takeovers. These campaigns were international in scope, requiring meticulous quality control and a well-thought-out DesignOps process in which I actively participated.
Below is a collection of highlights from things I have worked on whilst at Studio Diva.
HTML5 Banners
Over three years, I progressed from working with applications such as Google Web Designer and Adobe Animate to producing hand-coded work in HTML, CSS, and GreenSock JS. I contributed to Rich-Media and Standard Media executions across various territories, creating adaptable and updatable content.
HTML5 Screen Recordings
To view the animations, please click on the adjacent video units. Sackboy features an engaging unzipping effect, Warhammer showcases a parallax effect with a JavaScript snow layer, and The Division utilizes Rich Media video.
Returnal HTML5 Standard Banners
I created these banners using Adobe Animate to achieve unique glitching effects. I also animated individual particles along a path and utilized .svg masks to minimize the file size. It was crucial for these banners to maintain correct composition across different sizes and not compromise the image quality of the main characters.
Spring Sale HTML5 Standard Banners
I advocated for moving away from last year's carousel format, which I found to be outdated and unappealing for user interaction. I restructured the ads using pre-existing assets and created a Photoshop template that generates all the necessary assets. These banners were designed to be easily localized for various territories.
Warhammer HTML5 Standard Banners
This set of banners required a template that could be easily adapted in Photoshop without altering the core build files every week. Each week, the template would feature a new character. These banners needed to stay under 150KB, which posed a technical challenge and required innovative approaches to maintain high-quality deliverables.
Social Carousel
Utilizing key art, screenshots, and guidelines provided by the developers, we were tasked with creating content in various engaging formats. As you can see below, I employed a faux frame technique to highlight the characters and provide a sense of depth for this social carousel.
Homepage Takeover
Destiny 2, an established game, went free-to-play in September 2019 to rejuvenate interest among casual gamers by introducing features and game modes aligning with the genre.
In this project, my task was to design a homepage takeover/skin featuring a dominant background image wrapping around the site background and an interactive ad unit at the page's top. Using existing key art, I devised a concept enabling users to easily investigate game modes, access information, and watch related videos.
Dreams Social Statics
For the days to go posts I was fairly limited on the assets that were provided to me. Using flat screenshots from the game I used perspective and masks to create the impression of 3d integrated lettering, styling the text to match each environment.
