Nameless Twitch Design Case Study

CLIENT

Nameless

SCOPE OF WORK

Animation, Stream Design, Emotes/Badges

DESIGNER(S)

Tray, Jack, Ruth

NAMELESS: CUSTOM ANIMATED TWITCH DESIGN

Winter 2018. It was time to announce the big news. VBI was teaming up with another esports legend… an OG founder of the competitive Call of Duty circuit. The man, the myth, the legend, NAMELESS.

Within the professional COD community, ‘Nameless’ is practically a household name (no pun intended). With over 10 years of pro gaming, six 1st-place tournament victories, and a narrow 2nd-place finish in the 2014 COD World Championship, ‘mans got serious game. Throughout his career, dude played on some of the top esports teams in the world, from Evil Geniuses to compLexity Gaming to Luminosity, FaZe Clan, Envy, Curse and more. While his pro gaming days may be behind him, Nameless has found a new home behind the esports booth, providing expert commentary and analysis for Activision Blizzard and the COD World League. To top it all off, his personal Twitch channel is one of the largest in the game, boasting over 85K Followers and a vibrant community of Call of Duty vets & fans.

There was a catch, though. While the Nameless resume was stacked, his stream’s brand design lagged behind. The Nameless Twitch channel was growing rapidly, but his design felt dated and unfocused. His stream graphics lacked a unified brand-look and needed an infusion of energy and momentum. It was time to upgrade to a professional, branded design… one worthy of the distinguished Nameless career. That’s where our team came in.

Over 4 short weeks, our team of stream artists, illustrators, and motion designers cooked up something truly special. A one-of-a-kind, animated design that conveyed the intense and energetic nature of each Nameless broadcast. It was a bold, aggressive look that captured the high-octane esports spirit and Nameless’s professional pedigree. From overlays to animated transition to emotes, it remains one of our proudest designs yet. And we can’t wait to work with Nameless in the future to continue upgrading his brand look.

This Case Study will take you on a tour of the Nameless design, from project kickoff to completion. We’ll show you the creative process that went into each of his stream elements – a window into the VBI design world. As we add new features to the Nameless design, the Case Study will be updated to reflect recent changes. Scroll down to get started.

Nameless Custom Twitch Design

PROJECT OVERVIEW: CUSTOM STREAM ANIMATION

First things first, our team hopped on a round-table call with Nameless, to get a feel for his brand goals and ideal design. Things soon became clear; he was seeking a fresh new revamp for his stream, while retaining the core look and ‘feel’ of his brand. Something clean, vibrant, eye-catching. The details he entrusted to our team, giving us greater creative freedom to dream up the Nameless 2.0 design. In total, the project scope would include:

  • Animated Webcam Frame + Stream Overlays
  • Animated Stream Screens + Offline Screen
  • Animated Stream Transition
  • Custom Twitch Emotes
  • Custom Twitch Panels
  • Social Media Banners + Profile Art

Before rushing into things however, we first needed to analyze the state of Nameless’s branding. This was critical – it would prove the be the foundation of his upcoming design.

Up to this point, the heart of the Nameless brand had been his iconic logo. It’s an electric esports design, featuring sharp angles and lighting bolts, all encompassed in a smooth circle. The interior bolt forms a distinct ‘N’, with the linear patterns growing increasingly more chaotic and jagged towards the tip. Nameless wanted to use the design as inspiration for his upcoming stream graphics, and we were fully onboard. Throughout the project, we would adapt the sharp angles and electric feel of his logo into each subsequent design element. You’ll notice similar patterns replicated in his overlays, screens, and more – each helping to convey an intense, high-energy brand vibe.

Nameless Logo

Another important considerations was to incorporate the classic Nameless colors. Bright, crisp shades of blue form the primary color palette of the Nameless brand, providing a high-energy, electric look that matches his logo. Throughout the project we would make heavy use of blue shades, alternating between light blue, a cool, pure blue, and deep royal blue. We would contrast these blues with a crisp white to convey the vibrant look Nameless was seeking. These whites would provide a clean background, allowing his designs to ‘pop’ into the foreground.

 

When it came to animation, Nameless didn’t want anything over-the-top or grandiose. He was a looking for minimalist, subtle visual effects that would add energy and movement to his design, without distracting viewers away from his gameplay. In particular, he was looking for electric-themed motion design that would match his logo’s iconic lightning bolt. To accomplish this, we incorporated static electricity, sparks, and energy waves into many of his animated screens and overlays. Our animators also featured subtle rotations of the Nameless logo, floating particle effects, and radiating glows to add personality and intensity to the final design.

 

The gameplan was ready; now it was time to get our hands dirty. Our team broke off into separate squads to begin working on their individual projects. Very soon, the new-and-improved Nameless stream design would begin to take shape.

ANIMATED WEBCAM AND STREAM OVERLAYS

First up, Twitch overlay graphics. Like most esports streamers, Nameless wanted his overlays to have a condensed, out-of-the-way feel. Something tight and minimalist, which wouldn’t clutter his layout or interfere with the in-game Call of Duty UI. A ‘simple’ overlay design would also ensure viewers’ eyes are glued to the gameplay, rather than flashy graphics. This is a popular design type for competitive broadcasters, and one our team is well-versed in.

Nameless Webcam Stream Overlays Design

Instead of creating separate overlays for each of his stream elements, we turned his webcam frame into a multi-purposed, interactive hub. This allowed us to contain all relevant stream information within a single overlay, reducing the design scale and simplifying the layout. It’s one of the most dynamic webcam designs we’ve made yet, combining the many elements of Nameless’s live overlay into a clean, streamlined graphic. The remainder of his layout is freed up to focus on the live game feed.

The frame itself is relatively clean and minimalist. A thin border surrounds Nameless’s camera slot, featuring the jagged shapes and sharp angles found in his logo. The frame background contrasts deep blue with clean white, while pulsing glow effects add a subtle, animated look. In the bottom-right corner of the webcam, the iconic Nameless logo rotates slowly, while a revolving carousel displays each of his social media handles.

Just beneath the webcam frame, two separate symbols indicate recent donations and channel subscribers. Text slowly scrolls sideways in a subtle, digital effect. Baked into the webcam in the bottom-left corner is a hashtag (#) symbol representing total sub-count, a personal request from Nameless. Lastly, above the webcam you’ll notice two additional indicators listing sub-train information (timer and count).

It’s an integrated, innovative look that fit Nameless’s channel perfectly. Less can often be more in the design world, as this case certainly demonstrates.

ANIMATED STREAM SCREENS + INTERMISSION SCREEN

Our next challenge: a bundle of iconic Twitch stream screens, branded for the Nameless channel. In total, our stream designers and animators would team up on 5 designs, including:

  • 3 x Animated Stream Screens (Stream Starting, Stream Ending, Be Right Back)
  • Animated Intermission Screen
  • Offline Screen

For our stream artists, the goal was to capture Nameless’s brand in a single image. A design that combined his electric personality, competitive nature, and dual esports-Twitch career. The screen composition clearly juxtaposes the two; the left side of the view highlights the Nameless logo (a symbol of his streaming brand), displayed in cool blue over a clean white background. The right side features an IRL photo of Nameless on the esports stage – spotlighting his extensive pro career. The color scheme has reversed, now featuring white text over a blue background. Sharp, jagged lighting bolts cut the screen into two, mimicking the patterns and shapes found in his logo.

Our animators tied the design together with some subtle visual effects. The Nameless logo rotates forward, driving up energy and adding horizontal movement to the design. Particle effects float upwards on a strong breeze, while bright electric currents burst across the screen.

NAMELESS Custom Twitch Stream Screen Design

The Offline Screen features a similar design pattern, but with inverted colors and different background images. A new IRL photo features Nameless in the broadcasting / commentator booth, highlighting another side of his esports career. It was important for us to keep the Offline Screen’s look and style similar to his other designs, but with noticeable differences to indicate the change in activities.

The final piece of the puzzle was Nameless’s new Intermission Screen, the shining jewel of our Nameless presentation. It’s a unique, engaging look combining all of the elements of his live overlay, game feed, and branding into a single view. In addition to his live game feed and cam box, a separate feed displays his community chat. Along the border of these boxes, bright energy currents slowly revolve around the frame. Meanwhile, stream information (subs, donos, etc) is displayed in a scrolling ticker on the top-right corner of the view. The alternate Nameless logotype is displayed prominently at the top of the view, as animated electric charges surge through the iconic lightning bolt outline.

NAMELESS Custom Twitch Intermission Screen Design

The final products are energetic and aggressive, the perfect mixture for a competitive esports streamer like Nameless. Tight, condensed layouts and subtle animations provide the upbeat, branded look he was looking for.

ANIMATED STREAM TRANSITION

From our early calls with Nameless, one of his most main requests was a custom stream ‘stinger’ animation for his Twitch channel. A snappy, adrenaline pumping transition scene that could jump him between scenes in style. Nothing too flashy, but tight, branded motion design that captured his action-oriented, competitive spirit.

To tie the design into the Nameless brand, we once again featured his iconic logo front-and-center. As the transition triggers, his logo spins into view, echoing the rotation featured in his overlay animation. As it reaches mid-screen the logo quickly comes to a stop, contrasting sharply over a clean white background. Suddenly, it reverses direction and comes spinning towards the camera for an energetic, 3D look.

Overall, the quick circular motion and 3D effects are designed to ramp up momentum and intensity. At just under 2 seconds it’s a tight animation that balances speed with simplicity. A one-of-a-kind look for a one-of-a-kind entertainer.

CUSTOM TWITCH EMOTES

Don’t forget the emotes! As part of his commission, Nameless requested a bundle of branded emotes for his Twitch chat. 14 in particular. Our ace squad of illustrators sharpened their pencils (metaphorically) and got to work.

This was an opportunity for our team to showcase the lighter side of Nameless’s online persona. Because headshots and killstreaks aside, Nameless puts on a show during his broadcasts with a witty, comical personality. Each of his emotes highlights the man behind the monitor, personal reflections and shared experiences with his community. They represent favorite on-air moments, memes, Call of Duty references, and inside jokes from within the Nameless community. If you’re a long-time follower of his channel, you’ll recognize more than a few.

Nameless Custom Twitch Emotes Design

Our illustrators designed each emote using a bright, light-hearted manner, to drive chat engagement and positive vibes. Chibi, cartoony styling provides a fresh, one-of-a-kind look unique to his channel. Where possible, we tried to incorporate the iconic shades of blue so common throughout Nameless’s personal branding.

CUSTOM TWITCH PANELS

Meanwhile, our stream designers where cooking up specialty Twitch panels for the Nameless channel. As with most big streamers, Nameless wanted a clean, simple look for his Twitch profile. Nothing too grandiose, but a tight, branded look that was unique to his channel.

Nameless Custom Twitch Panels

In the panel backgrounds, clean white contrasts with bright blue to drive an immediate connection with the Nameless branding. Jagged, sharp angles once again arc across the design, adding an energetic, electric feel. Each panel features a unique symbol for easy identification.

SOCIAL MEDIA BANNERS & PROFILE ART

The final piece of the puzzle. To tie the whole design together, Nameless needed some snazzy new banners for his social media channels and Twitch profile. An electric esports look that captured the aggressive, professional look he was after.

Nameless Custom Social Media Profile Art

The final bundle contains unique designs for his Twitch, Twitter, and YouTube channels, each optimized for their respective platform. On one side, the Nameless logo is featured over a white background. To the right, a faded IRL photo from the esports arena basks in a hazy blue glow. The dual-nature of the design helps juxtapose his personal branding with his prestigious esport career.

View More Case Studies

CouRageJD Twitch Design Case Study

View

FaZe Yelo Twitch Design Case Study

View

Nadeshot Twitch Design Case Study

View

FaZe Attach Twitch Design Case Study

View

GoldGlove Twitch Design Case Study

View

Nameless Twitch Design Case Study

View

Hogman Twitch Design Case Study

View

Giveaway Promotional Design

View

ORDER YOUR CUSTOM DESIGN

Looking to work with us? Click below and tell us more about your stream design project. Your design could be featured here next!