We’ve talked a fair amount in the past about two of my favourite things: custom web art and motion graphics. We’ve even discussed hybrid motion graphics that combine 2D and 3D visual elements. There’s no need to go over old ground here — excellent visual content is vital to both the look and success of your site, and that’s all there is to it.
However, an issue that can arise with using distinct visuals on your site is that it’s difficult to replicate the aesthetic throughout your design. You might have a really great video or graphic that actually engages users and draws them in — but these can dominate the look of your page, making everything else look pretty threadbare.
What I want to discuss today is how you can achieve stylistic consistency across your site by designing (or commissioning) each individual piece of visual content with the rest of the content that will accompany it on the same page. This might seem obvious, but many people fall into the trap of putting a lot of time and effort into that one big, brilliant video — only to neglect of the rest of their content.
Designing with design in mind
So let’s say you’ve got a piece of digital art for your site. It’s stylised to look like a pencil drawing or flat cartoon. It’s great. It’s bold, colourful, and really stands out. So how do we make the rest of the homepage stand out as well?
Well, obviously you want to try and replicate the look and feel of that artwork in your site design. This is pretty basic stuff. Establish a clear colour palette for your page and make sure it complements the image itself. You might want to give your navigation bar or icons a similar hand-drawn look. It doesn’t have to be exactly the same (you want your artwork to stand out, after all), but you also want to make sure the image fits nicely with the design. Simple, nice, easy.
It’s also important to think about positioning. If any audiovisual content is serving as a banner or main focal point of your homepage, you want people not just to watch it, but to engage with the rest of the site itself. If your video is comprised of quality content, it’s important to build subtle visual cues that a user will associate with that quality content. For example, if your video takes place in a forest, build a forest on your homepage. Position those trees around the content in question, and it’s easy to establish some of that vital continuity.
However, all this becomes a lot more complicated when you start to introduce other forms of visual content into the mix. For example, what if you want some motion graphics on your homepage?
Thanks to the much greater complexity of designing motion graphics, it’s much harder to ensure your palettes are consistent with your site in every shot, or that the video won’t look out of place adjacent to that excellent custom illustration — even with a couple of hours working on colour correction. This will be further compounded by the unique style of your illustration, i.e. a ‘hand-drawn’ look. So it’s important to consider not only the look of your video relative to that of your illustration, but also its style.
Simply put, they should match! If you have a hand-drawn look on your illustration, you should try to replicate that in your motion graphics. Think about the creative ways you could accomplish this. In this instance, your video could use cel-shading or rotoscoping to mimic the look of your artwork. These techniques allow you to take 3D-rendered or live footage and give them a beautiful illustrated, two-dimensional look:
Whether it’s live footage or 3D rendering, the point is that there are many animation techniques out there which enable you to achieve stylistic consistency across the different visual content on your site. When it comes to animation or illustration, pretty much anything is possible today — so the challenge now becomes one of pinpointing a unique style or look. Talk to your designer, animator or artist — they know what they’re doing and can definitely help you out!
Putting in that little bit extra effort will give you a beautiful site — and hopefully, some visual content that people can enjoy (as well as just consume). If you will it, it is no dream.
Photo by Bipin Gupta