Références
2014
#WEBDESIGN #PRINTDESIGN
#CASESTUDIES
Sélection de projets
agence & freevanessa.ilmany@gmail.com
(ce moment gênant où le graphiste se met « à nu »)
Voici quelques projets !
Refonte
de site :
vue de listing produit
secteur : automobile (agence)
brief : site jugé dépassé, distinguer
les univers n...
Refonte
de site :
vue fiche produit
descriptif : site vitrine
d’annonces automobiles avec plusieurs
centres de vente physi...
Refonte
de site :
vue formulaire
particularités : la stratégie a été un peu
floue au lancement du projet. Beaucoup d’essai...
Refonte
de site :
vue accueil
secteur : enchères (agence)
brief : modernité, nouvelle section,
rendre claire la navigation...
Appel
d’offre :
vue accueil
secteur : automobile (agence)
brief : générer des multi-sites de marques
tout en gardant l’ind...
Version
mobile :
scénario de connexion
secteur : automobile (agence)
brief : apporter plus de souplesse
(déplacements, tra...
Set
d’icônes :
vue kit
secteur : automobile (agence)
brief : symboliser les services et action
d’un site d’annonces automo...
Identité
visuelle :
vue d’ensemble
secteur : sport (freelance)
brief : apporter sérieux et dynamise.
S’affirmer en tant qu...
Cartes
de vœux :
base & déclinaison
secteur : tous (agence)
brief : communiquer ses vœux
et promouvoir leur mise en place
...
Une petite étude de cas ?
Voici un projet de refonte !
Contexte du projet
•	 Refonte graphique et stratégique d’un site vitrine
	 (site de présentation de véhicules, du groupe, ...
Logo + menu + contact
Courte introduction (présentation)
Extr t
r
ait s ock
(vo + vn + p omos)
Moteur fulltext
Moteur de r...
Refonte de site
1re
étape  :
stratégie & brief client
+ arborescence
= wireframe papier
(squelette fonctionnel du contenu ...
Refonte de site
2e
étape  :
stratégie & brief client
+ benchmark
= style tiles
(planche regroupant la tendance du (ou le) ...
Refonte de site
3e
étape  :
wireframe validé
+ style tiles validé
= composition graphique de l’accueil du site
Refonte de site
Page « phare »  :
Les listes des produits/des annonces
sont importantes pour ces clients.
L’achat ne se fa...
Particularités du projet
•	 Réflexion sur le style graphique, notamment les angles
	 (faisabilité en CSS, intégration, déc...
Bilan du projet
•	 Amélioration du process de livraison
	 (à l’issue des premiers changements + erreurs rencontrées, j’ai ...
On peut parler identité ?
C’est l’histoire d’un logo…
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...
Création de logo
1re
étape  :
Croquis de recherches
du style typographique
Création de logo
1re
étape  :
Croquis de recherches
mise en scène des différents styles
Création de logo
2e
étape  :
Recherches approfondies &
nettoyage pour numérisation
Création de logo
3e
étape  :
La vectorisation n’est pas satisfaisante,
nous repartons sur un mix avec une typo
Faire des compromis
La technique / La perfection / La réponse aux besoins
Création de logo
4e
étape  :
Travail manuel du G, du décor,
choix de typographie se rapprochant du
style manuel. Pour un e...
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 e...
Bilan du projet
•	 Le lettering, une difficulté motivante
	 (l’aspect intime et chaleureux avait amené mes premiers essais...
À bientôt !
Et merci pour votre lecture.
(Vanessa Ilmany, designer graphique & random wtf — vanessa.ilmany.@gmail.com — si...
Prochain SlideShare
Chargement dans…5
×

Vanessa i ref_2014

436 vues

Publié le

Latest work.

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
436
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Vanessa i ref_2014

  1. 1. Références 2014 #WEBDESIGN #PRINTDESIGN #CASESTUDIES Sélection de projets agence & freevanessa.ilmany@gmail.com
  2. 2. (ce moment gênant où le graphiste se met « à nu ») Voici quelques projets !
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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
  12. 12. Une petite étude de cas ? Voici un projet de refonte !
  13. 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. 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. 15. Refonte de site 1re étape  : stratégie & brief client + arborescence = wireframe papier (squelette fonctionnel du contenu de la page)
  16. 16. Refonte de site 2e étape  : stratégie & brief client + benchmark = style tiles (planche regroupant la tendance du (ou le) style graphique)
  17. 17. Refonte de site 3e étape  : wireframe validé + style tiles validé = composition graphique de l’accueil du site
  18. 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. 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. 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)
  21. 21. On peut parler identité ? C’est l’histoire d’un logo…
  22. 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
  23. 23. Création de logo 1re étape  : Croquis de recherches du style typographique
  24. 24. Création de logo 1re étape  : Croquis de recherches mise en scène des différents styles
  25. 25. Création de logo 2e étape  : Recherches approfondies & nettoyage pour numérisation
  26. 26. Création de logo 3e étape  : La vectorisation n’est pas satisfaisante, nous repartons sur un mix avec une typo
  27. 27. Faire des compromis La technique / La perfection / La réponse aux besoins
  28. 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. 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. 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. 31. À bientôt ! Et merci pour votre lecture. (Vanessa Ilmany, designer graphique & random wtf — vanessa.ilmany.@gmail.com — site en refonte)

×