Web-interface system «Business Guardian» (UI design)

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Content Analysis Settings


Develop web interface design web-version of software «Business Guardian» for company Iteranet according to the standards and prototypes created on in the previous step.

  1. Create a design theme and interactive interface on the example of three feature-rich application screens.
  2. Formulate standards ui-design for application, to develop stylistic and structural style sheet templates and ui-components.
  3. Build on the basis of the developed interface standards all functionally different screens of the application, the entire composition of the ui-components needed to build the application interface on the stage of design integration
  4. Write a specification for the integration interfaces for developers

Technical requirements

  1. Interface design theme must contain a component style sheets to less-preprocessor for all standard included in the framework, and additional components, scripts for states and interface interactivity.
  2. The design should be developed as a stylistic theme generated on the basis of the framework. Draws the graphic layout design, by agreement, not required.
  3. Interface design should be organized on the principles of modular design – layout components to be easily reused and independently elsewhere in the application, scripts for dynamic components must be connected to the component context.
  4. Transformation and change of state in the menu, panels, components – animated.
  5. Use colors interfaces, previously adopted for the «Business Guardian» Product
  6. Implement the mechanics of adaptive design within the minimum and maximum width of the screen adopted for use on desktop devices display applications.
  7. Application templates must be built with content organization in several block frames with independent scrolling each.


Create a contrasting comfortable for long time use color skins to set the main design colors

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Theme

Created css-framework for build pages from a different number of autonomous units, are possible options for almost any layout for two or three blocks of the width and height of the available area of the screen. The bottom left panel and fold

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Frames

The percentage of area occupied by scrolling space for each block of the frame on the page is kept to a minimum and look the same in all browsers, as used differs from the standard design of the scroll bars.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Scrollbars

Additional lists of viewing modes only differ in styles and work without reloading the page as a whole.

The size of the working area can be changed by folding the filter panel.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Sidebar

Numerous necessary tools have been placed in a limited field of vision due to the compactness of the formation of toolbars and fields close no extra padding between them.

All components of the editing and creating data context lists and arranged sequentially in the presence of branching depth and action to create data, each panel and each section in the panel may have a tool bar, there is in edit mode are visible actions enabling button – Save and Cancel.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) -Toolbars

Detail view of a list item is placed to the right of the list, when you select an element in the list, all the information is visible in one click. Visible constantly list of items useful for a rapid transition from element to element without losing the focus of attention from the list, it’s important to monitor critical indicators and rapid response analyst with the emergence of new elements. Panel viewing element is always open, boot displays detailed contents of the first list item.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Panels

Different in terms of the information detailed view list item is available in a compact simple and complex hierarchical Table-panel dependent on panel data management tools.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Tabs

Small area sections visibility with long content opens in full size in a wide modal window, duplicating the frame content in a more free to view the form.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Modal

Developed standardized design forms components – input fields, selection and confirmation fields, drop-down lists, buttons, group selection of simple elements (checkbox) replaced the component list of multiple choice with the ability to disable each individual choice within the group, using special convenient display within the group.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Forms

The structure, mechanics and folding element card marking scheme list is the same for different composition editable (criteria, modules, users) and non-editable (events, objects, documents, search results, tasks, reports, processes) elements.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Cards

A hierarchical view of view based on the principles of user-specific value of each list.

All lists are equipped with mechanisms and tools folding, unfolding, selection and disabling of the unit and select all loaded elements, sorting mechanisms, narrowing in the selected filter, removing elements, where available.

Tools application package actions to the elements of the lists are only available in the hierarchical mode and folded cards and, where there is a clear view to view and track the actions with many elements list.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Trees

Developed meaningful color and symbolic solution for a variety of display systems, overlapping representations in almost every type of element. All used symbols icons justified function component, and not just decoration.

Active filter indication remains visible when the filter panel hidden, themselves controllers disable the filter parameter. Exceed one horizontal line of the maximum number of filters is hidden in the pop-up panel.

All symbolic lights and buttons without labels complemented pop labels with a text label.

Check test data where there is a change of the treated system, text display with indicators and a text box where the user inserts the text is made so that these two fields appear perfectly identical and seamlessly change each other, it is necessary and convenient for the eye and lock the focus on the process.

By the same token change viewing modes and editing made editable form input data – existing data available there and in the same way, where there are fields to edit them.

Process states represented animated infographics and progress bars with a group of data informing about the time and done, the rest of the process.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Markers

Charts for the reports to dashboards designed using several js libraries that meet the needs of the planned presentation on the stage of the design data. Total constantly on the main page of the analyst is available 28 reports of actual data analysis states.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Dashboard


Provided a library of standardized elements, enough to build all the applications and functional modules 20 assembled according to specifications, application design patterns with a brief specification for integration. The whole design is made in the right code.

A full assessment of the effectiveness of the decision will be given after the launch of the web version and testing, but also objectively comparing the state before and after, it’s safe to say a qualitatively new stage in the promotion of the product «Business Guardian» on other markets, followed by an increase in the number of companies, prefer to use the web interface for monitoring tasks, instead of stationary software package. In addition to changing the environment between the user and the system proposed and qualitatively processed almost all of the functional components, found new ways to display and work with large amounts of data, simplified and made clearer numerous sophisticated setting criteria that are crucial for the formation of traffic processing system of monitoring in order to identify real potentially dangerous leaks of information of the facts.

The period of study 2 «Business Guardian» System Software – 1 week

Period design , and approval of prototypes – 20 days

Period application development design – 25 days . This is the next publication

All materials used in this report are owned by Iteranet and are protected by copyright law.

Elena Baranova , UX / UI designer