Diners, Drive-Ins, and Designs!
Inspired by the BentoBox Back to School initiative last September, we wanted to do a fun project that was also educational. Driven by Kai’s love of crossword puzzles, we landed on a bento box (not the company) themed children’s activity placemat, like one you would see in your local NJ diner, with each compartment set up as a different web-design-themed activity or puzzle. Some are challenging and may teach you something about web design and what we do, others are simply fun activities. While building out the puzzles we realized that in order to keep it within the realm of children’s activity we couldn’t go super deep into technical terms, code or make any of them too difficult.
This ended up presenting a unique opportunity to both keep our design on theme and create something that could be used for educational purposes in an “intro to web design” format. The crossword puzzle, the word search and the unscramble introduce you to basic web design terms, the color by numbers demonstrates good color usage, the matching section introduces you to the basics of how CSS affects a website, and, of course, the entire final product is ADA compliant.
We are very happy to present: Bento Brain Boosters!
Think you can finish every activity? Give it a try via the link below and let the design team know how well you did!
Process
Our branding was inspired by a mix of traditional bento boxes and restaurant activity placemats for children. Our twist on a regular activity placemat was to style it like a bento box, with each activity boxed in its own container. We implemented a pastel color palette based on the pastel colors often incorporated into bento box designs. We used playful typography to tie in the cartoon style of the activity placemats. We used “Ranchers,” a bold sans serif, for the headings paired with “Nunito” for the body text, which was picked for its rounded terminals. The boxed layout and consistent color and typography application create a more organized design, while keeping the playful aspects of traditional activity placemats with the typography style and game types.
Game development
The word search, created by Leanna, is made up of letters arranged in a grid which contains a number of hidden web design terms running in various directions. Using an excel spreadsheet, she wrote out all the terms within a grid and filled any empty spaces with random letters.
The matching game created by Bella was created on Figma with a very simple and straightforward layout. The goal was to review some of the most common properties used on CSS by connecting them to their values.
The color by numbers activity, created by Lindsey, was designed with inspiration from BentoBox site; discocheetah.com. Created in Adobe Illustrator, the completed activity will compliment the rest of the placemat with a shared color pallet. While a simple task, the activity plays with color placement and contrast.
Over the few months we worked on this project we learned that the challenge of completing a puzzle pales in comparison to the challenge of making a puzzle from scratch. Thank you to all the designers for diving into the idea and really making it your own!
