Bonjour à tous, c'est (encore) Eva !
Après avoir défini la stack, organisé mes sprints et fait un super MVP, j'ai pu m'attaquer à l'aspect visuel du futur site de commit42. En effet qui dit refonte de site dit nouveau look ! L'équipe de c42 m'a fait confiance quant aux choix graphiques pour leur nouveau site, j'ai donc revu un peu la charte graphique afin de proposer un design dynamique, coloré et moderne.
La charte graphique 📖
Une charte graphique est un document qui recense l'ensemble des éléments visuels qui définissent une marque. On y trouve donc les couleurs, les typographies, le logo, les icônes etc. Elle garantie une cohérence visuelle et une homogénéité entre tous les supports de communication d'une entreprise (carte de visite, site web, affiches, papiers administratifs...).
Couleurs 🎨
La charte graphique actuelle de commit42 comporte les 3 couleurs suivantes:
J'ai choisi d'ajouter une couleur supplémentaire à la charte graphique afin de rehausser l'ensemble. J'ai opté pour un jaune car c'est une couleur complémentaire du bleu, ce qui me permettra de jouer sur des contrastes.
Typographies 📃
La typographie du logo de commit42 est Akrobat Regular et sur leur site actuel ils utilisent Open Sans et Times New Roman.
Les typographies qui sont utilisées sur l'ancien site de commit étaient celles par défaut sur le thème que qu'ils avaient mis en place, elles ne font pas l'objet d'un choix intentionnel. J'ai donc décidé de les changer afin de choisir de nouvelles typographies qui font sens et qui reflètent plus l'essence de commit42.
Je suis partie sur Poppins et Roboto. Roboto est certes, pas très originale, car beaucoup utilisée, mais elle est très lisible. Poppins utilisée en black italic est très grasse et contraste bien avec Roboto, ce qui permet de créer un ensemble dynamique.
Le but est de montrer que commit42 ne se repose pas sur ses lauriers, c'est une entreprise innovante, jeune et dynamique donc.
Les maquettes 📐
Depuis quelques temps j'utilise Adobe XD, que je trouve très pratique et qui permet de mettre en place très rapidement des wireframe ou des maquettes. Pour le moment il existe une version gratuite légalement du logiciel, alors n'hésitez pas à aller essayer !
Ce qui est intéressant avec ce logiciel c'est que l'on peut créer des petits prototypes de nos applications avec des liens entre les pages comme par exemple sur un menu ou une navigation. Ce prototype peut ensuite être partagé grâce à un lien afin que toute une équipe puisse accéder au prototype sans avoir besoin du logiciel.
Comme une image vaut mieux que 1000 mots, voici un aperçu de ma maquette:
La page d'accueil présente les services que propose commit42 ainsi que leur points forts et les avis des clients.
Homepage
PWA
La page PWA explique les avantages de cette façon de voir les applications, proposera (à terme) des petites applications PWA afin que les utilisateurs puissent tester ainsi que les réalisations de commit42 en PWA.
Blog
La page de blog recensera tous les articles publiés ; pour chaque article on pourra voir l'auteur, le temps de lecture et les tags associés (en plus des informations classique, titre, résumé, date)
Pour voir mon wireframe et la maquette entière n'hésitez pas à consulter ces liens:
Wireframe: https://xd.adobe.com/spec/55dbefe4-07bf-4be5-5881-e85876a9aaed-23ea/
Maquette :https://xd.adobe.com/view/201d07e3-d9fd-4aa1-67a1-332a2e69d97a-562c/
La maquette est un prototype, n'hésitez pas à scroller sur les pages ou à cliquer sur les liens de la navigation afin d'accéder aux autres pages !
NB: Pour les icones j'ai utilisé Font Awesome
Les illustrations ✏
J'ai fait le choix de ne pas utiliser des photographies sur le site mais plutôt des illustrations pour plusieurs raisons:
- Je trouve trouve que les illustrations animent vraiment un site et rendent le tout plus vivant
- Il est plus facile, selon moi, d'accorder visuellement des illustrations plutôt que des photos
- Argument pas du tout objectif: j'avais envie de faire des illustrations pour ce site web
J'ai donc illustré les concepts clés qui devaient figurer sur le site, voici quelques exemples:
Toulouse
Pour illustrer la ville rose j'ai choisi le dôme de la Grave et le Pont Neuf ; ce sont des bâtiments emblématiques de la ville qui sont plus singuliers et identifiables que le Capitole par exemple.
Nouvelles technologies
Concept pas facile à illustrer car très abstrait. Après avoir imaginé d'abord une illustration qui faisait plus penser à l'aspect "responsive" (qui n'est pas tout à fait une nouvelle technologie) puis une tablette dont jaillissait des logos de technologies utilisées par commit42.
C'est finalement un de mes collègue qui m'a glissé l'idée d'un robot ! Finalement je trouve que c'est beaucoup plus parlant que mes premières ébauches car l'image du robot est assez universelle.
Flexibilité
Je voulais représenter la flexibilité par un objet réel plus que par un schéma abstrait car je trouve que ça donne tout de suite une image plus parlante et que l'on retient mieux. J'ai donc trouvé intéressant de "tordre" un crayon, habituellement rigide, car le contraste accentue encore plus l'idée de souplesse, adaptabilité etc.
Conclusion 👏
Après cette semaine et demi intense en création graphique, les maquettes sont enfin finies ! A partir de la semaine prochaine, je vais pouvoir commencer à intégrer ce nouveau design au site en commençant par l'existant: la homepage et le blog. Nous envisageons aussi la possibilité de changer le logo de commit42 afin qu'il soit plus en accord avec le design que j'ai proposé (on vous tiendra au courant).
