Image for post
Image for post
The logo looks the best ^_^

Designing UI for a live streaming app: process of making User Interfaces and Logos

Rashi Karanpuria
Aug 5, 2017 · 5 min read

I am working on a live streaming Android app, using which one can live stream on their YouTube accounts. To test out the API I first developed the back-end logic of the app using YouTube Live Streaming API and following YouTube WatchMe for Android app as reference. It works well as far as the logic is concerned but the UI looks so bad, no would want to use it. No colour scheme no particular theme, random elements placed anywhere as needed. Obviously, I decided to work on the User Interface. Live streaming is already an uphill task considering the content creator needs to take care of their appearance, expressions, content, light, camera and what not. The least we can do is give them a simple and intuitive app, that is a cakewalk to use. So, here is how I reached the end result.


The colour palette came first:

Image for post
Image for post

User flow or User stories are important.


A pencil and blank paper and I can draw a new world.

This is how it all looked like by now:

Image for post
Image for post
screen sketches for live streaming app

It looked good enough in my head with the colours. It was time to finally make the mocks in digital for the final prototype. I used Inkscape for the task (because I work on Ubuntu). After 3 days of experimenting with colours and changes in the primary designs, we have our first designs ready and look just as planned.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

The logo saga.

Image for post
Image for post

I really like how the logo looks and how the colour palette is working with the look and feel, and is simple and elegant, just how I wanted.

I experimented a lot with the logo because logos are important, kind of like a first impression. It is important that they give a basic understanding before the viewer even knows what the app is about. The triangle in the logo is about video and the wave like elements on top give a feeling of flow or streaming. I started with the key words video, streaming, live, YouTube and decided to go with just two i.e., video and streaming. Next, I just drew around simple elements that gave good visualisations of the key words decided i.e., video and streaming. After I had my elements finalised it was just a simple task of placing them around to get that perfect composition. Initially, the logo was square and the waves on top were overlapping 1/3 rd of the cool grey triangle below. It looked good in theory but the colour palette was too light to make it look good. After moving the waves more towards the top, it looked just right. And the final result is as you see it.


Prototype is the icing on the cake.

And we are done! I would love your reviews on the designs and is there anything that I could have done better? Hit like if you enjoyed the post. Follow me for more on design and development. That’s all folks :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store