CoffeeBoy Surface, Part I

CoffeeBoy Surface

After a looong summer break we now resume our CoffeeBoy UX design process on the surface plane. It’s actually the last plane including design work which has a sensory influence on the user. In this post we’ll see which colors, font and icons were taken in order to improve the user interface’s aestetics and strengthen the user’s perception of data and functions.

CoffeeBoy Series Schedule

Why design guidelines?

The design work on the strategy, scope and structure planes – i.e. tasks like developing the initial idea, working out a strategy, targeting user groups, gathering requirements and grouping them – can more or less be accomplished by non-designers. But then the subsequent skeleton plane first time requires UI design skills. That is e.g. knowledge about common UI elements, structuring patterns, interaction concepts, etc..

As mentioned in previous posts the CoffeeBoy UI design follows the Google Material Design guidelines. Those guidelines immensely facilitated our design work on the skeleton plane. With a solid structure from the structure plane in hand, the CoffeeBoy data and function elements fell like jigsaw into place. That’s because the design guidelines exactly specify where – and where not – to put navigational elements and the page title, how and where to present data and functions in lists, how to display input validation errors, and so on.

Especially people having a developer rather than a designer background benefit from existing design guidelines like those from Google. Casually there is a wide range of users being familiar with UI products which leverage commonly applied design guidelines. A downside of using existing design guidelines might be a less differentiated UI product which appears less innovative, ordinary or mainstream.

Colors, font and icons

Now we’re on the surface plane. Here Material Design (MD) provides guidelines and graphical resources which help us to create a visual design. Let’s see how this actually looks like by using the example of the Single Cup Of Coffee Order page:

Single Cup Of Coffee Order Page
Visual design of the Single Cup Of Coffee Order page
  1. Primary color: MD provides palettes with colors which work harmoniously with each other. According to the guidelines a primary and an accent color, together with a couple of hues, should be chosen for the visual design. We’ve picked green as primary color and use it to emphasize the CoffeeBoy App Bar. The same color gets also applied in the CoffeeBoy logo.
  2. Accent color: The accent color accentuates primary functions on pages. Elements using this color should at first catch the user’s eye. Between the primary and the accent color there should be a high contrast. As we see the Order Icon Button is colored dark gray. We apply a lighter hue of gray to present less prominent elements, as e.g. the milk froth icon.
  3. Font: Roboto is the standard font on Android, currently (December 2016) the most prevalent mobile OS. The MD guidelines use this font in the application examples. And also the Angular Material Design library ships its components styled with the Roboto font. Not surprisingly we’ve chosen Roboto as the one and only font for the CoffeeBoy UI.
  4. MD icons: The CoffeeBoy UI makes use of the open source MD icons for standard UI elements.
  5. Custom icons: The MD icon library only includes icons for general purposes. So we’ve also created custom icons according to the MD guidelines which rather fit into the coffee brewing domain. Here we see an icon clothing the On-The-Fly Coffee Recipe Icon Button.

Up next

In this post we saw the definitive design of the Single Cup Of Coffee Order page. A series of succeeding posts will present the visual design of all other CoffeeBoy UI pages. It’ll be fun 🙂 Stay tuned!