Coded.
For this school project, we created a brand identity, website and mini-documentary for a fictional company. I designed the website and created the animation assets for the documentary. We also gave two coding workshops to 12–15-year-olds, where I was responsible for explaining the theory.
About the project
We started by creating a brand identity for the website and the company as a whole. First, we needed a name, and after some brainstorming, we came up with Coded., short for Code Education. Once the name was decided, I quickly came up with an idea for the logo, which became the final design we used. I combined the "</" symbol commonly found in code with the company name and chose a font that we later also used for our headings. It's a modern and sleek logo that is easy to recognise.
Website design
Once we had established the visual style, I started designing the website. I first created a paper prototype, which we discussed as a group. After some feedback and small adjustments, I moved on to the Figma design. I wanted to combine a clean, modern look with simplicity, as the website needed to feel professional while remaining easy to understand for both teachers and students. I achieved this through short, clear text and large, well-defined headings.
Programming the website
Throughout the design process, I kept my teammates and supervising teacher updated and regularly asked for feedback. This helped me make adjustments early and avoid major changes later on. Once the design was finished, I started coding the website. This was my first time working extensively with JavaScript, which I used for features like a dark/light mode toggle, responsive hover effects, and other small interactive elements. This project taught me a lot about JavaScript and helped me build a solid foundation for the future.
Documentary assets
I was also responsible for several animations for the mini-documentary, including an intro, an interview banner, an explainer animation, and an email pop-up. All of these, except the email pop-up, followed the Coded. visual style to keep everything consistent. For the intro, I made a code typing animation that shows how our logo would be build with js.p5, the language we gave workshops on. After clicking “go live,” the logo appears on screen. I also added some subtle sound effects and suspense to grab the viewer’s attention.