Responsive base app design

What is the perfect UI base for prototyping apps? If we start to look at the assumptions, then we can then derive a good layout and navigation.

Assumptions:

 

Principle of least astonishment. The more the application behave as expected, – the easier it is to use. The design should therefore be based on guidelines and best practise for the different platforms

Content is king. The content area is the most important part of the app, and any other navigational structure should take as little screen estate as possible.

Mobile first responsive prototype. The base design should be easy to use for prototyping. So the design should seamlessly scale up from the mobile application, to tablet and desktop use. It is easier to expand than to shrink a user interface, so the assumption will be to start mobile first.

Implementation detail: style is calculated on device. That means that we know the dimensions of viewport etc., and can do the style calculation directly based on that, instead of having a static style with media-queries.

Implementation detail: react(native). The UI will be made in react, and later also in react-native.

Consistent cross-platform design. I want to focus on the content, so the simplest solution is to have a standard design that works cross platform. This means to try to use approaches that is common across Android/iOS, and avoid approaches that is limited to single platform.

Navigation

On the mobile devices I see the following base overlays on the content view:

  • Menu button floating in the top right corner. This is a persistent navigational tool, and becomes a part of the top bar, when the top bar is visible. The visuals is just the hamburger icon, which transforms into the cross-close icon when the menu is showing.
  • Top Bar, also known as “Main Action Bar” in Android, and “Navigation Bar” in iOS, or similar to “Title bar” in desktop applications. Contains a back or home button in the top-left, a title in the top-center, and the menu button at the top-right. The home button can either have the standard home icon, or an app-specific logo. On mobile web hamburger-menu is common in a top bar. As the iOS design guidelines requires that a back-button for navigating hierarchies must be placed left-most, – and I want to have a consistent cross-platform design, and to have minimal clutter (1 home/back button, one title, and one menu), the layout of the top bar is given. It could also have other actions added.
    https://developer.android.com/design/patterns/actionbar.html
    https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html
  • An optional Bottom Bar, – spilt-action-bar in Android, and “Toolbar” in iOS, for actions in the current view. Placing this in the bottom makes most sense, given that you do not want the hand to obscure the view while interacting with the content.

The menu itself is a separate view that slides in, and the content of the menu is given by the app. It could be tree structure menu, or just a set of menu items which are entry points to workflows.

On desktops and landscape tablets, I see the top bar replaced by persistently showing the menu on the left hand side of the content, which gives a common web/app-layout.

Content components

There are some common content components:

  • Forms/settings
  • Maps
  • Text/HTML5 content
  • HTML5 content full device screen
  • OpenGL for 2d and 3d drawing/animation

Layout

Base unit would be 1/8 of a portrait mobile, 1/16 of a landscape-mobile or portrait-tablet, or 1/24 of a landscape tablet. I would base it somewhat on  https://www.google.com/design/spec/layout/adaptive-ui.html

The content area (if not full screen) would be 8 or 16 units wide depending on mobile or not. The menu would always be 8 units wide.

On wide devices, 16 units will correspond to the width of a text column with max ca. 66 units for optimal readability.

There will also be a 1/8 grid for content, for non-responsive content.

Using base 1/8, makes it easy to hit the golden ratio, ie: 3/8;5/8. Also 1/8 width is approximately the minimal clickable button on a phone

 

Style

Generally based on android material design + iOS. But also using ghost buttons etc.

Natively built app will lean more towards the platform design where possible.

Use ubuntu-font consistently across the app for visual branding.