Web Development Resources: OpenMoji
The OpenMoji project is an excellent resource for obtaining handmade creative-commons illustrations. Their website features more than 4,000 simple and beautiful graphics that were designed by a battalion of student artists and are made available to everyone for free.
By the way, hi hi and high-lo dear developer. I'm glad to see you here today. Here, today, we'll cover this excellent OpenMoji resource and look at a website example that I made that incorporates some of these illustrations into a simple interactive game.
You know what an illustration is in this context, right? Well maybe not, so I'll tell you: illustration here means that the images are designed to be represented in the Scalable Vector Graphic format. SVG, as the format is also known, is an amazing format. Each SVG file could be thought of as instructions for a tiny robot that program it to draw something with a set of basic drawing utensils, shapes, and colors. So, the file doesn't actually contain pixel data for an image like other formats do; instead, SVGs contain information about how to redraw the desired image by following a set of instructions. Cool eh?
But why are SVG this way tho? Well, I'll tell you: encoding an image as these algebraic drawing statements allows the image to be drawn at any resolution without any increase to the file size. You guessed it! That's why they are called Scalable (any-sized) Vector (symbolically-represented) Graphic (drawn-image). So I guess they could have called them Any-Sized Symbolically-Represented Drawn-Image: ASSRDI, but luckily those in power went with the sexier "SVG" acronym instead.
All of this is to say that OpennMoji illustrations are great for rendering big or small and no matter what size, they will have a minimal impact on network resources. You can use about 100 of them for the equivalent network cost of a regular image, again with the benefit of each being resolution-agnostic.
Of course, as you are probably already aware, SVGs can be assigned to the source attribute in HTML image tags just like any other image format that you want to include in a webpage. Use CSS styling or set the image tag's height and width attributes to decide on how big you want the illustration to render.
OpenMoji illustrations are just plain beautiful. So useful too! These days it seems like most people can communicate pretty well just through emoji. I think using OpenMoji illustrations in a UI is a great way to build minimal and widely-accesible interfaces or user features that efficiently communicate purpose to your user. Using illustrations to communicate symbolically also makes it more simple to build systems that can easily adapt to different localizations.
Regular emoji can also have their place, but remember that they are encoded as text! Using regular emojis (like the ones in text messages 🌈) will produce graphics (at no extra network cost), but there are hard drawbacks that limit their use. First, regular emojis are difficult to scale as they follow the styling rules of text. Another major issue is that regular emojis will appear differently when represented on different operating systems; iOS, Windows, and Android emojis don't look the same (can you guess why?). Of course, OpenMoji illustrations are scalable and will always have the same design no matter what operating systems your website visitors are using.
Here's an example of a game I made with OpenMoji illustrations. It is called Memory Moji and the link is also available under the "Paper Games" section of the King Book web library:
While we are here, I'd like to tell you some quick making-of trivia for Memory Moji. The game design of this and some of the other "Paper Games" is meant to assist in inducing a certain state of mind. For Memory Moji, it isn't about completing the task as much it is about flowing through the task without being distracted by earthly concerns. It is designed to be like a form of circle-walking meditation in the sense that a simple repetitive task whose cognitive processing replaces the overwhelming noise of thought can be the vehicle for effortless meditation.
And it was pretty effortless to make the Memory Moji game look pretty pretty with the help of OpenMoji!
So what are you waiting for? Get over to OpenMoji and find some awesome free illustrations for you to put on your own awesome indie website.
<3 Grant