design challenge

create a dynamic logo that outputs a range of designs, easily adaptable by adjusting variables

the design plan

My design plan focused on Innoshima, a small island in the Seto-Inland Sea in the countryside of Hiroshima Prefecture. in 2006, Innoshima merged with the city of Onomichi. Although just two bridges away on the mainland,  Innoshima and its new city-ship are two vastly different worlds, and through this amalgamation, Innoshima sacrificed its identity. Through this logo I wanted to help regain that identity.

Innoshima, once a bustling ship building city, and home to the recently titled world heritage Suigun Navy Pirates, is comprised of 9 towns.

innomap

The plan was to highlight a different town on top of a base map of Innoshima, randomly with each refresh. Each refresh would also feature a different random color. The base map color would appear with a lower saturation of the same hue of the highlighted town.

img_2396 img_2395 img_2394

I consulted with some friends who were born and raised on Innoshima, asking them what the most important features of the island were, from their perspective and narrowed down the ideas to: mikan (citrus fruit), the ocean, the Suigun Navy Pirates (just recognized officially as Japanese Heritage), shipbuilding and a sense of island pride.

the coding process

I started my design by created my own grid.

screen-shot-2016-10-30-at-12-03-42-pm

I first coded the base map, by eyeing the map above and using free-hand in code, if that is a thing (which it is now).

screen-shot-2016-10-30-at-2-46-14-pm

Once the base map was complete, I started coding the towns, using the same paths on top of the base map. It did take about halfway through the process to really get to know how to use the paths on top of each other. The later towns were more exact.

screen-shot-2016-10-30-at-4-11-21-pm

The next step was to code the “因” or “In” the first character in Innoshima. “Shima” means island, so for this design since the image was an island, I decided to keep the minimal look with the kanji  characters. I used this image as the guide.

Image Source: http://1jp.tokyo/kanji/a/56.html

Image Source: http://1jp.tokyo/kanji/a/56.html

screen-shot-2016-10-30-at-10-44-23-pm

The final step was adding in waves. These I am on the fence about keeping. Initially I wanted to have a kohaya (a boat used by the Suiguns) on the waves, and a Suigun hat sitting atop the map, as if the island were wearing it. However, alone the waves look like they don’t belong and everyone else seems a bit like it would crowd the meaning away from each town holding on to its identity.

The base map, towns, kanji and waves are all part of one parent group. The waves and kanji are for the most part coded in a way that the variables can change and work with the design. The paths for base map and towns are more hard-coded and could  use some work being cleaned up and formatted into a better system as a whole.

WithWaves Web

Innosh

Innoshima, Town of Ohama; 因島大浜町

Experience the code here.