2. (ce moment gênant où le graphiste se met « à nu »)
Voici quelques projets !
3. Refonte
de site :
vue de listing produit
secteur : automobile (agence)
brief : site jugé dépassé, distinguer
les univers neuf et occasion
actions : brief, scénario, wireframing, conception
graphique des pages et complément d’icônes
note : site en cours de réalisation
4. Refonte
de site :
vue fiche produit
descriptif : site vitrine
d’annonces automobiles avec plusieurs
centres de vente physiques. Le webtostore est
une problématique importante dans ce secteur,
notre mission est de favoriser la mise en confiance,
le contact, rendre l’information accessible et pratique.
5. Refonte
de site :
vue formulaire
particularités : la stratégie a été un peu
floue au lancement du projet. Beaucoup d’essais
avant de réussir à définir les objectifs réels à savoir
la scission de leur stock neuf/occasion, et leurs services.
6. Refonte
de site :
vue accueil
secteur : enchères (agence)
brief : modernité, nouvelle section,
rendre claire la navigation
actions : brief, scénario, conception
graphique des pages et icônes
note : le site a subi des mises à jour depuis
7. Appel
d’offre :
vue accueil
secteur : automobile (agence)
brief : générer des multi-sites de marques
tout en gardant l’indépendance de chacun
actions : parcours utilisateur, wireframing,
conception graphique
note : charte couleur constructeur imposée
8. Version
mobile :
scénario de connexion
secteur : automobile (agence)
brief : apporter plus de souplesse
(déplacements, transactions,…) aux vendeurs
actions : parcours utilisateur, wireframing,
conception graphique
note : mise à jour de l’ensemble depuis mon intervention
Iphone Mockup
from PIXEDEN.
9. Set
d’icônes :
vue kit
secteur : automobile (agence)
brief : symboliser les services et action
d’un site d’annonces automobiles
actions : croquis, conception vectorielle,
mise en font-icon
10. Identité
visuelle :
vue d’ensemble
secteur : sport (freelance)
brief : apporter sérieux et dynamise.
S’affirmer en tant qu’acteur de ce sport
au niveau national
actions : logotype, déclinaisons,
refonte site web, projet de t-shirt
11. Cartes
de vœux :
base & déclinaison
secteur : tous (agence)
brief : communiquer ses vœux
et promouvoir leur mise en place
actions : croquis, choix typos, montage, effets
13. Contexte du projet
• Refonte graphique et stratégique d’un site vitrine
(site de présentation de véhicules, du groupe, de son réseau, de ses
services)
• Des services mais avant tout un réseau
(mise en avant de leur image de groupe, avec en parallèle l’indépendance
de chaque sous-site. Le contact est privilégié par le biais des services)
• La création de sous-sites sur la base du site groupe
(les informations dédiées aux sites groupes apparaissent sans perturber ni
nécessiter de nouveaux templates pour ces sous-sites : adapter l’existant)
14. Logo + menu + contact
Courte introduction (présentation)
Extr t
r
ait s ock
(vo + vn + p omos)
Moteur fulltext
Moteur de recherche normal
entrée rapides
(listes)
Refonte de site
1er
étape :
stratégie & brief client
+ arborescence
= zoning
(vulgarisation & pédagogie envers le client)
15. Refonte de site
1re
étape :
stratégie & brief client
+ arborescence
= wireframe papier
(squelette fonctionnel du contenu de la page)
16. Refonte de site
2e
étape :
stratégie & brief client
+ benchmark
= style tiles
(planche regroupant la tendance du (ou le) style graphique)
17. Refonte de site
3e
étape :
wireframe validé
+ style tiles validé
= composition graphique de l’accueil du site
18. Refonte de site
Page « phare » :
Les listes des produits/des annonces
sont importantes pour ces clients.
L’achat ne se faisant pas en ligne,
il leur faut intentionner le contact de l’utilisateur.
Une information suffisamment dense
mais qui nécessite un complément par contact
19. Particularités du projet
• Réflexion sur le style graphique, notamment les angles
(faisabilité en CSS, intégration, déclinaison avec la contrainte de sous-sites
avec couleurs différentes et support IE)
• Création & sélection cohérente d’icônes graphiques
(conception vectorielle pour transformation en fonte de caractères via
Icomoon, utilitaire de font-icon)
• Plus d’une vingtaine de pages avec sous-scénarios
(toujours veiller à la cohérence sous-sites, utilisation des compositions
de calques, tableaux de correspondance couleurs,…)
20. Bilan du projet
• Amélioration du process de livraison
(à l’issue des premiers changements + erreurs rencontrées, j’ai amélioré
ma documentation et présentation des livrables pour le développeur)
• Amélioration dans la création d’icônes
(les tentatives précédentes m’avaient value des erreurs de sortie)
• Plus gros dossier géré en direct avec le client
(tout s’est bien presque parfaitement déroulé, jusqu’à la livraison. Le Après
est à améliorer nettement, un style guide est nécessaire pour s’adapter
aux changements et nouvelles demandes sans consultation du graphiste)
22. Contexte du projet
• Création d’un logotype pour les gérants d’un gîte
(gîte ouvert dans l’année de demande de création du logo)
• Convivialité, chaleur, bien-être en mots d’ordre
(le public cible n’est pas large, des amis d’amis au plus étendu)
• La feuille de vigne, figure imposée
(le défi consistait à incorporer cette feuille de vigne, importante pour le
client, en référence à son adresse postale et son nom)
• Coloris déjà choisi
(la demande du client était cohérente avec l’application de ses besoins
28. Création de logo
4e
étape :
Travail manuel du G, du décor,
choix de typographie se rapprochant du
style manuel. Pour un effet naturel mais cadré.
29. Création de logo
Bonus :
Un logo seul, ce n’est pas réaliste.
Un logo est utilisé et est utilisable,
Ici j’ai simulé un environnement papeterie.
30. Bilan du projet
• Le lettering, une difficulté motivante
(l’aspect intime et chaleureux avait amené mes premiers essais vers une
écriture manuelle. J’ai pu découvrir et m’essayer au travail de lettre. C’est
finalement seulement les initiales qui ont bénéficié de cette technique,
plus minutieuse que difficile)
• Constat de la prestation d’un logo isolé
(je prévois désormais une déclinaison sur un des supports principaux pour
verrouiller la cohérence graphique mais aussi pour orienter le client sur le
futur bon usage de son logotype).
31. À bientôt !
Et merci pour votre lecture.
(Vanessa Ilmany, designer graphique & random wtf — vanessa.ilmany.@gmail.com — site en refonte)
