Accueil > Projets > UX / UI Design et Site web > Créer pour s’envoler
Créer pour s'envoler
✿ Métier : UX/UI Designer
✿ Durée : Juin 2023
✿ Entreprise : Projet scolaire
Mes missions étaient :
✿ Graphisme
✿ Web
À propos du projet
En design de l’interface, nous devions à partir de wireframe déjà fournis, imaginez la partie graphique de celle-ci autour du thème suivant : Créer pour s’envoler.
Mes missions
✿ Graphisme
Après avoir effectué des recherches, nous devions concevoir l’identité visuelle de la marque, passant par le choix des couleurs, des typographies, des boutons, des icônes et des images.
Tout cela dans le but de se construire un moodboard, suivant d’un UI Kits et d’exemples de pages.
Les compétences visées sont :
- Recherche de moodboard logo et photo
- Recherche graphique
- Création d’un logo
- Pertinence et originalité créative des visuels logo photo et vidéo
- Finesse technique sur Illustrator, Photoshop
Quant aux outils utilisés, il y a eu la découverte de Figma, de la recherche graphique, typographique et sémantique. De la créativité bien sûr. Sans oublier une cohérence visuelle sur l’ensemble de la production.
Présentation de “Créer pour s'envoler”
✿ Thématique
“Créer pour s’envoler” est la thématique de ce projet. Nous étions libres de l’interpréter comme nous le voulions, tant que cela respecte le concept de création et/ou de s’envoler que ce soit au sens propre ou au sens figuré.
Pour ma part, j’ai choisi un envol dans le monde de l’imaginaire et du rêve, proposant des histoires pour s’endormir. Le concept peut même aller plus loin avec l’idée de partager d’histoires en tout genre pour rattacher à la notion de création.
✿ Moodboard
Ce moodboard est majoritairement composé :
- d’images en lien avec le ciel nocturne faisant référence au sommeil ;
- d’images oniriques et fantaisistes avec des couleurs vives ;
- d’images plus pour l’univers graphiques avec du flat design ou du line design ;
- la phrase “Les rêves et le sommeil” a un style manuscrit qui rentre bien dans le thème des histoires et de l’écriture ;
✿ Choix des couleurs
Voici ma palette de couleur et pourquoi je les ai choisies :
Le jaune est plus clair que mes autres couleurs, il pourra donc bien se contraster avec le violet et le bleu. Il peut faire référence aux étoiles dans le ciel.
Le violet a été choisi, car d’après la symbolique des couleurs, elle fait référence à la créativité, mais aussi à l’imaginaire, ce qui va parfaitement avec mon sujet. De plus, ce violet a un petit côté nocturne.
Le bleu est pour le côté rêve et apaisement. Sans oublier le ciel et donc le fait de “s’envoler”.
Le blanc est une couleur basique comme le noir.
Le jaune est plus clair que mes autres couleurs, il pourra donc bien se contraster avec le violet et le bleu. Il peut faire référence aux étoiles dans le ciel.
Le violet a été choisi, car d’après la symbolique des couleurs, elle fait référence à la créativité, mais aussi à l’imaginaire, ce qui va parfaitement avec mon sujet. De plus, ce violet a un petit côté nocturne.
Le bleu est pour le côté rêve et apaisement. Sans oublier le ciel et donc le fait de “s’envoler”.
Le blanc est une couleur basique comme le noir.
✿ Tests d'accessibilité des couleurs
Pour ce projet, il était demandé un contraste de couleurs supérieur à 4,5.
Les tests qui vont suivre ont été réalisés avec le site : https://contrast-finder.tanaguru.com/.
✿ Choix typographique
Titre : Dancing Script
Dancing Script sera la police d’écriture pour les titres.
Je l’ai principalement choisi pour le côté écriture manuscrit.
Mais il faut noter, qu’il ne faudra pas en abuser, car sur un trop grand titre, cela peut potentiellement ne pas être facile à lire.
Corps du texte : Poppins
Poppins sera la police d’écriture pour le corps du texte du site.
C’est une police d’écriture sans sérif, qui facilitera la lecture du texte, qui est un point important, notamment si le thème du site et son contenu est majoritairement du texte.
Il faudra donc une police d’écriture lisible en toute situation.
Titre : Dancing Script
Dancing Script sera la police d’écriture pour les titres.
Je l’ai principalement choisi pour le côté écriture manuscrit.
Mais il faut noter, qu’il ne faudra pas en abuser, car sur un trop grand titre, cela peut potentiellement ne pas être facile à lire.
Corps du texte : Poppins
Poppins sera la police d’écriture pour le corps du texte du site.
C’est une police d’écriture sans sérif, qui facilitera la lecture du texte, qui est un point important, notamment si le thème du site et son contenu est majoritairement du texte.
Il faudra donc une police d’écriture lisible en toute situation.
PS : La taille des titres peut varier en fonction de son usage, par exemple s’il est inséré dans une bannière ou sur une image carrée, celui-ci sera agrandi pour que cela soit bien visible.
Exemples : Sur les maquettes réalisées dans le cadre de ce projet…
Le titre principal de la page (h1) est de taille 126px ;
Les titres sur les images sont de taille 70px ;
Les titres des sections sont de taille 50px ;
Quant aux textes, cela varie entre 18px, 14px et 12px.
✿ Création des boutons
PS : La taille des boutons a été agrandie pour que ce soit visible dans un zoom réduit. Dans le cadre du site, les boutons ne seront pas aussi gros. De même que pour les icônes qui vont suivre.
✿ Création des icônes
Afin d’être cohérent avec le logo (voir ci-dessous), j’ai gardé l’idée de faire une ombre portée avec une couleur différente pour mettre en avant l’icône au moment de passer la souris par-dessus.
De même pour au moment du clic, des petites “étincelles” apparaissent pour que nous puissions faire la différence entre le hover et le clic.
✿ Création du logo
Voici le logo que j’ai réalisé pour “Créer pour s’envoler”, renommé dans le cadre de ce projet en “Dreamers”.
Ce logo est composé de différents éléments tels que :
- des étoiles pour rappeler la nuit et le rêve
- des plumes pour l’envole
- un arc de cercle, faisant référence à une lune
- sans oublier le nom de la marque “Dreamers”
L’ensemble forme un attrape-rêves…
✿ Types d'images
Images à utiliser
Les images à utiliser peuvent être variées en fonction du genre de l’histoire et de l’univers de l’auteur. Ainsi, l’image de présentation sera bien entendu choisie par l’auteur. Mais dans l’ensemble, les images choisies ont un lien avec le rêve, le ciel ou l’imaginaire.
Nous pouvons retrouver dans certaines images, le code couleur du site avec des couchers de soleil, la lune, les étoiles, etc. pour le jaune, et des ciels étoilés avec un mélange de violet et de bleu.
L’idée de l’envol se fait donc par les nuages, une vue du sol vers le ciel, les montgolfières, les ballons, les plumes des attrape-rêves (oiseau), etc.
Images à ne pas utiliser
Il n’y a pas vraiment de restriction d’images, étant donné que le rêve et l’imaginaire n’ont aucune limite.
Mais il serait judicieux de ne pas utiliser d’images si cela n’a aucun rapport avec l’histoire ou le genre.
Par exemple, ne pas mettre d’images de vaisseaux spatiaux pour une histoire médiévale.
De plus, je trouve que les images trop futuristes avec des vaisseaux spatiales font perdre le côté rêveur.
✿ Présentation des maquettes
✿ Éléments de mises en page
Scrollbar horizontal ou vertical
La scrollbar horizontal et vertical reprenne les couleurs de la charte graphique, ici une couleur foncée sur une couleur claire pour bien faire la distinction de notre position dans le scroll.
Les collections au format slider
Les collections au format slider seront présentées ainsi :
- Titre en bleu sur le côté droit
- Quatre images visibles, dont une coupée pour comprendre qu’il y a un scroll possible
- Les informations de l’histoire en question telles que le titre, le nombre de chapitres, la dernière mise à jour (et d’autres informations peuvent se rajouter par la suite)
- La scrollbar
Bannière image avec texte au format carré
Deux types de bannière image avec texte, dont la mise en forme est similaire, seul le CTA varie.
La première (à gauche), le CTA sera mis sur l’ensemble de l’image. Ainsi, nous ne sommes pas obligés de cliquer sur la flèche pour accéder à la section. Toutefois, la flèche est présente pour que l’on comprenne que l’image est cliquable.
La deuxième (à droite), le CTA est un bouton pour différencier des informations “Statut de l’histoire • Nombre de chapitres” et de l’action à faire (cliquer sur le bouton).
La bannière à gauche sera donc pour les genres d’histoire ou les catégories, tandis que la bannière à droite sera pour lire une histoire en particulière.
Listing d'éléments
Afin de respecter la loi de Hick, nous allons afficher 9 éléments à chaque listing de catégories, puis proposer un bouton “Afficher plus”.
Cela sera également accompagné d’une fonctionnalité “filtrer par”, afin d’aider à faciliter la recherche de l’internaute.
L’icône de l’étoile à côté du titre, du statut de l’histoire et du nombre de chapitres, permettra à une personne (qui possède un compte sur le site) à enregistrer en favoris pour lire l’histoire plus tard s’il le souhaite.
Ici, le bouton “Afficher plus” sera utilisé et non une pagination (Page 1 2 3 4 5 etc.), plus par choix personnel. Car je trouve cela plus simple d’avoir tout afficher sur une même page plutôt que de retourner en arrière pour retrouver un écrit.
Chose qui peut-être fait en plus, c’est qu’au moment du hover sur l’image, une opacité se met sur l’image et le résumé de l’histoire s’affiche.
Cards
Dans le cas où nous souhaitons mettre en avons un écrit, il sera possible de faire une card, comportant l’image de présentation de l’écrit en question, le titre et son résumé.
D’autres informations pourront être ajoutées telles que :
- le nombre de lecteurs / vues, de j’aimes et de commentaires ;
- le nombre de chapitres ;
- la date de dernière mise à jour ;
Ici, aucun CTA sera visible, mais l’ensemble de la card sera cliquable pour renvoyer vers l’histoire.
Éléments de navigation
La navigation a deux états (sans compter le hover) qui sont l’état normal dans lequel l’internaute n’est pas sur la page en question et l’état du clic dans lequel l’internaute est sur la page en question.
Afin de mieux mettre en évidence cela, en plus de mettre en couleur et en surligner, il y aura des “étincelles” et des “étoiles” pour que l’on visualise où nous sommes.
PS : La navigation sera en sticky.
Interactions avec les liens
