Marketing
Branding
Website
HubSpot

Rebranding SaaS

Moderniser l’image de l’industrie

01 / OVERVIEW

Siteflow est le premier logiciel cloud pour l'optimisation et la gestion des opérations nucléaires. L'objectif était de refaire l'identité visuelle complète de Siteflow en s'inspirant du Bauhaus, des blueprints industriels et d'une palette de couleurs vives et néon, tout en conservant le logo et la typographie existants.

Client: Siteflow
Rôle: Brand Designer
Timeline: Projet terminé — 2023
Livrables: Website, Brand Guideline, Templates Réseaux Sociaux et powerPoint

02 / LE CHALLENGE

Moderniser l'identité d'un logiciel SaaS B2B.

Siteflow avait besoin d'une refonte visuelle profonde pour se démarquer dans le secteur nucléaire. Le logo et la typographie venaient d'être changés récemment et devaient être conservés. Le défi était donc de repenser tout le reste de l'identité visuelle.

L'inspiration devait puiser dans trois univers :
le Bauhaus pour la rigueur géométrique, les blueprints industriels pour l'authenticité technique et des couleurs vives pour apporter de l'énergie et de la modernité à un secteur traditionnellement conservateur. Le tout devait être déclinable sur un site web HubSpot et des templates PowerPoint.

03 / BRAND STRATEGY

Inspirations

Bauhaus

Rigueur géométrique et formes épurées inspirées du mouvement Bauhaus pour structurer l'identité visuelle.

Blueprint

L'esthétique des plans techniques et industriels comme fil conducteur, évoquant la précision du secteur nucléaire.

Couleurs Vives

Une palette vibrante pour dynamiser l'image de marque et trancher avec les codes traditionnels du nucléaire.

Digital

Une identité pensée pour le numérique, du site web HubSpot aux réseaux sociaux en passant par les présentations.

04 / LOGO

Identité Siteflow

Le logomark et le wordmark ne doivent jamais être utilisés l'un sans l'autre sauf exception dans le cadre de création de goodies par exemple.

05 / PALETTE COULEURS

Couleurs de la Marque

Cette diversité de couleurs permet de couvrir l'ensemble des supports et usages. Les couleurs primaires forment la palette de base pour tous les documents et présentations. Les secondaires servent à créer des accents ponctuels, avec parcimonie. Les quatre gradients mettent en valeur textes, images ou illustrations, chacun répondant à un usage précis.

Couleurs primaires

Dark Blue

#133050

Bittersweet

#FF6B64

Black

#000000

Paper

#F9F8F5

Couleurs secondaires

#7EF0C8

#219EBC

#4BC1FF

#8C78FF

#E28FCE

#FB8500

#FFB703

Les gradients

Les quatre gradients : Spring, Winter, Autumn et Summer, avec leurs usages

Gradients utilisés avec du flou, en formes organiques

06 / TYPOGRAPHIE

Système Typographique

Headlines

Poly Sans (Bulky & Wide)

Utiliser PolySans pour toutes les headlines. Choisi pour son côté moderne qui colle parfaitement à l'ADN Siteflow pour le côté innovation et transformation digitale.

Body & Legend

Poppins (Regular, Bold, Italic)

Poppins

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Pour le corps de texte utiliser Poppins, une police parfaite pour le web que l'on retrouve sur "Google Fonts".

07 / Iconographie