 Raihn United States. November 24 2012 07:51. Posts 149 | Profile Blog # |
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!Last edit: 2012-11-25 12:42:39
  |
| | raihn.wordpress.com - Let me know if you need something! |
|
|
 itsjustatank United States. November 24 2012 08:06. Posts 3114 | Profile Blog # | |
| | <Rekrul> luck is just statistics taken personally | |
|
|
| Al Bundy November 24 2012 08:29. Posts 7173 | Profile # |
| 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. Last edit: 2012-11-24 08:34:38 |
| |
|
| Epoxide Sweden. November 24 2012 08:31. Posts 2929 | Profile Blog # |
| I really like it. It doesn't feel so clumsy and odd like most overlays do. ~ |
| | @TLEpoxide | <@hawaiianpig> we need to throw up the bat signal for sziky <@hawaiianpig> he needs to play soon | |
|
|
| Epishade United States. November 24 2012 08:33. Posts 661 | Profile Blog # |
| 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. |
| | Why do bad things happen to tasty people? |
|
|
 cLAN.Anax United States. November 24 2012 09:20. Posts 1561 | Profile Blog # |
| Whoa! Super cool! :-D Beautiful, yet efficient. I especially dig the colors and logos. Superbly done! |
| | ┬─┬___(ツ)_/¯ 彡┻━┻ I am the 4%. "That Which Is Not Seen.... Let Us Now Try Liberty." -- "You should look into whether your pig not flying qualifies as a disability." |
|
|
| Garnet Vietnam. November 24 2012 09:54. Posts 7460 | Profile Blog # |
| Awesome. Maybe make the corners less edgy / more round. |
| | Life's too short to be miserable. | |
|
|
| shizaep Canada. November 24 2012 09:57. Posts 1093 | Profile Blog # |
| Really awesome job. I especially love the touch where you left the bottom row for spells exposed. |
| | You mean I just write stuff here and other people can see it? |
|
|
| Peekay.switch Canada. November 24 2012 10:01. Posts 285 | Profile Blog # |
| Super well polish, way above anything else I've seen! |
|
|
| Aerisky United States. November 24 2012 10:07. Posts 9248 | Profile Blog # |
I dunno, I kind of like that sharpness, though maybe it's a bit too jagged? Hmm
Really nice job for sure :O |
| | "It has always been in my observation of human nature, that a man who has any good reason to believe in himself never flourishes himself before the faces of other people in order that they may believe in him." |
|
|
| yokohama Japan. November 24 2012 10:32. Posts 856 | Profile # |
| 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. |
| | I hope the weather holds, but you don't need the sun to make you shine. |
|
|
| Antylamon United States. November 24 2012 11:12. Posts 1373 | Profile # |
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. |
|
|
| WikidSik Canada. November 24 2012 14:15. Posts 282 | Profile Blog # |
| man now i have to change cuz i CAME OMG THIS OVERLAY IS SOOOOOOO SEXY OMGOMGOMGOMG D: |
| | "Like the number J" - Day[9]. BitterDam and Tastosis best casters ever! |
|
|
| Ziken India. November 24 2012 17:30. Posts 991 | Profile # |
| Without a doubt the best overlay I have seen for any team, and any game for that matter. Really well designed!!! |
| | Every misfortune is a blessing in disguise. |
|
|
| Vestrel Canada. November 24 2012 17:53. Posts 266 | Profile Blog # | |
|
|
| Zerg.Zilla Hungary. November 24 2012 19:13. Posts 2253 | Profile # | |
| | (•_•) ( •_•)>⌐■-■ (⌐■_■) ~Keep calm and inject Larva~ |
|
|
| Grobyc Canada. November 24 2012 23:48. Posts 16976 | Profile Blog # |
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  |
| |
|
| iHirO United Kingdom. November 25 2012 01:44. Posts 308 | Profile Blog # |
| It would be cool if the Team Liquid logo had an occasional shimmer effect like the league icons on battle.net. |
| | This is for all you new people: I only have one rule. Everyone fights. No one quits. You don't do your job, I'll shoot you myself. You get me? | |
|
|
| Raihn United States. November 25 2012 12:38. Posts 149 | Profile Blog # |
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! |
| | raihn.wordpress.com - Let me know if you need something! |
|
|
| geno United States. November 25 2012 15:46. Posts 1359 | Profile Blog # |
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.Last edit: 2012-11-25 15:47:32 |
| |
|
| 1 2 Next All |
|
Store
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/3f6832878e84_B5DE/TL_Overlay5_hydracooled_sample54.jpg)
