Graphic Design for Chat Bots
How many times has it happened to you that you build the perfect flow, and amazing funnel or story narrated through chat, but you have no idea how to bring the pictures, cards or niftyimages dynamic input to life?
Most chat builders have no designer background, and that’s OK! You don´t need one. The problem is when you do need a professional since they can be a little bit expensive, or when you think using Canva solves all your problems. This is why we bring you this small comprehensive blog about the image sizes, free programs you can use, and the basic design laws and principles we ALL must take into consideration. I’ll even teach you a little trick to steal away your prospect’s logo so you can give then an even more immersive and personalized demo experience. So here we go!
The 5 Principles For Chat Bot Graphic Design:
These are the 5 basic laws all designers learn in order to create easy to read, easy to remember and emotionally effective images. DO NOT STRAAAY my dear, do not go into the dark forest of clipart abuse, or the icy rivers of GIF exploitation, avoid the cold and wrinkled hand of Google Ready To Copy Paste Images.
Font Usage: whenever you´re building for a brand that requires design, limit yourself to TWO, yes, 2 fonts when writing is required. A head title font and a text box font. Find out if their branding already includes specific fonts you can use. You can download free and gorgeous typographic families from www.dafont.com. My child, my heart, do not go for the special fonts, the ones with flowers or decorations, love thyself and thy minimalism.
Colors: The color circle exists for a reason sweetums, and that reason is to be used. Again, you should ask or research first if your client has specific colors they use, and if not, a quickthrough is to use the colors on their logo with a contrasting tone. These 5 are the only “shapes” for combinations you should EVER use, you can move the black guides however you want, as they will always lead to the right path. For example, Yellow’s complementary is Purple! This mixing allows for good contrast. A good idea is to use an Analogous combination, so you don’t stray from your client’s color palette too much and still produce pretty results.
3. Image Size: Manychat has a chart here https://support.manychat.com/support/solutions/articles/36000000877-what-are-the-dimensions-of-images-for-cards-lists-etc- for image sizing. If you do not own Adobe programs, here are two programs you can use to create images on a specific pixel size: Gravit Design is a free vectorial tool for browsers, and Procreate is another tool you can use on your Tablet for the one time price of $9.99. In both of them you can create images of the specific sizes suggested by manychat for perfect resolution and quick download, and save the result in JPEG.
4. Vectors, PNG, SVG, JPEG or PDF?: What do these all mean? They refer to the format you’re using when designing an image. Vectors, which are saved in SVG format, are a way of creating images which do not pixelate no matter how much you zoom in. You can download free vectorial images from freepik.com or flaticon.com. Why don’t we use JPEG or PNG when designing? For the exact same reason: you need to create your image in a high quality format, THEN when you´re saving it you can use PNG or JPEG, which use pixels and produce a lower weight document.
We use Google Images or the Snipping Tool on your computer to steal away our prospect´s logo, convert it into a vector and implement it within their demo. Here´s a video on how to do that with adobe:
5. Last but definitely not least: Horror Vacui
This my dears means Fear of the Void or Fear of Empty Spaces. It is a super popular term used by designers to talk about why not to saturate images. You need easy to read, quick to understand and memorable pictures in your carrousels and image tabs. So do not add a thousand elements there cause you think it looks pretty. Less is more.
See how my welcome message is just an emotional picture we produced? This is also a matter of neuromarketing: engage your audience in a way they´ll find entertaining and will provoke a positive emotional response from them. The message literally says Hi First Name! We are Frida Antonia and Pedro Emilio, Mr. Jirón’s helpers. Nice to meet you!
A simple image, with an effective response.
And this is a carrousel which applies all of our principles. Yes, it is a little bit more saturated than what your main menu header image should be, but this is because it is a Black Friday Deals Carrousel. See how it mantains the same color scheme, proportions and feel:
Always try and use these 5 design principles when creating your images, cards, and carrousels. Your flows will go from amazing to EXTRA SUPER amazing.
