App neutrality
Many of our newer product are controllable by smartphone apps. Even though the general functionality is the same, there may be design or workflow differences between various operating systems, versions, or languages.
To avoid having to create a separate asset for each app variant, we take an app-neutral approach.
To achieve app neutrality, we use a so-called "neutral UI" - a white wireframe representation of the UI that contains only the most essential elements that showcase the functionality of the app.
App neutrality design
Content
-
The UI of the app is based on the actual app, but stripped of unnecessary elements
-
Whenever there are differences for operating systems or different technologies (e.g. iOS vs Android, Wi-Fi vs. Bluetooth), try to demonstrate both flows and properly label them
Design
-
The neutral app uses only white color
-
Most elements are "wireframes" - they have only strokes, no solid fills
-
If we use fills for elements, we try to keep them opaque
Background
-
We use the neutral UI either with a diffuse underlying blur that separates it from the background, or on a completely de-focused background
-
Avoid using the neutral UI on a bright background to ensure good legibility
​
Individual screens for Wi-Fi and Bluetooth
Notice how the app blurs the background
Phone interaction
-
In cases when we want to show the user should open an app, we show top or bottom of a phone with an icon of the app. Phone design should follow the principles outline above.
-
Pop-up messages are displayed as slightly rounded rectangles with a 12% fill, background blur and text
-
App UIs are rectangular with a phone sketch around them, as per design guidelines above. The background is again blurred and overlaid with a 12% white fill. Please note the white fill can be omitted if it decreases legibility of the UI.
Animation
-
For individual elements and screen transitions, try to mimic the animation in the actual app
-
Add a cursor that guides the viewer's eye and demonstrates where a user should click
-
Actual UIs should appear with a slight scale-up and fade-in (scale 92 > 100%, opacity 0 > 100%, duration 1/2 second, ease-out). Please avoid any extreme animations
-
Copy is placed in the left half of the image, vertically centered. If this does not look good aesthetically, it can be placed on the bottom title safe frame.