Rise Above the Platform
When was the last time you saw a unique mobile app rise the ranks of popularity, hit number one or two in the App/Play Store, maybe even become a household name– yet, have a visual design that completely mimics the native UI design for all the platforms?
My guess is you haven’t, and you probably never will.
That’s because professional app developers don’t often copy the native design look-and-feel verbatim. And why would they? Cloning the native design doesn’t offer any real benefits when a user first opens and interacts with your app- if it has no recognizable visual differentiation, it’s not as easy to remember it. Your otherwise unique product becomes yet another boring “seen-it-already” app hidden out of sight, never to be opened again. Or worse yet, deleted altogether!
What the most successful app developers and companies understand is that for an app to be successful, it must creatively utilize the native interface style, trends, and interactions to fit their own brand personality and target market.
The Hybrid App Design Trap
When you’re developing cross-platform mobile apps in HTML5, you run into some interesting differences than when developing with native technologies. One difference, is that you’re not given the default native OS components to build off of. This can sometimes be a negative for developers, but I think it’s a good thing…
The trap I see a lot of hybrid app developers fall into is an unwarranted desire to completely clone each native OS design that their app runs on. Obviously, it’s important to create an app design that feels “at home” on each respective OS, but is it actually necessary to develop an exact clone for each? No, it’s not. In fact, in many cases some of the most popular mobile apps go out of their way to not look native to the OS.
Let’s examine three mobile apps, Apple’s default App Store app, Jelly and Vine. All three are running on iOS 7:
Each app adheres to the iOS 7 design guidelines and displays a list of options. Apple’s App Store app (left) is an example of the standard iOS 7 design. Yet, the Jelly app (middle) and Vine app (right) take a completely different visual approach to displaying content. Mind you, these are both extremely popular and successful apps that still feel completely at home in iOS 7, right alongside the App Store app.
Both Jelly and Vine take the iOS look-and-feel and creatively bend it to fit their own unique visual identity and personality. This is important, and it’s an opportunity that hybrid app developers should be taking advantage of! The point is that you don’t have to look exactly like the native OS in order to have a successful, great looking app.
Don’t Clone, Take Inspiration
Like Jelly and Vine, it’s always important to evaluate what type of audience your app is servicing. But, regardless of who uses it, there is one design recommendation I always make: never attempt to completely match the native OS verbatim. It’s just bad form, and here’s some reasons why.
First, you probably won’t get it right. Both Apple and Android (as well as others) have worked years on perfecting every little detail of their visual experience. Everything from individual typographic kerning/letter-spacing, weights, and line-heights, to stroke lengths, list heights, animation timing, and more. In some cases, you might get very close to creating an app that looks and behaves similar to its corresponding default OS, but any “little things” your app misses are going to stand out like a sore thumb.
This is called the Uncanny Valley Effect, in which your users are given the impression that there is something “wrong” or “off” about your app, but they might not be able to explain what. It’s kind of like the feeling you get when you notice the CGI in a movie- you know what it’s trying to look like, but there’s just something wrong about it. It pulls you out of the movie, just like a poor clone will pull the user out of her experience with your app.
Second, it takes a lot of work, resources, and time to achieve a perfect clone. If there’s any change in the native OS’s design, and there will be, your app suddenly looks outdated and you’re left scrambling to catch up.
A perfect example of this is when Apple updated from iOS 6 to iOS 7, a lot of apps were left looking old fashioned and had to quickly catch up to look relevant. Even this week, Apple is said to have updated several interface styles for iOS 7.1. Why bother, when you can build a uniquely designed app that stands on its own ground, regardless of the OS version?
I encourage you to build a design around your brand that’s so unique it rises above “platform” design limits. This is really where HTML5 mobile development can shine.
Utilizing Ionic
One of the main goals with Ionic is for it to offer a beautiful default design, such that with very little customization it can fit your brand’s style and look great right off the press. In a sense, it’s goal is to simply adhere to each brands individual design specifications with ease.
We achieve this by keeping our visual system simple. Ionic gets out of the way by choosing to visually do less, so it’s easier for others to add more. Does it loosely mimic iOS 7? In some ways, yes, without a doubt. However, I would argue that in many ways they inadvertently share the same basic principles: simplicity, reduction of clutter, use of white and solid colors, zero gradients, and hardly any box-shadows or border-radii altercations. Anything more than that, we leave up to you. Oh, and did I mention it’s built on Sass?
With just some basic modifications, an Ionic-powered app can really feel “at home” in both Apple, Android, and other OS’s. Take advantage of the CSS, utilize the right icons, and read of up on basic design guidelines for each operating system.
Design an app that reflects your brand, not simply the OS that houses it.
