EPT
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/3f6832878e84_B5DE/TL_Overlay5_hydracooled_sample54.jpg)
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!
