UI-design Onpay wallet

Onpay Wallet - Responsive Site View – UI-design, HTML5 Templates

Description of project

Onpay.ru – is a online service for the reception of electronic payments, which gathers in a single view multiple payment methods in runet.

Any user who purchases the Internet through this service and gain access to your personal account, where there is a history of the operations sections, re-tools, re-regular payment, the most common ways to withdraw funds from your account, pay phone and invoicing to another user. The balance can be replenished, order and pay for products online store directly from your personal account.
In the past, the post has been submitted to the service design process described here graphic design and layout of the pages on the basis of detailed prototype.

A task

  • Create a visual design interface of personal cabinet wallet.onpay.ru, the design should be adaptive, optimized to run on devices with different screen sizes.
  • Develop a design theme of the interface containing the style sheet for the most adequate number of standard html and complex html / js-components.
  • Make an adaptive layout of all pages, install js-plugins for dynamic interface components.
  • Create motion effects, disclosure, transitions using css-animation.

Requirements for graphic and motion-design

Personal account wallet.onpay – is a web application built with responsive design.

  • Logo service contains three colors: green, red and black, which can be the basis of a design theme for the entire interface.
  • Style – flat design with thin linear elements icons, buttons, free space between the functional elements.
  • Page layout has been approved at the design stage and do not require processing.
  • You can use the photographic image as a background to the page.
  • The panels must be opened, gradually increasing from a square die in a series of others in the panel on top of the rest of the page content.
  • Navigating the steps are clear and visible form to the user.

Specifications for the design of closely related to the further development of the page layout. Since the web-based service to a large extent been developed for devices with small screens – smartphones, tablets, first choose Ratchet framework as a basis for the development of the code, it is well suited for mobile versions of sites, but the result of the research showed significant limitations in its work on desktop devices and then replaced Ratchet still on Bootstrap.

The design should be developed as a css-generated design based on the framework.

Draws graphic design layouts in consultation was not required.

Format development tools and are left to the discretion of the developer.

It was agreed that:

  • Initially, the framework, to be typeset at first only the main page with square dies, turns into a bar, and on the components of the page will come up graphical design interface (UI) in the process of developing css-theme design and motion-design load, opening, folding and moving step by step in panels.
  • Then the assertion of design topics, corrections, following the iteration in interface design.
  • Nesting in a developed ui-design of other pages and components.
  • Testing in different browsers and devices and transmission patterns in the design.


1. UI Design

Subsequently two options ui-design has been developed.

The first – the neutral gray panels of navigation panels with linear icons on the main menu, bright noticeable squares dice on blurred graphics background dark colors, design, close to the modern design of mobile applications to onpay web application used mostly on mobile devices looks there like on the native.

Onpay Wallet - Responsive Site View – UI-design, HTML5 Templates

But the design has not been received, with a request to reduce the bright colors, make the overall experience more rigorous, neutral and do not use a lot of green.

In successful competitors payment service interface was gray-white with subtle elements of corporate bright color, it was decided to focus on the same concept in the design of onpay cabinet.

New theme interface design has been developed taking into account the comments in the previous version. Photographic background was chosen to match the corporate color organically fit in my opinion.

Onpay Wallet - Responsive Site View – UI-design, HTML5 Templates

However, it was later changed to a bright sunny city.


As a result of this step, the client was provided html5 / css / js main page template with animated and dynamic components of the panels, forms, ready for integration in the project code.

2. Develop templates

Further work Costoyalsya in the assembly of all the pages in a service designed ui-design, development of adaptive lists, tables, transforming the list into a table, special offers horizontal cards, design remaining ui-interface components that are not on the main page. Forms of other pages open without going to the same page, with animation, similar to developed for the home page.


The testing found that on Android complicated css-animation opening panel does not work correctly in the browser Chrome and the native devices. To solve the problem this quickly proved to be practically impossible, even though it was searched and numerous attempts to circumvent this error.

4. Correction

As a result, it took a complete replacement of the animation and the principle of opening panels and shapes. If they had beautiful unfolding of the small square in the full size of the panel, the panel now been implemented as modal popup window, with a typical opening mechanics modal windows in Bootstrap. The square ram has remained in place, but it is invisible. The elegance and smoothness of the first decision could not be repeated, but it was guaranteed to work on all devices.


The design is implemented on https://wallet.onpay.ru and is currently in use.

After completion of integration required, the front page for unauthorized users has been created with its own navigation and text panels, ispolzoalsya the same display method and structure for the panels in the buyer’s office.

Testing take measures to check the quality, performance, or reliability of (something), especially before putting it into widespread use or practice.