iOS 7 has made people drastically rethink the look and feel of their app. For some designers this was a breath of fresh air, for others not so much. Take a look at Dribbble for example. It’s filled with designs that look “flatter” and feel “lighter”, but a lot of it feels forced — heavily skeuomorphic designs stripped bare just to fit in.
If you look back one year ago, you had to take a chainsaw to get through all the wood and leather that people were posting to Dribbble. There were some lighter iOS 7 feeling apps, but not many. Now, most of the chrome that we came to know and love on our favorite apps is gone or in the process of being simplified into flat translucent navigation bars with a white background.
Is there a balance between the two?
We still want to abide by Apple’s HIG, but does that mean we have to completely tear away all of the chrome that gives the app character and personality? I believe there can be a balance and I aim to find that.
Here at Tapity we are known for some of the most skeuomorphic apps there are. Just look at Grades.
Beautiful wooden navigation bars with textured paper that really give the app personality along with a unique feeling that has been with the app since the beginning. Obviously we know this doesn’t fit within iOS 7 very well, but do we have to completely rip away everything and force a interface that “fits” nicely with every other app? We could’ve just created white table cells with simple input fields and called it an update.
It would have fit right in with just about every app now, but we have to think about different ways to compromise, ways to still give the app personality while fitting in with the simpler, lighter feeling iOS 7.
As you can see by the navigation bars below, over time we started to get rid of some of the gloss and use more subtle textures naturally. If we decided to follow the trend by completely flattening and taking away every little piece of characteristic Grades had, it would look like the third navigation bar.
I think there can be a halfway point were these two styles meet and work nicely together.
I understand that the drop shadows, inner shadows, heavy strokes, and glows can look extremely heavy on iOS 7. Grades 3 currently uses all these layer styles and they do feel out of place when I open the app now.
Well, what if we got rid of glows, drop and inner shadows completely. Now we tone down the strokes to about 1 pixel. This will definitely help lighten the app overall.
What about the wood? This is something that has been with Grades since creation and we feel there has to be a better solution than completely scrapping it. We tried selecting a lighter colored wood while toning down the wood grain so it isn’t overpowering.
Here is a mockup that brings all of these points together:
Check it out on Dribbble for a larger preview.
Keeping the original essence of Grades while making it feel at home in iOS 7 is not an easy task. Matter of fact, it’s extremely difficult and we still are probably miles away from an ideal solution, but it’s challenges like these that truly make our job exciting.