Vanessa i ref_2014

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 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 — vanessa.ilmany.@gmail.com — site en refonte)