TV Paint Animation

Visual redesign of existing site, branding, and logo design

Overview

For this project, I designed the website for TVPaint, which is a website containing information about the 2D animation software TVPaint. Currently, the website features some high-quality assets created with TVPaint software and some degree of visual identity, but it lacks a consistent, cohesive style across the pages. For a redesign of the site, I wanted to better match the site's aesthetic with the concept of 2D animation. Having a more engaging website might allow TVPaint to present itself and its product as more modern and attract more new users.

I completed this visual redesign as an individual assignment for a graduate course on visual design.

Role

User Interface Designer
Visual Design • Prototyping • Animation • Logo Design

Tools

Figma

Audit of Original Design

Currently, it seems like TVPaint is trying to present its software and assets produced using its software as more serious, professional, and traditional. This is in contrast to Adobe Animate and Toon Boom, which favor more cartoony assets and maximal color palettes. While the homepage displays an abundance of high-quality animated gifs, the highly structured positioning of the assets do not allow the full potential of the animated movement to come through in the layout of the web page. Other pages on the site are overly text-heavy and similarly underutilize their graphic assets. The site does not use much dynamic motion in user interactions. Overall, there is a lack of consistent styling and poor information hierarchy in the existing site that make the site feel unapproachable and uninviting for potential users.

Key Insights

The current site does not convey the whimsy of animation or feel approachable and inviting for potential users.

Underutilization of assets. The gifs, videos, and images on the site are vibrant and compelling, but their size and positioning and the rigid structure of the page layouts make them feel stifled.
Lack of consistent styling. The sizing of certain components, like buttons and cards, are inconsistent. There is a similar issue with padding and spacing between elements. These make the page feel disorganized.
Poor information hierarchy. The elements on the site, especially the text, are arranged without much attention to information hierarchy, which results in cluttered, difficult to parse pages.

Visual Strategy

I developed a moodboard to guide the visual redesign of the site. I gathered inspiration from existing animation assets on the site, other art software sites, and graphic textures.

From my initial exploration, I figured out that the biggest differences between the TVPaint, ToonBoom, and Adobe Animate site were in how they arranged text with related graphics, how they direct the user around from page to page, and how they utilize animations to give the site a sense of interactivity. My biggest challenge for this project was to add motion and styling to the site to evoke the feeling that one experiences when watching an animation without going overboard.

Key Insights

The key principles that I wanted to abide by in my redesign of the site were “playfulness,” “dynamism,” and “handcrafted.”

Create style guidelines. Create guidelines for color and typography that convey the brand's mission. Make sizing and spacing consistent throughout the site.
Create more dynamic page layouts. Make the pages feel more dynamic by breaking the grid to remind the user of animation.
Incorporate animation metaphors. Utilize motion to guide the user and draw attention to interactions. Use graphic elements that reference the content of the site's product.

How can we make the site more playful, dynamic, and handcrafted?

Layout Exploration

As I explored different layouts for the homepage, I focused on creating different shapes with the sections so that the transitions between them would feel more gradual. I added more sections that were not in the original design to highlight more features of TVPaint Animation and to highlight prominent works that have used the software. I also moved the section about blog entries further down to give more attention to the product itself.

My first layout felt too similar to the original design, but I liked the new sections I included.
My second layout introduces a section for frequently asked questions to more directly engage the user and foster a greater sense of approachability. I also added elements corresponding to key features of the product.
My third layout introduced more sections of information and played a bit more with the shape of the hero section. I liked the addition of the new sections, but I felt that the layout was getting a bit too rectangular.

With the product detail pages, I split my attention between redesigning the landing section and the features section. As I was designing the landing section, I was split between two main types of layouts: a large block spanning the full width the screen or a set of overlapping elements.

The block approach would be similar to the existing design, the main difference being the placement of the text and the calls to action. This is a safe, solid idea that showcases the assets created with the software, but it is an obvious, common solution and relies on high-quality graphics, which are a bit difficult to source.

With the overlapping elements approach, I had the idea to have different layouts for each of the editions, 2 in total. This would make each page feel fresh. The idea behind the overlapping graphic elements was to reference comic frames and different camera angles in a storyboard for an animation. My biggest challenge here was figuring out what exactly to place in each spot.

Mid-Fidelity Design

The key principles that I wanted to abide by in my redesign of the site were “playfulness,” “dynamism,” and “handcrafted.”

I experimented with a series of type combinations and aesthetics, applying them to the mid-fidelity design.

With the non-minimalist approach, I tried to utilize different shapes within each section and display more graphics. I added more decorative graphic elements and utilized more gradients and graphic treatments, using some graphics as textures more than images. I paired two different typefaces to add more depth to the texture of the text. I liked how this more dynamic layout was able to lead the eye around the page, but the sections still felt too blocked off because of their clearly defined rectangular borders. Some of the graphic treatments felt distracting and even corny.

With the more minimalist approach, I utilized whitespace more to draw attention to specific graphics. I used minimal graphic treatments and gradients. I used a single typeface for minimal distraction. I liked how the minimal usage of graphics made each graphic stand out more. Also, the utilization of negative space made for fewer blocky sections. However, this design felt too empty; some sections felt like they needed more graphics or motion.

Logo Design

With my redesign of the site, I wanted to try my hand at designing a logo for TVPaint and for the individual software editions. From what I can see, the company's current logo is some untreated text version of “TVPaint.” For my logo redesign, I wanted to create a graphic, as I felt that a graphic would help solidify the company's brand image and provide some visual interest.

I started with the site logo, trying different ways to merge the images of “TV” and “paint.” I eventually settled on an image of a CRT TV combined with the idea of a paint stroke or dripping paint as references to retro technology. For the hover state of the logo, I had the idea of the TV turning on with some colored bands to add more visual interest for the user.

With the imagery of the site logo in place, I started to solidify my designs for the editions of the software, focusing on integrating the paint dripping motif with the letters. I added a layered aspect to the designs to reference to how animators flip back and forth between their frames.

Solution

In my final design, I built on all my previous exploration, preserving information hierarchy and incorporating motion and graphic elements referencing animation.

Homepage

The updated homepage makes more effective usage of the existing graphics on the site, as well as incorporates more graphic content made using TV Paint Animation and visual metaphors tying the site to the physicality of traditional 2D animation. The looping animations on the larger graphics and the smaller hover animations add dynamism to the site to better advertise the software's capabilities and increase the credibility of the site.

Products Page

The updated products page utilizes newly designed logos for the products being sold on the site to solidify their brand identity. Each card makes use of on-hover animations that add life to the page and draw the eye of visitor's of the site. The licensing information for the site is also better organized to allow visitors to compare all licenses to each other without having to tab through multiple pages and rely on recall.

Product Detail Page

The updated product detail page makes use of the existing graphics on the site and adds more hand-drawn and traditional 2D animation motifs for visual interest and to connect the site to its product. The design also adds graphics to provide context for the key features of the product, instead of overwhelming visitors with a wall of text as in the existing site.

User Testing

Throughout my design process, I kept the principles of playfulness, dynamism, and handcraftedness in mind. In my redesign, I focused on being intentional with my layout decisions and usage of graphics to direct attention across pages.

For each of my layouts, I focused on creating a flowing motion between the forms of each section. This was to convey the dynamism of animation and to reference the forms of comic panels. While I did have a set up a columnar grid behind my layouts, in practice, I used them minimally, opting to break the grid in many places, especially on the home page to create visual interest and draw the user's eye across the page. I created separate layouts for the landing sections of the product detail pages for each of the software editions to make each page feel organic and fresh.

I ended up choosing Yeseva One as my display and header typeface and Josefin Sans as my header and body typeface. These typefaces pair well with one another, and they each convey some aspect of the key principles around my redesign: playfulness, dynamism, and handcraftedness. They also convey a balance between modernity and nostalgia that I think conveys how I feel about traditional 2D animation techniques. I chose a minimal color palette of neutrals (barring the colors of the logo on the hover state) to allow the animations and graphics to take priority.

I used graphics and motion throughout my redesign to reference animation and create enjoyable interactions for the user. I used gifs and videos made using the software for the landing sections to immediately grab the attention of the user. I also used gifs showing off the key features to provide users context for how they might use the software. I created logos for the site itself and for the two software editions to make the site and software feel more substantial to the user. As I was creating these designs, I kept the metaphors of the brand and my guiding principles in mind.

Next Steps

While I am satisfied with my design decisions for my redesign of the TVPaint website, I think there are still some changes that I would make on future iterations of this design given more time.

Find more representative graphics for features. Some of the graphics are low-definition. While the gifs on the product detail pages are generally representative of the features, some of them show too much or too little of the UI, and some of them show the UI of a similar-looking software, rather than TVPaint.
Iterate on logo designs. While I think my current design for the site and software edition logos are adequate, I think they could be improved in future iterations with more thought put to texturing and integrating the name of the company.
Add more pages. Although I had created some mid-fidelity layouts and was starting to transition to high-fidelity, I was unable to complete the login and buy pages for my redesign. TVPaint also has a blog and forum that I could redesign in future iterations.

Results and Takeaways

Having finished the first studio project in this class, this project felt like the perfect opportunity for me to hone the skills I picked up from there, especially with designing graphics. I definitely tried to be more experimental this time around, and I felt more comfortable redesigning not just one logo but three. While I had relied on Figma to create my logo and graphics last time, this time, I was able to use Adobe illustrator and became a bit more comfortable with that interface and workflow. But I still have a long way to go to discover more optimal ways of doing things.

On this project, I focused a lot more on designing motion, and I think it paid off. I think I understand how to use it now. By playing around with positioning, I was able to learn how subtle off-screen motions cause intrigue, and I was able to use them to draw the eye.

My biggest challenge during this project was creating dynamic layouts; I had to balance static objects with moving ones, and graphics with negative space. But working through each iteration and receiving valuable critique, I've learned new skills that I'm excited to put to use again.