Après une petite escapade en Allemagne la semaine dernière, notre blog se tourne à nouveau vers le cœur du sujet : la conception et le développement de Dized. Nous vous proposons donc aujourd’hui un petit aperçu illustré du travail qui attend nos graphistes sur l’aspect visuel des tutoriels.
On ne prend conscience de certaines choses que lorsqu'elles nous manquent… Ça pourrait être le récit d'une histoire d'amour qui finit mal, mais il s’agit bien une ode à l’ergonomie. Car paradoxalement, un bon design passe généralement inaperçu : on ne prête généralement pas attention aux choses autour de nous si elles sont bien conçues.
À l’inverse, on se sent souvent décontenancé quand une porte ne s’ouvre pas du côté le plus « naturel ». Et quand le papier toilettes est presque à portée de main, on se demande vraiment si la personne qui l’a placé là s’est assise pour vérifier par elle-même. Les questions d’ergonomie rencontrées dans la vie de tous les jours se posent à peu près dans les mêmes termes lorsqu’on développe une application mobile : les utilisateurs ne le remarquent pas forcément, mais si le copier-coller de votre appli ne fonctionne pas comme ailleurs, vous pouvez être sûr que quelqu’un vous le fera vite remarquer. Et c’est la même chose en ce qui concerne l’habillage graphique : si votre application doit ressembler à Cones of Pawnee, mais que ce jeu ne contient pas les visuels dont vous avez besoin, comment faire pour obtenir tout de même un ensemble cohérent ?
Cones of Pawnee (mention spéciale à ceux qui connaissent la référence) ;)
Répliques virtuelles de jetons de Blood Rage
On a tous besoin d'un modèle
Pour créer les tutoriels et autres contenus dans Dized, nous avons commencé par élaborer un modèle faisant apparaître tous les éléments requis : boutons, bannières, zones de texte, etc. On a dû s’y reprendre à plusieurs fois, mais nous disposons maintenant d'une trame utilisable pour n’importe quel jeu. Tous les tutoriels proposés dans Dized comprendront par exemple un phase d’ouverture de boite : de quoi avons-nous besoin pour montrer le couvercle qui s’ouvre et le contenu bien rangé à l’intérieur de la boite, puis pour tout faire sortir avec des petites animations sympas et claires ? Si notre modèle est bien fait, nous n’aurons pas à repartir de zéro pour chaque nouveau tutoriel.
Assemblage de la boite (virtuelle) de Blood Rage
Trouver les bons visuels
Une fois que nous disposons de cette base, il faut que chaque tutoriel retranscrive fidèlement l’ambiance et l’identité visuelle du jeu en question. Être en contact direct avec les éditeurs est bien entendu d’une grande aide à ce niveau, puisque cela nous permet de disposer des ressources graphiques originales pour tous les projets sur lesquels nous travaillons. Selon l’avancement de la publication du jeu, ces visuels sont plus ou moins adaptés à une « conversion numérique », et beaucoup d’éléments doivent être entièrement créés (les boutons, les icônes, l’habillage des titres, et plus globalement, toute l’interface utilisateur) ou modifiés (certaines illustrations doivent par exemple être adaptées aux dimensions des appareils mobiles, qui affichent aujourd’hui une résolution plus fine que celles des fichiers d’impression). Pour créer tous ces nouveaux visuels, nos graphistes s’inspirent de ceux que nous avons déjà à notre disposition, et y associent des éléments cohérents : le style graphique de Blood Rage, par exemple, est d’inspiration Viking. Nous avons donc puisé dans l’iconographie et l’esthétique Viking, tout en respectant autant que possible le contenu existant.
Nouveaux visuels créés spécifiquement pour le tutoriel de Blood Rage
Esquisses préliminaires
Une question d’identité
Mais trop faire de zèle peut aussi être contre-productif, notamment lorsque notre travail touche à des visuels très identifiables. Cela nous est arrivé récemment : dans un audacieux élan créatif, nous avions décliné le titre de Carcassonne en sang et or, sans savoir que ce logo répond à un code-couleurs précis qui lui permet d’être reconnu en clin d’œil. Nous sommes rapidement revenu aux couleurs originales, mais nous en avons tiré une précieuse leçon : nous ne pourrons pas créer des tutoriels de qualité et fidèles aux jeux originaux sans apporter une grande attention à l’identité visuelle de chaque œuvre.
Logo officiel du jeu Carcassonne
Logo retravaillé pour Dized pour améliorer la lisibilité sur écran. Les modifications sont significatives, mais respectent l'esprit original, donc tout le monde est content !
Et à grande échelle ?
Une fois que nous aurons terminé les outils de création sur lesquels nous travaillons actuellement, nous rendrons accessibles à tous les contributeurs le modèle et les visuels-types.
Dans les mois à venir, nous détaillerons également la liste des éléments graphiques nécessaires pour adapter l’interface lors de la création d’un nouveau tutoriel, ce qui permettra aux éditeurs de créer eux-mêmes ces images pour leurs jeux existants, et de les inclure dès le départ dans les futurs projets qu’ils souhaitent voir sur Dized.
Notre but n’est surtout pas que les joueurs gardent les yeux rivés sur Dized (on préfère que vous vous concentriez sur votre partie !), mais il est essentiel pour nous que chaque tutoriel proposé soit joli à regarder, qu’il présente les informations de façon intelligente, et qu’il s’adresse aux joueurs aux moments pertinents. Pour parvenir à cela, et pour que les tutoriels semblent naturels et intuitifs à utiliser, nous aurons toujours besoin que nos graphistes nous donnent un petit coup de main…
Si vous voulez en savoir plus sur Dized, n'hésitez pas à nous suivre sur Facebook, Twitter et Instagram.