All projects

Sounds of an Art School

A floating 2D face snores against a dark background but gradually waking up with a smile and surrounded by rectangles and circles representing its' energy level.
Client
Lasalle College of the Arts
Category
Javascript
DURATION
3 months
YEAR
2021

The challenge

Personally experiencing college life during the pandemic made me feel easily lethargic and lacking motivation about 60% of the time. Diving deeper into research, I found that the school climate plays an important role in students' academic achievements. To share my experience, I recorded down the ambient sounds of school (Lasalle) and formed a data visualisation and artefact.

The goal

View the live site

User Research

Read more
View the full case study
PROCESS –
PROCESS –
PROCESS –
PROCESS –

the process

Data

The bar graph was chosen for its ease of understanding and purpose in visualising my data. Bar graphs allow us to compare multiple headers to a single common denominator (i.e. amplitude levels). At first glance, drawing out the bars will create an immediate understanding that Block D Level 5 was the loudest location. It also helps that the bars may be represented as a building. In the later part of the project, I decided to create 'paintings' to visualise the data in a more fitting display.

Artefact

The coded artefact is a sound-reactive display of colours and moving shapes. As the main subject, the student will evolve from a dormant resting individual and explode into a display of energy when fed with sound. For this part of the project, I wanted to share a more positively inclined emotional response to the issue at hand. While the data aims to share about the low energy levels in school, the artefact aims to display the pros of ensuring a positive school climate. The coded artefact may also be toggled for manual control to observe the different levels of energy the student may exuberate.

Read more
View the full case study
A floating 2D graphic of a head seemingly asleep against a grey background.
A 2D floating head is surrounded by some rectangles and circles against a grey background. A triangular slice of orange colour overlaps 1/8 of the image on the bottom right corner.
A photoshopped infographic horizontal bar graph that uses paint strokes to display data information on the sound levels recorded in Lasalle during the covid pandemic.
A floating 7-sided polygon 2D head smiles against a pinwheel background of red, orange, beige, pink and blue colour.
A floating circle 2D head sleeps against a darkened pinwheel background of red, orange, beige, pink and blue colour.
A floating pointy 2D head smiles against a pinwheel background of red, orange, beige, pink and blue colour. It is surrounded by rectangles, circles and custom shapes floating around it.
No items found.

Conclusion

In conclusion, the typical correlation between art schools and high energy cannot be proven here based on the data collected. The relationship between the type of schools and noise levels might still be relevant as small bits of activity can be seen from the data. Generally speaking, the life of an art school is not as active as one might guess. Correlating these findings to the research study, I would agree that my personal experience would have gained from a more active school climate.

Read the full case study
View the live site

CREDITS

DESIGN / JAVASCRIPT CODING

Abdul Matin

DATA COLLECTED

Abdul Matin

PROJECT BRIEF

Andreas Schlegel

Lasalle College of the Arts

Two newspaper covers laid out, the left cover is from Berita Harian that advertises zakat with an image of a woman staring out the window. The right cover is an infographic that displays in-depth information on how to conduct zakat, for whom and how they benefit the community. These are designs by Abdul Matin, a graphic designer from Singapore.
DRAG