Une fois la maquette fonctionnelle réalisée, place à la charte graphique. Nous partons de la « feuille blanche ». Tout est à imaginer ! Nous souhaitons créer un univers distinctif et donner une vraie identité à Predeez.
Concevoir un design web identitaire et techniquement viable
Attention toutefois aux excès en matière d’innovation graphique… Tout cela doit être en phase avec les fonctionnalités de l’outil et les contraintes techniques relatives au « Responsive Web Design » (redimensionnement automatique selon la taille de l’écran et du support utilisé par l’internaute). De surcroît, la charte graphique doit respecter les codes de la navigation web et être dans l’ère du temps.
Là aussi, un travail préparatoire est nécessaire. En complément de la veille régulière en matière graphique que nous pratiquons sur différents sites, et notamment via Pinterest, nous réalisons une sélection d’outils communautaires (services SAAS) et de réseaux sociaux avant de les « observer/disséquer ». Ces mastodontes ont créé des « codes/bonnes pratiques » de navigation et d’ergonomie. Des « évidences » qu’il serait risqué d’ignorer. De la même façon, nous nous appuyons sur les standards suggérés par Google – le roi de l’ergonomie.
En matière de style, nous nous orientons vers le « flat design » pour laisser la place à l’essentiel. Bref. On fait simple et on aère. Différents ensembles de coloris sont testés avant de sélectionner les deux couleurs définitives. La couleur la plus chaude étant attribuée à l’action.
Le maquettage de Predeez est conçu sur la base d’une grille Bootstrap. Ce Framework permet d’élaborer et de dimensionner les éléments du site afin qu’ils répondent aux exigences du « Responsive Web Design ». Indispensable au regard de la montée persistante du trafic issu des terminaux mobiles ! Le caractère « Responsive Web Design » de Predeez facilite la navigation du visiteur et offre une expérience d’utilisation optimale quelle que soit l’interface de connexion. Et puis, Predeez se doit résolument d’être « mobile friendly » compte tenu de son concept.
Chaque modèle de page est conçu l’un après l’autre à l’aide du logiciel de PAO Photoshop, sur la base de la maquette fonctionnelle, tout en respectant les contraintes techniques liées au web. Les maquettes graphiques étant visées par l’intégrateur et le développeur pour s’assurer de leur validité technique.
Une fois toutes les maquettes et la charte graphique validées, place au développement (le développement des fonctionnalités a déjà été initié suite à la validation de la maquette fonctionnelle) et à l’intégration.