For the last year I have been experimenting with design for content creators on Twitch, a popular online service used to watch and stream digital video broadcasts. This design experiment was multifaceted and included opportunities for me to design for my own personal portfolio and for two well-established Twitch streamers, Bryno and ItWasMeEio. Each project came with its own set of discoveries, approaches and challenges. 

Designing for myself allowed for a lot more freedom, as I had the opportunity to design from a somewhat blank slate. This meant I needed to develop an entirely new persona and a streaming brand from the ground up.  On the other hand, while working for Bryno, a lot of the design had been done in the past and bore the footprints of his streaming career. As a result, my work mostly involved refreshing previous designs and learning to build upon what already existed. Finally, for ItWasMeEio (a.k.a. Eio), most of the foundation-level design was missing but Eio’s streaming persona was well-established. This meant I had more to work with, using established references and designing with Eio’s persona in mind, instead of designing from a blank slate. 

Many challenges I faced in designing for Twitch centred around designing for a "Gamer Aesthetic". Personally, my design philosophy has always been somewhat minimalist; in essence, I aim to use as little as possible to convey as much as possible. This philosophy is not as common in games media as it is in other media. "Gamer Aesthetic", for the most part, tends to be explosive and over-the-top, and when it comes to streamers their chosen designs tend to start out as over-the-top designs which become tidier as they evolve into an established brand. However, despite this trend to tidy up their designs as they become more established, some brands at their cleanest are still far from being as minimal as established or more corporate brands. From a business perspective this could be seen as less professional, however, I would argue it is more necessary in the games industry to aim for the cleaned-up over-the-top design seen in the more well-crafted "Gamer Aesthetic" than in a minimalist design.

I began working on a banner while concurrently experimenting on improving his current brand identity. However, a difficulty began to arise, not in the design but in how Twitch scales the banner. This made adding information to the banner difficult. Working with Twitch at a normal resolution of 1920x1080, there was a useful space on either side of the "Previously Streamed" boxes that appear on Twitch once the stream is offline. However, once the window is shifted on either axis the Banner shifts and zooms in what feels like an illogical manner. This would choke the workable area cutting off elements. Utilising the space for visual information began to seem like an impossible task. 

I decided to take a closer look at existing Channel Banners on Twitch and noticed some commonalities. Most Banners were Fan Art, professional or commissioned Illustrations, or essentially Pattern designs in the theme of the stream's personality. 

I came to the conclusion that in order to still effectively utilise the spaces for visual information, and in particular a set of social links, I would need to design knowing that the information would get covered. In designing the social links I designed with the idea that if 20% of the link was covered it would still imply that there was more information to be seen, leading to the user uncovering the link by expanding the window, or knowing the social link exists and finding the information in some other way. I achieved this by using rounded rectangles in the relative colours of the social platforms with the Logos of the platform contained in asymmetrical rounded rectangles, that would imply further information could be read to the flat side of the logo container. This is furthered by using the shorthand URL for the platform (e.g. Discord.com).  

I initially questioned the use of the URL over a simple @ tag as I considered the URL redundant in many situations, however with non-partnered Discord servers the Invite link defaults to random letters and numbers. This would also help new users who could be confused by the logos, especially Discord where you join a server instead of the social media links where you are seeking out the individual.

While designing the Banner I was also working on refreshing Brynos brand identity and logo. I had mentioned to Bryno that he should consider making his Twitch Profile Picture a logo to better distinguish himself when it came to appearing on the sidebar of Twitch. 

However he eventually opted against the idea as he preferred to keep the existing portrait. It is common practise for Twitch streamers to use Artwork depicting the channels Personality over the use of a logo. I felt like this was a wasted opportunity initially, however I later began to see it for how much more human it felt to have faces depicting the channel. I was able to utilise this more once I began designing for ItWasMeEio.  

Taking this choice into consideration I decided to forego a small form logo that would suit the profile photo format and began a re-design of a pre-existing logo designed by a late friend of Bryno. I began brainstorming and workshopping some ideas before deciding instead to clean up the pre-existing logo and format it for further future use.

Unfortunately, funding for the designs began to thin out for Bryno and so he asked to put the re-design on hiatus. I continued to workshop ideas in my free time while experimenting with Twitch design. I began to notice motion graphics being used in excellent ways in Twitch design and decided it was finally time to teach myself After Effects. 

I needed a project to work on that would allow me to learn the program as I worked. While watching a particular Bryno stream in which Bryno was met with many technical issues, I felt Bryno could make good use out of a "Technical Difficulties'' screen and felt it would be a perfect project to work on while using it to learn After Effects. 

I had a basic idea in mind to have a title card that flickered a glitched version of the card with space on one side to overlay a Twitch chat element. Later, I decided to add some more elements such as the false "No Input Detected" screen.

In general, a Technical Difficulties screen is completely unnecessary for a Twitch stream. If a streamer is having technical difficulties while live, and feel they must switch scenes, a "Be Right Back" or "Intermission" screen is the common choice and is more than sufficient. But for Bryno technical issues are a common occurrence, unintentionally becoming a part of his persona. Therefore, for Bryno, a specific scene for technical difficulties was more than fitting.

I continued to teach myself After Effects in the following months and at the conclusion of another Bryno stream I felt I would love to see a "slice of life" artwork of the character of Bryno post-stream, a common form of Fan Art seen on Twitch generally used as "Offline" screens or as an "Outro"/"Stream Ending" screen. I decided this would be another good experiment to further teach myself After Effects by making it a minor looping animation. 

Bryno had recently gotten a simple "Stream Ending" screen provided by his "Personal Assistant" that included a slideshow of Fan Art. I did not want to steal the spotlight away from all of the artists that contribute Fan Art and decided it would be an absolute necessity to include a central, prominent slideshow. 

In conceptualising the piece, I wanted to find a way to let the animation loop naturally, but for the slideshow to continue once the animation loops while fitting into the scene and being simple to update and add to. This meant using the slideshow feature, on the common streaming program OBS, with a transparent animation to layer on top of the slideshow.

I created each element of the animation in one illustrator project, organising the elements into specific layers so once I imported the Illustration into After Effects I could easily animate the individual layers where needed and isolate where the transparent areas would go. 

An issue arose as I could not find an easy way to give the animation as a completed scene to a client, which meant the client would have to assemble the scene themselves. Because of this I decided I would make a detailed setup guide for Bryno to use. If I were to make another similar scene I can edit and recycle the same guide, no matter what level of experience the client has with OBS.

Designing for myself meant starting with a blank canvas. Although I had a brand as AaroHeadDesign, using the brand attached to Graphic Design felt as though it would force the channel into being Design-only, which I did not want. My initial plan was to allow myself to feel out a niche on the platform and so I went with my personal username on many other platforms, JoeTheLion, a username derived from a song by David Bowie. 

An interest of mine surrounds the platform VRChat. A Virtual Reality social platform with a large number of streamers. Understanding the VRChat communities directed some design influence, with the main take-away from the platform being the use of an original character as the personality of the channel. The same or similar rules exist on a handful of other categories on Twitch, however this rule is rarely out of place. 

This influenced the design of a character for my channel that would act as the centre of the brand. This also allowed for an experiment in 3D Modelling to create a rigged avatar for use in VRChat or Vtubing, once my experiments led into those areas.

The idea behind the character was based on a lot of Bowie’s musical themes: Immortality, space, the Apocalypse, death, and the future. Therefore, the design would mimic these characteristics. 

I decided to use some long exposure photography I took in Lithuania in 2013 instead of using stock imagery. This would act as a background to a lot of the imagery, colouring the imagery purple to add to the fantastical nature. This later proved wholly unoriginal as there were many creators with similar if not the same themes, however I decided to continue as I had some ideas I wanted to work on. 

I recycled the techniques used for Brynos Twitch banner for myself. However, when designing for myself I noticed an issue with Twitch’s web design. The channel banner gets somewhat overlapped with Twitch’s main body but leaves a “Highlight Colour” to the right of the body, acting as false parallax scrolling with the default Channel Banners. This design choice does not persist if the Channel Banner does not incorporate the Highlight colour. I attempted to incorporate the highlight colour into the banner. However, because of the odd scaling of the banner the “Incorporation” would either take up a large space in the artwork or, more often than not, be covered by the page body. 

For the banner I had designed it felt like there was no easy solution. In future I may revisit the banner and entirely re-design it, utilizing the highlight colour in a natural way.

With the experience gained from Brynos Technical Difficulties screen I wanted to further my skills with another similar motion graphic. It is very common for Twitch streamers to have a Starting Soon screen, a looping intro to play that allows the streamer time to set up and finalise preparations for the stream and which gives the audience time to join before the actual stream begins. Although somewhat unnecessary, as a stream can begin whenever and the viewers will join on their own time, it acts as a great excuse to push more of the persona and the overall theme of the stream. Some use this intro to illustrate an “Entrance” to the stream, others use it to showcase Fan Art and some use it with a “Slice of Life”  illustration. 

Knowing I was still extremely inexperienced with After Effects, I had to keep things simple. Everything bar the “Starting soon...” would be animated using motion paths and rotations,using the same functions to practise and hone it in.

A very useful element seen on many Twitch streams is a 'Notification Overlay'. Commonly on Twitch these are done using a site like StreamElements or StreamLabs. These are great tools to really add personality to a channel, and its inclusion on a stream showcases the importance of the viewer’s contribution to the streamer. Streamers handle this differently although the importance of each notification can depend on the popularity of the streamer. A moderately popular streamer is not going to acknowledge every person that follows as they may have too many over a given period. A very popular streamer may not acknowledge any singular notification and only acknowledge “Sub Bombs” (When a viewer gifts multiple subscriptions in one go). As such they may keep the notifications to a minimum to not interrupt the stream. Smaller streamers may make the notification much larger and give it more focus, sometimes adding a catchphrase to go along with the notification.

Quite often the template notifications provided by StreamElements are very obvious, the common use of them being an animated gif chosen by the streamer with one of the default typeface choices for the text. Knowing how common a choice these notifications are, I wanted to see how far I could take the tool to make something that did not look like the template anymore, while still using the basic template. 

I had some rules I wanted to design by: 

Keep the basic functions of StreamElements, if not the “Advanced” settings. No coding.

The animations must not linger for more than an allotted amount of time. With 'Follow' notifications being no more than 3 seconds, 'Subscriptions' no longer than 5 seconds and 'Donations' under 8 seconds. 

It must stick to the themes outlined by the designed persona: Space, Future, Apocalyptic and abandoned in space. 

I would also make the sound clips from scratch while also keeping it in theme.

I had never touched sound design in the past but felt I had a good idea of what I wanted and hoped I could make something with the tools I had to hand. The end product was achieved with Digital Synthesizer Emulators, some with Google’s Text To Speech and modified in Audacity. Designed to mimic a slowly corrupting Tannoy system from a Shopping centre aboard an abandoned Spacecraft.

When I first discovered ItWasMeEio (Eio) he had been streaming for a year already, but his brand as a streamer was quite lacking. This made sense not to be a priority of his as his viewership was still somewhat low, which feels insufficient for the work he puts into his content and his community. We discussed what he considered were consistent aspects of his persona and the channel's persona. I began workshopping a multitude of logo designs, some including these aspects, others experimenting with more abstract ideas. 

I began designing the logo primarily for use in the Twitch profile photo as it is seen on the sidebar. This meant aiming for an incredibly small scale but still needing to look good at a large scale. Understanding the context of Twitch, I primarily focused the logo design to include some form of portraiture to match the majority of Twitch Profile Photos.

The next piece of Eio’s branding I felt would be useful was a 'stinger transition'. As Eio uses very few OBS scenes, when he does switch scenes a basic fade or slide transition tends to be just less than what is needed to indicate the scene shift. For a streamer who tends to shift perspectives or sources regularly, the addition of a stinger transition would be far too much and would probably be better off using no transitions or the most minimal transitions available, such as a very quick fade. Although a stinger transition would be redundant and over-the-top in most situations, it does act as a good way to inject a little more of the streamers brand. 

I still felt inexperienced with After Effects but I wanted to go out of my comfort zone and learn to animate something much more dynamic than I had previously done. As standard as a bouncing ball animation can be, I felt it would act as a good tool to learn with while matching an aesthetic I had in mind for this stinger transition.

While watching an ItWasMeEio stream in which he mimicked Anime Tropes, an idea came. There needed to be a way for the audience to add to a scene in a thematic way. In this instance I felt the classic Anime trope of falling blossom leaves would work perfectly. I began designing the individual leaves and decided to make them in a pixel art style. This would allow me to shortcut the animation by making it fewer frames per second, and I felt it suited aesthetically. In designing the Pixel Art leafs frames I added what looked like a border around the leaf, a darker coloured stroke around the leaf I felt tied the leaf together better. However it was not until I made a last minute decision to blur the leaves as they fell that the choice to add the stroke made the leaf look badly cut out, making it seem amateurish.

In testing the animation overlaid on gameplay more inspiration hit as I watched a cascading chat “Emote Spam”, a common sight on Twitch in which viewers fill the chat with a set or single Emote. Combined with a StreamElements feature that displays the Emotes from chat over the stream. I felt that users of the Blossom Overlay could also use an Emote of the blossom leaf for viewers to spam. This would fit thematically while also “farming” viewer participation, and add to the animation if the streamer uses the aforementioned StreamElements feature. In the case of ItWasMeEio, Eio had an affinity for a subgenre of music known as Gachi music. One of these songs was fitting for the overlay so I suggested he combine the two, making him a version timed with the music. However, to get it working as a point redeem meant removing that timing.

I began designing for Twitch streamers having seen gaps in design from one streamer to the next, especially with smaller streamers. However, after almost a year of experimentation on the platform it is impossible to say what design is necessary for a successful streamer, as an extremely popular streamer can have absolutely zero branding or design.

Practically every element of my experimentation can be considered redundant in one way or another. Whether it has been made redundant by Twitch integrating their own system that bypasses the need for design, the removal of the design not affecting the function of the stream, or because it exists as a remnant of older broadcasting and has not evolved with the current trends in broadcasting.

However, as the “Gaming Aesthetic” can be seen as over-the-top, I feel that adding in redundancies is well-justified, and can make for some great explorations of design while helping the individual streamer show an original brand identity against the minimalist designs of a more corporate-flooded design world.