 | | | |
|---|---|---|---|
 | | | |
| | |
GABE DAWG
MOTION GRAPHICS & REBRANDING
Client
LOGO DESIGN
Ai
Adobe Illustrator CC 2020
BRAND IDENTITY BRIEF & MOOD BOARD
STEP 1. DISCOVER
The channel formed in 2014, and never really had a consistent or well founded design and videography style since. Some videos were of single images, inspiring quotes, or landscapes with voice over. Some were walk and talks through the rural roads of Hawaii. Some were just of Gabe talking in front of a camera for over an hour. What was always consistent, however, was his messaging. In every video he would encapsulate the essence of his channel into four "pillars" for success in life:
1. Stay true to yourself,
2. Walk Your Highest Path,
3. Follow the light in your heart,
4. Fly on the wings of love.
These are what I wanted to base the design on, in a clever way of course. While creating a mood board, I came across a letter 'G' that inspired me to transform the G in the title into a heart.
Gabriel Kalei Bocanegra, rebranded as 'Gabe Dawg', is a personal development YouTube channel.
From there, I could build on the symbolic representation of at least the last two pillars, and somewhere down the line I could then possibly tie in the first two. Once I had this concept, I began creating a design that would make it work. I went through multiple drafts for the shape that would simultaneously form the G and a heart until I arrived at a version that was obvious as both.
I made use of colour to portray the third pillar with a radial gradient of yellow and red, as red is the colour of a heart and yellow is the most commonly used colour of light. I ensured the G would contrast well on both dark and light backgrounds, without drawing too much attention away from what would become the rest of the logo, by landing on a soft mid-toned cinnabar red (#e63f40) and sun yellow (#f9aa0e).
PICTORAL MARK & SYMBOLISM
STEP 2. DESIGN
Once I had the third pillar established with the heart, I wanted to tie in the fourth pillar by adding wings. In an attempt to keep the logo design simple and scalable, I sought after a simplistic wing to reference. I found this reimagining of the iconic Detroit Red Wings logo, and started to compose drafts from there.
The further I got from the initial draft, the closer I came to realizing I could tie in the first two pillars into the wings. Finally, an opportunity for wit presented itself in the design!
The goal for the branding was to encapsulate all four pillars. The first two are symbolized in the space between the wings when the wings are lowered. The space forms the shape of 3 paths, with only one path (the middle path) leading to the heart. The third is symbolized with a yellow glow in the heart, which also forms the 'G' in the logo. The last is symbolized as a heart with wings. The elements are simple and balanced enough to be visible on a small scale.
With the pictoral mark now established, I needed to create a complimentary typography to complete a combination mark. I felt the icon alone wasn't enough to fully establish the brand or convey the letter G, and that the logo would benefit greatly from being fully titled.
I originally explored emphasizing the heart more than the G by placing the heart upright, with the G rotated on an incline. Ultimately, however, I felt it detracted too much from the legibility of the logo, which is more important than the symbolism behind the brand image, and so I positioned the G upright instead. Keeping the letters all white, as well as 'boxed in' with minimal spacing (tracking & leading) and a balance in size between those with and without ascenders (b,d) or tails (g), allowed the rest of the type to not draw away from the G yet still create a visible contrast.
WEB BANNERS
Ps
Adobe Photoshop CC 2020
BANNER BRIEF
STEP 1. DISCOVER
The channel would not have been complete without also designing a banner that could be used across different social media platforms and all the devices that access them. I needed to create a banner image that would complement the logo design along with the content and creator of the channel. The goal was to make it memorable and captivating to help evoke a desire to revisit the page and drive channel viewers to subscribe on YouTube. Much like the logo, I wanted to capture the essence of the channel in the banner design. Many of Gabe's videos emphasized ideas of solitude, meditation, peace, and the beauty of nature.
COMBINATION MARK & COMPOSITION
STEP 3. DELIVER
This use of typography was experimental, since balancing the height of the ascending and descending portions of some letters with the height of the rest meant that, for those letters, the x-height (the height excluding the ascender and tail, or the 'o' portion of letters 'b', 'd' & 'g') would be significantly smaller than the x-height of the other letters ('a', 'e' & 'w'). This seemed to work well in this instance, though, since the x-height of the 'b', 'd' and 'g' balanced in height with the bowl/eye portion of the 'a' and 'e' letters. The shape of the double storey 'a', and the 'e' and 'g' are almost completely identical, only differing in orientation and rotation, which added to the sense of uniformity and unity in the letters and the differentiation from the pictoral mark ('G'). There is some negative space left above the 'b' which could have been filled in if it was capitalized, but I feel that would have impacted the interpretation of the text to be read properly as the name Gabe. The tip of the wing intersects through the counter of the 'd' for added style and appeal. The composition overall I believe is aesthetically pleasing and works well in various applications.
ascender
tail
bowl
eye
'g' x-height
'e' x-height
The following collection of images is the result of a mood board that I worked on before starting the design phase of the banner. I was primarily focused on finding images depicting zen buddhism, taoist philosophy, lush Hawaiian mountains, and starry night skies.
MOOD BOARD
ELEMENTS & SYMBOLISM
STEP 2. DESIGN
I decided to have Gabe meditating alone in nature.
I set the scene at night in order to create better contrast with white, as it occupies the majority of the logo. I felt nighttime would better fit the themes of peace and solitude, and that the addition of stars would benefit the feeling of being in nature alongside the grass and mountainous horizon. Composing all these elements to work well together within the dark lighting was one thing. I also had to make them all work within each of YouTube's Banner specifications.
Youtube Banners provide a unique challenge because their presentation across each device is so different. A single image must work unanimously with tv, web and mobile banner dimensions. Banners appear fullscreen on TV's but narrow and wide on web and mobile platforms.
COMPOSITION & PRESENTATION
STEP 3. DELIVER
I positioned Gabe off to the side to add room for the logo as the featured element, but I needed to ensure that the meditative pose would still be captured in the limited view provided. Luckily, one crossed leg and hand mudra are enough to effectively represent the act of meditation, and both ride along the horizon line which allowed for the entire scene to still be captured in the narrow frames of the web and mobile banners.
The web and mobile banners determined where the horizon should sit on the TV banner, established by the edge of the grass, base of the mountains and of Gabe's seated body, as well as the placement of the logo.
Overall, designing a YouTube banner provided a great opportunity to demonstrate my capability to work within limitations and still produce a desired result.
LOGO ANIMATION
Adobe After Effects CC 2020
Ae
DELIVERABLES:
COMBINATION MARK ANIMATION BRIEF & MOOD BOARD
STEP 1. DISCOVER
With the logo design and channel aesthetic now established, the last component of the package, the video intro and outro animation, was ready to begin.
It was actually extremely difficult to find examples of flying hearts to build a mood board as a reference for aerial movement. With the goal of the intro and outro being to carry forward the channel theme and feeling of peace and calm, this brought an unexpected challenge of having to create a motion that felt fluid and comfortable without many references to guide me. The only fluid example I could find felt too rapid for the channel to use as a reference for the animation. I basically had to "wing it".
COMBINATION MARK ANIMATION PROCESS
STEP 2. DESIGN
Another difficulty arose from questioning how I could bring the text into frame, as well as out of frame, in a creative way. The text didn't have wings to fly in with like the heart did. Eventually I discovered that by lowering the letters at the same depth, velocity, and timing as the heart rose, I could create the illusion of the text being stationary in space relative to the heart and being lowered into frame by following the hearts movements upward.
Next was figuring out how to get the heart to land into position to form the title. I added several quick flaps of the wings and additional elements like feathers falling to make the transition feel more fluid.
COMBINATION MARK ANIMATION & SOUND DESIGN
STEP 3. DELIVER
An important consideration with regards to the duration of the entire animation was the duration that the heart and text would remain stationary together. I needed to know how long it should last for sufficient readability. I decided upon 5 seconds after testing it out with several contacts, which is the same amount of time it takes from the start of the animation for the logo to come together, as well as for all the logo elements to leave the frame.
The last consideration was sound design. Since bird wings flap quickly, they create short and quick bursts of sound that would not synch well with the slower movements of the animated wings. I needed slower, bigger gusts of wind SFX, which drew me into looking for bigger wings, and thus I landed on dragon wings.
On course with the theme, I opted away from music and sought out sounds of nature to help bring the audience into an eased state of sitting, relaxing and listening. The sound of crickets at night is calming to most people, some even use it to help them sleep, and it also complemented the banner well.
This was my first time creating a themed package for a YouTube channel and I learned a lot from it. Towards the beginning of 2021, Gabe decided to delete his thousands of videos and remove his channel from YouTube for personal reasons.
As with almost any video intro, the goal is to also be quick, with an average duration of 10 seconds. Since this conflicted with the goal of maintaining the theme of calm and slow movement, I provided several .mp4 versions of the animation at different levels of zoom to offer different durations ranging from 12 - 20 seconds.
Allowing the logo animation to overlay Gabe's YouTube videos as a .mov file also eliminated any issue with time constraints for the length of the animation, since it wouldn't have to interrupt the video or prevent video content from beginning right from the start.
