Leading Vue.js admin template

Vuestic case demo

Epicmax as a company started with building Vuestic — we decided that the best way to demonstrate our intention and Vue.js expertise was to build a helpful and comprehensive open source tool. Sharing Vuestic on GitHub was a great idea, Vuestic brought first Epicmax clients, as well as valuable feedback we were looking for.

  • Deliverables
    Research, Strategy, Design Stystem, Development with Vue.js, Testing
  • Duration
    February 2017 — Now
  • Interested?
    GitHub repository

Challenge

Building and supporting a non-profit product isn’t easy for a small team. We had to take that risk and hoped Vuestic would help the company to grow.

The Problem

On average it takes 480 hours to design and build a solid UI kit of the admin panel. Apart from building a UI kit, developers are spending billable hours on issues that are common for most applications: basic application structure, routing setup, configuration, utility services, build and deployment routines.

Up to 480 hours of development

Solution

UI kit logo
UI kit
A solid set of styled and functional components that could be easily used and customized by developers.
Demo application logo
Demo Application
A complete and functioning application that further reduces the time product development takes.

“Great admin panel makes easy data management and faster decision making possible. It works because it is built using insightful data on user needs and behavior. Since Vuestic has many different users, components are designed to be highly flexible: cover most of the cases and easy to customize.”

Andrei Hrabouski, Co Founder at Epicmax
Andrei Hrabouski
Co Founder at Epicmax

Research

The first step was to define the set of common components that are used in different admin panels. We used our experience, our previous front-end projects and hundreds of admin templates for this research. We came up with the list of essential components users need, and we expanded and improved it after the initial release based on the feedback of Vuestic users.

Researching

Design system

To make the design look clean and consistent for each unique admin panel, we created a design system which consists of three design layers. The first layer consists of visual rules of the basic elements. The second layer consists of UI patterns. Finally, the third layer includes interaction models, voice and tone, and other interrelated independent parts.

Design system demo

Evolution

We constantly update and maintain Vuestic since 2017. The major release in Q1 2019 includes new component design independent of Bootstrap; better, truly reusable versions of the previous components, and more pages of admin dashboard with a focus on tables and forms.

Vuestic case before
Vuestic case after
Vuestic case comparison