Aleksandra i Daniel Mizielińscy's profile

Ba Ba Dum, Play and learn 1500 words in 13 languages

Ba Ba Dum is a collection of five free HTML5 browser games that make you learn words in different languages while you're having some fun. Collect points, check out other players scores and statistics.
Just for the purpose of this game we've drew 1500 images and created a typeface with latin greek and cyrillic alphabet and with hiragana and katakana characters (basic component of the Japanese writing system). We're working on chinese characters.
You can play it here:
The interface is available in 12 languages.
You can choose one of five games to test your knowledge.
This game is the hardest but it gives you the most points.
If you don't know Japanese language you can start with this mini game. It will help you to learn hiragana and katakana a Japanese syllabary, basic component of the Japanese writing system
Making of
Selecting words
Obviously the largest group are nouns. They’re easy to describe using visual language. In some cases we had to use color and arrows to pin point the exact thing. Like in words: bangs, cape, petal or bracelet.
Second group are adjectives. For all of them (except colors – they're a different category) we decided to use one color set and show them in pairs on the principle of opposites. Yellow color is always pointing to the one in question like on image below: clean, strong, beautiful and poor.
Words describing colors on the other hand are always shown as a blob with no stroke on grey background:
There are also verbs in Ba Ba Dum. We’ve created a separate color scheme and the activity is almost always performed by the same guy who we call Stefan. We didn’t want to show Stefan peeing or pooping so for those we used a dog. In some rare cases we had to show two stages of the same activity to make it more clear.
There are also other subgroups like countries or body parts. You just have to play and find them on your own. 
Translating words
This seems like a straightforward task but in real life it was not that simple. It’s super easy to make a lot of mistakes when you’re translating just single words. Text that has logic and sentences is much easier to check for errors. So we had to do something about that.

The first translation was always done by a native speaking language teacher or professional translator. The translation is done in an Excel file. Each row has image of the word with english and polish translation. The important thing is to mach translation to an image and to use commonly used words.

After that we import translation to database and we ask 2–4 people to verify the translation. We’ve build a custom web app just for that purpose. Words marked as incorrect have to be commented by a verifier.
This is how the app looks like for verifiers. They can see only selected languages.
Recording audio
All of our wonderful voice actors are native speaking, professional readers. Some of them are also language teachers or radio news announcers. This is why they take great care of pronunciation and the reason they sound so awesome.
We’re recording at Polish Radio Studios and we’re lucky to work with Grzegorz who is our sound producer. He has perfect pitch and hears things we didn't even know existed.
He is not only recording all of the words but he’s also preparing every single audio file. Making sure they’re all nicely leveled with no clicks, pops or choppy endings.
It took us 10 months to coordinate the translation and audio recording of first nine languages. It took us only 1 month to add three more. Learning from experience we now know how to do it much faster and smarter.
Preparing images
Drawing is a major part of our daily work. All of our books (and most games) have hand drawn illustrations and (sometimes) typefaces. We always draw on paper because we find it to be easier and faster. Maybe it’s because of our background at Academy of Fine Arts in Warsaw where graphic design was just half of our education. The rest was drawing, painting and traditional graphics arts (like lithography, metal techniques or wood cut).
To draw images for Ba Ba Dum we used thin layout paper and black uniPin and Tria markers.
We scanned the images and used Adobe Photoshop to remove all mid tones.
We didn’t really want to use bitmaps because we would have to store different sizes for different devices (for example small ones for phones and large ones for desktop computers). Usually there is not much of a choice but this time the images could be easily represented as vector graphics. So we traced all of them in Adobe Illustrator and saved each image as a separate black and white SVG file.
Vector images are not only scalable and lightweight but there are also very easy to manipulate. To change a color you just have to type different value in the “fill” attribute. That’s why we can store all images in a black and white version and simply assign color id to each word in the game. When we want to adjust some of the color sets, the images themselves are not changed at all. 
Color scheme is assigned dynamically to SVG using javascript.
We drew literally thousands of drawings before we picked the final 1500.
Error pages
One of my favorite part of designing and programming is implementing hidden treats. I love to refine details that only a bunch of people will ever see. That’s why I care about my error pages.
You’ve probably seen them around. The most common to ran into is 404 (the page is not found) or 403 (access to this page is forbidden) but there is a full list of them. On some pages you’ll see a default browser information but you can add custom pages pretty easily. We used .htaccess file to do that. 
If you want to access a file that is forbidden for you to see you'll get a 403 error.
If the page that you're looking for couldn't be found you'll see a 404 error.
You'll see this message if your browser is old and doesn't support modern HTML5 and CSS3 standards that are needed for Ba Ba Dum to work (like inline SVG, canvas element or CSS transforms).
You'll see this guy if we need a break for a short maintenance or you got a 500 error. We used it only once since the lunch of Ba Ba Dum.
If our server is overjoyed with too many users you'll see a 503 error. Generally, this is a temporary state and since we migrated to new servers provider a few months ago we can easily sustain a lot more users.
Typeface design
For most of our books we usually design dedicated typefaces. Very often we precisely know what we need. This means that if we can’t find any existing font that fits our specific idea, we have to create it.
For Ba Ba Dum we needed a narrow, sans serif, rounded and heavy letters with a very wide range of languages to support.
As usually we started with simple and fast sketches. Then we drew more precise shapes using font editor software. We did some sample prints, marked things that had to be changed, and went back to the editor.
After a few months of making constant changes asking our typographic friends for revision and advice we ended up with Mr Dum Dum. A OpenType font with two styles (one for regular shape and one for bulky shadow).
Draft of cyrillic alphabet with a loooooooot of mistakes. It's good to have worlds best typographers for friends to give you tips about what's wrong in your letters (thanks Łukasz).
Coding and testing
And finally coding and testing. 60-70% of all time we've spent on making Ba Ba Dum.
A lot of JavaScript , heavy use of canvas and SVG, CSS transitions and transforms. On server side we're using PHP and MySQL.
For more details about component we used check our humans.txt.
Tests of the game. You can play it on your computer, phone or tablet.
BONUS – Recording users progress
Once in a while we’re being ask about words selecting algorithm. How does it work? Do we have any?
The idea is quite simple. Whenever player gives a correct answer a word is marked as learned (take a look at the visualization). 
Probability of drawing any already learned word is much lower – 1 of 50 to be exact. We’re achieving it by drawing 50 words from the pull of total 1500 words. 49 are from unlearned group and 1 is from the learned group (if available). This gives a short list of 50 words from which we draw the final result.
Giving a wrong answer to a unlearned word doesn’t change it’s status.
Giving a wrong answer to already learned word changes it back to unlearned one.
No matter how many learned words there is in the big pull there will be always only one in the short list.
Saving learned words works within game/language combinations. Let’s say you’ve learned 20 words in polish playing game mode were you have to choose one image. Then you switch to other game without changing the language. Those 20 words you’ve learned won’t be learned in this new game/language combination. Thus you can play the easier mode at the beginning and switch to the harder one and check if you can for example type the words you already answered correctly before.
Awards and recognition 
We received some very cool ones like AwwwardsAdobe Cutting Edge and Favorite Website Award twice – regular SOTD and MOTD. We were also a official nominee (one of five) to The Webby Awards.
Ba Ba Dum was featured on dozens blogs and online magazines.
But the most satisfying feedback we got were emails, tweets an other messages from teachers and students of foreign languages from all over the world. Photos like the one below really give us a lot of energy to continue our work with Ba Ba Dum.
Photo from Barbarze Majewskiej-Kosik
Ba Ba Dum, Play and learn 1500 words in 13 languages

Ba Ba Dum, Play and learn 1500 words in 13 languages

Ba Ba Dum is a collection of five free HTML5 browser games that make you learn words in different languages while you're having some fun. Collect Read More