UI graphic design

During the initial phase of the development of a UI graphic design, we formulate the design's basic characteristics by making tentative style decisions and determining an emotional background.

We then study the usage context of the future product and how it is intended to relate to other affiliated products that may exist on the same platform, if any exist.

Using universally-accepted techniques (i.e. moodboards, styleboards), we work together with the customer to define the general style of the future product along with the mood that the interface should emanate.

After we have studied the product and the customer's desires, we move on to the development of a concept for the UI graphic design: we construct the grid, define a typeface scheme, and design the main generic blocks and elements of the graphical user interface.

To provide the customer with a coherent impression, we draw 3 or 4 main screens of the UI using the agreed-upon style. In preparation for design review meetings with the customer, we prepare a few graphic design concepts for the future interface. This allows us to quickly decide on a solution that will meet the expectations of both the customers and the users.

If necessary at this stage, key blocks and interface elements are adapted to match all necessary screen resolutions/platforms.

After the necessary number of iterations is reached, we end up with the final graphic design concept for the UI

We confirm the UI graphic design concept with the customer and begin drawing all screens, blocks and elements of the UI in the agreed-upon style for all required screen resolutions and platforms. Certain elements (buttons, drop-down lists, tabs, menus, blocks etc) we must draw for each possible state. When necessary, we confirm the rules of the usage of the elements (and their states) with the customer.

While working on the design, we give special attention to the exceptional states in the UI, such as:
· what will happen if the name of the list item is too long,
· how the reset screen state will look like,
· how the menu will look when an additional menu item is added, etc.

After having all the sketches drawn, we prepare to hand them over for layout slicing and coding.

We use applications such as Sketch and Zeplin, which allow us to quickly pass on to the developer the properties of the UI elements (i.e. line colors and weights, margins, font sizes and colors, shadows, etc), as well as graphic resources. In addition, we prepare source materials describing UI micro-animations and the dynamic behaviour of UI elements.

If required, we write a detailed Design Guidelines document that explain the standards inherent to the interface design. In this document, we hand over all the knowledge necessary to keep the product in line with the original design concept over the period of the product's functional development.