Yask Design

About

Drugcode allows users to use banking data and create usefull internal apps for the web and mobile platforms. As the Designer for Drugcode, I was responsible for branding, UI/UX and visual design for all parts of the product. If that sounds like a broad scope of responsibilities—it was! Our design team significantly improved collaboration between design and the other disciplines while I was there.

Drugcode is a internal banking web platform for building web service, and a mobile apps. When I joined in February 2019, the web service was in its infancy, and the Desktop tool was in the process of being overhauled with more power features. My goals were to oversee the design development of the entire suite of products, to rebrand and redesign the product.

Code editor baced on Monaco editor with all features. Any code have 2 representation, as text and as node. Node functionality is useful for designer and management

Branding

When I joined in February 2019, the web service was in its infancy, and the Desktop tool was in the process of being overhauled with more power features. My goals were to oversee the design development of the entire suite of products, to rebrand and redesign the product.

Style Guide

I worked with our team and the Drugcode developers to craft a style guide, which contains the library of common components used in the product and expands out to design principles for the design team to follow, as well as UX guidance on usage and implementation for every piece used in the product, from form elements to typography and entire screen configurations.

The style guide was vital for both our developers and our designers, giving us a shared kit of parts to work from and ensures consistency within our designs.

We follow the pattern Template / Region / Component / Element / Modifier. A mix of atomic design principles and BEM methodology. More then 80 components are created.

Understanding how material design works, help to prepare tokens for dark and light themes. The same structure in Figma and in Code halps to understand each other

Collapsible left sidebar, represent file system, with drag and drop functionality. Feature - file can be parsed, and view any block inside a file.

The task is to display in an understandable form, props, CSS rules, states, etc. Do not invent new properties, but use the properties provided by the standard(w3c) or library (example D3.js)
You can write CSS values in the fields in any format supported by the specification. CSS variables, SASS, LESS, etc. Autocomplete works according to specification too.