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
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.
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.
COPY
-
Copy is the same size and type as a regular copy:
-
Metric light uppercase, 75px, font tracking: 0, font leading: 75px, left-aligned
-
Max length: 2 lines or 36 characters
-
-
Copy is always placed in the left part of the image so it doesn't interfere with the app UI, and aligned to the left safe frame
-
It can be centered vertically (see the first video on the right for reference) or aligned to the bottom safe frame (see the second video on the right for reference)
-
Choose the copy placement that looks the best aesthetically and best matches the overall shot composition
Individual screens for Wi-Fi and Bluetooth. Notice how the app blurs the background.