The making of Flussonic website layouts

Overview• Process

Studying the existing website of the company.

erlyvideo process now

Looking at competitors’ websites.

erlyvideo process competitors

Understanding that almost all of them have complex diagrams and long application forms.

erlyvideo process schemes

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

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

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

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

Art director: Now this looks interesting.

Elaborating, cleaning up the graphics.

erlyvideo process vol4

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

Working on animation.

erlyvideo process animation

Drawing internal pages.

erlyvideo process pages

Meanwhile, the website is being actively assembled. Watching over the process and fixing bugs.

erlyvideo process layout

Done.