Design
Nous alons maintenant voir un peu plus en détails les choix qui se portent autour du design.
Inspiration
Nous en avons déjà parler dans le chapitre de conception, le design n’est pas from scratch.
Il est issue d’un mockup sur dribbble.
C’est Mason Lee qui est donc à l’origine de AdRoll UI Framework.
Nous avons respecter au mieux certains critères de ce mockup notament sur les couleurs, la taille et le type de polices ainsi que sur la taille des composants.
Idées
Pour résumé, le concepte de base est de faire une application moderne, qui respecte le design des sites de 2016/2017 tout en étant orienté vers une démarche user-friendly.
Pour ce faire, le premier concepte est d’utiliser des polices et plus globalement du texte agréable à relire.
C’est vraiment un facteur important parce que grand nombre d’utilisateurs ne visitent plus certains site à cause de leur police !
Le deuxième critère est d’offrir une logique et une régularité sur la taille et les espaces des éléments.
Il faut toujours garder les même règles et repères.
Le troisième principe est de bien répartir les éléments dans la page.
En règle générale, nous avons peu de contenu et beaucoup de place.
A nous de trouver le juste milieu pour répartir le contenu.
Pour terminé, nous avons ajouter beaucoup d’animations.
C’est la touche finale qui fait la différence entre une application et une bonne application.
Soit dit en passant, cela à beaucoup complexifié le travail.
Note: la mode du long-scroll a été appliquée pour le design de la page d’accueil.
Couleurs
Nous avons décidé respecter les 6 couleurs proposées par le mockup AdRoll.
Avec un tas de nuance bien entendu.
De plus, nous avons décidé d’assigné une 4 couleurs à des types de contenu:
- Violet (aspect social et amis)
- Bleu (aspect neutre, mon compte, mon espace perso et les groupes)
- Vert (aspect channels)
- Jaune (bot)
LESS
Nous l’avons déjà, LESS est une version pré-compilé de CSS.
La structure le rend beaucoup plus agréable à codé et à relire.
Bien utiliser, il aide également à évité les override du CSS en étant très précis sur les balises à stylisé.
Mais le plus important est qu’il nous ai quasiment impératif lors de la réalisation de thèmes.
Note: nous expliquerons dans le chapitre des tâches grunt comment transformer le LESS en CSS.
Thèmes
En effet, les mixins (fonctions) sont le coeur de la réalisation des thèmes et permettent de les modifier très rapidement sans engendré de conflits.
Sans ça, la librairie Cozen serait juste horrible à maintenir.
Pour le moment, trois thèmes sont disponibles:
- Tau (thème initial, n’est plus maintenu)
- Atom (thème inspiré par AdRoll, complet)
- Nolan (thème copié d’Atom, n’est pas terminé)