Web themes (also called front-end component libraries or front-end design systems) help efficient design and testing, and enforce UI consistency. They are especially important in Agile environments, where enabling more efficient design workflows is critical to keeping the fast pace of development.

When developed rigorously, web themes promote consistent design practices and enforce developer adherence to specifications.

Common problems with design

  1. 50 shades of grey

    UI and UX inconsistencies across the app.

  2. Anarchy

    When answering even simple questions like “Which component should I use?” becomes very time-consuming.

  3. Poor delivery quality

    The UX/UI inconsistencies make users confused and frustrated when they could not get their expected feedback.

  4. Inconsistent code library

    Sometimes the front-end guys come up with new components with a different look & feel instead of reuse the existing ones.

Top Level Goals

  1. Organization

    Getting rid of a messy codebase and over customized UI components. Making sure we have a well thought-out structure and approach.

  2. Maintainability

    Over time, there are going to be new developers jumping in to fix bugs and add features. We needed to have proper guidelines and conventions to make it easy for people to do things correctly.

  3. Scalability

    The app will grow in the future. Adding new product features should no longer be an unpleasant (and near impossible) task.

Real Life Examples

Creation Tools Examples

One-Stop Dashboard Theme

With over two years of continuous development, Bekitzur Dashboard Theme has evolved and innovated by listening to the current trends and all our users feedback.

Today, Bekitzur Dashboard Theme is a wise choice that powers small businesses to large enterprises for all their web applications: custom admin panels, admin dashboards, eCommerce backends, CMS, CRM, SAAS.

Web Theme Requirements Checklist

Bekitzur experts adhere the following requirements for the component libraries:

  1. Table of contents that splits components into easily-findable categories;
  2. Responsive layout or grid systems used to place common UI elements;
  3. Color palette of the product (HEX or HSL);
  4. Typeface styles which should include typeface name and foundry, sizes, weights, leading/line height, tracking/kerning, and the appropriate contexts of use for that text style.
For each of the specific UI elements:
  1. Description of the appropriate context of use:
    When does it make sense to use one particular component vs. a similar one?
  2. Code snippets;
  3. Specs for implementation, including positioning and spacing information;
  4. Dos and don’ts for that element.

Bekitzur web theme building blocks

Dmitry Korotkov, Art Director

Dmitry has over 15 years of work experience in the IT industry. He is responsible for concept development of new experiences, interfaces, maintenance of style guides, UI toolkits and experience design languages. He manages multiple Bekitzur projects from concept through completion and provides governance of overall corporate's brand look and feel.

View posts by

Talk to Us