Design Guidelines
This page provides guidelines for the visual components within the app such as font sizes, colors, dimensions, dialogs, etc.
Welcome Screen and new project flow
##Typography
###Font Default font: Noto
- The font is available at https://www.google.com/get/noto/
- The entire fontface is quite large. However you can download just the most necessary subset of languages from their github repo.
- You can find the noto fontface used in ts-android at https://github.com/unfoldingWord-dev/ts-android/tree/master/app/src/main/assets/fonts (just 197 KB)
###Color The following colors are in hex. An alpha may be specified with an extra 2 leading characters.
- dark primary text: #dd000000
- dark secondary text: #89000000
- dark disabled text: #42000000
- light primary text: #ffffff
- light secondary text: #b2ffffff
- light disabled text: #4cffffff
##System UI
###Color
- primary light: #B2DFD8
- primary: #009688
- primary dark: #00796B
- accent light: #80D8FF
- accent: #40C4FF
- accent dark: #00B0FF
- shadow light: #F3F3F3
- shadow: #E8E8E8
- shadow dark: #D2D2D2
- list separator: #42000000
- success: #01c853
###Modal Dialogs
##Target Translation
###Info Dialog
On the dialog indicate the following:
- project title including slug
- target language including slug
- progress as whole number %
- comma delimited translator names
- published status
Follow these rules when indicating the published status of the target translation:
- Last published: never - if never published
- Last published: [date last published] - if published but out of sync
- Last published: up to date - if published and no changes have been made
Controls on the dialog should include the following as icons:
- delete
- publish
- backup
Display a confirmation when deleting the target translation
Print options should include print images and print incomplete chunks
Backup dialog should provide the following options as appropriate for the platform:
- SD card (or folder if desktop)
- friend
- online
- to another app
##Translation mode There will usually be three different translation modes.
###Review mode In review mode the user will be presented with three cards side by side.
- Source
- Translation
- Resources (must swipe out to see)
The translation card displays the reference and target language at the top. An edit button in the top left allows the user to move between verse marker mode and editing mode. The Frame can be marked as complete using a switch at the bottom of the card.
##Words index link
##Words index
##Padding between listed resources, eg:
##Translation card (without target language name)
##Source, Target & Resource cards
#####Rounded corners on cards
#####Add source tab button
#####Import dialog
#####Editable text has ruled paper lines
#####Highlight Active Mode Icon
#####PDF generation
- 1 inch margins
- 360px image resolution
#####Cards
- You should be able to scroll in the source pane and in the right hand flyout independently and at the same time (without closing the flyout).
- Whenever a user re-opens a target translation they should return to the last frame they were looking at before in the same mode (read, chunk, review)
- The scroll position should be maintained across the different view modes
- The source card should start on top when opening a target translation
- Hide any tabs in the resources if they do not contain content (eg: questions tab on Mark 7:14)
- There shall be a link on the bottom of each tW entry to "tW Index"
#####Publishing There shall be an "Add Contributors" option on each project. This should be available in the publishing interface (on the profile page) and also on the information dialog pop-up for each project where "Translators" are currently listed. The form needs to have the following fields:
- Your Name or Pseudonym
- Your Email Address
- Your Phone Number
- This person has agreed to the License Agreement, Statement of Faith, and Translation Guidelines (check box and each of the documents referred to should be links that open a pop up dialog with the text of the document)
On the last page of the publishing process, the unfolding word logo should be center aligned and underneath display the following text:
Publishing your work through unfoldingWord makes your content available:
* Online at unfoldingword.org in multiple formats
* In the unfoldingWord Mobile App
* In a PDF suitable for printing
#####Welcome screen The welcome screen should only be displayed when there are no target translations
##translationNotes There are three levels for tN.
###Book Notes Book level notes will be displayed in the read mode as a single card (no stack) at the top of the list.
NOTE: we may also place book level notes in review mode on the first chapter resources card.
##Chapter Notes Chapter level notes will be displayed in the read mode as a single card (no stack) above each corresponding chapter. And in the review mode in the resource cards next to the corresponding chapter title and reference.
##Frame Notes Frame notes will be displayed in the review mode in the resource cards next to the corresponding frame.