Twitch Redesign
Last Updated on July 26, 2026 by Editorial Team
A nicely done redesign of Twitch streaming page, created and shared by Remco Bakker. Enjoy!
Look closely at this Twitch redesign and you can see the whole anatomy of a live-streaming platform laid out with real intent.
The purple sidebar on the left keeps navigation minimal: search, games, favorites, community, all reduced to simple icons so the eye goes straight to the stream.
The center column is built around the video player itself, with a live badge, match title, and a clean overlay for fullscreen and stats, which tells you this concept was designed specifically around esports and competitive gaming content rather than generic webcam streaming.
Below the player, the channel header for ESL_SC2 mixes a logo, follower count, and tabs for videos, clips, collections, and events, giving the page a magazine-like structure instead of the cluttered info dump you often see on streaming sites.
On the right, the chat panel is restrained and legible, with color-coded usernames, timestamps, and a simple message input, which keeps the social layer readable even when a stream is busy.
This kind of layout is genuinely useful reference for anyone designing a video streaming dashboard, a gaming platform UI, or a live event page where video, community chat, and channel branding all need to sit together without competing for attention.
It works particularly well as a case study for esports sites, community forums built around live content, or any product that needs a persistent chat sidebar next to a primary media player.
Designers building creator platforms, fan communities, or internal streaming tools for events can pull directly from how this concept balances information density with white space.
Adapting the Layout for Your Own Project
If you want to reuse this structure, start by treating the three columns as independent modules: navigation, media plus channel info, and chat.
Swap out the ESL branding, logo, and event imagery for your own channel or client assets, keeping the same proportions so the video player stays the visual anchor.
The dark purple and near-black palette reads as premium and gaming-focused, so if you’re adapting this for a different audience, try testing lighter neutrals or a different accent color while keeping the same contrast relationships between text and background.
Because the chat messages use color to separate usernames from body text, it’s worth maintaining that same color-coding logic if you extend the mock with more sample conversation.
The bottom promo tiles, like the “Suit Up!” and event banners, are a nice reminder to leave room in any streaming layout for sponsor or cross-promotion content without disrupting the primary viewing experience.
Pair this redesign with icon sets for gaming genres, esports team badges, or a bold display typeface for tournament titles if you’re mocking up a full channel page.
It also works well alongside dashboard or analytics UI kits if you’re presenting a broader creator platform concept, since the chat and channel header here can slot naturally into a larger product ecosystem.
