I was the only designer on the project and had full creative freedom to interpret how to translate the drawings to a digital presence
PROBLEM | Create a visual identity for the in-development feature film ‘Thelwell’ that caters to families and 6-12 year olds and stays true to Norman Thelwell’s universe. Translate it into a website and a Google Slides presentation.
CONTEXT | I was approached by a client who had acquired the animation film rights for the Thelwell universe and wanted a website (to direct potential investors and fans) and a presentation pitch deck. The film is in its very first stages of development and no pre-production work was available to draw on.
INSPIRATION | I usually look to Dribbble, Behance and various design blogs for inspiration. For this project I had a hard time finding similar visual styles, why I turned to similar film projects instead. I researched 50+ animation film sites like Disney’s Frozen and Lego the Movie 2 and indie films like Ernest and Celestine and Coraline.
LISTING KEY TRAITS | What did these sites have in common? 1) They were unpretentious, 2) targeted at kids, 3) image and texture heavy, 4) dense and packed with options.
CONCLUDING | These traits are pretty much the opposite of everything that’s popular at the moment in webdesign, where white space and colourful illustrations dominate. Regardless, I concluded that kids and families will respond better to sites like the ones I researched.
WHERE TO START | The Thelwell film has no logo, no stills, no animation tests; nothing has been developed for it so far. The client had a deadline for the Google Slides presentation, which is why I decided to start there. I had one valuable resources: the sweet illustrations by Norman Thelwell.
CREATING THE SLIDESHOW | The client had already made a slideshow that I should work from. For this he had picked a range of Thelwell’s black and white illustrations carefully so they fit the content (A welcome slide with an illustration that connotes greetings, a partnership slide with an illustration that connotes that etc). The client’s own design, though, was subpar.
After various tests of working with the same elements, I decided it would be a shame to obscure the illustrations with an overlay, crop them in a shape or otherwise mess with their original form. The client’s pitch with the slides depends on showing the illustrations to convince the investors of their originality and value, and the design should honor that.
But I wanted something more playful than a simple white background. The solution was to make a faded tapestry of illustrations, contrast it with a bold teal color and more modern text.
LAYOUT OF THE WEBSITE | With the slides done I had a starting point for the website. I decided to go for a short one-page website to briefly tell about the project, show the illustrations, have a clear contact form, post updates, allow fans to take a quiz and finally let people subscribe to a newsletter. This suited the jobs-do-be-done for people who knew the illustrator and wanted to know more about the upcoming film.
STYLE | With little done on the Thelwell film so far, the client and I decided that creating hype was more important than an elaborate description, which is why I decided to have little text and lots of imagery.
TEXTURES | The websites from my research phase had lots of textures and a saturated look, which I wanted to follow. Thelwell’s universe emits a clear British vibe of green rolling hills, tea parties and humour. I wanted to capture this feeling by using floral patterns, resembling British tapestry.
INCORPORATING THEM IN THE WEBSITE | Full sections of floral patterns became too overwhelming. Instead, I created horisontal strips, slightly offset behind rows of news posts and quizzes.
IT’S HARD DEVIATING FROM YOUR NATURAL STYLE | This project required a style that was cozy, dense, sweet and targeted to kids and families. The design elements I usually utilise didn’t work in this case. I took the job anyway, and found a solution that the client was happy with. I believe pushing yourself in this regard, learning to adapt to wildly different styles, is something every designer should do.
PARALLAX SECTION | I designed a parallax collage of Thelwell illustrations specifically for the footer of the website. A lot of trial and errors were required in order to get the two layers to match on different screen sizes. Technically this was a feat that taught me the ins and outs of parallax positioning, which is useful as parallax is still going strong in web design.