webdesigner

Du Pareil Au Même : un site e-commerce

 Après des mois de dur labeur, de couches-culottes et de barboteuses, le nouveau site de Du Pareil Au Même voit enfin le jour !Dpam propose des vêtements, chaussures et articles de puériculture pour les enfants de 0 à 14 ans. Cette enseigne très connue des parents possède (possédait!) une identité visuelle très large, devant s’adapter aux tendances de la mode, aux différents âges visés et séduire les parents.Afin d’éclaircir l’univers graphique de Dpam, nous avons commencé le travail par des planches de tendances, qui permettront par la suite de délimiter une charte cohérente et adaptée aux besoins du client :Planche de tendance - DpamCes premières études graphiques nous aident à identifier clairement l’ambiance désirée par le client : le site de Dpam doit attirer et évoquer l’enfant par des couleurs vives et dynamiques, mais aussi rassurer les parents (l’acheteur) par une structure logique et efficace.Des personnages gais et souriants viendront guider le visiteur. Ils réfèreront à un univers illustratif, évoquant la narration, le conte pour enfant.Des pointillés glissés avec légèreté dans l’ensemble du site pourront évoquer les coutures des vêtements et, par extension, le soucis du détail, qui est un élément primordial dans les vêtements Dpam. De plus, en accompagnant les extrémités de ces mêmes fils pointillés par des étoiles, ils vont revêtir une ambiance féérique, ajoutant une fois de plus une connotation narrative enfantine.Enfin, la marque Dpam semble être représentée par un élément majeur : le damier, décliné en frise ou en motif, en tons pastels ou vifs. On le retrouve sur de nombreux éléments de communication : sacs plastiques dans les magasins, étiquettes de prix, calendriers annuels, vitrines.Ce travail de recherches graphiques va donc aboutir à une charte dans laquelle tous ces éléments vont cohabiter :Homepage - DpamNous constatons que les fils pointillés sont glissés dans le background, afin de ne pas surcharger le contenu tout en conservant les aspects de couture et de féérie. On les retrouvera aussi dans certains blocs ainsi que dans les sous menu intérieurs.Le background revêtira une couleur claire qui permet d’adoucir la vivacité des couleurs de la navigation et des personnages.Ces personnages, qui représentent chaque membre de la famille, interviennent dans différentes zones dont le contenu est directement lié avec leur activité : le père aide à la recherche avec sa loupe, la mère donne des conseils en sélectionnant des articles, le bébé appelle à l’espace récré, où l’on trouvera des jeux en ligne, et le garçon et la fille égayent les blocs « compte » et « panier », qui sont souvent traduits par des zones peu attractives de par la visualisation des prix, des logins et mot de passe …Le damier trouve aussi une place importante, maintenant la navigation principale sur un premier plan.Pages intérieures - DpamLa suite du travail de conception graphique a relevé essentiellement de l’ergonomie : trouver un juste milieu entre un univers créatif tout en ne perdant pas de vue les contraintes techniques liées aux outils de développement ainsi que les nécessités et les normes d’un site e-commerce. Les fiches produit, le panier et l’ensemble du process de commande ont été designées de façon à faire cohabiter de façon optimale le graphique et le technologique.Process de commande - DpamEt pour découvrir l’ensemble de la charte graphique, vous acheter un nouveau bavoir ou retrouver votre doudou, allez faire un tout sur www.dpam.fr !

Be sexy : Passionata !

Je vous présente aujourd’hui un travail réalisé pour un appel d’offre remporté pour la marque de lingerie Passionata. Le site que nous avons sorti récemment est fort différent, mais il me semble intéressant de s’arrêter quelques instants sur ces premières pistes graphiques !

En utilisant les codes graphiques du nouveau film Passionata, actuellement diffusé et réalisé par David La Chapelle, nous avons voulu recréer un univers symbolisant la femme Passionata : un monde à part, intense, gorgé de sensualité et d’espièglerie. Les éléments majeurs de cet univers sont le carrousel et le boudoir.passionata homeL’ambiance « boudoir » donne l’impression de pénétrer dans l’intimité de la femme. On retrouve les éléments graphiques du film : une forte dominante de rose et une place majeure consacrée à la relation fusionnelle entre la femme et le cheval. Grâce au décor panoramique et à la fluidité des mouvements, le visiteur entre dans un univers fantasmagorique et y découvre au cours de ce voyage ludique les produits Passionata. Le traitement graphique donne une impression de semi-réel à ces objets : photographie? illustration ? La sensualité Passionata serait-elle un rêve accessible à toutes ?passionata décorChaque objet du décor représente une rubrique et y donne accès . L’utilisatrice est donc invitée à voyager dans l’univers Passionata de manière ludique, un menu horizontal situé en haut de la page donnant un accès plus direct aux différentes rubriques.passionata collectionCheval à bascule, jeux, scintillement, … : quoi de plus naturel qu’un carrousel pour présenter les collections Passionata ?passionata page corporateLes pages de contenu textuels sont traitées de façon à mettre en avant un visuel Passionata et à favoriser la lisibilité et l’ergonomie. Un élément du décor principal devra cependant toujours être suggéré pour conserver l’univers du site et lier chaque rubrique entre elles (ici, par exemple, le motif de la tapisserie ; sur le carroussel, un coin de la porte,…).

Un peu de marketing viral

maquette marketing viralAujourd’hui, buzzons un peu !!! Voici une maquette dédiée à un projet non réalisé de marketing viral pour une entreprise d’impression. Par l’intermédiaire de vidéos, une communication sous forme de « buzz » tend à signifier les difficultés d’imprimer soi-même et l’efficacité de l’entreprise d’impression.D’un point de vue graphique, la nette rupture présente sur la maquette vient renforcer une dualité colorimétrique entre le blanc et le noir. Ici, le blanc vient symboliser le professionnalisme de l’entreprise. Quand au noir, il fait référence aux aléas de l’impression au bureau, faite soi-même. Il m’a donc semblé évident d’oser une démarcation visuelle franche entre l’entreprise et le bureau : le coté « imprévus » devant être uniquement associé à l’impression faite main, sans créer de confusion pour l’internaute.

Du côté blanc, un acteur intégré en vidéo est présent pour rassurer l’internaute (et donc le potentiel client!), dans un environnement clair et structuré. Le côté noir, en opposition à l’efficacité de l’entreprise, est maculé par les imprévus, ici signifiés par tâches d’encre et les morceaux de scotch : imprimer soi-même, c’est galère !

Baobaz : création d’une identité visuelle

Aujourd’hui, je vous propose de sortir de l’univers du webdesign avec un travail de charte graphique créé pour la webagency Baobaz. Profitez-en, ça ne se renouvellera pas souvent !Je suis donc partie sur la signification du nom « Baobaz« , issu de « Bouche A Oreille » (BAO) et « Base de données » (BAZ). De ce fait, il m’a paru évident de travailler sur le concept de dichotomie : comment donner l’impression de séparation entre BAO et BAZ, qui signifient 2 concepts différents, et, en même temps, les réunir en 1 seul ensemble unique ? De là en découle les planches de tendance suivantes :baobaz étude 01Il m’a semblé intéressant de poursuivre mon étude graphique sur la notion de trait de séparation, invisible, qui relie les 2 mots : BAO-BAZ. C’est là qu’interviennent les formes à l’intérieur du « O » qui ont, peu à peu, donné naissance à un gimmick.baobaz étude 02Une centaine de claques … euh calques pardon ! … plus tard, voici donc le résultat final :baobaz identité visuelle

Souvenirs, souvenirs : Lancôme

lancôme rose mystèreAujourd’hui, on va faire marcher la DeLorean et revenir 2 ans en arrière : ces maquettes datent un peu, mais 1 an à ne travailler que pour Lancôme, ça ne s’efface pas !La maquette ci dessus est une mini site réalisé pour la collection automne hiver 2005-2006. La navigation se fait par les miniatures des produits, à gauche, traités par ombres chinoises. Selon la catégorie du produit sélectionné (yeux, lèvres, …), un zoom sur le portrait de l’égérie de la collection apparait dans le miroir de droite. Pour en voir un peu plus, le mini site est toujours visible ici.lancôme noëlCi dessus, un autre exemple de maquette réalisé pour, cette fois-çi, le mini site de la collection de Noël 2005-2006. Le fond bleu nuit, l’espace aéré, le scintillement des étoiles (flash) donnent au packshot une impression de flottaison féérique. Quelques rubans rouges rappellent une iconographie magique et festive fidèle à Noël. Pour en voir plus, cliquez … nulle part, car le mini site n’est plus en ligne !