UI Design - Fire Icons

Projet UI design de courte durée où le but était de créer un pack d'icônes correspondant à un personnage de jeu vidéo maîtrisant le pouvoir du feu. Il faut savoir que ce personnage maîtrise les 4 éléments.

À la lecture du brief, une phrase m’a marqué, hors le fait que je devais réaliser une icône en rapport avec le feu, pour une super-héroïne maitrisant les 4 éléments : "à noter les triangles sur son col qui représentent les 4 éléments qu’elle maîtrise."

Je me suis alors mise en tête que le triangle était un élément important que je me devais d’exploiter dans la création de mon icône. J’ai alors imaginé qu’en réalité, le triangle correspondant à l’élément feu sur le col de l’héroïne était comme une sorte de rubis renfermant une flamme.

Croquis de recherches pour la forme de la flamme.

Pour ce qui est de la façon dont j’ai mis en couleur l’icône, j’ai créé une palette inspirée directement des couleurs du feu présent sur l’héroïne, ainsi que le rouge du triangle sur son col. Pour la flamme, j’ai ajouté un léger dégradé, rappelant celui présent dans le feu de l’héroïne. Le triangle lui, est fait d’aplats de différentes couleurs et non de dégradés, pour respecter la DA qui se veut proche du cartoon et donc avec des aplats plutôt que des dégradés et du flou.

Mise en situation de l'icône.

Pour la flat icon, j’ai conservé le rouge du col du personnage, et j’ai mis la flamme en blanc pour plus de visibilité. Cependant une version avec la flamme en transparent est disponible.

Mise en situation de la flat icon.

Je me suis permise de faire une troisième icône, qui serait juste une représentation du pouvoir du feu lorsqu’il est désactivé (dans l’UI, le pouvoir activé aurait son élément dans le triangle, alors que si il est désactivé, l’élément -ici le feu- disparait.

Mise en situation de l'icône représentant le pouvoir désactivé.