As I am currently changing many key aspects of my Apollo project, I think it is time to change how I will express both my written and visual content on both my prototype and website for the Apollo project.
As this project is all about creating a journey through animations, TOV, typography and visual imagery. This means it is key to make everything consistent so no aspect of the project feels off.
TOV
The TOV is relatively easy to manifest as from day one we’ve been creating mood boards and other techniques to acquire the visual feel of our project.
By using a Nelson Normal article which allows us to calculate the four dimensions of the direction of my tone of voice and also using my previous mood boards both visual and typographically, I have come up with four key distinct areas:
- Serious
I want to convey information in a serious and bold manner as the subject is an extremely powerful aspect of human history. I want to contain a sense of historical relativism allowing the audience to engage with the content almost how it felt during that time period. This will be especially true for my titles as I want to convey a bold statement with each one that will capture the audience’s attention.
- Formal
Similarly to how many people remember the dialect by then. I want to mimic a TOV of documents or even people broadcasting via radio. For example, instead of saying “USSR” or “Russia”, I will refer to them as “Moscow”.
- Respectful
I want to talk about the subject in a respectful way, describing the event in monumental events. Additionally, while Russia will be seen as the bad guy of the story, it will be not denounced in any way.
- Enthusiastic
I want to convey a sense of passion and detail in my TOV. This means using exciting words to describe a monumental event such as the take-off, e.g. “As the Saturn V engines exploded, the face of Washington soared into the abyss..”
Typesetting
As Kyle has laid out most of our written content. It is my job to typeset it and transform the narrative into something that is consistent in both visual and written style. It is extremely important that I pay attention to the written content as there is a large emphasis on it for this project.
Structure
As I want my site to be bold and clear, I want to avoid any chaotic layout structure. Not only does this compliment my design but it makes it easier for me to transfer it onto a webpage.
I started on illustrator looking at different ways I can structure the typography. After finding a way to satisfyingly and boldly layout my work by referencing previous mood boards done on my typography, I decided to settle for the simplest layout possible – a one-column structure.
Alignment
Originally, I played around with the alignment, however, as I am only having one column for my content, center aligning and justifying content was the best way to go.
After reading an article by Karen Carps on the ‘Do’s & Don’ts of alignment’ it mentioned that I cannot have a title left aligned while the content is justified.
Overall, I am happy with h the structure and alignment of my content are so far.
Scale
For the sizing/scaling of my text, I have stuck with my original design by creating a bold/big title followed by a relatively smaller body copy. This captures the audience’s attention and makes the scene more impactful.
I decided to use Type-scale to scale and contrast my typography. This is one of my first times actually using this instead of manually and inaccurately scaling like previous times.
For 1920px & up breakpoints, I will be using the following (all other breakpoints will be scaled appropriately)
Main Type Scaling
H1 – 113.75 PX – This is for introduction pages
H2 – 91 PX – This is for titling content
Body – 23.86 PX / Line height – 33.40 PX / Paragraph height – 20 PX
Calculations:
Calculating the line height is relatively simple (140% more than font size)
23.86 PX ( 17.895 PT)
17.895 x 1.4 = 25.053PT = 33.40 pixels
Paragraph height, however, was more difficult to determine as there was limited information on it online, however, I managed to find an Adobe forum giving appropriate dimensions for each type size.
Outcome
Narrative Structure
I’ve often thought about how I would compliment every element in my narrative structure, e.g. how I can make every element (text, animations, visual) all flow together and provide a thoughtful, climatic and narrative-appropriate experience for the user through the use of all elements. As I am limited to a one-column structure, it is hard to get creative by other means. However, I found an extremely effective and favorable formula that prescribes content in a linear sequence. Coincidentally, this is the same formula that is used by one of my artistic inspirations – Johnny Harris, an old Vox employee. Combined with professional animations/videography, this formula makes his videos extremely successful and popular.
Formula = Keynote Technique
We find in practice many narrative journeys such as news channels offer the traditional long context and short visuals. However, this offers a boring and unrememberable experience. However, in Johnny Harris’s videos, we find the opposite. We are greeted with visual anchors that help the audience experience the situation before they are briefly explaining it through context aka audible word – or in my case written word.
A fun and helpful technique that I have done is the keynoting technique, it allows me to structure, arrange and space how I would like to present my visual/contextual information.
The structure above is how I will arrange the visual/written information on my project. Firstly I will introduce the user on the introduction page by displaying a compilation of videos/gifs. These videos will show a various array of visual anchors so the audience can try to create a picture in their minds of what is going on. They will then be greeted by an overview that will help them understand the page/problem. After this it will show a repeat pattern of experience it – understanding it in a more fast-paced manner.
View a Deconstruction of Johnny Harris’s Technique Here
Conclusion
Overall, I think I have demonstrated the narrative structure and TOV both consistently and fluidly. I am satisfied that I have met the original goals of creating a bold, historically relevant and compelling TOV so far through visual, form and literal word. Through many refining and typesetting, I have also created a proportionate and scaled typography form which I think works well with the overall art direction and TOV that my project will convey. Additionally, the keynoting technique has allowed me to create a simple yet effective structure in prescribing an immersive and calculated journey for my users. I will now continue to work on my project on XD.
Articles looked at:
https://www.nngroup.com/articles/tone-of-voice-dimensions/