Talawa UI/UX

Introduction

Refer to this page whenever you create or modify Talawa screens

Style Guide

On all screens:

1. Colors:
   1. Colors must be be consistent:
      1. With the color palette.
      2. In their use in design elements
   2. The colors used for must imply the same functionality. For example a depressed button cannot have different colors in different screens
   3. Screens must have either a white or black background (dark mode)
   4. Colors used could be interpreted in a detrimental way depending on the cultural or political context.
      1. Main Elements:
         1. Should be white with gray/black borders, or black with gray/white borders (dark mode) whenever possible.
      2. Design Highlights:
         1. Shades of gray should be preferred choice for design highlight elements
         2. Other color palette selections can be considered as a secondary option
   5. Unselected design elements should be grayed out in a consistent gray and no other color
   6. The uses of multiple colors and shades of colors on the same screen should be very limited.
2. Dimensions and Proportions
   1. Design elements must use proportional dimensions. For example, the element must not look large on a small mobile phone, and small on a large tablet.
   2. Design elements that do the same thing on different screens must be the same size.
3. Logo:
   1. When visible, the logo must be in the same screen location.
      1. On regular screens it must be in the top left corner.
      2. On splash screens it can be centered.
4. Icons:
   1. Must be the same size on all screens
5. Buttons
   1. Buttons that do the same thing on different screens must have the same colors
   2. Buttons used for submitting data must have the same
6. Text:
   1. Must use a consistent font
7. Images:
   1. Images must only have square edges. This reduces the risk of losing content due to cropping.
8. Positioning:
   1. All design elements must be a consistent distance from the edge of the screen. This includes:
      1. Icons
      2. Text
      3. Dialog boxes
   2. If a design element stretches across the screen then it must be equidistant from both edges of the screen.
      1. For example: A design element consisting of an icon grouped to the left of a text dialog box should ensure the icon is the same distance from the left of the screen as the right most edge of the dialog box is from the right side of the screen.