The making of Flussonic website layouts
Studying the existing website of the company.
![erlyvideo process now](erlyvideo-process-now.jpg)
Looking at competitors’ websites.
![erlyvideo process competitors](erlyvideo-process-competitors.jpg)
Understanding that almost all of them have complex diagrams and long application forms.
![erlyvideo process schemes](erlyvideo-process-schemes.jpg)
Searching for an approach. What if we also use a diagram to explain the operation of an IPTV server, but make it as clear and interesting as possible?
![erlyvideo process sketch](erlyvideo-process-sketch.jpg)
Designer: One way to approach this is to build a concept around a full diagram of video streaming processes which will show the functions performed by Flussonic as well as its features and advantages.
![erlyvideo process vol1](erlyvideo-process-vol1.gif)
Art director: The idea with the diagram isn’t bad, but the design is definitely too cyberpunk. It looks like some piece of free software from GitHub. It has to feel like a powerful corporate product backed by competent support service.
Designer: Then here is a minimalist approach with a subtly animated diagram.
![erlyvideo process vol2](erlyvideo-process-vol2.gif)
Art director: Well, it looks clean and emotionless. If I were to compare it to the existing website, I wouldn’t find much improvement. And let’s make it in English right from the start, we’re mostly aiming for international audience anyway.
Designer: Or how about we turn the diagram into a bright graphic block which will introduce main features of the program?
![erlyvideo process vol3](erlyvideo-process-vol3.jpg)
Art director: Now this looks interesting.
Elaborating, cleaning up the graphics.
![erlyvideo process vol4](erlyvideo-process-vol4.jpg)
Assembling a video presentation, showing to the client.
The client likes it, continuing to develop the idea. Getting a list of Flussonic features that need to be on the main page. Creating graphics.
![erlyvideo process features](erlyvideo-process-features.jpg)
Working on animation.
![erlyvideo process animation](erlyvideo-process-animation.jpg)
Drawing internal pages.
![erlyvideo process pages](erlyvideo-process-pages.jpg)
Meanwhile, the website is being actively assembled. Watching over the process and fixing bugs.
![erlyvideo process layout](erlyvideo-process-layout.jpg)
Done.