Design guidelines

Design guidelines

Casing and terminology are important in this document!

Inspirations:

• https://github.com/QutBioacoustics/baw-client/issues/260
• https://github.com/QutBioacoustics/baw-server/issues/275

Main menu

• Ecosounds
• Projects
• Listen
• Library
• Custom Menu
• Contact Us
• {spacer}
• Admin menu {if admin}
• {user name} {user profile picture} / Register
• Log out/Log in

Drop down should contain: For admin on rails side: profile; scripts; orphan sites; user list

Secondary menu

All links on the left will be global unless descending into a hierarchy, in which case contextual navigation links will be shown in groups. Icons will also be added to the left menu. Particular focus on not allowing actions in this menu.

• (home) Home
• (sign-in) Log in / (user) My Profile
• (user-plus) Register / (<custom annotation item>) My Annotations
• (globe) Projects
  • (folder-open) Project
    • (map-marker) Site
• (server) Audio Analysis
  • (tasks) Analysis Job
• (book) Library
• (table) Data Request
• (envelope) Send Audio
• (bug) Report Problem
• (line-chart) Website Statistics

Other Icon References

• (map) visualize (project & site) [new name: Explore audio]

• (tag) tags

• (square-o/th-large) annotations

    .fa-baw-annotation {
      &:before {
        content: $fa-var-square-o;
        position: relative;
        margin-left: 0.25em;
      }
    
      &:after {
        content: $fa-var-th-large;
        font-size: (2/3) * 100%;
        position: relative;
        top: -2px;
        left: calc(-1em - (1/3 * 1px));
      }
    }
  

• (play) Only used when immediate audio is played

• (headphones) Any link that takes to a listen page and must have text to say "listen"/"listen to audio"

• (map-marker) sites

• (download) Download

• (plus) new/add/create item action, also: add list item

• (minus) remove/delete item from list

• (edit) edit/change item action

• (trash) remove/delete item action

• (table) results / data

• (repeat) retry

• (pause-circle) pause (non-audio, e.g. jobs)

• (play-circle) resume (non-audio, e.g. jobs)

• (file-archive) download zip

• (key) permissions

Casing

• Title Case for all menu items
• Sentance case for all action items
• Sentance case for buttons, radio items, and checkboxes
• lower case or for anchors. Lower case when in a sentence. An exception to the sentence rule is when the link is a duplicate of a menu item or action - in that case, it should mirror the style of the original for consistency.

Personal Pronouns

• For pages / menu items / actions that apply only to that user use the personal pronoun My/my
• Avoid pronouns altogether.
• If pronouns are used, do not use gendered pronouns. Use they/their