GRAPHISME

Création d'un blog
Back-End

Voici le blog Sculp'eaux, réalisée en trois semaines .


Nous avons choisi le thème "Bordeaux à travers... les sculptures" .
Nous avons fait toutes les maquettes du blog adapté pour ordinateur.


La partie [web] par ici...



>> La charte graphique
>> Les maquettes


[VOIR LE BLOG SCULP'EAUX]

La charte graphique

charte graphique police

LES POLICES

Pour les polices, nous en avons choisi deux.
L’une pour les titres, la “Stix Two Math” car nous la trouvons, travaillée graphiquement et adaptée pour faire passer une impression d’art et de prestige.
Pour les paragraphes d’articles et autres, nous avons choisi la police “Spartan” qui est une police plus simple graphiquement, plus facile à lire.
Cela facilite donc la compréhension et améliore l’esthétique graphique car elle fonctionne bien avec la “Stix Two Math”.

LES COULEURS

Pour les couleurs du site, nous avons tout d'abord cherché des couleurs propres aux sculptures que l’on peut trouver dans Bordeaux, telles que le bronze, l'argent, le marbre, le cuivre, le granit, l'or...
De cette réflexion nous avons choisi de conserver cinq couleurs (dont trois avec une version plus visible pour les hovers), à savoir :
- Pour la couleur des textes : un gris sombre (à peu près la même couleur que la statue de Francisco Goya).
- Pour la couleur de fond du site : un blanc légèrement sable (le même genre de couleur que l’on retrouve sur des statues de marbre tel que la statue de Montesquieu).
- Pour les boutons, les icônes et les liens nous avons choisi trois couleurs :
Un gris clair, qui rappelle là encore les statues en bronze ou en marbre.
Un bleu, qui évoque à la fois le bleu de la statue du lion de la place Stalingrad et celle d’un ciel ensoleillé pour souligner la présence des sculptures en extérieur.
Et enfin un jaune doré, qui lui évoque la tour de la vierge d’or ainsi que celle du soleil là aussi pour souligner la même notion d’extérieur.
À noter que ces trois dernières couleurs possèdent une version assombrie pour les hovers. Et que la totalité des couleurs de la charte graphique donnent un effet à la fois prestigieux et attrayant : à savoir l’effet recherché par un utilisateur qui souhaite s’informer sur les sculptures sans faire partie d’un site qui pourrait être “stéréotypé”.



L’ACCESSIBILITÉ

Bien évidemment ce choix de couleurs a aussi été réfléchi pour être accessible aux personnes en situation de handicap visuel.
Pour vérifier si les contrastes et l’accessibilité pour les personnes daltoniennes étaient corrects, nous nous sommes servis de l’outil Adobe Color.

charte graphique couleurs
charte graphique icones

LES ICÔNES

Pour ce qui est des icônes, nous en avons choisies six :
- “+” , sur laquelle l’utilisateur peut cliquer pour voir plus en détail l’article associé au texte de description.
- cœur vide , sur laquelle l’utilisateur peut cliquer pour aimer un article ou le commentaire d’un utilisateur.
- cœur remplie , sur laquelle l’utilisateur peut cliquer pour ne plus aimer un article ou le commentaire d’un utilisateur.
- bulle de texte , sur laquelle l’utilisateur peut cliquer afin d’écrire un commentaire sous un article, ou bien répondre à un autre commentaire.
- corbeille , sur laquelle l’utilisateur peut cliquer pour supprimer un de ses commentaires
- enveloppe sur laquelle l’utilisateur peut cliquer pour accéder à la page “Nous contacter”.

Nous avons choisi des designs épurés, et arrondis pour donner un effet de fraîcheur et de modernité sur notre site, et ne pas rentrer dans les clichés de sites de musée aux icônes très “carrées” et désuètes.

LE LOGO

Nous avons décidé de réécrire de manière stylisée le nom de notre site internet et nous y avons ajouté une tortue.

Les tortues sont deux des nombreuses statues de Bordeaux. Elles se situent sur place de la Victoire et symbolisent la culture du vin.
Sur les carapaces, on retrouve les noms des appellations bordelaises et dans la bouche des grappes de raisins.

charte graphique couleurs

Maquettes ordinateur

article partie page a propos page creat article back
accueil partie page connexion page inscription page accueil back page voir article back
bouton de retour