There are some common pitfalls you should avoid when working on the UI for Cordova or PhoneGap app. Firstly, your process should never resemble implementing a static design in a pixel-perfect way. Don’t start with a design and finish when the end result looks the same, because…

  1. Acheiving pixel-level perfection can be extremely difficult, time-consuming and sometimes impossible. Some elements may be easily drawn in a graphic editor, but difficult to define with CSS3. It’s better to spend this time in a more efficient way. After all, you’ve chosen building a hybrid app to save time, not to spend more.
  2. It’s not only about appearance, it’s about behaviour too. By focusing too much on how the things look, it’s easy to forget about how the interface reacts to user’s input.

So it’s ok to start with a reference design, but reserve an option to include some modifications. And focus on responding to user’s input in a natural way. E.g. while building the EVI (Electronic Valve Instrument) app I’ve started with mockups, which I’ve expanded to introduce button animations, glow effects and status indicators. I’ve made some tweaks in graphics to improve performance too, more on that in one of the next posts.

Secondly, your UI shouldn’t mimic the native style of the platform. After all, it’s another case of copying the looks and the two reasons mentioned earlier apply here too. It still is time-consuming and distracts you from thinking about your user’s actions. Also, you have a problem whenever the platform receives a visual update. If having native look is still the ultimate goal for your app, consider using native UI libraries. This is the best tool for such task.

It’s ok to use UI similar to a native one. E.g. Ratchet comes with both Android and iOS-like themes. But consider introducing differences when the constraint affects your efficiency or makes your interface feel unnatural.

Do not copy, do get inspired, avoid reimplementing native UI.