BITCLOUD — UI design — TFE#6

Interface graphique de la plate-forme

Sébastien Seghers
Apr 18, 2018 · 10 min read

Je vous invite à lire mon dernier rapport de TFE afin de mieux comprendre la suite de mes idées.

Maintenant que mes wireframes et mon user-testing est terminé, je dispose de toutes les informations nécessaires pour commencer au mieux mon design.

Bitcloud — L’origine du nom

Avant de me lancer dans des visuels, j’ai d’abord jugé utile de commencer par trouver un futur nom à ma plate-forme de trading. J’ai donc cherché pendant plusieurs jours des inspirations à gauche à droite en demandant notamment à des groupes sur les réseaux sociaux de me donner des idées.

Les idées des réseaux sociaux

Mes idées personnelles

Avec tous les noms que j’ai trouvé ou que des personnes m’ont conseillé, j’ai tenté de faire des mixes entre différentes parties venant de plusieurs noms. J’ai mit un temps considérable à faire mon choix parmi toutes ces propositions. Mais après un feedback venant de plusieurs personnes, le nom de BITCLOUD est finalement sortit du lot.

Pourquoi ce nom ?

Car BITCLOUD est composé de deux parties. D’un côté on a “BIT” qui fait un rappel vers le “Bitcoin”. Selon Google, le terme Bitcoin est le mot le plus recherché dans la crypto-monnaie. J’ai donc jugé utile de m’associer à ce nom afin de guider plus facilement les futurs nouveaux utilisateurs vers ma plate-forme de trading.

De l’autre côté on a le mot “cloud” car les crypto-monnaies ne sont accessible que grâce à internet, j’ai donc trouvé sympa des les catégoriser comme si elles étaient toutes dans un nuage.

L’association de BIT et de CLOUD sont donc devenu BITCLOUD. Je suis très content du nom de ma futur plate-forme.

Mes couleurs

Concernant mes couleurs, j’ai également cherché un certain temps avant de trouver ce qui me convenait parfaitement. J’ai donc décidé, afin de m’aider à trouver la couleur parfaite pour ma plate-forme, de faire une analyse sur le comportement des utilisateurs en fonction de chaque couleurs.

Voici l’article de UXPlanet sur l’influence des couleurs chez les utilisateurs :

Ce que je peux retenir de l’article vis-à-vis des couleurs qui m’intéresse :

  • Le vert : Santé, régénération, contentement, harmonie, nature et détente
  • Bleue : Honnêteté, intégrité, digne de confiance et loyauté
  • Le blanc : Pureté, innocence et lumière
  • Noir : Autorité et pouvoir

Pourquoi ces couleurs ?

Bleu et vert sont les meilleures couleurs pour leur influence par rapport à mon projet. Je veux créer une plate-forme conviviale qui offre sécurité, confiance et calme. Il est important de considérer que les couleurs peuvent vraiment affecter la façon dont les gens voient notre produit ou service. Mon but est vraiment de mettre une priorité sur la confiance en particulier. Dans ce cas, le vert et le bleu sont les meilleurs choix pour la plate-forme Bitcloud.

Le blanc donne de la lumière à la plate-forme. Je veux que le projet soit clair sans trop d’informations. C’est pourquoi je choisis aussi la couleur blanche.

Le noir donne du sérieux au projet. Toujours important d’avoir du noir / blanc pour la typographie, les titres et les textes par exemple.

Ma palette colorimétrique

J’ai décidé d’associer le bleu et le vert afin de trouver une combinaison parfaite entre les deux. Voici ce que ca donne.

J’ai choisi 3 variantes de bleu-vert. Une pour les interactions comme les “call-to-action”, une pour la typo, une pour les illustrations UI comme les “icons”, les “illustrations” etc etc. Je n’ai pas encore associé mes variantes pour le moment mais voici déjà les couleurs finales.

La typographie

J’ai donc trouvé les couleurs mais j’ai besoin maintenant de trouver une typographie qui corresponde à mon futur design. J’ai fait des recherches sur pas mal de typographies sur Google Fonts et voici ce que j’ai retenu.

Les titres

J’ai concentré mes recherches sur une police “sans-serif” avec de nombreux styles comme “léger, moyen, gras”. Je n’ai pas cherché dans les fonts “serif” parce que je n’aime pas beaucoup de détails. Je veux une typo vraiment clair, de type arrondi en grand caractère et principalement en uppercase.

  • PT sans : Cette typographie combine clarté et arrondissement sur ses bords. j’aime bien son style en grand caractère mais moins en uppercase.
  • Ubuntu : Cette typographie combine aussi clarté mais est légèrement plus arrondie sur ses bords. Elle se lis facilement et est vraiment nickel en caractère grand/uppercase.

Les textes

Pour les textes, je veux quelque chose qui a plus de détails mais sans être une police “serif”. Je veux clairement faire la différence entre les titres et le texte, mais il est certain que ce sera deux caractères sans empattement.

  • Open Sans : Cette police est un grand classique. Je l’aime vraiment pour les paragraphes car elle donne de minces détails en petit caractère sans en faire de trop. On peut également la lire facilement.
  • Raleway : Un autre classique. Je l’aime pour la même raison que la typo Open Sans. La seule différence est dans la quantité de détails. Raleway est un peu plus détaillé, cela marque donc plus de différence entre titre/texte.

J’ai ensuite fait plusieurs tests avec titre/texte sur mes différents choix directement depuis l’interface de Google Font et j’ai décidé de prendre Ubuntu pour les titres et Open Sans pour les textes.

Combiner mes typographies

Afin de bien voir si mes deux choix typographiques peuvent être harmonieux, j’ai décidé de travailler sur la hauteur des X afin de voir si la différence entre les deux n’est pas trop disproportionnée.

Comme je peux le remarquer, les deux hauteurs de X sont parfaitement combinable. Ubuntu est légèrement plus petite mais la différence n’est pas disproportionnée donc c’est parfait !

Le contraste des caractères

Maintenant que j’ai travaillé sur les hauteurs, il est temps de faire un test sur le contraste des caractères. Cela me permettra de voir si on peut bien les distinguer l’un de l’autre.

La combinaison est plutôt bonne, le contraste entre les deux n’est pas trop élevé, ils sont distinguable. L’épaisseur des deux traits sont bonne.

L’espacement des caractères

L’espacement est la distance qui sépare la largeur avant et après la lettre. Ici l’espace est quasiment identique aux deux typos c’est donc bon signe afin de ne pas avoir une trop grande différence.

Le ratio de typographie

Pour le ratio, j’ai choisi 1.414 (Augmented Fourth). C’est un bon ratio facile à lire sur de nombreux devices comme les smartphones, les tablettes et les desktop. Ma plateforme sera responsive, j’ai donc absolument besoin d’un ratio qui s’adapte à toutes les screens sizes.

J’ai utilisé Type-Scale pour trouver mon rapport de proportion.

Voici un rappel de mes choix :

L’interlignage et la longueur de caractères

J’ai décidé de choisir 16px comme grandeur minimale, ce sera la base pour mon body. Mes textes seront eux, en 18px. J’ai donc choisi de prendre 140% comme interlignage. Ma longueur de ligne se situera entre 55–60 caractères afin de ne pas faire des paragraphes trop long à lire. Les paragraphes concerneront surtout ma landing page.

Les visuels

Après que tous les pré-configurations de mon design aient été établie, je me suis attaqué aux visuels de ma futur plateforme sur base de toutes mes informations récoltées lors de mes tests utilisateurs et précédemment.

Le logo de l‘application

J’ai commencé avec le logo, qui m’a prit beaucoup de temps. C’était pas évident de représenter une application de trading de manière simple et efficace. C’est alors que je me suis souvenu d’une de mes phrases lors de mon travail en groupe avec Mr. Bourgaux : “Croire les graphiques”. C’est alors que cela a fait tilt dans ma tête et je me suis mit au travail afin de représenter cela sur papier pour avoir les idées plus claires.

J’ai testé deux version, l’une avec le “b” minuscule et l’autre avec le “b” majuscule et j’ai finalement retenu le minuscule. Voici ce que ca donne.

Design des écrans mobile/desktop/tablette

J’ai ensuite design tous les écrans à la fois sur format mobile et format desktop/tablette, voici un aperçu.

Aperçu du design de quelques écrans

Voici quelques exemples de visuels en gros plan déjà terminé afin de se faire une idée plus concrète de mon design final. A noté que ceci est susceptible d’encore changer face aux différents feedbacks que je vais avoir.

Mon set d’icônes

Voici également une présentation de mon set d’icônes. J’ai préféré les créer plutôt que de prendre des gratuites toute faites. J’ai envie de pouvoir réaliser ce projet avec toute ma créativité.

Fais le test de mon prototype sur inVision !!

Maintenant que tous mes visuels ont été réalisés, j’ai décidé d’upload mes screens sur inVision pour que tous le monde puisse tester mon prototype. J’ai mit la version mobile car la version desktop/tablette est exactement la même avec quelques screens en moins.

Je serai très heureux d’entendre ton feedback une fois réalisé, cela compte beaucoup pour moi pour la suite de mon projet.

Je parlerai dans mon prochain article de mes débuts de code et des technologies que je vais utiliser afin de faire vivre mon projet !

Merci pour la lecture et à bientôt sur Médium ❤

Roadmap

Pour me suivre sur les réseaux sociaux c’est par ici ↓

Tu peux également suivre BITCLOUD sur les réseaux ↓

Sébastien Seghers

Written by

UX/UI Designer. Based in Brussels, Bel. I like crafting digital stuff & beautiful user experiences. Also Science thinker in my free time. Twitter : @S_Seghers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade