The making of the Brain4Net interface mock-ups

Overview• Process

Discussing platform structure with the client, defining user roles and functions. Drawing a chart of interface components and using it to build a prototype.

b4n process 2

Starting to work on the specifics. Looking at existing network management interfaces.

b4n process 3

Sketching the control panel. Deciding that it will be made of adjustable blocks that users will be able to rearrange and resize themselves.

b4n process 4

Trying several approaches to the interface. Deciding to go with the design combining white and colored blocks.

b4n process 5

Getting the art director’s approval and presenting to the client.

b4n process 6

The concept is approved, starting to work on the details. Drawing icons.

b4n process 7

Considering the style of the header and notifications.

b4n process 8

Working on the grid and block adjustment mechanics.

b4n process 9

Developing block appearance at different widths.

b4n process 10

Moving on to the Infrastructure page. Here we need to show physical location of devices on a map as well as a diagram showing their links. Working on the design of the map and the diagram.

b4n process 11

Starting to work on the logical topology. We need to add a diagram of virtual network functions with the ability to add and modify elements. Looking at existing examples.

b4n process 12

Exploring ways to automatically align elements.

b4n process 13

Working on the appearance.

b4n process 14

Creating a set of standard elements to make building mock-ups easier.

b4n process 15

Drawing the rest of the web site’s pages.

b4n process 16

Working on the search.

b4n process 17

Designing the installation and user authorization processes.

b4n process 18

Handing the mock-ups over to the client.

b4n process 19