Prototypes - Take434/Appollon GitHub Wiki

The next stage in the development progress is the creation of high fidelity prototypes with respect to colors and definitive layout decisions. This is also achieved in Figma by using the wireframes as a basis and adding color, icons and actual images. For Appollon, two high fidelity prototypes were created with different colors and wireframes for some of the pages to make a direct comparison possible.

The goal of this design is a light, modern look. This is already present in the wireframe with the rounded corners and layout decisions but it is necessary to chose the colors to fit this aesthetic.

The first design focuses on a light color scheme with pastel accents. Violet serves as a primary color with a greyish blue being the secondary color. the background is white. This is the color palette created for the design, with many pastel colors fitting the scheme, the actual design only utilizes a few of these, but it is good to have several colors that can be used for messages an such.
screenshot of color palette for first design

The prototype using these colors looks like this, an interactive version can be found here.
screenshot of first design
The colors violet, white and blueish gray were chosen because of the contrast between white and violet. Blueish gray can serve as a great secondary color here, because there is enough contrast between violet and also white and it fits the color scheme nicely.
The two images on the first and second page are free images from pexels, their licensing states, that these images can be used without any restrictions.

In contrast to the first design this prototype aims to follow the current notion of dark color themes [1]. It also utilizes a different login page and there were some changes made to the homepage.

As mentioned above this design uses a darker color as the background, which means, that the primary and secondary colors have to be light enough to create a high contrast.
screenshot of color palette for second design
The background is a linear gradient starting at a dark blue and getting lighter. The primary color is a pink with the secondary color being a dark red. The shades between these two colors are used in the graphs.

There is no interactive version of this prototype.
screenshot of second design
Because it was decided, that this design would be implemented it also includes a loading page.
Another important difference to the first design is the homepage, which now includes the users Spotify profile picture instead of a stock image. Because of this the layout had to be changed, as the profile picture is perfectly square and would not have fit with the layouts from the wireframing stage.

All images on this page are screenshot of our own work.

[1] Yana Bondarchuk 50+ Dark Mode Usage Statistics For 2023 (Trends & Facts) accessed 31.07.2023