We wanted the aesthetic of our web app to follow Material Design principles in order to create a clean, modern, and responsive interface for the user.
The key principles for colour in Material Design include bold hues, muted environments, deep shadows, and bright highlights. The colours are to be vibrant, consisting of primary and accent colours that are intended to work in harmony with each other.
The app will utilize a light theme, resulting in a clean, modern aesthetic with plentiful white space.
The images will be selected based on a criteria of being delightful, crisp, and informative.
When relevant events are displayed to the user, we want to choose images that relate to the event. As a result, the user experience will be enhanced due to relevant, informative images.
Ideally, we will use photography as our primary medium of images, such as photos of the performer(s), venue, etc. Photography will imply a sense of specificity, and provides an enhanced user experience.
Google's specifications for Materiam Design's responsive UI is based on a 12-column grid layout. This allows our app to easily implement our choice of using "tiles" to display relevant events to the user in a grid layout.
Users will primarily interact with our app using buttons/hyperlinks. Events will be displayed to the user in a grid layout, with each event being contained in a "tile". Users will also be able to click on the tile to be redirected to the selected event.
The top navigation bar will consist of flat buttons that redirect the user to the destination page.
By clicking on the event's tile, users will be redirected to the event's corresponding page, containing more information about the event.
This page is the default page for new visitors, and users who are not logged in. The main component contains a slideshow containing information about our website, with a button that will scroll the page down to the "Popular Events Near [Location" section.
In this section, users are presented with popular events that are near their current location, obtained through the browser. Users are able to click on any of the event tiles, and will be redirected to the corresponding event's page.
If there are more nearby events, the user can click on page naviation buttons to view more popular events nearby.
This page allows users to enter their credentials and basic information into the text fields. Upon clicking "Submit", their account will be created using their information, and they will be redirected to the Preferences page.
This page will allow users to select from a group of tags what type of events they are interested in.
This page is a basic login form that allows users to enter their email and password. Upon clicking "Submit", their credentials are verified, and they will be redirected to their personal Homepage.
This is the main page of the app. After users login, they are redirected to this page. It will contain all the nearby events that match their criteria, organized into tiles in a grid layout.
The user will also have the ability to use the Filter feature, allowing them to filter out events by distance, price, etc.
Users are redirected to this page when they click on an event tile, from either the Welcome page or Homepage. It will contain more information about the event.
Users can scroll down to view other nearby events, and the user can use the page navigation buttons to view more nearby events, similar to the Welcome page.
