This page primarily discusses the visuals for the website in general. It explains the development of consistent formatting between all the pages, a unique identity that displays the data in a comprehensible fashion, and taking into account all group members’ implementations of their data in their own visualisations to create a collaborative presentation. From the very beginning, I knew I wanted the website’s appearance to resemble that of a comic book. This aspect was partially inspired by a previous project I made for year one: the Cinematogall’ry, an presentation of different film and TV media inspired by old internet stylization. in which I utilized the potential of Glitch/CSS to create a homepage where the images acted as links to other pages on the site, and gifs of them played when the mouse hovered over them. Additionally, I was convinced that using Glitch for this project was the most beneficial way for my group and I to work, as I was more familiar with its functions and found it easier for me to work on to truly enable my vision. The rest of the group were impressed by my work from last year (pictured below) and agreed to work on Glitch as well. One major setback was me having to wait for the members to finish incorporating their data nd graphs for me to visually edit them into the site, which came into conflict with the vacationing period. Nonetheless, the work was completed before the deadline.

Concept Stages

Firstly, we began with concept sketches. I drew a format of different images leading to different pages, yet I added elements of pop art, stylized texts, and comic book-like imagery, such as explosions and text boxes, hovering over the linked images, displaying more info and texts.
Matt had initially developed his own version of the homepage. Some positives I found with this approach was the use of imagery from actual comic books, even if they were placeholders. The captions (e.g. “The Main Data”) and the Comic Sans font also incorporated the comic book angle I was going for well, and the speech bubbles added an interactive touch, as if the viewer is reading an actual comic. However, some negatives were presented with how compressed in size the images were, the inability of the images to link to other pages, and the overall bland presentation outside of the images. However, this provided a base and inspiration for my approach in developing the home page.

Homepage Visual Development Process

I prioritized the designs and presentation of the images that link to other pages. At first, I wanted to do a similar approach to Matt, in which the images were actual comic book panels with visuals relevant to the information on each page. For example, the image for the ‘Research’ page would’ve been a comic book panel about a scientist doing research. However, once that proved too difficult and vague of a task, I moved towards an idea that feeds back into an overarching pop art aesthetic, with stock videos that look appealing enough to attract the website visitor’s attention. For ‘Research’ specifically, I still attempted to include a background/gif relevant to the topic by using science-like imagery.
One issue I encountered with the background gifs were watermarks, which would require me having to buy them for up to £100 for me to use without them. I got passed this issue by darkening them and covering the centre of the gifs, where the watermarks were usually located, with texts and other imagery. Although it is important to note that this did not apply to all the gifs.
In particular, I attempted to include indie comic book characters or characters drawn in the pop art style to make the project stand out from other data visualisation projects, incorporating them in a way that enables the visitor to interact with them. However, an issue that arose with is, despite editing the images of the characters to have transparent backgrounds so they could fit in with the rest of the index page, the images themselves are still in a square shape, which complicated the capabilities of the hover buttons as the characters get in the way of certain parts of the button. This is most notable if the mouse hovers over the button, but directly next to the scientist for instance; the button will not work. This is why the inclusion of the characters were kept to a minimum and also why said characters are only on the homepage, as they would distract the viewer from the data displayed on the other pages.