How to use CGI graphics to engage with your users and build your brand
The expanded design possibilities offered by computer-generated imagery offers a chance to explore new horizons of website design and customer engagement.
“You know what there aren’t enough of? Brands” said no-one ever. There is a more thriving ecosystem of competing brands trying to feast on the nutritious morsels of human attention now than ever before. Studies estimate the average American is exposed to 4000–10,000 adverts every day. Standing out in this ultra-saturated market is becoming increasingly challenging, even for brands with a small niche and a solid business plan. Many websites are starting to look the same as each other as trends take off and vector illustrations are everywhere. There are of course many ways to carve out a visual identity, but I’m going to talk about an (in my opinion) under-utilised one: 3D CGI imagery.
CGI: endless possibilities
Using CGI as part of your brand has several key advantages. First: the use of this type of CGI in itself is still relatively rare in companies that don’t do it for a profession. Secondly, the variations that can be achieved are huge: not only can more shapes be created in 3D (there is literally a whole new dimension to it) but there are more textures, materials and lighting possibilities than in equivalent vector illustrations. Finally, using images that appear more real and tangible could help establish a concrete connotation to your brand, making it seem more reliable. Take a look at the below example I designed for a freelancer’s website (see the full animated version here):
This adds a level of intrigue to the site, and creates a world the user can mentally step into.
Myth: CGI is always super-complex
Often people seem to think that good CGI will take nothing less than Pixar to bring it to life. I mean, it’s obviously often true, especially for anything that involves genuinely complex scenes, so don’t go expecting to be able to brand your website with a photorealistic dinosaur. Good branding however, is often bold and simple. It certainly takes skill, but doesn’t have to be monumentally more complex than 2D illustration provided you have people who can do it. Let’s have a look at a simple example to illustrate the best practices for doing so.
Creating some semi-abstract imagery
There are several popular 3D creation applications out there, including Cinema 4D, Maya and ZBrush. For this though, I used Blender, which has the obvious advantage of being free (as well as having some great doughnut-based tutorials to learn from). As the whole point of this is to create visuals to enhance your brand, it is essential to keep in mind the end user and how you want to appear to them. For this example, I’ve made up a software company that does technical back-end stuff (kind of like Pied Piper from Silicon Valley). You don’t need to know the technical details of what this company do as it’s a hypothetical example, but they’ll probably get bought by Facebook in a year’s time. Anyway, the pitch is: they want to seem friendly and approachable, yet still clearly be a tech company. Let’s create something in Blender:
Wow cool! What is it? Well, nothing in particular, it’s semi-abstract imagery after all (didn’t you read the subheading?). It is inspired by microchips though, but with softer edges to create a more human feel (as well as looking more photorealistic, as no real-world objects ever have truly sharp edges). Looks a bit boring at the moment, but it’s still in the editing screen. Maybe we should give it a render:
There, that looks better! The rubbery material helps to convey the “soft” qualities of the business, while the scene itself is still has a clearly technical feel. The colour scheme could be adapted for whatever the colour scheme of the company is; here I went with two complimentary colours to combine warmth with technology.
How to implement your concept on a landing page: tips and tricks
Using 3D images in applications such as websites, movies and print has a huge number of considerations. Here are some of the most important for implementing them in a website:
- Tell a story
How does your image choice reflect your brand? For this example, we want to give the sense that there are lots of moving parts in the company all working together, so some sort of overview image would be good.
- How will the image be used?
The image should enhance the UX of the website (or at the very least not detract from it). Don’t let a cool 3D shot make your website harder to navigate. For the landing page below, we need an area of the image for heading text. Let’s frame it so that there’s an area of white space at the top, meaning it doesn’t distract from the text:
- Invite the user into your world
The low angle of the shot emphasises the depth of the image, beckoning the user in. This is one of the great things about 3D design: it feels more tangible than 2D design, and helps immerse the user.
- Don’t overuse it
Keeping the balance or “rhythm” of a document is an important concept in graphic design, so remember to include some areas of fewer images to let the text stand out where it’s important (you can read more on this subject here). People also process small bites of information better than seeing everything at once, so breaking the key takeaways down is important. The second section of this landing pages illustrates this concept:
Notice the large amount of white space, and clear call-to-action button. Maybe the customer could use some more convincing though, how about we show them some data?
- Keep the images relevant
Showing an overview of the image helps with the feeling that this section is trying to convey: it is an overview of the data, so we’re showing an overview of the 3D objects. As there is no convenient white space here, it’s necessary to add a background to the text container to give some contrast.
To close out the landing page, let’s change things up again. Instead of having a view of full 3D objects, shapes and colour can also be used to break the branding down to its bare components, and finish off the story we are telling. This demonstrates another useful tip: scale.
- When looking for new ideas, try playing with the scale of elements in your design
The scaled-up sphere here creates a simple and yet memorable reinforcement of the branding. It also fits with the message of the page: the smooth curve creates a calming connotation, and evokes an image of a rising sun and new possibilities.
New outreach methods
Another great thing about using 3D assets is the ability to use new ways of connecting with your audience. With the rise of AR and VR, 3D assets already in use in your brand could easily be exported to programs such as Spark AR or Lens Studio, which are used to create Instagram and Snapchat effects. This can open up a whole new world of connecting with people, since your audience are interacting with your brand in real time. Indeed, the rise of social AR is huge, and companies are already seeing concrete results (such as with this Miller campaign). These do also have their technical limitations however: 3D assets typically can’t be too complex as mobile devices are rendering them on-the-fly, so having lots of detail and animations might make the performance slower. Another topic I didn’t touch upon much in this article is interactive web-based 3D rendering using WebGL. There are plenty of amazing examples of this, and it can be a great way to increase interaction and engagement in websites.
Whatever methods you use to reach your audience, 3D design will likely become a larger part of branding and website design in the future. Just remember when using it, to always link it back to the story you are trying to tell. Experiment with materials, scale and lighting, and think about the final use cases of it: will it be primarily used on a website, in print, in an AR/VR campaign? Whatever the implementation, there is a whole new dimension out there to explore, and now is the best time to start!
