ColorsThis week my focus has been on colors and contrasts. I've always had a hard time choosing colors and feel like every time I dive into picking colors out, I learn something new about how they work. This time, I found this gem of a website that makes finding nice color pairings a breeze:
pigment.shapefactory.co. Unfortunately, I would find that I'd bring in a color scheme that looked great, apply it to the app, and it would just look terrible in practice. What gives?!
In-Game Color SchemesI realized that for Overlink, there were multiple requirements for contrasts in the app - specifically for the links, lines and tiles all have to contrast starkly between themselves. This left little room for color options on the base models and backgrounds. The good thing is that because the models take up so much screen real-estate, I could pick palettes that can have some amount of tonal similarity.
And here are some of the color schemes I came up with:
This last color scheme has an accompanying gameplay video over on our twitter:
New Color Scheme Video
I'm happy for the most part- however lighting in the scene adds another layer of complexity to the whole thing. When certain colors are lit up in the 3D scene, some of the contrasts I planned for end up getting lost. One such issue comes up in the yellow scheme. If we turn it grayscale...
The addition of light sources effects the colors in such a way that makes for the red and blue tones to be too similar. I'll probably come back and see whether I need to adjust my initial design color palettes to account for the color changes lighting in the scene will cause.
Icon DesignI also began work on the app icon... and a lot of work at that. First off, I had a hard time coming up with a visual that was representative of the gameplay. I went through a ton of iterations.
All the app icons I looked at that I liked had very strong tonal contrasts. That said, they also had some resemblance to the colors found in their respective apps as well- which in my case, were two contradictory color requirements.
Here is a brief look at some of the iterations I went through to get to the final icon:
I do believe I found success in the end! Finally, I was able to come up with a minimalist design that outlined the O in Overlink, the Link-ing nature of the app, and the 3D puzzle design of the app.
Here's the icon in grayscale:
and finally, in color:
It took way longer than it probably should have, but now I have an icon I'm happy to launch (at least a first version) with!
Community
