SonarSource

SOFTWARE / IT

SonarSource

World-class products for Code Quality & Code Security

Software editor of SonarQube SonarLint & SonarCloud, my mission is to ensure a best-in-class User Experience to deliver top-notch features and design a visual language to have a coherent and impactful visual universe.

I created the first Design System of the company in order to have more consistency and to increase the velocity of design production in a coherent way.

First Design System

I created the very first SonarSource Design System, to improve visual consistency, to make the bridge between the design and the dev team, and increase delivery speed

  • 01 Foundations
  • 02 Components
  • 03 Patterns
  • 04 Library

The Ultimate Web Guide
for creating easy, simple and meaningful
Web User Experience

The Design System help teams to build meaningful interactions and share best practices. The goal of this guide is consistency around brand identity, principles, patterns, tools, components, etc. and increase our delivery velocity.

Increasing the development velocity

With reusable components and templates, developers can be autonomous and have increased their productivity by puzzling a page quickly

+ %
of web pages delivered

Creating collective mockup faster

Creating web pages is not only the responsibility of a designer. With this model, each participant can contribute with the library and guidelines

%
Designer time saved

Giving the power to employee's company

Every employee can now communicate with contents, images and screenshot coporate without asking for authorization

01 - Foundations

First of all, I start with the foundation by creating the design principles and UX guidances.

I created the Color palette, Column & Grid, Media & Iconography, style of transitions, range of typography, and based on a solid a recognized UI Methodology.

ATOMIC DESIGN

02 - Components

I created the entire library of components based on all the foundations that we reused across all the web platforms. Those components are well specified with instructions on how to use them correctly.

03 - Patterns

Thanks to the library of components, we have developed templates & patterns that can be reused even more easily – Form, Lightbox, Sections, Carousel, …

NPM - React - TypeScript - GatsbyJS

04 - Library

I have developed a download center for all our resources with the full guidance to use them correctly.

So we can find the entire, up-to-date icon library, screenshots of the product, and logos. 

100+ RESOURCES

Branding Guidelines

The Branding Guideline is a visual language that allows to unify, create and communicate our message across marketing websites. This help us to stream our culture and values with the same voice, stronger & together.

The style of SonarSource is unique, the colors, the images, the illustrations, the icons and the fonts must serve the unique SonarSource branding.

We have defined the Core Values and the Design personality of the brand, the usage of the logo identities and the associate master colors. And also the writing style in order to have a consistent message thought the ecosystem

Design roadmap

I created the Design System project in December 2018. It started as a joint effort between developers and designers in order to facilitate our exchange and move faster on our development.

Since then, the Design System contributes to the consistency of the branding image of the company by giving the possibility to all the employees to understand and how they can use the resources by themselves.

Used in 7 web platforms

The Branding Guideline is a visual language that allows to unify, create and communicate our message across marketing websites. This help us to stream our culture and values with the same voice, stronger & together.

0 +
Interfaces & Pages
0 +
Icons & Screenshots
0 +
Components
Take a look at my projects
Social Network

Wayoot

The social network of your hobbies

Discover

Swap

Locate your loved ones in real time

View more
SOFTWARE / IT

Design System

Creation of the Design System Principles

Discover
Banking

eprivate banking

The wealth management 2.0

Discover

Bouygues Telecom

One of the largest French telecom

View more
Trading

Swissquote

Swiss leader in online banking

Discover
Buzz

Fais toi Plaiz

Compliment & punchline generator

Discover
Comments are closed.