UI/UX Guidelines

Introduction

Refer to this page whenever you create or modify Talawa screens

Style Guide

The guide below applies to all screen types.

Colors

Follow these guidelines to create a consistent UI/UX in this category.

1. General:
   1. Colors must be consistent:
      1. With the color palette.
      2. In their use in design elements
   2. The colors used 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.
   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. Main Elements:
   1. Should be white with gray/black borders, or black with gray/white borders (dark mode) whenever possible
3. 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

Dimensions and Proportions

Follow these guidelines to create a consistent UI/UX in this category.

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.

Logo

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.

Icons

Follow these guidelines to create a consistent UI/UX in this category.

1. Must be the same size on all screens after entering the application.

Buttons

Follow these guidelines to create a consistent UI/UX in this category.

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

Text

Follow these guidelines to create a consistent UI/UX in this category.

1. Must use a consistent font

Images

Follow these guidelines to create a consistent UI/UX in this category.

1. Images must only have square edges. This reduces the risk of losing content due to cropping.

Positioning

Follow these guidelines to create a consistent UI/UX in this category.

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.