Skip to content

UI design guidelines

Ashutosh Singh edited this page Sep 19, 2020 · 4 revisions

UI Guidelines

This guide aims to provide a basic UI roadmap of the project. The app would have 3 basic screens

  1. Login Screen
  2. Event Screen
  3. Event Detail Screen

Take a look at the mock designs to get more insights about the application. (design credits: Chirag Mathur)

Login Screen

The login screen would be the first screen visible when the user opens the app. This screen would consist of the following elements

  1. A centre aligned club logo
  2. App name
  3. A Google sign-in button

The Google sign-in button would display the Google login dialog automatically when pressed so we won't need any other element like text fields or sign-up buttons as seen in other application designs.

Event Screen

The event screen lists the upcoming events of the club. The list of events would be fetched from Firebase and displayed as a vertically scrollable list of tile elements similar to scheduled view on Google Calender but a lot simpler.

This screen would also contain a side drawer for providing accessibility to features like

  • Past and archived events
  • Switching theme
  • Send feedback/report issues
  • Logout button

Event Details Page

This screen opens when the user taps on the events from the event screen. It would provide more details which would be applicable to the event like

  • Time
  • Date with duration
  • Venue
  • Guest Speaker
  • Prerequisites
  • Prizes
  • Feedback (after the event concludes)
  • Winners (after the event concludes)
  • Special Notes etc