Skip to content
davidvanr21 edited this page Mar 19, 2021 · 23 revisions

Web Typography Proces

In this wiki I will walk you through my process of this three-week project. Let me tell you what this project is all about in a few sentences. The experience of watching a movie is wonderful! The music, sound-effects, visual effects, special effects, great acting and so much more different aspect come together in just one final piece of art. It is an all-encompassing experience. But how can all this, make impact on you when you can't hear any music. How can you feel the tensity when you can't hear the actors screaming or crying? That is the challenge I'm working with this project. I will visualise sounds and music through color, animation and subtitles.

I'll make this project for Darice da Cuba who became completely deaf since 2007. The project coach will be Vasilis van Gemert with assistent May Johansson. The debrief can be found in the README.md file. Dutch only. The proces of my project can be found here and I categorised it into two main chapters:

Research 🔍

The main focus of this project was experimenting with CSS and visualise the sounds of the film as good as possible, but I think that it is very important to do some research about this subject before we start creating and coding. What kind of subtitles are there nowadays? What are strong visual components to use and how can you translate this into code? Also I didn't know the movie we were working with. Enough to think about!

A few aspects where I found some more information about:

Blade Runner 2049

After I watched the movie and watched the scenes a couple of times, I still didn't know exactly what the purpose was of the test that officer K needed to do. So I found a good resource that helped me out a lot. This helped me understand the purpose of the test. I did this to have a better idea of the situation that the actor is in too translate that to a great visualisation. I can use this context for the visualising parts of this project.

The video that we're working on is a combination of two different scenes. The first one (00:00-01:26) is at the beginning of the film, and the second one is further away. But there is a big difference in the two scenes while they look similar. The first test went well and officer K passed it easily. But having been emotionally compromised by the assumed revelation that his false memories actually happened, K failed the test. The emotions are more present in the second half.

Some things that are good to know to understand the scene a bit better:

  • The Baseline is designed to test the effects of a Blade Runner's job on his brain and psyche.
  • Officer KD6-3.7 or "K" (later in the film: Joe) was subjected to the baseline test on June 30 and July 4, 2049, failing the examination the second time.
  • The length and content of the test was based on the replicant's response time, becoming longer if their response was slow in the first few lines and using more of the poem.

Closed Captions

Closed and Open Captions

You probably know Closed Captions. This method is used by the biggest platforms and can get turned on with the CC button. The major benefit of closed captions is their flexibility. They can be turned on or off by the user, and they can be edited easily because they are a separate file. But there are also Open Captions. These subtitles are kind of "burnt" onto the video and can't be turned off. Open captions always are in view.

Subtitles & Closed Captions

There a some differences between normal subtitles and closed captions. The most important thingWatch an overview here.

Tools

There are some platforms that use the Closed Captions which is better than nothing, but it's still not good enough. I was looking for tools or companies that are specific working on subtitles in the visual way, but couldn't find anything useful. For example I came across subcatch that looked pretty nice at first. So I installed the app they've made, but the subtitles are very static, they also are not in sync with the film and overall, it's not that practical to keep your phone in front of your screen when you're watching a movie.

Inclusive Design Principles 🎨

I have a few things a need to keep in mind while working on this project. I have my own wishes, but also Vasilis and Darice have their own. Vasilis wants me to experiment a lot with as much as different style types and colors. He wants me to make it as crazy as possible to reduce choices afterwards. Darice told us that she's a minimalist and doesn't like to much nonsense around the film. A interesting combination of different types of views.

Because this project case is so unique, it's very important too make good decisions for the final file. Before I started this project, I already had a vision to make the project as realistic as possible. With this, I mean that the project could be used in cinemas and big platforms (such as Netflix or Amazon Prime).

Study Situation

Study situation is all about getting to know the context of the client we make our product for. In this case it's all about Darice and her capabilities. We had the opportunity to talk two times with her to get to know her situation. It's important to know the user who is going to use your product almost always and so it is in this project. On the 5th of march we had a short meeting with Darice. It was the first time that I've spoken to her, but it went very well because of the writing interpreter who was also joined in the call. We had prepared some questions in advance to gain a specific insight into Darice's experiences around watching films. Some very interesting insights came out of the conversation and it helped me to get a clear vision of the life of Darice.

These are some insights I have been able to gather during the conversation:

  • Darice had a favourite cinema that uses very loud music. Because darice can actually feel the music, she experiences the film a lot better.
  • Because she was born with a deviation and became deaf when she was in her late 20's, she didn't learn sign language.
  • Darice doesn't like to much nonsense around the video and does prefer a minimalistic style.

Ignore conventions

With this principle, we were triggered to not make the project much the same. With this I mean the consistency that is allowed to be broken. It's OK to use colours or patterns in the second half of the scene, that are not being used in the first half. I used this pattern with making a big different between the two scenes. The first scene has a few visualised sounds at the beginning, but has a clear feeling the whole time. The second scene is much more dramatic which I visualised through new colours, font-weights and animations. In this example it's not wrong to make the two scenes that different. It's all about visualising the emotion of the scene and if it is necessary to change colours to realise that feeling, it had to be done.

Prioritise identity

This is about prioritising the different perspectives of the stakeholders of this project. As I mentioned before, the vision of Darice is different than the vision of me and Vasilis. With using colours that are coming back in the movie, I used the identity of the film. With a minimalistic first scene, I thought about the preferences of Darice. The colours and animations in scene 2 are more experimental for a. This all together makes the product very good and complete if you ask me.

Add nonsense

Add nonsense will trigger you to make as much as possible and make things out of your comfort-zone. I adjusted this principle with experimenting with font-colours, background-colours and animation . It think it's more a proces thing than it is for the final product. But to add nonsense while working on the project, you will discover all kinds of possibilities.

Other Design Choices

System Default Font

In this project we could choose between using a given font with very much variations, but I've chosen to limit myself by the system font of the user. Because this project is all about accessibility and exclusive design, I think it is a better choice to use the user system font. If some users have installed their own font for preference, this project needs to be adjusted to them.

Future Ideas

While I was experimenting with animations and options for the project. I had the plan to add some other stuff that after long trying didn't work in my code. The things that are possible to add sometime are:

  • Background Gradient effect: a more random background effect I came across and really liked was this one. I think it will ad some more character to the second scene of the video. It is a more floaty and wavy effect that fits the movie.
  • Animated text: in the second scene the man who is testing Officer K has suddenly more emotion in his voice than the first scene. I tried to animatie these sentences in certain ways, but it didn't work out in my final code. To practise the code I've made a codepen for how it could look like which you can see [here]https://codepen.io/davidvanr21/pen/LYbKGzR(). I also wanted to make some sentences zoom in a bit, but that effect only worked out with a :hover in the code which is not very useful for Closed Captions. I really do like this project and I think there can be more done for the ones who are deaf. A good user experience is still a bit far away.

Feedback

Dutch Only

Feedback 12 maart

Vandaag hebben we voor de laatste keer met Darice gesproken. Mijn project stond uiteraard nog een beetje in de stijgers, maar ik heb wel wat kunnen laten zien. De feedback die ik heb gekregen:

  • Omschrijving van achtergrondgeluiden toevoegen (was ik ook al wel van plan, maar nog geen goede manier gevonden)
  • "Fuck off skinn-job" soort van fluisterend visualiseren. Darice was er pas deze week achter gekomen dat dit dus zacht en agressief wordt geuit.

Feedback Vasilis

  • Geluiden nog niet gevisualiseerd, werk dit uit (al wel gedaan, maar niet zichtbaar door grote video)
  • Eerste scene maken is oké. Als het wel lukt eventueel tweede scene er ook bij doen.

Inspiratie die ik kreeg na de feedback-sessie voor mijn project:

  • Hoge piep ook visualiseren (witte achtergrondkleur, past bij het scherpe en felle geluid)
  • Beschrijving van geluiden laten animeren ipv hele video o.i.d. ([HARD ALARM] shaking animation)
  • Spelen met font over video > zwarte achtergrond

  • in lange zinnen? Sommige zinnen zijn nu slecht te lezen
  • 2e scene de teksten onder elkaar zetten > zit meer snelheid in

Feedback 16 maart

Vandaag was ik erg tevreden met het werk dat ik van te voren had gemaakt. Ik kon een compleet beeld geven van de eerste scene die ik in zijn geheel had afgemaakt. Ik was erg tevreden over de details van de clip path die ik had gebruikt en de duidelijke ondertiteling die over de video heen staat. De feedback die ik van Vasilis had gekregen was het volgende:

  • Over het algemeen ging het vooral over het experimentele naar voren laten komen. Vasilis gaf direct aan dat deze versie vooral voor Darice gericht was met een minimalistische look. Ik gaf aan dat ik dit heb ontworpen vanuit een realistisch perspectief en een generieke manier die toe te passen zou zijn tijdens het kijken van Netflix o.i.d. Hierin kan ik nog wat meer experimenteren omdat de opties nu nog wat mager zijn volgens Vasilis. Ik kan vooral de ondertiteling zelf nog wat spannender maken en wat meer uitproberen dan alleen de achtergrondkleur veranderen.

Inspiratie

  • Glitch effect van Renee. Ze maakte gebruik van een GIF file op de background. Zag er interessant uit.
  • Diagonaal background color van Renee zag er ook heel tof uit