CoffeeBoy Structure: Layout

CoffeeBoy UI Layout

After we’ve accomplished a use case-driven distribution of data and functions across multiple views and created a site map, it’s now time to concentrate ourselves to the look of the individual views. Thereto we want to follow the Material Design guidelines. In this post we’ll first decide which screen widths we plan to support and then create a responsive layout which considers each of these screen widths.

CoffeeBoy Series Schedule

Our current UX design assets are relative timeless, yet. We could build upon the scenarios, data and function requirements, use cases and site map to create a modern, refreshed design in let’s say fifteen years. Though in the year 2016 we want to follow the Material Design guidelines.

Why Material Design?

As the UX Design Process for CoffeeBoy post already mentioned we’ll adopt Google’s Material Design principles and apply the Angular Material Design library. That’s because we want the CoffeeBoy UI to look and feel modern1 and familiar, as at the time of writing this post the majority of mobile devices run the Android operating system2 and the current version of Android utilizes Material Design. A further benefit is that we can save the time-consuming and expensive definition of own design guidelines.

Please read the Material Design guidelines (especially the part dealing with layout) to get the whole picture.

Supported screen widths

Material Design classifies ranges of screen widths as listed in the following table:

xsmall (xs)
Screen Widths: 0px >= width < 600px
Typical Devices: Mobiles
small (sm)
Screen Widths: 600px >= width < 960px
Typical Devices: Mobiles, Tablets
medium (md)
Screen Widths: 960px >= width < 1280px
Typical Devices: Mobiles, Tablets, Desktop PCs, TVs
large (lg)
Screen Widths: 1280px >= width < 1920px
Typical Devices: Mobiles, Tablets, Desktop PCs, TVs
xlarge (xl)
Screen Widths: width >= 1920px
Typical Devices: Mobiles (landscape mode), Tablets, Desktop PCs, TVs

For each range the UI can (but is not supposed to) define a dedicated design in order to provide the user the best possible experience. Actually that’s the essence of responsive design!

For the CoffeeBoy UI we plan to not distinguish between the adjacent class pairs xsmall-small and large-xlarge (as indicated by the row colors in the above table). So the design will look exactly the same for xsmall and small respectively large and xlarge screen withs. However, should later design steps or the construction phase reveal a demand on dedicated designs for some of these classes, then we’ll make a distinction.

Terminology

Until now we used the abstract terms data, function and view to describe the UI. While this was very helpful to avoid bringing details too early into play, we need a more concrete terminology for the next design steps:

Element
The smallest unit of a UI. Examples: button, input field, label.
Component
A component is composed of multiple elements or components. Examples: calendar, grid list, toolbar.
Section
A layout is subdivided into sections. A section houses associated elements and components.
Page
The biggest unit of a UI. A page gets formed by the layout. The user can navigate between pages. Multiple pages can be displayed at the same time (e.g. side by side), sharing the same layout.
Screen
The completely visible surface of a physical screen. A screen shows the UI plus external operating system elements or components like e.g. the Android system bar or a browser window.

So from now on, let’s use this more concrete terminology when speaking about the CoffeeBoy UI.

The layout

This post’s above teaser graphic shows the basic set-up of the layout which will be applied by all CoffeeBoy UI pages. As we can see it is composed of the Header Section, the Left Section as well as the Content Section. The individual sections will contain components which will be available on all pages:

  • The Left Section contains a Side Bar which houses the CoffeeBoy logo as well as the UI’s main navigation menu. Depending on the current screen width the Side Bar either can be opened for temporary display or, in case of sufficient screen space, gets permanently shown.
  • The Header Section includes a permanently shown App Bar which provides the currently displayed page’s title, eventually a function element to open the Side Bar, as well as various navigation and page content related function elements.
  • The Content Section simply shows the content of the currently active/opened page.

Due to the fact that the majority of pages build upon a List of coffee recipes as their key component (as e.g. the Single Cup Of Coffee Order or Coffee Recipes pages), it is also presented in the layout. The List component comes with three companion components:

  • A Bottom Bar providing coffee recipe related function elements as the delete function.
  • A Toolbar as an alternative to the Bottom Bar on larger screens (more on this in a short while).
  • A Detail Page presenting coffee recipe details as e.g. done by the Coffee Recipe page.

The following post sections describe how the layout changes its shape for the respective screen widths. Please regard that the colors that we use in the layout figures only serve to emphasize the individual layout components. So they have nothing to do with the colors we’ll finally apply in the CoffeeBoy UI.

Layout for xsmall and small screen widths

Layout For xsmall And small Screen Widths
(A) Layout with closed Side Nav
Layout For xsmall And small Screen Widths
(B) Layout with opened Side Nav
Layout For xsmall And small Screen Widths
(C) Layout with displayed Detail Page
  • The Side Nav is closed by default (A). It can be opened by means of a particular function element in the App Bar. When opened, then the Side Nav overlays all other components (B).
  • The Detail Page gets shown when certain function elements get triggered on a List item (C).

Layout for medium screen widths

Layout For medium Screen Widths

  • The Side Nav still has to be explicitly opened by the user.
  • Due to sufficient space the Detail Page gets displayed to the right of the List when certain function elements get triggered on a List item.

Layout for large and xlarge screen widths

Layout For large And xlarge Screen Widths

  • The Side Nav gets permanently displayed. It takes the full screen height.
  • The App Bar aligns itself to the right of the Side Nav. It takes the remaining screen width.
  • The function elements of the Bottom Bar get absorbed by the permanently displayed Toolbar.
  • Due to sufficient space the Detail Page gets displayed to the right of the List when certain function elements get triggered on a List item.
  • The content of the Content Section (in the above figure filled with two pages) has a maximal width and gets centered. The remaining space to the left and right of the content stays blank.

Up next

In the next post we’ll start our design activities on the next skeleton plane. Stay tuned!

Footnotes

  1. Admitted, modern is a pretty broad term when it comes to UI design. Some might still call a UI designed with Bootstrap modern, while others might think that Material-designed UIs are sooo 2015. Let’s agree that with Material Design we’re at least not behind the times 😉 .
  2. Wikipedia – Mobile Operating System: Market Share , March 2016