{"id":98,"date":"2014-01-15T11:00:00","date_gmt":"2014-01-15T11:00:00","guid":{"rendered":"http:\/\/localhost\/?p=98"},"modified":"2015-12-16T19:54:12","modified_gmt":"2015-12-16T19:54:12","slug":"rise-above-the-platform","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/rise-above-the-platform","title":{"rendered":"Rise Above the Platform"},"content":{"rendered":"

When was the last time you saw a unique mobile app rise the ranks<\/a> of popularity, hit number one<\/a> or two in the App\/Play Store, maybe even become a household name<\/a>– yet, have a visual design that completely mimics the native UI design for all the platforms?<\/p>\n

My guess is you haven\u2019t, and you probably never will.<\/strong><\/p>\n

That\u2019s because professional app developers don\u2019t often copy the native design look-and-feel verbatim. And why would they? Cloning the native design doesn\u2019t offer any real benefits when a user first opens and interacts with your app- if it has no recognizable visual differentiation, it\u2019s not as easy to remember it. Your otherwise unique product becomes yet another boring \u201cseen-it-already\u201d app hidden out of sight, never to be opened again. Or worse yet, deleted altogether!<\/p>\n

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.<\/p>\n

<\/p>\n

The Hybrid App Design Trap<\/h3>\n

When you\u2019re developing cross-platform mobile apps in HTML5, you run into some interesting differences than when developing with native technologies. One difference, is that you\u2019re not given the default native OS components to build off of. This can sometimes be a negative for developers, but I think it\u2019s a good thing…<\/p>\n

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\u2019s important to create an app design that feels \u201cat home\u201d on each respective OS, but is it actually necessary to develop an exact clone for each? No, it\u2019s not. In fact, in many cases some of the most popular mobile apps go out of their way to not<\/i> look native to the OS.<\/p>\n

Let\u2019s examine three mobile apps, Apple\u2019s default App Store app, Jelly<\/a> and Vine<\/a>. All three are running on iOS 7:<\/p>\n

Each app adheres to the iOS 7 design guidelines and displays a list of options. Apple\u2019s 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.<\/p>\n

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\u2019s an opportunity that hybrid app developers should be taking advantage of! The point is that you don\u2019t have to look exactly like the native OS in order to have a successful, great looking app.<\/p>\n

Don\u2019t Clone, Take Inspiration<\/h3>\n

Like Jelly and Vine, it\u2019s 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\u2019s just bad form, and here\u2019s some reasons why.<\/p>\n

First, you probably won\u2019t 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 \u201clittle things\u201d your app misses are going to stand out like a sore thumb.<\/p>\n

This is called the Uncanny Valley Effect<\/a>, in which your users are given the impression that there is something \u201cwrong\u201d or \u201coff\u201d 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.<\/p>\n

Second, it takes a lot of work, resources, and time to achieve a perfect clone. If there\u2019s any change in the native OS\u2019s design, and there will be, your app suddenly looks outdated and you\u2019re left scrambling to catch up.<\/p>\n

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<\/a> 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?<\/p>\n

I encourage you to build a design around your brand that\u2019s so unique it rises above \u201cplatform\u201d design limits. This is really where HTML5 mobile development can shine.<\/p>\n

Utilizing Ionic<\/h3>\n

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\u2019s style and look great right off the press. In a sense, it\u2019s goal is to simply adhere to each brands individual design specifications with ease.<\/p>\n

We achieve this by keeping our visual system simple. Ionic gets out of the way by choosing to visually do less, so it\u2019s 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\u2019s built on Sass?<\/p>\n

With just some basic modifications, an Ionic-powered app can really feel \u201cat home\u201d in both Apple, Android, and other OS\u2019s. Take advantage of the CSS, utilize the right icons<\/a>, and read of up on basic design guidelines for each operating system.<\/p>\n

Design an app that reflects your brand<\/i>, not simply the OS that houses it.<\/p>\n

Ben<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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\u2019t, and you probably […]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-98","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"\nRise Above the Platform - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/rise-above-the-platform\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rise Above the Platform\" \/>\n<meta property=\"og:description\" content=\"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\u2019t, and you probably […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/rise-above-the-platform\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-15T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-12-16T19:54:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png\" \/>\n<meta name=\"author\" content=\"Ben Sperry\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benjsperry\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Sperry\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform\"},\"author\":{\"name\":\"Ben Sperry\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31\"},\"headline\":\"Rise Above the Platform\",\"datePublished\":\"2014-01-15T11:00:00+00:00\",\"dateModified\":\"2015-12-16T19:54:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform\"},\"wordCount\":1053,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png\",\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/rise-above-the-platform#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform\",\"url\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform\",\"name\":\"Rise Above the Platform - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png\",\"datePublished\":\"2014-01-15T11:00:00+00:00\",\"dateModified\":\"2015-12-16T19:54:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/rise-above-the-platform\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform#primaryimage\",\"url\":\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png\",\"contentUrl\":\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/rise-above-the-platform#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rise Above the Platform\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31\",\"name\":\"Ben Sperry\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg\",\"caption\":\"Ben Sperry\"},\"sameAs\":[\"http:\/\/bensperry.com\",\"https:\/\/x.com\/benjsperry\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/benjsperry\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Rise Above the Platform - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/rise-above-the-platform","og_locale":"en_US","og_type":"article","og_title":"Rise Above the Platform","og_description":"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\u2019t, and you probably […]","og_url":"https:\/\/ionic.io\/blog\/rise-above-the-platform","og_site_name":"Ionic Blog","article_published_time":"2014-01-15T11:00:00+00:00","article_modified_time":"2015-12-16T19:54:12+00:00","og_image":[{"url":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png"}],"author":"Ben Sperry","twitter_card":"summary_large_image","twitter_creator":"@benjsperry","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Ben Sperry","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform"},"author":{"name":"Ben Sperry","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31"},"headline":"Rise Above the Platform","datePublished":"2014-01-15T11:00:00+00:00","dateModified":"2015-12-16T19:54:12+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform"},"wordCount":1053,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png","keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/rise-above-the-platform#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform","url":"https:\/\/ionic.io\/blog\/rise-above-the-platform","name":"Rise Above the Platform - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png","datePublished":"2014-01-15T11:00:00+00:00","dateModified":"2015-12-16T19:54:12+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/rise-above-the-platform"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform#primaryimage","url":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png","contentUrl":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/rise-above.png"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/rise-above-the-platform#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Rise Above the Platform"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31","name":"Ben Sperry","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg","caption":"Ben Sperry"},"sameAs":["http:\/\/bensperry.com","https:\/\/x.com\/benjsperry"],"url":"https:\/\/ionic.io\/blog\/author\/benjsperry"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=98"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/98\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=98"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=98"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}