Establishing a new Teaching Kids Programming logo was a fun challenge because it required a design direction that caters to both teachers and students. Teachers are the ones who adopt the TKP curriculum into the classroom and students are the ones using the software. The challenge was to create something that professional and clean that builds trust with teachers, but quirky and fun enough that a student would wear it on a t-shirt.
We could skew toward one audience or the other, or somehow split the difference. All of those possibilities were explored.
In the end, we decided that splitting the difference the difference made the most sense. The final design landed on a type-driven design that communicates the concept of graduation. The top level is a playful take on coding with bright colors and a hand-drawn feel. The bottom relies on a slab font for a clean and professional look with collegiate aspirations. It’s fun, but still a mature evolution from the last TKP logo.
Making the Website
Armed with a new logo, we were ready to starting thinking about a new website. TKp is in the same class as several other organizations that have an emphasis on making code easier to learn and understand. Think Codecademy, Khan Academy, Code.org, Lynda.com, and you start to see there are tons of resources out there.
What separates TKP from the rest of the bunch is it’s focus on curriculum and teaching. Others may have some form of this, but getting in the classroom and empowering teachers to educate students on core programming principles is what TKP is built on. It’s about catering to educators who in turn reach students.
That is how we structured the site. We started the project by mapping out the content, page by page, before we even thought about what a design would look like. We ended up with a structure that emphasized reaching teachers, then helping them use the TKP curriculum in the classroom:
- Homepage (Benefits)
- Teachers (Resources and Lessons)
- Students (Showcase work)
- About (Support)
Establishing the website design was a little easier with a newly developed logo, color palette and content structure. I started with a wireframe of the layout before moving to the design.
The website is built as a custom WordPress theme. The landing pages are individual templates and the lesson plans use the Custom Post Type functionality which opens TKP up for using the default post functionality for blogging if they decide to do so in the future. Other than that, the site uses the Instagram API to showcase student work and the YouTube API for the screencasts used in lesson plans. We also landed on a responsive design that is optimized for any screen size.