Branding, Web Design + Development 2020

F.R.O.G. Pond

During the 2020 COVID-19 Pandemic, teachers discovered how imperative it was to have an online space for their students to learn. While many public schools provide such a platform, private pre-schools and kindergartens were left to their own devices.This site was built for an online kindergarten classroom giving the youngest generation an opportunity to learn while older friends and siblings complete courses online.Due to the sensitive content and photos of minors, I cannot share the link with you. Please enjoy the screenshots included below!

Branding

During the 2020 COVID-19 Pandemic, teachers discovered how imperative it was to have an online space for their students to learn. While many public schools provide such a platform, private pre-schools and kindergartens were left to their own devices.

Goals

The goal of creating a brand for the classroom was to help the teacher create consistency between worksheets, papers, and emails. The brand needed a strong and versatile color palette as well as a typeface that wouldn’t confuse the young students as they are learning the correct way to form their letters.

Teachers are always busy. The brand identity system needed to be easy to implement or the teacher wouldn't be able to keep up with it.

Process

A few years ago, I began creating frog illustrations for the teacher to use on her papers. Basing my branding ideas off the illustrations I previously created, I developed a color palette and chose a typeface, Urbane Rounded. I then began combining the characters in “FROG Pond” with icons such as a lily pad, pond, frog head until I found the right combination. After deciding on the brandmark, I created icons, patterns and more illustrations to be used throughout material.

Solution

The brandmark consisted of a round, welcoming typeface in all caps. The “O” in “FROG” is replaced with a round lily pad. Using all capital letters gives the brandmark a uniform shape and can be stacked cleanly.

Website

This site was built for an online kindergarten classroom giving the youngest generation an opportunity to learn while older friends and siblings complete courses online.

Goals

The goal of the website is to help kindergarteners navigate digital learning. The website needed to have all the information for the parents while making it fun for the children to go through their lessons.

The website needed to be easy enough to navigate that the child could do it without their parent if necessary. The website also needed to help make digital learning fun.

Process

Using the brand identity, I began planning the website. Beginning with a site layout plan, the teacher and I looked at the content she wanted to share and we worked together to come up with the best way to organize the pages. We ended up with 5 main pages and subpages for the weekly newsletter, lessons, and resources. The 6 main pages include Home, “In the pond…” (the newsletter), “What’s Hoppin’” (announcements), Lessons, Resources, and About. The Home page gives an overview of the class, including the most recent announcements.

Solution

I used the new brand guidelines to design a website that would look fun for kids and be professional for the adults. The home page introduces the site with a fun animation of a frog jumping up and down. Other small animations like jumping icons and jigging apples as tid-bits of extra fun throughout the website.

The home page also provides an overview for the entire website. By taking a quick scroll through the home page, parents can get a quick idea of what's going on in the classroom. They can then choose to explore the given sections.

The lessons pages proved to be a challenge. By combining tabs and links, I was able to create a page to link to every day's lesson sorted by week. After clicking into a day, parents and students can find a list of text and images organized by subject.

Using a consistent footer across all pages, allows the parents to quickly send the teacher an email or navigate to the Facebook page should a question arise.