Embed Size (px)
Citation preview
(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 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
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.
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.
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
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
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.
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
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
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
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, 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)
Logo + menu + contact
Courte introduction (présentation)
Entrée réseaux (carte concession/marques/ateliers/offres RH)
Entrée services (reprise/carte grise/recherche personnalisée)
Footer (réseaux sociaux/extrait blog/liens administratifs)
Extr tr
ait s ock(vo + vn + p omos)
Moteur fulltext
Moteur de recherche normal
entrée rapides(listes)
Espace administrable offres pharesPublicité220x310
(1px masqué)
Refonte de site 1er étape :
stratégie & brief client + arborescence
= zoning (vulgarisation & pédagogie envers le client)
Refonte de site 1re étape :
stratégie & brief client + arborescence
= wireframe papier (squelette fonctionnel du contenu de la page)
Refonte de site 2e étape :
stratégie & brief client + benchmark
= style tiles (planche regroupant la tendance du (ou le) style graphique)
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 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
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,…)
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)
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 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
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 compromisLa 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 effet naturel mais cadré.
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.
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).
À bientôt !
Et merci pour votre lecture.
(Vanessa Ilmany, designer graphique & random wtf — [email protected] — site en refonte)
