Références 2014 - Vanessa Ilmany

Extraits de références et déroulé de conception d'un projet web et d'un logotype

Transcript

1. Références 2014 #WEBDESIGN #PRINTDESIGN #CASESTUDIES Sélection de projets agence & free vanessa.ilmany@gmail.com
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
12. Une petite étude de cas ? Voici un projet de refonte !
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)
21. On peut parler identité ? C’est l’histoire d’un logo…
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. Création de logo 1re étape : Croquis de recherches du style typographique
24. Création de logo 1re étape : Croquis de recherches mise en scène des différents styles
25. Création de logo 2e étape : Recherches approfondies & nettoyage pour numérisation
26. Création de logo 3e étape : La vectorisation n’est pas satisfaisante, nous repartons sur un mix avec une typo
27. Faire des compromis La technique / La perfection / La réponse aux 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)