DINA logo

Guidelines for a consistent DINA visual style

Version 1.0, endorsed by the DINA Steering Committee 2015-09-02

The DINA style is an important way to create cohesion across DINA modules that expose user interfaces. The graphical profile or “DINA style” enables a unified visual look and feel across components regardless of origin, technology stacks or implementation techniques.

It will be used in various settings where DINA User Interfaces exist or are referenced, such as:

Requirements for visual elements

For a product (web interface, slide, document etc.) to comply with the DINA visual style, it needs to meet the requirements outlined below.

Transmedial style harmonization

The requirements have been designed so that documents on the web (html etc such as this document), web slides (using ioslides etc) and desktop slides (using ppt, libre office impress etc) as well as other documents (word, libre office etc) can all be created in the same style regardless of underlying OS, and without incurring any license fees or other costs.

Accessibility

An important aspect is that the style or “graphical profile” should support good accessibility, in particular for web content, and therefore web content should conform as much as possible with the W3C guidelines for web content accessibility.

The accessibility of Web content should be tested using tools such as http://wave.webaim.org and http://achecker.ca/checker/index.php

Fonts

  • A serif, a sans serif and a fixed width “console font” should be part of the style. Those three types of fonts should harmonize.
  • Web fonts and TTF versions should exist (or be possible to create) for use on Windows, Linux, Mac providing same appearance regardless of OS used
  • A free, libre and open source license is required for the fonts used

A suggested set of fonts that would fullfil these requirements are these fonts selected from the Google Web Fonts tool (another good font selection tool is http://fontcdn.org/):

The license that applies for these fonts is available here: http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

There is also Google Noto with great support across cultures/languages, probably better than the “Source” fonts, but it is currently available in sans serif only and therefore not available across the three main font styles: serif/sans-serif/fixed styles. Thus it is a great candidate for web apps / across digital devices including mobiles but not perhaps equally good transmedially, ie across all media (including printed matter, console apps etc).

Color schemes

It is very easy to get colors wrong. It is perhaps more important to avoid the worst pitfalls than aiming at achieving perfection.

Very good guidance when choosing colors that can be perceived clearly is provided by the tool ColorBrewer 2.

  • For colors used, a harmonized and clearly perceivable selection of colors is required
  • No more than 7 steps and never more than 2 hues (if multihued) may be used
  • Aim for colorblind safe choices

With these requirements, the colors used in the DINA style will be guaranteed to be clearly perceived by most audiences across most media.

A suggested color profile that meets the above criteria is the following:

Source: http://colorbrewer2.org/ (colorscheme with 7 steps, 2-color multihued yellow-green scale, colorblind safe)

A simple way to check that colors used make sense and can be distinguished is to convert to gray scale and check if different colors still can be discerned. A quick such test can ensure that you are in compliance with this guideline from W3C: http://www.w3.org/TR/WCAG20/#visual-audio-contrast-without-color

For a more detailed check, tools like Vischeck can be used to simulate how various kinds of color-blindness would affect perceptions of colors used in an image.

Logo and favicons

For logo, use the assets at https://github.com/DINA-Web/dina_logo.

For icons showing in browser tabs or used for pinning apps, please refer to .ico files in the same directory.

Stylesheets for web applications

For cross-device responsive web user interfaces, we recommend using Twitter Boostrap as a clean, simple responsive style sheet resulting in the same look and feel on an Android / iPhone / Ubuntu Touch mobile app as on a Linux / Mac / Win web browser.

We suggest using the MIT-licensed BootsWatch themes… — compatible with SASS, LESS, CSS — specifically the “Spacelab theme” available here: http://bootswatch.com/spacelab/. Note that this particular markdown document uses this theme when rendered to HTML.

A more ambitious alternative which would require additional design work and customizations, is to create a customized “DINA UI Theme”. The bootswatch styles above can be extended with a custom DINA-Web style, making even greater effort to harmonize with the color and font requirements outlined earlier.

CLI tools

We recommend that VMs or other DINA components available through the CLI signal that they are part of the DINA system by using a CLI banner as exemplified below. For applications that are used mainly or only from a CLI, for example data migration tools, users should be able to get rid of the banner with a switch that will silence it. DINA-style compliant CLI banner example:

# Deps: www.figlet.org / sudo apt-get install figlet / R
base <- "http://www.figlet.org/fonts/"
flf <- "small.flf"
if (!file.exists(flf)) 
  download.file(url = paste0(base, flf), destfile = flf)
cli_logo <- system("echo 'DINA' | figlet -f small", intern = TRUE)
banner <- paste0("<pre>CLI banner:\n", paste(collapse = "\n", cli_logo), "</pre>")
cat(banner)
CLI banner:
 ___ ___ _  _   _   
|   \_ _| \| | /_\  
| |) | || .` |/ _ \ 
|___/___|_|\_/_/ \_\