Neptune 3 UI - Application Anatomy

In Neptune 3, an application can have both the fullscreen state and the (optional) widget state. The states should not be designed separately since they need to be connected, if possible, with smooth transitions.

Fullscreen

When applications are in fullscreen they typically have two main content areas: Top and Bottom. The Top area is for the most important information, or information that is graphically heavy. Try having the same content and layout in the Top area in fullscreen as in the widget (see more details in the widget section below). The Bottom area is for more detailed information. In most cases the content is divided into different pages, navigated between with the ToolBar to the left.

Make the bottom content spacious and do not mix different kinds of content. If there are different kinds of content please put it into different sections with sufficient blank space in between.

Breaking the rules

Not every application can look the same. The most extreme cases are probably Navigation and Camera apps since they have heavily graphical content. These applications need to look different from the default, but should give the same impression.

Some applications might not need to have the ToolBar, or not have the Top area. Use a layout that fits the content of your application.

Widget

The widgets on the Home view can be resized into three sizes: 1Row, 2Rows and 3Rows. Try to minimize the content of the widgets; with up to five widgets on the Home view at the same time it otherwise tend to look cluttered. Make larger widgets more rich on features, or in other ways adding extra value for the user.

The widget content generally designed with the transitions between the three states and between widget and fullscreen. The Top in fullscreen can oftentimes look exactly like one of the widget sizes (1Row or 2Rows). The easiest way to prepare for nice transitions when going between the sizes is to think of blocks ordered in a column, e.g. turn on or off block when the widget height changes.

To make the widgets look good together there are some recommended alignment lines. There are sometimes reasons to not follow these lines, like in the example of the circular contact image for Phone which get more in balance with the rectangular album art in the Music widget when it is slightly larger than the default size.

© 2018 Pelagicore AG. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.