TERIPPERNFROSTY STREAM

DESIGN

GAMING LIVESTREAMER

TeripperNFrosty are a pair of gaming youtubers and streamers who asked me to develop some overlays and designs for their twitch.tv stream. This includes overlays that would be displayed over games, panels for links and a schedule element.

the stream



Offline Image

Twitch allows for channels to have a image in place of the stream video when the channel is not live-streaming. I was asked to create a simple brand image that would show this and this is what I made for that. This ended up also being used as a banner for the top of their page.

Panels



I created a number of panels for below the stream. These panels serve the purpose of acting as links or headers for information. Some are links to external websites from twitch.tv, such as youtube or a donation link, others act as links to the schedule.

Overlays

Overlay 1

This was the main part of this project. I was to create an overlay that could be placed over games and the cameras of the streamer and fit with the brand. Initially I developed this as the stream would contain 2 cameras and needed some extra boxes such as the one in the top right to hold donator information.
However, this overlay took up a lot of space and would cover up parts of many games UI and so we discussed it and decided upon slimming it down and removing some aspects of the overlay.

Overlay 2

This overlay was more on-brand and slimmed down in places with less clutter. Overall a step in the right direction the music bar on the bottom left was added as a feature on the stream during my creation of these and I was asked to include it in the overlay. I decided to make the background be transparent so that it wouldn't cover game information but would make it easier to read the white-text that would be placed on it.

Overlay 3

I was asked to create a version with just one of the streamers and without the donation-goal bar that is present at the top of the stream. This design is far more simple but still conveys everything it needs to.

Example of how the overlay looks



Schedule

I was asked to create a visually appealing schedule for the stream which would show off the days and times that the stream would be going live for the viewers so that the stream wouldn't have to rely on the notifications.



Alert Animation

This is a quick mockup for an idea that they wanted me to test but ended up not amounting to anything. I created a quick example for how the stream may have wanted to make alerts appear.

The Stream

Click the stream below to have a look at how the stream-page looks, or click the youtube link to watch some of the examples of how the overlays are used from the Loading Dice youtube channel.