Designing UI for a live streaming app: process of making User Interfaces and Logos
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:
I first worked on the colour palette, keeping the basic elements I had decided upon, in mind. I wanted a lot of white space with minimalist elements and no material design. I used a colour palette generator tool to zero down on my palette after a lot of permutations and combinations. Coolors is a great tool that lets you lock certain colours tweak others and nicely visualise that palette. Here is the palette I zeroed in on.
User flow or User stories are important.
Now with my palette all set I first decided to chalk out the basic user flow in the app and also in the process decide what all functionalities I wanted to keep and discard. This helped me better visualise the app in my mind.
A pencil and blank paper and I can draw a new world.
Next came actually designing the screens, that was done using a pencil and some blank pages and after a few hours, I had my basic designs ready in pencil sketches.
This is how it all looked like by now:
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.
The logo saga.
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.
Screens look good, but won’t it be awesome if we can actually see them working in an app. That would show the flow and how the designs flow with the user story, how it looks combined with user interactions and what is the overall experience. Now we obviously won’t go about making the whole app just for that. Not when we have amazing prototyping tools like Marvel and Invision. I chose Invision for this one and here is how it looks.
This prototype brought to you by InVisionAppinvis.io
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 :)