Thelwell.

Creating a visual identity and develop a website for a kids' feature film
The world famous British illustrator Norman Thelwell is loved for his humorous pony cartoons. For this job I got the honor of creating the identity and web design for the upcoming translation of the cartoons into an animation feature film.

The final product.

Example visuals from the visual identity
With Dribbble and Behance as my main source of inspiration, this project is wildly different from anything I’ve done before and normally look toward. The target audience of the upcoming feature film of Thelwell are families and children aged 6 to 12. The website and the overall visual identity was designed specifically for them, drawing on elements from Norman’s style and heritage.

Required skills.

Crafting the design
  • Conceptualisation (research, ideation)
  • Poster mockups (realistic mockups in Photoshop)
  • Design (Hi-fi mockups in Photoshop)
  • Development (WordPress, CSS)

Executing team.

Key responsibilities
  • 1 client
  • Myself as the designer and developer

I was the only designer on the project and had full creative freedom to interpret how to translate the drawings to a digital presence

Deliverables.

Design hand-offs
  • A Google Slides presentation based on the client’s text
  • A website that allows fans to stay tuned on a newsletter and explains the project

Overview.

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.

The design process.

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.

inspiration | A mockup for 'The Little Mole' which uses brushed edges between artwork and whitespace
Inspiration | 'Ernest and Celestine' website. It hits a good balance of sophisticated and childhst
Inspiration | Website for 'Coraline' that clearly emphasises film stills. This is clearly not possible for the Thelwell project as it's in-development
Inspiration | 'Shaun the Sheep' is vibrant and clearly for kids. This shows an often used style that distributors and producers choose for these types of films and series
Inspiration | 'Lego the Movie 2' is also colorful but seems marketed toward older kids
Inspiration | The website for Disney's 'Frozen' uses textures to liven up the appearance. I chose a similar way for Thelwell

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.

Source material | Illustration by Norman Thelwell
Source material | Illustration by Norman Thelwell
Source material | Illustration 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.

Learnings and reflections.

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.

Not live yet.

Read more about the product
  • The website is not live yet, and the Google Slides presentation is private per request of the client.