How to Theme Mobile UI Components to match your Brand and App
One of the advantages of working with custom UI components is the ability to control how they look and feel.
In particular when you develop with HTML, CSS and Javascript it’s good to use and invoke the native components to keep the code clean and small. Actually that means we’re on the mercy of the browser vendors. Unfortunately the outcome is not always consistent.
Not just that, but they limit us in terms of functionality and look & feel.
So if you’re working with components that respect the standards, and have a clean API, you’re in luck. Even more so if they give you, the designer or developer, a way to alter the default looks of it and integrates well into the overall tone of your application.
This is even more crucial when developing for existing brands that have established style guidelines. You want to make the users feel at home when they are using the app.
That’s why it’s important to style your components accordingly.
In the case where a brand has multiple “faces”, if they offer a wide variety of services (like GE for example: Healthcare, Money, Home Appliances, Aviation, Lighting ….) which are distinguishable by color, keeping the tone is a powerful tool for reminding the users of their whereabouts.
This is an excerpt from a blogbpost about Cross-Platfrom application development by Justin Ferrell (for the full post head to .net magazine):
When developing mobile applications for existing brands, it’s important that developers use existing branding resources wherever possible. No amount of graphical or cross-platform experience design can replace user familiarity. In a situation where the application is a representation of a larger entity (think CNN, as opposed to something like Cut the Rope), a sure-fire way to make the user feel at home is to use things like logos, fonts and colours wherever possible. This is especially true in iconography, particularly launcher icons and home screen icons. Launcher icons are doorways into applications, which are essentially doorways to brands. It’s vital to let the user know what lies behind the doors ahead.
Examples
We created a couple of mockups of pages and apps from recognizable brands like IKEA, Target, Untappd and Orange with custom themed UI components that fit with the look and feel.
Tips
- Be consistent and don’t overdo the styling
- Styling is not needed everywhere, do it only where it makes sense
- Take the platform specifics into account as well (Since your app or webpage is cross-platform)
Tools
With this in mind we crafted an easy to use and understand Theme Builder for Mobiscroll.
The UI is simple to follow and with just a few clicks you get a Professional and clean theme that fits with your brand.
We made it easy to start with a couple of presets (we’ll be adding more) that should give you an idea on how the Theme builder works.
With the live preview you can instantly see your creation and fine tune it to perfection.
After it is saved, it will show up on the demo screen and be available for download.
What is your approach in theming UI components for your apps?