Mockup Guidelines

Owned by Nick Reid (Deactivated)
Last updated: Apr 30, 2018 by Sam Im (Deactivated)

Mockups in OpenLMIS should be used to articulate workflows, and help design how content is be displayed for a user. In the OpenLMIS community, we don't use them as "perfect" representations but more like quick sketches to be replaced by functional code. The primary value of a mockup is the discussion that a mockup supports.

Some projects use high-fidelity drawings that developers use to implement screens to match perfectly. We don't encourage this because our UI is supposed to be easily theme-able — so pixel perfection should only be worried about in the code.

Here are some high-level guidelines to help you create effective mockups:

  • Leave out every possible detail
    If the workflow you are designing is entirely in a modal, don't worry about drawing the navigation menu. Over specification can cause misunderstanding — focus on the details that matter, and try to remove every detail that doesn't. If you leave out a detail that someone needs, they will ask you about it — and you can discuss if that detail is really needed.
  • Use real content
    Let's be honest, words are hard. OpenLMIS is a complex system, where people are reading the text on each screen and making difficult decisions — so the order of content is important to creating a successful experience.
  • Don't worry about perfection, but try to keep buttons aligned
    Balsamiq was the first platform to embrace low-fidelity design — and while Balsamiq mockups generally look horrible — they include tools to align buttons (and evenly space elements). Please use these formatting tools, those tiny details help people see the content in your design.

Working with Balsamiq

The OpenLMIS project has a group myBalsamiq account, if you want access — ask Sam Im (Deactivated) (it doesn't cost us anything)

We have a few rules, which are just about keeping the workspace clean

  • Put related ticket number in notebook name
  • Change notebook privacy to "blog" or "wiki"
  • Add link from Jira to Balsamiq mock ups

Reusable Balsamiq Symbols

Balsamiq has a feature called symbols which allows us to reuse templates.

We are trying to keep this library similar to the OpenLMIS-UI components, so it is obvious how a designed screen would be implemented. We save all of our reusable pieces with "OLMIS" as the prefix, to make them easy to find and read through. For example, we have "OLMIS Modal" and "OLMIS Page" which are a template for a modal window and single page, respectively. 

To use a symbol:

(1) Go to quick add, type "OLMIS" and pick a symbol — the symbols are also available under "site assets" in the Balsamiq UI Library

(2) Click "Break Apart"

(3) Start designing cool stuff!

Generic Workflows

See the OpenLMIS Balsamiq site with Generic Workflows showing annotated examples: https://openlmis.mybalsamiq.com/projects/olmis-3609genericworkflows/grid

OpenLMIS: the global initiative for powerful LMIS software