How we built Skyscrapers

Skyscrapers App By Tinybop

Building any Tinybop app involves solving lots of puzzles—some technical, some visual, and many that involve turns of logic.

In Skyscrapers, we wanted kids to experiment with how systems work differently in buildings of different heights. One way to encourage this was to let them customize their buildings so they would feel inspired to create structures of various looks and sizes.

We approached the app’s illustrator, Mike Ellis, with the challenge to draw a handful of interchangeable facades and building tops. We wanted to reference some well-known and iconic buildings, as well as materials commonly used for skyscrapers (glass, concrete, etc.), and also make the look of each building playful and fun.

Mike came back to us with a number of shapes and styles. Here are his initial sketches.

Building Top Sketches

Some of Mike Ellis' initial sketches for the tops of skyscrapers

We chatted about shapes that really jumped out at us, and from here, Mike created an initial set of tops that our technical art team started to experiment with. 

Building Top Finished 2

Tinybop's technical art team experimented with Mike's initial sketches

All of our Explorer’s Library apps feature cross-section views that enable kids to look inside whatever it is they’re playing with — e.g. the digestive system in The Human Body, a cloud in Weather, a cave or the Earth’s crust in The Earth. In Skyscrapers, we wanted kids to be able to pull open their building and see the rooms, floors, tops, elevators and other systems, and people inside.

Building Top Finished 1

Initial interior and exterior views

Next, Mike went to work on the facades, the exteriors of the buildings. Giving kids a fair amount of choice in how they can customize their building not only invites experimentation, but also just makes for a richer play experience. If every building top had a set color and style, we weren’t sure that kids would be motivated to try out new building styles. How could we make the buildings feel playful and inviting?

We challenged Mike to create a system of tops and facades that were interchangeable. Each top needed to fit onto every building facade, and likewise, every facade needed to work with every top. If we wanted to use a facade pattern, as you see below, the design needed to have a programmatically generated pattern, so the pattern wouldn’t break as kids added floors to their buildings.

Building Facade Layers

An idea for a programmatically generated building pattern

Reference Tower West Facade

Inspiration for facade designs

Mike came back with a library of facades, tops, and components, structured like this:

Building Clock Layers

We were excited by the approach—the buildings could now accommodate interchangeability as well as facade customization, solving many of our initial challenges of how to make the buildings feel inviting.

But, we were still feeling challenged by the limited range of building colors. Mike had been referencing many real building materials in the design of all of his facades, and we wanted to experiment with color in a way that still respected the original material.

Our design team, Melissa and Beckie, started to explore the idea of bringing a color palette to the facades, adding to a kid’s ability to customize, and ultimately giving a wider range of possible buildings to populate a skyline.

They explored what each building would look like if it took on various tones. A few early passes looked like this:

Building Colors 1

An early color palette exploration

… which Mike revised,and then we revised, to end up here:

Building Colors 3

Final revisions to the color palette

In the app, kids can now select from one of 11 color palettes when they are looking at the exterior of their building by tapping through the color selector.

App Split View

Kids can select from an 11-color palette when creating their buildings

Every kid’s skyline, made with buildings they’ve created and customized, should be unique.

App Skyline

Every kid can design their own unique skyline