Visual Narrative || Interstitials | Week One

Started the research for this project by looking at the MTV interstitials and some of the other artists that were on the list. Nothing really inspired me yet, so I decided to look on Vimeo instead since it’s where most artistic videos are uploaded. I looked under the staff picks section and found a lot of videos that interested me: https://vimeo.com/album/5097437

I then looked at my Pinterest boards, and through looking through those images other ideas formed for the interstitials.

My Ten Interstitial Ideas:
1. GIFs I see throughout my day
2. Aerial satellite images of changing Qatar neighborhoods
3. Glitched photos of Mars or Moon (panning over the satellite photos)
4. Video footage of what’s outside the car window of my route from home to uni
5. Video of roofs around the places I usually spend my time in: our house, my sister’s house, my grandma’s house and uni
6. Still video shots of my neighborhood at night
7. Animation of colorful geometric abstract shapes animations
8. Sea of Arabic type that moves slowly with words floating up to write out a sentence
9. Vibrating abstract lines created with processing
10. Illustrations of phones (showing the progress and evolution of the tech)

I choose to go ahead with the idea of Aerial Moon footage edited with filters and effects from Premiere (like glitches) and syncing the movements with the music. I was most interested in this idea for several reasons:

  1. I love space and the moon and would like to explore why I love it visually through this video
  2. I never experimented with glitching video before, good opportunity for me to explore
  3. The video will hold three levels of “stories”:
    – First Level: the process of making the video
    – Second Level: the narrative of the beauty of the moon’s surface
    – Third Level: the history of what happened on the moon (moon landing and geologically)
  4. The aesthetic of the video will go well with the Hekayat tasmeem branding

I then started looking for footage of the moon and found this 4K footage from NASA of a tour of the moon. I then found another link to the video that allows you to download the original footage, and it was public domain so I could use it for my project: https://svs.gsfc.nasa.gov/4619

I looked into glitching effects on Premiere and found this plugin that had many effects I was looking for, and I downloaded the trial to play with: https://www.redgiant.com/universe/

I then started to look for music that could work from SoundCloud. I narrowed down the choices to ones that had a beat that would create an interesting pace for the video: https://soundcloud.com/hind-al-saad-1/sets/moon-2
I downloaded three and cropped the sound to 30 seconds, and continued thinking about the pace of the editing, and the how often the tempos changed in that 30 seconds and I choose Lunar Vision.

Advertisements

Visual Narrative || Zine Project | Week Three

After realizing white paper achieved the look I was going for better — pops of yellow — I started planning my zine.

So I folded a5’s down to make the spreads and started to add where I wanted each article, I knew I wanted the feature to start in the middle, which gave a limit to where the other articles started and ended:

I struggled at first when I was trying to figure out what kind of visuals I wanted to add. Then I noticed that others used the narrative of the articles to guide the visuals. So I looked at my text and started to plan what kind of visuals I wanted on the page and the accompanying texts — this helped me organize my zine better and have an idea on how the pacing was going and the balance between diverse yet consistent visuals that support the text.

After that I started to find and make the images that went on most pages, some of the images were changed because as I was making other ideas and happy accidents took precedent to the plan, so I was happy that I didn’t plan it fully, but kept enough room for experiments that came up through the making.

I also edited all the images I used to be monotone and consistent, but they were still diverse because they were showing different things, so some I just used the monotone version, some I printed out and played with on the scanner to further distort the image and create new textures.

Some of the initial spreads – previous versions:

Student Critique Feedback: from Maryam, Noor, and Sara
Appeal:

– Audience ID:
Clear, anyone who likes yellow, Noor was surprised that it looked sophisticated even though it was yellow – so it could appeal to others who want to see if yellow can be pulled off

– Typography:
1. Change type treatment for songs – the verses layout show it’s a song more, maybe start with it
2. Like the organicness of type cutouts
3. Like how the type cutouts stack
4. Liked the highlighted words
5. Likes how the type stays white for the song – suggestion, keep it the same for all of it, yellow only added to imagery not type

– Images / Treatment:
1. Music notes image, add yellow by adding a transparent yellow sheet or highlighting the words
2. Add a wash of yellow to music notes page to keep consistency with rest of zine

– Legibility/Readability:
Clear

Pacing:
– Interest:
1. Each page is more interesting because of different styles
2. The small yellow pops of color added a sophistication to yellow

– Highlights:
1. Page with small yellow page peaking in – could add dimension by not gluing it all down, so when it’s scanned shadows appear
2. Page with yellow peeking through was a highlight

– Boring:
The ripped pages are too repetitive, maybe reduce the amount it happens

Check Sections:
– Articles:
Like the overall pace if it – notes above
– Feature:
Make the paper yellow – the main part
– Credits:
Clear

Overall, the process of making the zine physically was harder than I expected, and required more planning beforehand than other publication projects, because there were a lot of pieces that you needed to manage and you had to make sure all the time that the process is done right — once it’s on the parent sheet it’s hard to change it a lot.

Visual Narrative || Zine Project | Week Two

While I was looking for images that I can use on Pinterest, I came across an article that was pinned that talked about “Gen Z Yellow”. I opened it and discovered that this new generation’s color is Yellow, which gave my topic a bigger context – since it’s a trend that is happening at a larger scale than just someone’s favorite color is Yellow.

After collecting all the yellow images I realized that I actually prefer when yellow is used as a pop of color more often than when it’s in an abundance. So I changed my direction a bit and started to look for images that I can either add yellow to, or already had yellow as a pop of color. So I tweaked my idea to be zines that explore how yellow can look good with every color. Pinterest board: https://www.pinterest.com/hindalsaad/yellow-zine-photos/

I was overwhelmed by the number of possibilities that I could use for the zine and the amount that I had to cover with how yellow looks with all the colors, that I felt stuck on what to do. So I decided to add limitations to myself to help.

The first thing I tried was limiting it to flowers, so I got multiple colors of flowers and started scanning them. Some of the experiments looked great, but when I printed them out the colors weren’t as good, and I couldn’t find a way to create a whole zine with them. These were the experimental flower scans:

So I decided to go back to my inspiration and add more limitations so the zine felt well thought out and cohesive. I decided that exploring yellow with all the colors was too much content for one zine – so I thought that would be the whole idea, but for this issue, it would be an intro to yellow. And I decided I wanted to focus on making simple forms so people notice the color and not just the content of the photos – so lines, abstract forms, textures and occasionally line drawings.

When I started experimenting, I tried making my zine on yellow pages, to see if it would still feel too much, which it kind of did feel that way – especially if that approach was for the whole zine. So I tested using yellow in a controlled amount on white paper which worked much better.

These are the experiments:

Visual Narrative || The Zine Project |Week One

For my subgenres that I was a fan of, I decided to move away from the usual tv shows and movies type of fans, and I decided to explore what I was a fan of visually so that I can explore that more through the zine.

So I came up with the sea, how yellow became my favorite color two years ago, and how I’m always interested in shadows – specifically the ones architecture creates. I ended up choosing Yellow because it was the one I was most interested in, and I could incorporate the shadows through the imagery I find or use.

So I started to research a bit more into zines, and I found this article from Mental Floss that gave A Brief History of Zines that was more detailed than the video we saw in class, and it was interesting to read about how the genres evolved over time, and how technology helped it become more popular.

Then I found this article on the Issuu blog that talked about the difference between a zine and a magazine, and through that website, I found digital versions of zines, with different visual styles (like entropy: a zine), so it can be a good resource to come back to later for more inspiration.

I also found two books from the VCUQ library website that sound very interesting, that I’ll go check out when I get back to school. One is called Make a zine! : when words and graphics collide By Bill Brent Joe Biel, the other is called Stolen sharpie revolution 2: a DIY zine resource for zines and zine culture by Alex Wrekk.

I then started to look for text about yellow. I found multiple articles about the psychological meaning of the color yellow:

  1. https://www.livescience.com/34105-favorite-colors.html
    (5-6% of people’s favorite color is yellow)
  2. https://www.psychologytoday.com/blog/digital-leaders/201106/what-does-the-color-you-choose-say-about-you
  3. https://www.bourncreative.com/meaning-of-the-color-yellow/
  4. http://www.sensationalcolor.com/color-meaning/color-meaning-symbolism-psychology/all-about-the-color-yellow-4297
  5. https://www.verywellmind.com/the-color-psychology-of-yellow-2795823
  6. https://www.colorpsychology.org/yellow/
  7. http://psychologia.co/personality-color-yellow/
  8. https://www.bustle.com/articles/63760-what-your-favorite-color-says-about-you-because-color-psychology-is-a-real-ish-thing

I found this blog post about a person writing why yellow is their favorite color: https://www.theodysseyonline.com/why-love-yellow

I then found articles about how/why famous Artists used yellow:

  1. https://www.artistsnetwork.com/art-mediums/oil-painting/van-goghs-yellow/
  2. http://blog.vangoghgallery.com/index.php/en/2012/08/20/van-goghs-love-of-yellow/
  3. https://www.vangoghmuseum.nl/en/125-questions/questions-and-answers/question-7-of-125 (Why is yellow so prominent in Van Gogh’s paintings?)
  4. https://www.artsy.net/article/the-art-genome-project-a-brief-history-of-color-in-art (Vincent van Gogh also painted his starry nights and sunflowers with this vivid and joyful hue. “Oh yes! He loved yellow, did good Vincent, the painter from Holland, gleams of sunlight warming his soul, which detested fog,” wrote the painter Paul Gauguin of his friend and artistic companion)

And here is the Pinterest board I started to collect images and inspiration for the zine’s visuals, layout, and format.

Visual Narrative || Kinetic Type | Final Video

  • The typeface used is condensed and has round edges to emulate the characteristics of the Stonehenge – the setting of the speech.
  • Used the same typeface throughout the video, to stay consistent with the one voice that was speaking.
  • Changed the type size/italicised/added texture or effect to certain parts to emphasize their importance, or to differentiate how the speaker was enunciating the words.
  • The noise effect was added to visualize how the speech was being transmitted through a speaker and had a bit of a distorted effect.
  • Effects were the main tool used to add movement to the type – used them to visualize the words or the sort of movement that matched the content of what was being said.

Visual Narrative || Kinetic Type | Week Three

I continued my process of using the storyboard as a loose plan and adapting it to create the most appropriate animation that translates the sound to movements the best. I sometimes create multiple options and then play them back to back to compare and select the one that captures the movement the best, sometimes I choose the animation that embodies the background sound effects the best, so, for example, the way the animation fades would visualize the sound effect that is heard.

For the second scene in the video, the “Stonehenge” scene, I added texture to the word, because the setting for that scene was the Stonehenge, and by adding something to it, I emphasized its importance. However, the typeface I was using for the video, didn’t have a font in the same family with a texture. I tried using this typeface (typeface a), which looked like the Stonehenge because it was made of blocks, but it looked completely out of sync with the rest of the video, and I couldn’t use it anywhere else to not make it an anomaly. So I tried to find a typeface with a texture that looked like the typeface I used for the rest. I found one that was close enough (typeface b), but it still had different characteristics and looked a bit off when you saw the whole video.

Screen Shot 2018-02-25 at 5.03.13 PM.png

typeface a

Screen Shot 2018-02-25 at 5.07.25 PM.png

typeface b

So I wanted to edit the typeface I was using for the whole video, Abolition, to make a version with a texture that I could use, I couldn’t just import vector files because I was using a text animation preset that only works with type. So after experimenting with creating a variety of textures to try and find the perfect one, I created a typeface in Glyphs and installed it, so that I could use the texture version I created, and the animation preset still worked.

Screen Shot 2018-02-25 at 5.08.02 PM.png

Screen Shot 2018-02-25 at 5.07.38 PM.png

Screen Shot 2018-02-25 at 5.25.40 PM.png

One of the feedback the professors gave me was to add simple illustrations of the Stonehenge over the word “Stonehenge”. However after I tried it, and it looked too cliche, and I felt like I was saying the same thing three times (technically four), since the type, texture, (and sound) said it, and adding illustrations felt like too much.

Screen Shot 2018-02-25 at 5.03.31 PM.png

Another feedback I got was to treat the word Pandorica differently since it’s the main subject of the monologue. The professors suggested I change its color. I changed it to a mint green (the color of the Pandorica). However because the rest of the text is white, the contrast of white on navy was stronger than the mint on navy, so it didn’t give it the same importance. As I was playing with the effects, I found one called “glow”, and it worked really well for the word because the Pandorica has a glow in the show.

Screen Shot 2018-02-25 at 5.29.29 PM.png

Screen Shot 2018-02-25 at 5.28.28 PM.png

 

Visual Narrative || Kinetic Type | Week Two

I wasn’t expecting that I would be following the storyboard a hundred percent, but I did think that the basic skeleton of the plan was going to stay the same. However, that proved to be wrong. In some cases, it did stay the same, but mostly the plan changed completely for several reasons:

  1. The type arrangement didn’t look as good in reality
  2. The text was too much to fit it all onto one screen
  3. The movement didn’t pan out as expected
  4. I realised there were many more effects that I didn’t consider because I couldn’t imagine animating them myself, but when I found the animation presets, it really opened the door for more experimentations, and the use of more dynamic effects, that really captured the movements that conveyed what was being said by the monologue.

For Example:

IMG_1720 2.jpg

For the “Hello Stonehenge”, I found the typographic composition didn’t really work with the animation I planned. So I divided them into two screens. For the “Hello”, I experimented with the presets until I found an effect that fit the sound:

Screen Shot 2018-02-17 at 2.41.08 PM.png    Screen Shot 2018-02-17 at 2.41.20 PM.png

For the “Stonehenge”, I found a preset that did what I wanted the word to do, drop in:

Screen Shot 2018-02-17 at 2.41.28 PM.png    Screen Shot 2018-02-17 at 2.41.34 PM.png

IMG_1720.jpg

For the next part, I changed the composition, because it was too short for the first part to appear in the middle, then move up. I used the same effect of “pulling”, but instead of pulling the whole sentence, I just pulled up the word. Also, I made each word appear as it’s being said so that the viewer doesn’t read ahead.

Screen Shot 2018-02-17 at 2.59.58 PM.png   Screen Shot 2018-02-17 at 3.00.06 PM.png

Screen Shot 2018-02-17 at 3.00.18 PM.png  Screen Shot 2018-02-17 at 3.04.47 PM.png

IMG_1720 3.jpg

For this part, I completely changed it, because I found an effect that worked perfectly for it, the flickering scroll:

Screen Shot 2018-02-17 at 3.12.03 PM.png Screen Shot 2018-02-17 at 3.12.11 PM.png

Screen Shot 2018-02-17 at 3.12.26 PM.png Screen Shot 2018-02-17 at 3.12.35 PM.png

IMG_1721.jpg

Here the composition changed because I felt like it was too many words on one screen, so I made each word only appear when it was being said, the effects also changed due to experimentation, like how the “who” disappeared, and how the “HA” shot up:

Screen Shot 2018-02-17 at 3.27.04 PM.png Screen Shot 2018-02-17 at 3.27.11 PM.png Screen Shot 2018-02-17 at 3.27.18 PM.png

Screen Shot 2018-02-17 at 3.27.26 PM.png Screen Shot 2018-02-17 at 3.27.39 PM.png

IMG_1721 2.jpg

Again the composition changed because I felt like it was too many words on one screen, so I made the last sentence appear on a different frame, I animated parts that were planned to just appear due to the new effects I found out about, like how the first sentence is typed out, and how whizzing appears:

Screen Shot 2018-02-17 at 3.38.15 PM.png Screen Shot 2018-02-17 at 3.38.35 PM.png

 

 

Visual Narrative || Kinetic Type | Week One

Research

I found it hard to find something that I was interested in working with from the best speech videos on YouTube, so I decided to look up monologues from my favorite movies and shows directly. I also ran into a problem there because most of them were over two minutes, like the Ferris Bueller opening scene monologue. So I looked into Doctor Who monologues because the Doctor always goes into monologues in important scenes. I found many, and choose my favorite two. I then remembered there was a great scene in the season finale of The Good Place, but when I rewatched it I realized it was too much of a spoiler because it was a huge twist. I also found two monologues from The Martian that fit the one minute mark.

I had to choose between four monologues, two from Doctor Who and two from The Martian. I eliminated one from the Martian (the heating problem scene) because it wasn’t as important as the other, and I eliminated one from Doctor Who (Vincent van Gogh speech) because it was too monotoned. I was then able to choose from the last two because the Doctor Who speech had a lot of variety in the speech (like shouting), that I thought will give me more to work with than The Martian, which I thought would give me more visual cues. And since this was a type-based video, what I can pull from the sound component was more important.

Doctor Who – The Pandorica Speech
HELLO STONEHENGE!! Who takes The Pandorica takes the universe! But, bad news, everyone — cause guess who!! Ha! Except, you lot, you’re all…whizzing about…it’s really VERY distracting, could you all just stay still for a minute, because I!!! AM!!! TALKING!!!!! Now: The question of the hour is, who’s got The Pandorica. Answer: I do. Next question! Who’s coming to take it from me? COME ON, *look* at me! *no* plan, *no* backup, *no* weapons worth a damn, OH, and — something else — I. Don’t. Have. Anything TO LOSE. So, if you’re sitting up there in your silly little spaceship with all your…silly…little… guns…and you’ve got any plans on taking The Pandorica TONIGHT, just REMEMBER who’s standing in your way. REMEMBER every black day I ever stopped you, and then, ANNND THEN. — DO the SMART THING…let somebody else try first.”

Hear it here: https://www.youtube.com/watch?v=Pa74e8oAvIM

Storyboard

I listened to the speech multiple times, and separated the sentences where I heard pauses or breaks so that I could divide them into sections:

Screen Shot 2018-02-10 at 1.17.12 PM.png

I also looked at the video and how the angles were shot and how the transitions were cut, to see if I can pull anything from it to use in the video. I also used the enunciations of the Doctor to inform how the words would appear on the screen, in what size and for how long. Here are the sketches of the storyboard:

Starting to Experiment

I first researched what typefaces were used in Doctor Who to see if I can use them in my video, and I found this blog post where they found all the typefaces used for the titles: https://www.creativebloq.com/inspiration/dedicated-fan-identifies-every-doctor-who-typeface

I then kept that in mind when I went to Typekit to find more typefaces that could work for the aesthetic of the show. I found around eight that I thought could work and I tested them out:

I then used the typefaces that I thought worked well with the show’s aesthetic and started to experiment with animating it in AfterEffects:

 

Visual Narrative || Three Posters | Final Posters

Poetic

Pushing Daisies Final Posters_Page_2.jpg

Blue in the show represents death, yellow represents life. So the background is blue and the type is yellow accordingly to signify that the pie maker is back from the “dead” (as in from the canceled show).

Persuasive

Pushing Daisies Final Posters_Page_1.jpg

The quote talks about life and death, so the illustrations I used are symbols of that. The stopwatch is the one-minute countdown of time where you can bring someone back to life and not kill an equal thing in return. The rotten and fresh strawberries represent how the pie maker uses his talent to bring fruit back to life to bake into pies. The beehive represents Chuck (the alive again childhood sweetheart) and the daisies are the symbol of the dead (pushing daisies). The green represents the field/ground where the flowers, strawberries and dead people are.

Pragmatic

Pushing Daisies Final Posters_Page_3.jpg

This poster shows the setting, The Pie Hole, where most of the show takes place, and therefore is the pragmatic one. I edited the colors of the building slightly to be brighter and I changed the ground color to blue; because blue is related to death (and the ground is closer to the graves), and then you move up to the yellow, the color of life in the show.

Overall System:

  • Colors are derived from the show’s set.
  • The number of colors increases in each poster as the level of information increases.
  • Title and date are always in the center bottom area of the poster and are in the color of the least used color of the poster.
  • A balance between simple illustrations and enough detail in bright colors to capture the show’s energy.

Visual Narrative || Three Posters | Week Three

Wednesday’s Final Critique

These were the posters I tiled for the critique. I received feedback from my group and the professors.

Screen Shot 2018-01-30 at 10.08.42 PM.png

Regarding the poetic poster, I asked my group if they thought the green on red for the title doesn’t have enough contrast and they agreed. So I changed it to yellow. Another note they had was why was the “coming to life..” sentence in a different font. I realized then that I kept it that way to match previous versions. So I changed it to the typeface I used for the date and title.

Screen Shot 2018-01-30 at 10.13.35 PM.png

Regarding the pragmatic poster, Law suggested I fix the windows and maybe add brick texture to the wall. I tried the brick texture, but I felt like it added too much detail compared to the other posters, where the lines were simple enough to connect it to the persuasive poster. For the windows, I went back to the source image and recreated the same window instead of simplifying it, which helped make it look more like a window.

Untitled 2_Page_2 2.jpg

The professors also suggested that we add billing credits at the bottom. So I added them to the pragmatic poster since it was practical information. I played with how the sentences broke to create different type compositions. I preferred the last one because it used the same styling as a standard billing credit, so the difference in type size helps the viewer read the information faster.

Screen Shot 2018-01-30 at 10.17.44 PM.png

Regarding the persuasive poster, my group members brought to my attention that the white text would look clearer on the red than on the blue, because the contrast was stronger.

Untitled 2_Page_3 2.jpg

They also made me notice that some of the petals were slightly peeking through causing tension.

Untitled 2_Page_3.jpg