Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

All about Proximus Design System

The Proximus design system for website and apps experiences consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

last modified: 14/04/2021 14:30:03

What is a design system?

What we call a design system is a shared platform gathering and classifying all the material available to build Proximus’ digital interfaces. In other words, a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Co-created by different stakeholders (UX designers, UI designers, integrators, business, customers,…) working on a daily basis on digital problematics, this powerful tool is designed and maintained to help us develop better user experiences and strengthen our brand.

What is it intended to do?

Proximus design system is meant to have an impact on 3 different axis:

  • Unjam business to development hands-off issues.
  • Empower different stakeholders (from PO to external collaborators) to understand and build more meaningful and consistent digital products based on users insights.
  • Ease product iterations (from UX design to component interface maintenance)
last modified: 30/09/2021 11:10:06

Introduction

As Proximus' official design system, this platform serves a wide range of designers and developpers building digital products and experiences. It is maintained by a core team of designers, developers here at Proximus.

The goals of the design system include improving UI consistency and quality, making the design and development process more efficient and focused, establishing a shared vocabulary between designer, developer and stakeholders, and providing clear, discoverable guidance around design and development best practices.

Categories

Proximus' Design System articles are divided into 7 categories:

  1. Get started
    New here? Get started with this introductory category to our Design System, guidelines and key principles. Use this category to learn how to use the Design System and to find resources for starting prototyping and designing.

  2. Guidelines
    Guidelines covers our ground principles for key topics such as: colors, typography, gridding.

  3. Basic elements
    Basic elements are all the small things you typically use for creating a user interface, such as text sizes and colors, icons, spacings,...

  4. Components
    Components are one of the key building blocks for creating a user interface. Each component has been designed and coded to solve a specific problems, such as presenting a list of options, displaying offers, processing of an order, enabling submission of a form, and so on. All those components have been designed to work harmoniously together and set consistency across Proximus' digital products.

  5. Templates
    Templates are best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows.

  6. Utilities
    Utilities are simple HTML classes and tools typically scoped to a single CSS property like alignments, displays. Utilities provides a technical solution to be able to follow a UI project and can be used additively to style an object.

Articles and tabs

Each category contains several articles. In order to give the proper information to the proper profile, we divided each article with tabs. Tabs can be easily found on the top of the article.

To ensure a smooth browsing experience, Proximus' Design System remembers the tabs you have chosen accross articles. So you won't have to use the tabs to gather the same type of information trough each article.

I don't see my content

In some cases, you may land on an empty page, be sure to have a tab selected in order to see its content.

The most common tabs are:

  1. Usage
    Usage tab contains all the information regarding the usage of the elements, such as different types, all states, the anatomy,...

  2. Style
    Style tab gives concrete style guidelines to construct an elements from scratch. The most common guidelines are sizes, colors and spacings.

  3. Code
    Code contains the HTML and programmatic options available for the componenent, it also displays a living example of the element so you can see it live and working!

Updates

As a living product, we try to keep all articles up-to-date at all time. In order to inform readers and writers about the update status of the documentation, each article has an indicator of last update on the top right corner of it.

last modified: 14/04/2021 14:30:03

Design principles

How do we define design principles

  • As horizontally as possible, with stakeholders representing Proximus & customers needs.
  • By favouring user insights over assumptions.
  • By both keeping in mind our brand personality and our technical constraints.

HTML framework

on a décidé de travailler avec Zurb Foundation 5.1.2