|
United States216 Posts
I am very proud to present one of my latest ventures in live game streaming graphics. I was given the important task of creating Team Liquid Pro’s in game Starcraft 2 overlay. Team Liquid is perhaps the most well known Starcraft eSports entity in the English speaking world, and attracts thousands of viewers daily on their teams multiple live streams. You may find the very kind official announcement here
This overlay is designed to carry over the clean and functional style that is the spirit of Team Liquid’s gameplay first stance in eSports. Below I’ve outlined some design aspects of this overlay. Feel free to glance over my thoughts and submit feed back, if you wish.
Design Sample Youtube Video
Design aspects, challenges, and goals:
Have as little a foot print on the game as possible while maximizing the brand impact.
- A very difficult balance. Its like saying, ‘Shout as loud as possible with out being loud’.
- We accomplish this by having a fairly dark shade to all aspects. Even places where you see highlights are actually quite dark, but only highlight in contrasts to the rest of the UI.
Keep information prominent, but subdued an integrated.
- Using darker fonts, but with thick outlines allow us to have subdue text without having it be too bright
- Using icons and shorthand for links minimizes text
- Adding slight color flares and changes to text make them feel more like visual elements that integrate than text element overlaid across the design
Carry out the brand style and feel
- Using the colors and base design elements allows the style of the brand to carry through
- Having prominent and interesting Logo as well as a dedicated place for the Brand URL and SNS helps impress the brand.
- The basic thought process of the design is. ‘Imagine the Teamliquid Website were cos-playing as Starcraft 2 UI in the Strarcraft Universe’. It sounds ridiculous, but when you are illustrating a complex design you need to have a consistent perspective to fall back to when things get complicated.
Be as innovative as possible to ensure a unique and recognizable design.
- Having a subtle full UI takeover is something quite unique.
- The Team liquid Logo is integrated into the ‘world’ in which the Interface lives, instead of just laid over the design.
- Portholes for ability icons and effects on the buttons that are showing through help our design separate from the pack with getting that little extra polish and quality.
Ensure the players webcam is as large as possible
- Keeping the frame thin allows us to maximize the web space. Also using ‘square’ and linear framing helps the design keep space that could be lost by applying a more curved and beveled design.
Cover the absolute minimum screen space, only as much as to hide the native in game UI’s for each race.
- Clean cuts while minimizing frequent angle shifts were the keys here.
- Smart angles and a simple trim can go a long way.
- Using a hash patterned allowed me to create interest and depth to the outer edges with out adding too many elements to the canvas.
Allow for a tactful ad ticker
- Taking the same punch-out theme employed to display the selection area of the UI and applying it to the ad ticker creates a familiar exception for the viewer, behind the frame there will be very active moving data.
- These are almost like monitors set in the frame.
- Keeping logos to mono color will help in relating the ads to the in-game world
- We hope to add some liquid transitions, giving the design the feel of being some sort of dunk-tank for logos and ads. This strengthens the liquid theming.
Try to evoke a ‘Liquid’ effect
- The entirety of the UI is imbued with muted lights/highlights and subtle gradient shades. If you look closely, you may find that you are looking at a submerged Terran all terrain warmachine, silently it scopes its next target.
- PS. Blizzard, ADD WATER UNITS!
Resolve Timer Issue
- The in game time is not a static sized graphic. The size morphs depending on what time it is. Below 9min 59sec mark it is smaller, but once the additional digit is added the plate for the clock expands.
- Choosing to make the overlay graphic conform to the timer early game is the best case situation. It allows the timer to have the best look during the time in the game that it is most useful.
- Additionally the seconds digit become less important the longer the game moves on, so having those be cut off is the best case scenario when information will be restricted.
Check out TL overlay progress comps Dropbox gallery
Thanks for reading over my design-nerd commentary. Feel free to submit feed back on what design choices you would make!
 
|
Hong Kong9151 Posts
|
Looks great, good job. I'm sorry, I wish I could give your more detailed feedback, but I can't seem to find any flaw. The colors and effects are spot-on, the design looks clean and sharp, I mean, you mentioned "Teamliquid Website cos-playing as Starcraft 2 UI", well I think you nailed it. The integrated TL logo looks quite good too.
|
Magic Woods9326 Posts
I really like it. It doesn't feel so clumsy and odd like most overlays do. ~
|
This looks really good. I don't really watch streams anymore but this has a really smooth and clean look compared to many other overlays I've seen streamers have.
|
Whoa! Super cool! :-D Beautiful, yet efficient. I especially dig the colors and logos. Superbly done!
|
Awesome. Maybe make the corners less edgy / more round.
|
Really awesome job. I especially love the touch where you left the bottom row for spells exposed.
|
Super well polish, way above anything else I've seen!
|
I dunno, I kind of like that sharpness, though maybe it's a bit too jagged? Hmm
Really nice job for sure :O
|
I really like it a lot. It would be really neat if there was the ability to make unit wireframes blue to match the overlay.
|
On November 24 2012 10:32 yokohama wrote:
I really like it a lot. It would be really neat if there was the ability to make unit wireframes blue to match the overlay.
If that were to be implemented, then the only way I can think of doing that is using a transparent blue over the selection area.
|
man now i have to change cuz i CAME OMG THIS OVERLAY IS SOOOOOOO SEXY OMGOMGOMGOMG D:
|
Without a doubt the best overlay I have seen for any team, and any game for that matter. Really well designed!!!
|
|
|
|
|
I love how the razer overlay in the bottom right reveals the very bottom bar so you can see if the streamer has an available (i.e. stim). Great job 
|
United Kingdom1381 Posts
It would be cool if the Team Liquid logo had an occasional shimmer effect like the league icons on battle.net.
|
United States216 Posts
Hey! Thanks for all the really kind comments, everyone! I didn't expect to see such feedback on my nerdy design notes, thanks so much! There are some cool ideas you guys mentioned! Some thing can't be currently done in the way overlays are utilized at this time. There are some ideas I'd like to look into, I'd like to keep the overlays continually progressing forward as much as possible.
Also, I'm really excited about what the expansions of Starcraft II could bring to the steaming and eSports community. An in-game streaming option might free up the possibility for a steaming UI overlay which might allow for more integrated aspects to personalize designs. It will be really interesting to see if options like this open up as eSports moves forward.
Thanks again for all the positive response! much <3!
|
As a frequent TL stream viewer, I really love your design overall. The sponsor/ad section is really neat and non-intrusive. The wide webcam is amazing and much appreciated. You even manage to add race icon and nationality flag as well, which is really cool. The whole design just melts into the background but still feels very TL-like.
The only part I don't like too much is how much it flares up around the in game timer for the flag and race icon, especially because it doesn't seem symmetrical with the right side (with twitter and facebook info). It doesn't help that that section also contributes to the timer problem as well. Overall, it just stands out a bit too much for me, can't help but stare at it during streams sometimes.
That said, I'm sure there are good reasons you did it the way you did, mainly lack of space and adding symmetry. I think the race icon would fit pretty neatly below the minimap pings and to the left of the TL logo, but I really don't know how you could get the flag in somewhere else as well without looking cluttered. And then you have to deal with it being even less symmetrical than now. So I don't know.
In any case, really cool design. Looking forward to seeing it used from all the TL guys more.
|
Looks really well done! Very good job, look forward to seeing it on all the streams ^_^
|
I just realized that this overlay allows you to see the spells/abilities on the very bottom row! I really like that (although some abilities/upgrades won't visible it's still much better than all the other overlays that hide everything).
|
Taiwan619 Posts
Grats on the brush brutha, nice work ;P
|
United States216 Posts
Thanks so much! Quite the honor!
|
On November 24 2012 08:33 Epishade wrote:
This looks really good. I don't really watch streams anymore but this has a really smooth and clean look compared to many other overlays I've seen streamers have.
This! Job well done. If only you released one for the public :D
|
|
|
|
|
|
EPT![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/3f6832878e84_B5DE/TL_Overlay5_hydracooled_sample54.jpg)
