MS7 2 native protoypes - ISIS3510-Group-27/Documentation GitHub Wiki
Prototypes
Flutter
Feel free to check the repo to see the source code:
https://github.com/ISIS3510-Group-27/SENECApp-Frontend-Flutter
- View 1: SENECApp logo on the native prototype.
Sorry for the bad quality, it's due to the emulator resolution. The logo itself can be seen in MS6.
- View 2: Color palette.
Here, you can see the color palette, in particular, the colors:
| Color | Use |
|---|---|
| A50104 | Down buttons (to change between screens) and selected button beneath the features |
| F0E2E7 | Contrast text |
| FFBA08 | Joined groups, new RSO button, some icons inside organizations |
| 171A21 | App canvas |
| 1D3557 | Contrast over black canvas, unselected buttons |
For the rationale, please refer to the MS6.
- View 3: Font Bricolage Grotesque.
You can see the font on the cards headers (white text).
- View 4: Font Nunito.
You can see the font Nunito as text in the buttons.
- View 5: Navigational pattern Flat (top level) nav.
You can see the nav bar at the bottom, that shows Discover, Events, My RSOs and Profile as suggested in MS6.
- View 6: Prototype.
Here, you can see the whole view of the prototype 'My RSOs' screen.
Contributors: Nicolas Salazar, Jose Manuel Fonseca, Daniel Vargas.
Kotlin
Feel free to check the repo to see the source code:
https://github.com/ISIS3510-Group-27/SENECApp-Frontend-Kotlin
- View 7: SENECApp logo & color palette.
From this view, we can see the SENECApp logo and the color palette we are planning to use, which are the same as in the Flutter prototype, so that there is consistency between both apps.
| Color | Use |
|---|---|
| #171A21 | We are using this color for the app's background |
| #F0E2E7 | This color we are planning on using it for texts when we have a darker background |
| #A50104 | We are using this color for buttons, like "All" or the menu in the lower part of the screenshot |
| #FFBA08 | This color is used by buttons or icons throughout the app |
| #1D3557 | We use this color for unused buttons and the search bar in the app |
- View 8: Icons.
You can see the different icons we are implementing in the app like the notification bell, the arrow, organized by colors, and the icons in the lower menu
- View 9: Fonts Bricolage Grotesque and Nunito.
This view shows the different fonts that we are planning to use: Bricolage Grostesque and Nunito.
- View 10: Navigational pattern.
There is a navigational pattern within the app since the bottom navigation bar lets users move through the app more easily.
- View 11: Illustrations and graphic elements.
We are using a gradient banner to highlight the amount of events available, and we also have the calendar which is color coded by the category of the event.
- View 12: Prototype.
In this image we can see the combination of every aspect since we use the color palette, the different fonts, the icons and graphic elements while the user can see more detailed information about the organization.
Contributors: Daniel Vergara, Camilo Castilla, Luciana Bacci.