Creating a visual aid for a person with a hearing disability. Link to end product: https://superstephan1.github.io/web-typografie-19-20/
Here you can see the different iterations i created during this class and an explanation of the feedback i got from them.
This was the first prototype of this project. I wanted to translate the sounds to visual que's. So i created some css animations to change the background color based on the loudness and sharpness of the sounds. I also tried to layer the font's with opacity. The closest speaker to the audience has his opacity set to 1. The furtest speaker has his opacity set to 0.5.
The main feedback i got on this prototype was that it was to sublte. The audio cue's were very good however Vasilis told me that it could be way more extreme and colorful.
With this prototype i took all of the feedback onboard. I improved readability by changing the colors of the subtitles between the characters and i linked certain sounds to colors.
The main feedback i got on this prototype was that while the colors are okay now and it is clear that it's an alarm going off. the image feels a bit static. I also needed to play around a bit more with the font. that part of the prototype is a bit lacking compared to the other parts.
This was the final prototype to test with the target audience and Vasilis. I decided to change the animations from the background to look a bit more like the actual sounds (alarm moves from right to left etc.). I also played around with the font and created a sort of "crt" effect to match the style of the film.
On my last prototype i got really good feedback. some of the text got a bit unreadable on the white background during the interview and that was pretty much it. Vasilis told me that this prototype was very good however he missed a part of "me". So that was my assignment for the deadline of the project.
So for my final product i decided to look at myself. How do i incorporate my personal style and opinions in this project.
I am a very visual type of person. I like to see what's happening instead of reading it. so i decided to change the the "[i]" indicator to the picture of the actor. this works very well for me, especially during the interview combined with the color differences that are still present. I also changed the position of the interviewer and K during the interview. The interviewer's subtitles are aligned left and K's subtitles are aligned right. This translates to a lot more intensity that the scene tries to show the viewer.
I am also a big fan of a "clean" look. So i wanted to incorporate the subtitles into the film as much as possible. So i decided to play around with the css and blend modes of the font. This gave me a very pleasing visual look.
I tried to taylor my "film experience" to our test subject "Darice". In the feedback sessions she told us she likes visual que's aswell as textual que's of sound. For instance the "[noise]". So i decided to incorporate both of those forms into my work.
During the first feedback session, Darice didn't even see my layered subtitles. So i decided to ditch that method and instead of opacity i started using color coded subtitles. This worked way better for her situation.
The visual que's like the sirens and alarms are very experimental in my opinion. It probably wouldn't work in every movie in the way i incorporated it however it shows some potential which can be better incorporated in future products.
Taking control of the situation is a tricky design principle to incorporate into this project. Darice is a front-end developer so i assumed that her device would be able to render a few different effects pretty nicely. Like the shaking of the iframe, the font animation and the background-color changes.
This design principle was kind of automatic throughout the course. The way the course was setup we had 6 different feedback sessions in 3 weeks. So we had all the tools available to build a good project.
I added my identity at the end of the project. So i don't have the posibility to test these new changes. However you can ask yourself the question. Is it really needed to test the changes that give the project it your identity? I brushed up the clean look and added the actor images to really show my visual side.
This is a design principle that sits in contrast with my own personal style. I like the clean look so i found it hard to overcompensate in the visual department. For this design principle i decided to add the repeated line during the interview in the middle of the screen. This shouldn't be used in a real movie whatsoever but it looks kind of "showy and cool".