(Last week, I wrote an article describing “How To Design an Effective Company Mascot.” Since that article followed very specific steps and focused on only one design, I thought I’d follow up with some more general, more abstract ways to illustrate characters for a wide variety of purposes. I hope you like it!)
As a former art student of 10+ years, I know the importance of creating work that catches the eye of whomever passes. They say that “first impressions are lasting impressions,” and it’s no different when it comes to the characters and mascots that you design. Just like your wardrobe and anything else you can aesthetically change, careful alterations can go a long way and can make even the simplest designs look amazing. Consider the concepts that digital artists work with before they reveal their finished product, or the raw fabric that a clothing designer turns into a couture piece for the runway. Everything can look a little better if we add some life to it, and the same goes for your characters and illustrations. So, today I’m here to share some tips and tricks to add some life and some extra polish to your creations. To help illustrate the ideas a bit better, I’ve drawn up some quick doodles to accompany each tip to help explain what I mean.
When it comes to the basic elements of design, before you even power up your graphic software, picking and choosing the best composition for your character is the first thing you should consider. It’s sort of like photography; unless you know how you’re going to compose your shot, you’re going to be sitting there for a long time taking photos until you figure out what you want. This isn’t technically a bad thing (I do this a lot when I have down time), but when you’re either on a deadline or working on someone else’s time, you’ll want to have this part of your project planned. Now, to prevent any confusion when I bring up the word composition, I’m referring to the placement of your character, specifically the placement of your character on a website. “How does this add life?” you may ask. Well, it’s simple, really. If your character is placed somewhere on the website where they are obscure, then they might as well not exist at all. To prevent this from happening, I recommend sketching out the website that your character is going on and creating thumbnail cutouts of your character to move around to decide on your composition and placement. If that’s too much, simply create a screen capture and sketch directly on top of it using your favorite image editing software.
Research, research, research! In order to create a character, you’ll need to not only throw down some sketches, but you’ll also need to determine an ideal, representative character for purpose. Shaping a character that suits the purposes of your business or client is very important when it comes to the design process. The company name and their services will help dictate whether you are creating a character with round edges or one with sharp edges. I had a woman recently ask me to create a logo for her online shop, which was to be inspired by her love of using unusual fabric prints and the names of her children. I concluded that I was going to create a fun colorful logo that mixed class and innocence. The process is the same with character design; know what the business does, what they make, who their target audience is, and what the character is supposed to communicate. If you’re designing a mascot for a business called Squid Inks that specializes in graphic multimedia, don’t think that it’s fine and dandy to hand them off a crudely-drawn, one-dimensional squid and call it a day. They could have Googled a squid and pasted it on their site if they wanted that. Since you know what they do, why not create a graphically impressive squid character wearing clothes that is holding a paintbrush? Immediate character life is created by actually taking some time to figure out what the business does and including that message in your design.
Although we have all probably met some pretty boring people, let’s all just agree that we all have personality. Whether it’s charming or not, the fact is that our personality not only gives us a distinctive character, but it also makes us animated. Since typically we won’t be creating an animated mascot for a website, we can channel personality by the pose, the clothing, and of course the eyes. When designing your character, just don’t have them standing straight and facing the “camera.” Depending on the sex of your character, you can try having them stand with their hands on their hips or in their pockets. This works for androgynous characters as well, but I recommend try using 3/4th poses, or at least having the head turned slightly if you can. You want your character to have some attitude, and even if they are standing facing forward, you can use the eyes, hair, and clothing to provide some pizazz.
No one likes a shallow person, and nobody likes shallow characters either. Try adding some depth to your character to make them a little more three-dimensional. You don’t need to know how to create 3D renders in order to achieve this. Adding shadows to the character’s skin and clothing will help wonders, along with adding a shadow underneath them. Adding depth not only shows more of your character, but you can also use it to create an even more dynamic personality, especially if your character is designed to look like a superhero or a villain. But, be cautious with how much depth you give your character, because while it will add more life, it may overshadow the website they are destined for, no pun intended.
There’s nothing wrong with a “Plain Jane,” but when it comes to your characters, the last thing you want is for them to be a run-of-the-mill mascot, because trust me, no one is going to give them a passing thought. If your character isn’t memorable, it could be because they are lacking detail. Now, you don’t have to go overboard, but some details can be helpful. You typically want your character to look like a polished, thoughtful design, but in some cases your detail can come from a raw, intentionally messy, doodle-like design. I’ve seen some sites that don’t have overly-polished characters posing as their mascots. In fact, some are just crudely drawn pencil renders, but it works because the scribbles work as details. Try adding stitch lines, pockets, or folds to the clothes. Add laces to shoes if applicable, and put a couple of dots or stripes somewhere to add texture. Make sure not to be too heavy-handed when adding detail; you want your character to stand out, not stick out like a sore thumb and clash with the website design.
Nothing says “I’m here, look at me” like bold, thick lines, which makes line weight an important and effective technique for character design. Just like details and personality, the thickness of your line depends completely on your character. You don’t always have to outline your character, but it could improve the appearance and increase the chances of the character being seen. However, overly thick lines can swallow up the character and make them appear too bulky. Having no outline can give your character a softer feel, but they can also be lost within the website. So, to find a bold look without making your character look bulky, try a thin line to maintain softness and thicker lines to define definition. Keep in mind that if you choose to have your character outlined, try following some basic rules: the parts of the character that are closest to the viewer should be thicker, while parts that are further away should be thinner. You can also have the outside of the character lined with thick lines, no matter the position and keep the lines inside thin. Take a look at the variations below, all of which differ only by line weight.
Characters with exaggerated proportions are characters that tend to be memorable. Think about Mickey Mouse’s large gloved hands or his enormous ears. They were so prominent and eye-catching that I remember getting those same gigantic hands when I was a little kid at Disneyland. Embellishing character features can add prominence and appeal, but you don’t have to go off the deep end and make characters that have unbelievable proportions. A few subtle tweaks here and there can make them livelier without distorting them. If you have a large glutton type character, consider making his mouth wide or giving them a large round potbelly that pokes out when he turns to the side. Bunny characters can easily stand for having larger ears or teeth, while more human based characters can have slightly larger heads and eyes, especially if they are females.
Keeping a compact shape for your characters isn’t so much to make them character livelier as it is to make sure they can fit well within surrounding designs. No one wants a character that takes up all of the space on their website, no matter how cute or awesome the design may be. Keeping the character’s height close to its width will keep you from having to crop or resize your character and losing some of your hard work and painstaking detail in the process. You don’t want to find out that you designed all that wonderful depth, detail, and embellishment only to see it shrunk down and cropped out, do you? Even though you might be able to get away with a designing a character that is tall or has long outstretched arms, your best bet is to not even do it. The character will likely be re-purposed for all sorts of different mediums, and you want to keep them flexible for their own sake! If you can’t figure out how to make an energetic, lively character without having them take up a ton of space, you might need to go back to the drawing board.
Multiples and Variations
You may not be creating a fully-animated character, but that doesn’t mean you can’t show your character in action. Designing multiple variations of your character not only conveys a sense of action and activity on the website, but it also intensifies the personality that you have been working so hard to develop. Most people may not think about it but, designing more than one character to act as a mascot is a great idea. Not only are you not overusing your sole character design but you are also creating a partnership dynamic that most online businesses already want to establish with potential clients and employees. When creating multiples and variations of your character or characters, try drawing them in poses that relate to the pages that they will be featured on. For example, a character that is going on the “Contact Us” page could be shown either in glasses holding a notepad and pen, holding a cellphone or even dressed up as a mailman. Conversely a character on the “Home” page might want to be shown either waving or smiling towards the website viewer.
Last but certainly not least, color can be a highly effective tool. Having the wrong color picked out for your character can detract from the design and change the overall feel of your character for the worse without you ever meaning too. First and foremost, always choose colors that will complement the website to prevent your character from clashing with other page elements or disappearing into similarly-shaded backgrounds. Definitely use gradients and shading to avoid a flat looking character. Don’t be afraid to use strange color combinations; if they work, then they work. But, don’t go slapping a bunch of bright colors together solely to make your character stand out. When adding color to your characters, consider the original concept, the composition, and personality. If you aren’t sure of which colors work best, create a character sheet of that character numerous times in different colors, and visually compare the side-by-side results. With a successful color scheme, your character is going to stand out and look lively and energetic.
There are, of course, many other things that you can do to add life to your characters. Though I’ve listed some general outlines for you to follow, don’t feel that you have to stick with them. At the end of the day, the most important thing is to design a character that pleases you, your clients, and their customers.
Do you have any designs to show off? Do you recall any character design triumphs or difficulties?
Gabrielle is a creative type who specializes in graphic design, animation and photography.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns