Case Studies

Case study: Dynamic Twitch overlay for itmeJP

feature-dynamic

This project came around when I started to put out that I was looking for a web developer to jump on board with LiveSpace, more on that later. What was needed, or rather what we wanted to test out, was how/if we could create a break screen that was both easily customization but also didn’t need to be hosted. At the end of the day it should look good but even more so it should function on the Twitch broadcasters end without having to jump through hoops and for a online service to function. This way we could have full control from start to finish over the product and make it tailor made.

Brief

Simply put a break screen that didn’t hide the game but still showed what game. I added in the social media and the schedule as an added bonus so that was always available without having to update Twitch panels, bots or a website. It should all be self-contained on one page and not have to rely on other elements to function.

The best thing about this was that I got free hands and could set my own limits. I like to work within limits since that often allows for very creative solutions and for a lot of designers too much freedom can actually be a downside and hinder the creative side. Everything you’ll see below comes directly from my design capabilities and ideas for how to make better solutions then the current dynamic overlay providers.

Layout

No moodboard for this since I knew what was needed to get it right from the start. It was all about finding a solution to a problem, a more and more common problem. The problem that I’m talking about is the ever increasing issue of covering the entire screen. Now not to takeaway from the fact that so far the best use have been to give a peek into what the channel is about and show the brand. However plenty of times both big and small designers “abuse” spaces like offline, intro and outro screen as a canvas to throw as much on as possible without thinking about the outcome for the viewer. What I wanted to do with this break screen was to step away from that and let both the game and the brand shine through.

Dynamic Twitch Overlay

itmeJP break screen

At the bottom you have a very simple “lower-third” that shows title of the game and the game itself. I didn’t want this to be something that itmeJP had to open up in a text editor and replace HTML code and save a new image instead I want it to pull from the Twitch API and get the box art and title. That way we could have it auto update whenever itmeJP changed game in the Twitch dashboard, more on the development later.

To the left you’ll see a vertical panel and in that you have social media and a schedule. Since the schedule often changes and even sometimes with short notice it was necessary to make it easy to update and easy to maintain. That was something that I wanted to keep in mind moving forward.

All of this leads to how it all interacts with the game. Most common in break screens is that they go to a full screen break card, not always a bad thing, but in this case we wanted to maintain the game in the background. On top of that it’s something we’ve been kicking around for over a year but never executed on it until now. The whole point here is to still give the viewer something to look at and often there’s slight animations in either the pause menu or the character when you go AFK. All of that will still be shown with this solution and we can get all the vital information to the viewer without any problems.

Development

CSS/HTML

I started by using bootstrap to get a everything aligned correctly. The reason I use bootstrap is since it’s what I’m used to using but I’m considering moving over into Adobe’s new programs to test out their capabilities for these type of mock-ups. I called in a Google web font but the rest was all very simply put together to have something that was functional enough that it easily could be updated.

While it is easy to do schedule changes I also wanted it to be easy to do CSS/HTML changes on my end. This way I easily could change font size, background color/image (I actually did a last minute update by adding a black background with a 0.9 alpha) or even the text “Today’s game”.

Vidar/Sunspots

Let me start by introducing the latest member of the LiveSpace family: Vidar/Sunspots! Sunspots was brought on to solve these type of issues and moving forward will be a big part of LiveSpace latest dynamic overlay side of the business. You’ll get a lot more info on that moving forward in the coming months. But already now get custom dynamic overlays from us so get us through the contact form contact.livespace.se

This is what Sunpots had to say about his process: Planning the implementation of a solution like this comes with a lot of considerations. For a start, Daniel had already made a terrific design, so it was easy to define the specifications. As this project required no live user input, we decided on a solution that’s dependency-free, built completely with client-side code.

As a broadcaster, this frees up your hands; set up your sources once, and configure the schedule(more on that later). Then it’s all ready whenever you’re ready to stream; no need for external software, and lightning-fast loads from disk.

There are two main data sources: Twitch API and the custom schedule system. Twitch API fetching is pretty straightforward. The schedule system on the other hand is built by hand with a custom editing interface.

Dynamic Twitch overlay

Auto updates game and box art

Dynamic Twitch overlay

These type of dynamic Twitch overlay have been very much in it’s infancy. That’s until  now when LiveSpace is going to tackle the issue. We’re not going to go out in full force and create custom dynamic Twitch overlay for both partnered and non-partnered Twitch streamers.

We’re going to use my knowledge in Twitch and with UI/UX design and combine that with Sunposts extensive work in Twitch development and web development to put our stamp on the market. The goal isn’t to only provide a service but to allow you to EVOLVE you stream into what you have in your mind. We want to make that Twitch dream that you have into reality. For more details go to twitch.livespace.se or directly to contact.livespace.se


Ready to EVOLVE your stream with dynamic overlays? I’ve work with both partnered and non-partnered Twitch streamers and done so for over 3 years. For me this is full time and I’m dedicated to my clients and my craft. I do both branding, visual branding and consulting based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away.

Twitch branding and consulting

I’m so happy to have found Sunspots and that we can work together towards the future. Not only our future but to innovate the future for branding and overlays on Twitch. We’re going to usher in a new era that’s my goal at least 😀

There’s nothing that says you can be the innovation that your game or niche needs! If your aim is high even when you miss you’re going to land pretty damn high up!

 

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close