TranSvias viewer

Style Guide

A style guide is an important element of the UI design process and specifies all the important data that a development team needs for the technical implementation of the design.

Using the style guide for the tranSvias viewer, we show what such a style guide can look like and what it contains.

We can offer our customers the following advantages:

By working closely with our software departments, we know exactly what data is relevant to enable a smooth implementation of the design into software
Many successful UX/UI designs with high customer satisfaction
Experience in designing for desktop and mobile applications
Technical understanding
Broad portfolio of UX/UI designs, from industrial applications to IoT projects and consumer apps
Design according to software ergonomic standards (DIN EN ISO 9241)
Cost-effective implementation of the UI design thanks to our collaboration with EPSza
Close cooperation with the customer and short feedback cycles for optimal quality assurance
Very structured and transparent way of working and documentation of all work and decisions

Overview of all relevant styles and elements for technical implementation
Color schemes, color gradients, shadows
Typography of all text elements
Overview of all icons
Screen layout and standard dimensions/spacing, depending on requirements for different screen resolutions (desktop, tablet, mobile)
Standard components, such as buttons and input fields, including various statuses
Project-specific components

When developing a suitable UI design, we are guided by the customer’s corporate design and vision, as well as the purpose and target group of the application and the framework conditions of the application, such as the environment in which it is to be used.

Together with our partner in South Africa, EPSza, we develop an elaborate UI design based on a representative screen of the application, which we present to the customer.

At the customer’s request, we also create additional design variations from which the customer can choose. In this way, we develop a suitable UI design over several iterations that fits into our customer’s product range and is also modern and intuitive to use.

Once the final UI design is available, we use this design to specify the style guide, which contains all the important details that are relevant for the technical implementation. Components that are required for the application but were not necessarily included in the first UI screen are also defined here in order to ensure the most complete reference possible for the implementation.