Website
Motion Graphic
JULIE Kids
Client
JULIE Before You Dig
Overview
As the designer on the project, the solution involved creating an interactive and visually appealing website that made Julie's job accessible to children. Drawing inspiration from childhood memories of playing website games, the strategy was to employ cute animal characters, fun animations, and interactive games to convey the information in an engaging manner. The goal was to simplify complex concepts through short words, vibrant visuals, and interactive elements.
Problem
The client faced a challenge in communicating Julie's crucial job to children. While many kids understand the importance of calling 911 during emergencies, the concept of dialing 811 before digging was unfamiliar. The client sought a solution to bridge this gap in understanding and wanted a kid-friendly website to effectively convey Julie's responsibilities.
Solution
As the designer on the project, the solution involved creating an interactive and visually appealing website that made Julie's job accessible to children. Drawing inspiration from childhood memories of playing website games, the strategy was to employ cute animal characters, fun animations, and interactive games to convey the information in an engaging manner. The goal was to simplify complex concepts through short words, vibrant visuals, and interactive elements.
Research & Analysis
Before starting on this project, a thorough concept research was conducted to ensure a well-informed and strategic approach. The goal was to gather inspiration, understand current trends in children's websites, and explore diverse interactive concepts.
To present a variety of options to the client, three distinct concepts were formulated—Touchpoints, Vertical Scroll, and POV. Each concept was carefully crafted with specific goals in mind, tailored to cater to the unique learning preferences and attention spans of the target audience.
Editing Content
You can choose to set up different types of input fields depending on your content. For instance, a blog might have a title, a slug, and a long-form field for formatted content. These may be different for a product directory or a photo blog, where you may need to add an image field. To edit the fields each CMS item will have, click on any of the column titles. This will trigger a modal to add new fields, where you can also re-arrange the fields or modify or delete the existing ones.
Adding Content to the Canvas
After setting up the content, go back to the canvas. Your collections are accessible from the Insert menu. Open the Insert menu, navigate to the CMS Content section, and drag and drop your collection onto the canvas. This will add a special stack with layers connected to your data. From here, you can edit the visual properties on the right, just as you would do with a regular Stack.
Add a Page with Content
If you wish to add a page instead that will automatically be populated with data from the CMS, navigate to the left panel. One you are in the Pages tab, click on the + button next to the CMS section. If you add the Index page, a page will be added with a list of all of the items in your collection. If you add the Detail page, you will be presented with a page with content from your individual items.
Note: If you chose to add the sample data, a new detail page called /blog will be added to your website, and you will find the stack of content added into the page for you.
The detail page will display content pulled from the first entry of the collection by default. In order to preview other items in the collection, change the content by selecting a different item from the dropdown menu.
