- Emma Younan | VID1
During the Visual Interface Design minor, we had a Web Typography course. In this course we had to design a tailor-made closed captions experience for a deaf user. How to enhance the film-watching experience and how to visualize different sounds. We had to design the closed captions for two scenes from the Blade Runner 2049 movie. The whole film watching experience disappears when it is not clearly indicated who is talking or what music is playing in the background. These two things and much more creates different emotions when watching a film. So without it you will miss what a scene is about.
For this kind of assignments it is really important to know your user's identity, the identity of the product (film), and your own identity. Making a combination of those three will help you bring all those identities back into your design. And that will help you be more creative and think about designs that are different from your own style.
I have watched the Blade Runner 2049 movie before this course. And I found it and still find it not that strong in terms of content. If you just read the subtitles without having the sound on, you will find that the conversations are not always that interesting. But the sound effects used in the background are what make it exciting to watch. The entire film is about building tension and setting dark atmospheres.
To get to know Darice a little better, I had a small conversation with her. To ask about her preferences and her daily life, but also to know more about her experience with watching movies. Darice is a front-end developer that likes Netflix, books, writing (blog), cooking, and photography. She likes minimalistic designs with a touch of an accent color (neons).
-
According to Darice, watching a movie is exciting when the sounds are clearly indicated. It is not enough to just have a text that says [music]. Oke, but what kind of music is it?
-
For her Readability is very important. So having a readable color for the closed captions is crucial. Paying attention to the contrast between the background and the text will help to improve the readability of the text.
-
Consistency is very important for Darice when it comes to closed captions. For example when using colors to indicate a character, a type of sound, etc., you have to be consistent by using the same color for the same character all the time. In this way, Darice can recognize the character without having to read the character's name. So the color becomes the character's identity for Darice.
-
When having a background song, Darice would like to have the lyrics shown in the closed captions instead of having [music].
-
One more important insight that I got from the conversation with Darice. Is that it is very important to indicate who or what is making the noise, when the noise is not clearly visible on the screen.
-
Darice is also very used to a few standard rules within closed captions. Like indicating the background music sound between two brackets [..].
I would describe myself to be someone that likes to design with originality in mind. For example adding elements or small details to the design that you wouldn't normally think about. It makes the design more exciting and interesting. I really like animations and moving objects. I have a thing for retro designs. And sometimes I create just crazy things, kipping in mind why I am designing this and for whom.
After talking to Darice, watching the Blade Runner film, and thinking about what I want to do. I started by creating two categories to design for (Typography and Sound animation, and a color use description within these two categories).
Knowing that readability for Darice is very important, distraction in the text is annoying, her preference for minimal design while having the important moments designed in a clear way. For example when the emphasis is placed on something, you can indicate that by different font weights. That is why I decided to use the Brenner font family and because of the many possibilities that this font family has it will be much easier and more efficient when designing the closed captions. Using the Brenner font family will give me more options to experiment with typography than choosing to work with the system fonts. Not all system fonts are easy to read as subtitles, and moreover I find the Brenner family mush better to use as typography for this film because of the many styles that this font family has, opening the opportunity to choose a font that matches in characteristics with a sound or a character in the two Blade Runner scenes.
Typography - First version
In my first version, I used Brenner sans for the subtitles for all characters with different font-weight for each character to make it more clear who is talking at a particular moment.
Another thing that I did with the text is that I positioned the text of the different characters, one at the left side of the screen (the voice talking to officer K), and officer K text at the right side of the screen to make it look like a conversation message between the two. The position of the two character text is based on the scene where officer K is talking through a machine with the person that is testing him.
I also had a bolder font weight for the angry man to indicate that the man was angry and talking in a mean way.
Color use for typography - First version
Having a black background will set the intense mood for the film and the typography used for the closed captions. Based on what the movie style is. Dark, intense, futuristic having lots of lights neon colors blacks and greys. And knowing that Darice likes neon colors. I used a bright blue color for the voice talking through the machine. And a simple white color for the character (officer K), this character is the main character with the most text lines. And because Darice is mostly used to read white text as subtitles, I chose to use a simple white. I also used a red color for the angry man text to indicate his anger.
Feedback Darice - Typography - First version
- Darice found positioning the text didn鈥檛 give a clear view of who was talking at the moment.
- Not having the names of the characters within the text in the first version made Darice a little bit confused about who is talking at a particular moment. She would find it more helpful to have a name indication for the characters.
- When using an icon instead of the name of the characters, Darice would like to have a description of the icon - what does each icon mean.
- To have more clarity between the different characters, she would find it more efficient if I used a different font style for each character. While keeping consistency and readability in mind.
- Darice would also like to have a text by each of the background sounds, to make the sound animation more clear.
- Color use in the typography was clear.
- The last sentence from the first scene is repeated three times by officer K, Darice would like to have that text designed in a way that shows that the sentence is being repeated.
Typography - Second version
After the first feedback session with Darice. I made a couple of changes and started working on my second version.
For the second version of the closed caption typography. I used three different font styles from the Brenner font family. Each character now has its own font style.
The subtitles for officer K, is Brenner sans with a font weight of 250. I decided to have a lighter weight text for officer K to make it match more with how he speaks (in a low neutral tone).
For the voice talking to officer K, I decided to use Brenner mono with a font weight of 400. Giving a mono type to this character will help Darice to understand that this is a voice of someone that is coming from a machine. Mono types are associated with robots and electronics and that is something that Darice also knows. The decision to make this text bolder came from the tone of voice that this person has and its characteristics (mainly being louder and more confident).
The text for the angry man has now a Brenner Regular Italic. I find that this font style works with the angry and mean characteristics of this character. The man is not being angry in a loud way but he is angry in a very mean way.
The text for this version is positioned in the center. From the first feedback Darice found the text positions difficult to read and not clear why the text of different characters is coming from different sides.
To make it more clear for Darice which one of the characters is talking. I designed a small label that indicates whether officer K is talking or the other voices.
And to make the sound animation more understandable. I added extra description text by each background sound. Using the Brenner Display font style in a grey color. To separate this text from the main subtitles text.
The last thing that I did for this version, was making it clear that the last sentence from the first scene was repeated three times. I decided to use animation for that. By making the text appear three times.
Feedback Darice - Typography - Second version
In the second feedback session, Darice had some tips and tops to give the design.
- As a tip, the color used for the sound description text was not really readable for her. That is because of the use of the grey color for that text. She would like a color that has more contrast with the background all the time.
- As for tops, She found that the use of description text by the background sounds very helpful and clear. The subtitle text is readable and it is more clear who is talking now. And she also found that it is now obvious that the last sentence from the first scene is repeated 3 times.
Background sounds play a huge role in setting the mood of the movie and of the watcher.
Sound animation - First version
By making use of the overlapping blue circles I tried to visualize the background sounds as multiple sound waves. The larger the circles, the louder the sound. The speed of the circle's animation indicates how fast the sound is. I chose circles to animate behind the iframe because it goes well with the style of the movie, The bare style of brutalist design building with neon lights that comes almost in each scene. Another reason for using the only one shape (circle) that changes slightly in the form to visualize the sounds, is that Darice likes minimalism in design. So I wanted to create a simple animation that slightly changes through the sounds, to be a background animation for the movie that is consistent and doesn't distract Darice from the movie.
Color use in sound animation - First version
For the continuous background music, I chose to use light blue colors that represent the sound waves. Brighter the blue, higher the sound tone. And the color blue goes well with the movie vibes.
For high tone sounds, I chose a white color. Because white is a pure color that has a high contrast with the black in the background.
The red circles appear when a buzzer alarm sound is invoked. I chose red because it is recognizable that the alarm lights are red. So I used it as a pattern for my design.
Feedback Darice - Sound animation - First version
-
Since the circle animation is not a direct indication of what object is making the sound, it was difficult for Darice to properly understand the sound animation.
-
Using different colors for the circles works good to indicate to different sounds.
Sound animation - Second version
For the second feedback session with Darice I wanted to test the circle animation one more time but supported with a description text. To see if this animation sets the right mood for Darice when supported with a description text.
I used a medium grey color for the supporting sound text.
Feedback Darice - Sound animation - First version
- Darice found that the animation is setting the right mood. And the supporting text makes the animation more understandable for her.
- She found the supporting text color to have a low contrast with the background which makes it hard to read.
- She was interested in the animation and curious about what the latest version will be.
What I already had in the previous versions
Three different font styles from the Brenner font family. Each character now has its own font style. Officer K (Brenner sans - 250), The voice talking to officer K (Brenner mono - 400), and the angry man (Brenner Regular Italic). The text for is positioned in the center.
Small labels by the subtitles that indicate which character is talking.
Grey description text by each background sound (Brenner Display).
Last sentence of the first scene animated to visualise that the sentence is repeated 3 times.
What did I change after the second feedback from Darice
I changed the description text color to a hot pink Color to make the style of the sound description text other than the main subtitles text. I did that to make it more readable for Darice, because she found it not really readable in the last test session.
What I already had in the previous versions
Overlapping blue circles to visualize the background sounds as multiple sound waves. The larger the circles, the louder the sound. The speed of the circle's animation indicates how fast the sound is. Different circle color for different sounds.
What did I change after the second feedback from Darice
To help Darice to visualize the sounds more, I adjusted the iframe and slightly animated it to build up the sound animation by scaling the iframe. I also rotated the iframe when a sound had a vibration effect to it, to give the screen the effect that it is vibrating.
At the beginning of the course I had a good conversation with Darice to get to know her a little bit better, to determine her identity, and to understand what she needs to have a great movie experience. To see what she likes better and what she prefers. And to start thinking about solutions to those problems that she has with the currently closed captions. What I found out is that Darice likes action movies because they have lots of visual effects that can describe the vibe of the movie without having to hear the background sounds and music. For the non-action movies this effect can be created in the closed captions section. A simple text or shape animation to visualize the background sounds the same way the visual effects do in action movies.
I tried to create a completely different experience by ignoring the subtitle design rules. I gave the character names a designed label and didn't use brackets [...] to display the names. I also used movement and animation on the video iframe. To create the vibration feeling some sounds have, and the high and the low notes. Used circle forms to indicate to the sound waves. By using extra scale and shake movments on the iframe I ignored my own convention of wanting to have one shape form for the background sound animation.
By studying the situation and the user (Darice) and also looking at my own identity and the identity of the Blade Runner movie. I mapped out the most important insights that I can use to create a project that combines those three identities. You can find through this documentation when did I use those identities and how.
Having the chance to create whatever you want and be creative as much as you want and experimenting with new fields of design opportunities. Makes adding nonsense really fun. Adding a background animation to a movie is nonsense that could really work in designing for deaf audio. Creating a vibration effect for the iframe is also nonsense. Just ask yourself how many movies use this kind of effect to visualize sounds for those who can not hear it, then you will know why they will think that this is nonsense. Because it is not been done yet and it seems that no one is interested in experimenting with new things. Adding nonsense can lead you to new cool ideas, which you have never could think about. It helps you think out of the box.
- Emma Younan
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent