Stream Big
  • Home
  • Team
  • Stream Big
  • About
  • Contact
  • MOMAM6
  • YearofChallenges

Layouts 101 - 10 Steps to a Good Stream Layout

3/22/2015

7 Comments

 
Guest Post - @BradNThings


This article is a basic checklist of what you're looking for in a streaming layout.  Every stream is different. This is not a be-all end-all list of what to do, but this guide is a good way to get you started in the right direction.
1. Maintain proper ratios

Simply put, keep games, webcams, images, fonts, etc. the proper ratio of height x width. Stretching these things never pays out, and you end up sacrificing quality for filling up space.

2. Keep the priority where it belongs

Game feed should be the top priority, webcam (if you have it) being second, and all other info after that. Webcams should typically be on the left, so the game feed is centered, considering chat is on the right.
3. Don't use bright colors

Cool colors (navy, black, and the like) are less attention grabbing than bright colors, which is better if you have negative space to use. Nobody wants to watch eye-blistering hot pink surrounding everything.
4. Try to use a minimal amount of fonts

One or two fonts is fine, but try to keep fonts harmonized so they are not all over the place. Too many fonts and it can become a big distraction! 
5. Be careful with chat overlays

Chat on screen can be useful, but it is easily one of the quickest traps you can fall into. Especially just utilizing Twitch's basic chat without any modification, which is bright white, and not very compact. There are two primary reasons people have chat on screen: for mobile users, and for vods later on.

If you're going to opt into chat on screen, try: using an irc program for your chat. Use a black background with white test, and use this instead of Twitch's default.

6. Try to keep the game feed as the central hub of your stream

Game feed is king so treat it as such. Twitch is a video-game streaming website. When considering your layout, think of the way you would want to watch the gamefeed.

7. If you're putting social media on your overlay, keep it succinct and organized

Ex: If youtube/twitter is the same, you don't need to have your tag written twice. Just have the icons next to the username, and save space in the process. You don't need to have the whole url on screen either, context clues through the icons and usernames will do the job.

8. Avoid green screen on non-16:9 games

It generally looks tacky and out of place. You are not a human in the depths of blackness, or on a layout. You are in a room. Greenscreen in general requires extremely good lighting and camera to be effective, otherwise it looks just like you're trying too hard.
9. Don't tilt anything

Basically, don't over-angle things to make artificial depth - tilting adds no value, at the cost of space and information. This is a bad feature in Xsplit. No. Bad dog. Stop that. 
10. Don't treat your users like idiots

You have a title and a description. Use them too! You don't need your life story, your stream schedule, your lasagna recipe, etc on your main layout when you can use your description or title to do these things.

Examples of Bad Layouts

Anything found on twitter.com/badlayouts will give you the right idea of what not to do!
Examples of Good Layouts
The following layouts have maximum game feed while also supplying non-intrusive information and components that allow the viewer to have a strong experience while having all the knowledge they need, without it being screamed at them.
Picture
twitch.tv/flarerdb
Picture
twitch.tv/vgbootcamp
Picture
twitch.tv/trumpSC
Follow us on Twitter so you get all the latest updates!  @StreamBigNET

About @BradNThings



I do extremely basic streaming layouts for friends (including the GDQ Showcase Races and various speedrunners - like iateyourpie.) I also doing emoticons and sub icons for Twitch broadcasters as well. I also have an Associates in Graphic Design. My stream is twitch.tv/bradnthings, and I have some highlights of my own stuff there. Feel free to ask me any questions or for any advice regarding layouts. If you're interested, we could arrange a commission. ([email protected] and @bradnthings on twitter also!)

 

7 Comments
Copilot
3/22/2015 05:26:06 am

What are some things that one would want to put in a layout, especially for a lower end streamer that might not have much information (like sub counts or donations and the like) to display.

Reply
Brad link
3/25/2015 08:52:16 am

Basic stuff. Game feed, webcam, and whatever. You don't need a bounty of information to have a good layout.

Reply
Zehal
3/24/2015 06:44:05 am

Good work brad

Reply
duckfist
3/24/2015 07:32:44 am

Good read. I enjoy thinking about what makes a good layout - even though I never incorporate many of these elements into my own stream. Keeping the game feed big and preserving aspect ratio of sources are the big ones though.

Reply
Josy
4/3/2015 06:09:06 pm

I have a chat overlay. It is Somewhat opaque, black, and it is easy to read. I stream 16:9 PC games, and sometime it obstructs details in the bottom right and can be difficult to read when things are happening/changing behind the chat box. Is there someway i can move the chat, but still have it look acceptable?

(http://puu.sh/h0Yiq/28ab96435e.jpg) This is just an example of where the chat stays. You can see where it might cause problems if there are maps, or other information that would make having the chat there awkward.

Reply
Crak_Atak
4/13/2015 05:35:21 pm

This one got me really rethinking about how I should go about the layout I stream with. It turns out making a cluttered eye bleeding layout is harder to make than a simple hand drawn layout that doesn't treat my viewers like they are idiots. I have seen some people put gifs, controller inputs, and even actual games that seem like a novelty at glance but I feel take away from the stream depending on their placement. Just make sure it is something both you and your viewers will be happy with (not just you).

Here is one that took me a few minutes to make in paint.net http://i.imgur.com/oWXLnWG.png

Here is what it looks like when I stream http://i.imgur.com/L4TPRoz.png?1

Reply
wakemeup.avi
8/4/2016 01:36:59 am

I spent around an hour beholding the spectacle that is @BadLayouts. FeelsGoodMan

Reply

Your comment will be posted after it is approved.


Leave a Reply.

    Picture

    About The Founder -
    Iateyourpie

    I'm a 32 Year Old Full Time Streamer most known for speedrunning. I love interacting with viewers and helping people reach their goals with streaming!

    Picture
    Picture
    Picture

    Archives

    October 2022
    August 2019
    September 2018
    February 2018
    January 2018
    August 2016
    May 2016
    April 2016
    February 2016
    January 2016
    November 2015
    October 2015
    September 2015
    August 2015
    July 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015

    Categories

    All
    Stats
    The Essentials
    Third Party Programs

    RSS Feed

      Newsletter Sign Up!
      - For blog updates, extra tips, upcoming events -

    Sign Up