Desizn Tech logo
  • Home
  • Freebies
  • Showcase
  • Tutorial
  • Photography

Website Mascots Showcase & Analysis

Posted December 5, 2012 & filed under Tips & Tools, Web design

There are many ways to spruce up your website and bring it to life such as : simple modifications to your layouts color to a full overhaul. However, there is another way to make your website stand out from the rest of them and that’s by creating a mascot.

Nowadays, many companies and businesses are utilizing mascots. Why?” you might ask. Well it’s simple, mascots are not only memorable in most cases but they also can be used to connect with people on a more personal and emotional level. Think of mascots like Mickey Mouse, the Energizer Bunny and even the Geico Gecko. These mascots are not only memorable but they are also used to brand the company and make them more distinctive and noticeable. Creating a great mascot takes time and hard work. How do you take an animal or imaginary character and associate your brand? In this post we are evaluating how some of the companies has been using mascot in their website and give you an idea to create your own mascot.

Mail Chimp

Mailchimp Website Mascots

A giant vectored mascot, it’s hard to miss the large primate at the top of the screen. The mascot design is clean and the colors compliment the blue background of the website. What’s perfect about this mascot design is that the character has been designed with the website’s name in mind. Creating a smiling chimp dressed up as a mailman is not only clever but it is also very conspicuous. The strategic positioning of the chimp is also a smart move by the website designer as your attention is immediately drawn to the CTA (Call to Action) button on the right.

Owltastic

Owltastic Website Masct

Having gone through a mascot design overhaul, Owltastic still maintains the lovable owl. The design itself gives the idea of a hand drawn image which works perfectly seeing as Owltastic is the website of website designer Meagan Fisher. The muted color of the owl works well with the pale colors that make up the site and the owl itself appears friendly and inviting.

Fork CMS

Fork CMS Mascost

An interesting design, Fork CMS uses a mascot with a design that calls to mind Poseidon given the mermaid tail, white beard and of course trident. The three colors used in the design gives the mascot a simple yet clean feeling that leaves you at ease. The positioning is also effective because even though the character is positioned at the bottom of the screen he is placed behind the CTA buttons effectively grabbing your attention. Whether it is intentional or not the word fork is translated over to the characters trident and crown that offers a great flow to the overall design.

Formee

Formee Mascot

Unlike some of the other mascot designs that have made this list, Formee’s mascot isn’t conceived from the website’s name itself. Instead the design of a chef is taken from their tag line “fresh baked forms for your website.” The design is rather eye-popping. The use of heavy, bold lines makes the chef stand out from the background which enlivens the site and takes up space seeing as the site design is fairly simple. The color choice is realistic and caters to what we already imagine when we think of what a chef looks like.

Foxtie

Foxtie Website Mascot

When we think of foxes being used in website design admittedly most people will think of Firefox automatically and so seeing a new take on fox designs is refreshing. Foxtie, like a lot of other sites uses a large vectored mascot to grab your attention and like sites like Mail Chimp and Chubby Grub, this site uses the design of their character to correlate with what they do. With the boasting of “we do it all” it’s no wonder that the fox mascot is depicted juggling. The character’s vectored design coupled with some gradients really does make him stand out against such a dark background.

ChubbyGrub

Chubby Grub Mascot

Capturing the spirit of your website can be easy if your website has a clever name and goal. ChubbyGrub’s mascot has a delightful appearance and there is something amusing about this chubby character chowing down on a cheeseburger. Like MailChimp, ChubbyGrub uses their name as a reference when it comes to the design of their mascot and though it is a subtle aspect of the design the mascot ingeniously wears red. For those who don’t know the color red is often used in food related designs as the color is thought to induce hunger.

Informant

A bold and dynamic design, the Infromant’s mascot suggests a super hero with his pose and rocket launcher strapped on to his back. The character’s large head is an interesting choice given his long, skinny body but it works given the way the words on the home page are skewed slightly giving the site a more energetic flow over all. Like Solid Giant, Informant just doesn’t leave it’s mascot on the home page like some of the others. Instead you can see the mascot on a smaller scale standing with a huge grin on his face beside whichever navigational option you choose to click on at the top.

Solid Giant

Not only is Solid Giant’s website color choice eye-catching but their mascot is as well. Monster designs seem to be popular when creating characters for websites and the bright magenta monster for Solid Giant is very cool. What is interesting about the site’s mascot is the many forms he appears in on the site itself. Unlike most sites that will create a mascot to leave on their home page and leave it at that, Solid Giant takes it a bit further and transforms the mascot into various shapes and sizes including the letter “G” which can be seen in the image above.

Mascots for websites can come in all different shapes and sizes including humans, animals and of course monsters, it really just depends on your website. If you consider having a mascot it can be very beneficial for your website especially if you plan on creating a brand in the near future. If you’re on the quest to get your own mascot designed here are some aspects to think about:

  • Color: Your mascot doesn’t necessarily have to be painted up in bold, striking colors but you will want to make sure that you mascot stands out from the rest of the website. Think complimentary colors to achieve this.
  • Lines: Using lines to outline your character is a great way to show some dynamic and depth to your design. Lines will also make your character stand out more and make them more accessible to the eye.
  • Correlation: Do your best to have your mascot design correlate with what your website is about if you can. It won’t do to have your mascot be such as a smiling rocket when your website is called Orange Designs and focuses on website templates.

The most important thing when it comes to creating your own mascot is to design a mascot that is not only creative but has a friendly welcoming demeanor as well. Doing this along with following some simple guidelines will make people more apt to visit and remember your site in the future.

More about Gabrielle Gosha

About the author

Gabrielle is a freelance graphic designer, photographer, filmmaker and animator. She's designed logos, characters, backgrounds and shirts for clients. You can follow her on twitter and on her blog.

Tags: brand, Illustration


Related posts:
  • Useful Tips for Designing a Professional Website
  • 4 Website Design Mistakes that Lead to Website Failure
  • Why Minimal Web Design Works? Examples and Analysis
  • Negative Space Logos with Examples and Analysis
  • Examples of Inspiring Coming Soon Page Design & Analysis

Comments

Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.

Cheap Tablet PC

Stay Connected

rss twitter facebook google pinterest
Get free updates in your inbox!

Subscribe via rss

Our Supporters

  • Cloud Storage
  • Dedicated Server
  • Modern Furniture
  • Online Business Printing
  • Online Backup
  • Logo Design
  • Wow Gold
  • Web Hosting UK
  • Secure and protect your business with SiteLock.
  • Festklänningar
  • Blogroll

    AnimHut
    Designmodo – Web Design
    Design Superhero
    Inspireyourway
    iBrandStudio
    OurTuts
    Skyje
    TextureQualityPro
    Stock Images
    Vector Pack
    365icon
    TexTuts
    • About
    • Contact
    • Contribute
    • Privacy Policy

    Copyright © 2008-2013 Desizn Tech

    Theme by Kawsar Ali.