Comme à chaque fois, lors de mes visites chez Eyrolles, la difficulté est de résister à l’appel de tous ces livres et surtout de faire un des choix.

Celui-ci s’est donc porté sur des livres consacrés à la typographie, pour la simple raison que c’est encore une lacune dans mes réalisations.

Typographie – La lettre, le mot, la page

- Editeur : Eyrolles
- Auteurs : J. Bracquemond, J. Dusong
- Parution : 04/03/2010
- Langue : Français

Pour qui ?
Pour ceux qui souhaitent perfectionner leur culture typographique ou apprendre les bases de la typographique.
Les principaux sujets dont traite ce livre : le vocabulaire de base de la typographie, le dessin du caractère, le caractère typographique, les différentes familles de typographie, la mise en page, la calligraphie, les métiers de la lettre…

Quelques photos de son contenu :

New Vintage Type : Classic Fonts for the Digital Age

- Editeurs : Thames & Hudson
- Auteurs : Steven Heller, Gail Anderson
- Parution : septembre 2007
- Langue : Anglais

Pour qui ?
- si vous souhaitez perfectionner votre culture de la typographie vintage, victorien, art déco et ornementale (entre autres…)
- comme source d’inspiration (de nombreuses illustrations et affiches)
- simplement pour le plaisir de regarder de beaux travaux typographiques.

Quelques photos du contenu du livre :

Nouvelle Typographie ornementale

- Editeurs : Thames & Hudson
- Auteurs : Steven Heller, Gail Anderson
- Parution : 11 février 2010
- Langue : Français

Pour qui ?
- si vous vous intéressez aux différentes façons de travailler la typographie ornementale dans des projets actuels,
- comme source d’inspiration,
- pour les amoureux de la typographie.
Les principaux sujets de ce livre : l’historique des différents styles (gothique, victorien, moderne, pop, psychédélique, …), les moyens naturels de dessiner une typographie (eau, branches, fleurs) et les typos « fait main », le côté éclectique dans son utilisation sous forme de « lettre objet », enjolivement et autres excentricités…

Un aperçu de contenu de cet ouvrage :

Mon coup de cœur !

Reinventing Letterpress: Prints by Contemporary Practitioners

- Editeur(s) : Rotovision
- Auteur(s) : Charlotte Rivers
- Parution : 01 juin 2010
- Langue : Anglais

Pour qui ?
- si vous souhaitez connaitre l’historique et les procédés d’impression typographique (Letterpress)
- comme source d’inspiration (de nombreuses illustrations absolument superbes)
- pour le plaisir de regarder des travaux de grandes qualités.

Quelques photos de son contenu :

Ressources :

Blogs sur la typographie :
- www.typographe.com
- www.typophage.com

Les articles par des graphistes :
- all-for-design.com
- pixenjoy.com

Culture et histoire de la typographie :
- www.typographie.org
- www.guide-typographie.com

Phénomène de mode ?  La page « Équipe » pour les agences ou « À propos » pour les freelances, devient de plus en plus courante. Souvent présentée de façon sérieuse, voir coincée dans certains domaines d’activités, chez les créatifs, cette page en plus souvent conçus de façon originale, amusante, voir carrément décalée.

J’ai répertorié pour cet article, 10 pages créatives d’agences ou studios, dont les équipes sont présentés de façon originales.

Attitude – Agence de Montréal

Le site est en Flash. L’équipe est présentée dès la page principale sous forme de carrousel avec tous les membres de l’agence. Les « acteurs » apparaissent à la façon d’un croquis. Une photographie et une animation prend rapidement le relais accompagné d’une phrase propre à chacun.
Dommage, il n’est pas possible de cliquer sur chacun d’eux pour en savoir plus…

Axome – Saint-Etienne

Chez Axome, c’est une page façon patchwork qui regroupe les membres de l’agence. La phrase « personnalités diverses, compétences multiples » donne le ton. La sensation de convivialité est présente et renforcé par les prénoms sur la plupart des photographies.

Breakfast – Liège

Le site est conçu en Javascript/jQuery. Sur la page de l’équipe, on distingue uniquement le haut des cheveux. Au survol, le prénom et le visage sont dévoilés. Au clic, une fiche descriptive indique plusieurs informations comme son rôle au sein de l’équipe, mais aussi des indications sur les goûts musicaux. Eliot, le chien de l’agence, a également sa fiche !

Caribara – Paris

Le site est en full Flash, les rubriques sont liées entre elles telle une toile d’araignée.
Chaque membre de l’équipe est représenté par l’illustration d’un super-héros. Le tempo est donné en cliquant sur les personnages, pour aboutir à un joyeux brouhaha musical.

Studio La Fille

Sur ce site full Flash,  la page « Contact et nous »  expose plusieurs cartes de visite.
Au survol de celle-ci, le membre de l’équipe associé à la carte, apparait en posture très dynamique avec les informations concernant son poste et par quel moyen le contacter.

LunaWeb – Rennes

La présentation est simple : la banale photographie est remplacée par un portrait en croquis.

Agence Néalite -Paris

Un premier carrousel composé de 3 images montre les bureaux et les équipes en plein travail.
Une galerie de portrait détaille en suite les membres avec leurs liens vers différents réseaux sociaux (Twitter, Viadéo, Linkedin…)

Agence Ola – Canada

L’agence Ola a choisi l’humour pour présenter ses équipes.
Sur leur site, les membres s’exposent dans de drôle de posture (dans un canon près à être expédié ou encore dans une montgolfière…). Le descriptif nous indique la fonction du membre au sein de l’équipe et  des petites informations propres au caractère de chacun.

le blog de l’Agence Ola – Canada

Sur le blog, on retrouve le même esprit décalé que sur le site, mais sous forme d’un jeu de tir.

Oneofus – Paris

Chez Oneofus, l’équipe, au départ dans le flou, est dévoilée au survol : le membre apparait clairement, avec une mini-fiche associé indiquant son rôle au sein de la structure.

Shining Karma – Strasbourg

Ce site avait déjà été évoqué pour sa navigation atypique (article 17 sites d’agences en full Flash).
La présentation de l’équipe est tout aussi inhabituelle avec ses membres en lévitation. Le descriptif est assez détaillé, indiquant le rôle dans l’agence, les loisirs et sites appréciés de chacun.

Personnellement, je pense que développer et personnaliser sa page « Équipe » ou « À propos » est un plus.
Au delà, de l’interlocuteur unique à qui le client a à faire lors des rendez-vous, il y a, derrière, un travail d’équipe. Le client peut ainsi  avoir une idée des personnes qui vont collaborer sur son projet .

L’ambiance dégagée par cette présentation peut rassurer. En montrant le bon état d’esprit dans lequel travaillent les salariés (ou freelances), le client peut se sentir rassurer et mis en confiance.

Et vous ?  Pensez-vous que cette page peut rassurer un client ?

Vous êtes freelance et votre page de présentation est originale ? (Éventuellement pour un prochain article)
Envoyez moi un mail avec une capture d’écran !

Sa spécialité : l’imagerie 3D qu’il interprète sur des projets d’animation ou non.

Le site :

Le portfolio Ice Cream www.iamicecream.com est à la fois sobre et moderne, intégré sous WordPress.
La navigation est simple et intuitive. La simplicité du design permet de laisser place au plus important : les travaux 3D très bien mit en valeur.

Qui est  Nicolas Dufoure ? :

6 années d’études dans le design produit l’on tout naturellement conduit à la 3D, qu’il a commencé à étudier en autodidacte. Depuis un an,  il vit de sa passion en travaillant chez lui, pour ces propres clients ou pour une agence Parisienne où il effectue des projets pour de gros comptes (Darty, Facom, Louis Vuitton…).

Ses logiciels de prédilection : Rhino3D,  3Dsmax,  Vray ainsi que la suite Adobe (principalement After Effect pour l’animation).

Nicolas aime également participer à des « collaborations », qu’il réalise avec enthousiasme. Cette activité lui permet de rencontrer des personnes partageant les mêmes passions, c’est aussi un moment de partage et d’expression autour d’idées communes.

Quelques uns de ces travaux :

Pour voir tous ses travaux, une visite sur son site :

www.iamicecream.com
Devenez fan sur Facebook

J’ai découvert un jeune papa plein de vie, enthousiaste et bien dans ses baskets, débordé aussi mais répondant chaleureusement à mes questions…

Peux-tu te présenter en quelques lignes et nous indiquer quelles études ou formations as-tu suivies ?

Salut, je m’appelle Nicolas Poirier aka BiSHOP(parigo), j’habite en Seine et Marne à Thorigny sur Marne !

Alors pour mes études, j’ai fais un CAP d’agent graphiste décorateur, peintre en lettre quoi !
Ensuite un Brevet de technicien dessinateur maquettiste et une année de formation en alternance, dans la société ou je suis toujours d’ailleurs !  Je voulais continuer mes études faire un BTS communication visuel en alternance mais des petite galère avec mon patron, et j’ai dû arrêter !!!

Quel a été ton parcours professionnel ?

J’ai fais pas mal de petits boulots à droite à gauche et suite à mon année d’alternance je suis resté dans la même boite !
Cela va déjà faire 8 ans que j’y suis. Wahou ! je me rend compte que ça fais … heu …  longtemps !!!!!!!!

Le site de Nicolas, Bishop Parigo
www.bishopparigo.com

Peux-tu nous expliquer la naissance de ton premier personnage ?

La naissance de mon premier perso, houla, c’était des « monsters poissons » ! oui oui, je faisais pas mal « poiscaille » au début héhé !!! avec des gros yeux, toujours comme aujourd’hui ! et puis l’évolution de tous ça donne mes monstres d’aujourd’hui !!!

© Tous droits réservés Nicolas Poirier

A voir toutes tes réalisations, on a l’impression que ton cerveau est en constante ébullition ? Où puises-tu toutes ses idées ?

Oui j’aime créer de nouveaux monstres, alors j’en fais pas mal ! Sur Illustrator,  j’ai des planches remplies de monstres déclinés dans pleins de styles différents. Je crée l’univers et l’ambiance après !

Pour mon inspiration, je puise dans tous ce qu’il y a autour de moi, les rêves, la télé, les magazines, le  net, la vie, la famille, ma femme, ma fille … tout !
Je pense à pas mal de nouveaux monstres quand je m’endors !

© Tous droits réservés Nicolas Poirier

© Tous droits réservés Nicolas Poirier

Quels sont tes principaux outils de travail et de quelle façon procèdes-tu ?

Principalement Illustrator ! Je travaille beaucoup sur Illustrator!  et un peu avec Photoshop.
Sinon, je dessine sur mon p’tit bloc note.

Je peint aussi… Dur dur, en été, mon atelier est sous les toits et il fait 50 degrés ! vivement l’hiver ! héhé

Quel type de client te contacte et pour quel genre de projet ?

Mes clients, ce sont des particuliers ! pour des toiles ou des illustrations personnalisées.

Je commence tous juste à un tout petit peu vendre quelque toile ou illustration, surtout grâce à ma première expo sur Strasbourg organisée par la « Beatburst Family » !

© Tous droits réservés Nicolas Poirier

Y a t’il un projet sur le quel tu as vraiment aimé travailler ? En quoi celui-ci a-t-il consisté ?

Oui un projet qui vient de se finir ! mon projet est « dessine moi un oiseau ».

Je voulais juste réunir pleins de gens, enfants, parents, grand-parents, dessinateurs ou pas autour d’un thème : le zozio ! et créer une grosse collaboration, faire une envolée d’oiseaux !

Le projet « Dessine moi un oiseau
www.dessine-moi-un-oiseau.com

© Tous droits réservés Nicolas Poirier

Une prochaine étape dans ta carrière ? Un rêve peut-être ?

Vivre de ma passion comme tous ceux comme moi !!! non? héhéhé
Un rêve : créer la marque sur la quel je travaille avec Lallyla & Marylin ! surprise !

Un dernier mot à ajouter pour nos lecteurs ?

Merciiiii

Merci à toi Nicolas d’avoir eu la gentillesse de répondre à ma demande !
Si vous aimez ses illustrations, vous pouvez retrouver des objets customisés sur plusieurs sites dont :
- www.thedirtycream.com
- www.kolorys.fr

Toutes l’actualités de Nicolas sur sur blog bishopparigo.blogspot.com et sur sa page Facebook

J’ai effectué cette sélection pour montrer que Flash ne veut pas forcement dire « images qui bougent dans tous les sens » et « maux de tête ». La simplicité et l’ergonomie, c’est aussi possible !

Une interaction judicieusement conçue peut rendre le site ludique et intéressant.
L’utilisation de Flash permet de réaliser des sites très créatifs et originaux.

Oneofus

Oneofus est un collectif de freelances.
L’équipe est présentée dès la première page.
Le design est simple et ergonomique. Pas de superflu, ici on va directement à l’essentiel et c’est très bien ainsi.

Nowooo

L’agence Nowooo a joué la carte de l’humour pour son site.
Vous trouverez sur chaque page une petite animation, avec leur mascotte, présentant la rubrique.
Le site est fluide et la navigation facile.

Danka Studio

Un design minimaliste qui fonctionne bien.
La navigation est simple et intuitive. Le  menu en cercle en fait un menu atypique et original.

Mille et un rêves

La navigation du site est intéressante. Le menu réagit au survol, le visiteur sait exactement ou il se trouve.
Les photographies utilisées pour le « background », change à chaque lien.
Dès la page d’accueil, des petits personnages illustrés vous invitent « à cliquer ICI ». Le lien envoi vers une vidéo informant la récente fusion de l’agence « Kartel » et « Mille et un rêves ».

DealCOM

Le graphisme de la rubrique « projet » est très bien faite, reconstituant une machinerie. Cependant, le menu en forme d’étoile passe presque inaperçu.
Point négatif : sur la page d’accueil, le personnage ricanant, au survol de la bouche d’égout, est plutôt énervant.

Nico and Co

Rien d’extraordinaire pour ce site, mais le graphisme sobre et élégant est plaisant.
4 petites icônes en haut du menu permettent de choisir la couleur du design.

Big boss studio

Plusieurs petits personnages vous accueillent sur la page d’accueil.
Chacun d’eux propose un mini-jeu. Mais sans explication, il faut parfois un moment de réflexion pour comprendre le principe. Il y a beaucoup d’interaction dans ce site, il faut fouiller un peu partout.
La mosaïque centrale est en fait un grand menu. Un deuxième menu est situé en bas de page regroupant les principales rubriques.

Shining Karma

Ce site a été vu plusieurs fois et référencé dans les sites d’inspirations graphiques, mais sa navigation particulière valait le coup de le représenter à nouveau.
Le site est ergonomique et la navigation intuitive, au clic ou avec la molette de la souris.

Riofluo

Riofluo est un collectif de créatifs.
Le site est simple. Les pages s’adaptent selon l’image centrale. Le « background » est aléatoire à chaque chargement du site. La navigation est ergonomique, seul petit point qui a faillit m’échapper : pour chaque projet, il faut cliquer directement sur l’image pour voir des captures supplémentaires.

Tropism

Chaque page illustre un univers différent avec des petites animations. Les illustrations du design sont réalisées en aplat de couleurs blanches et en filigrane.
Le menu peut être caché pour me pas gêner la navigation. L’ergonomie mériterait à être revue pour éviter des confusions à certains moments (on en sait plus trop ou l’on se trouve parfois).

IP.3

Le design de ce studio graphique se veut sobre et minimaliste en noir et blanc.
La navigation est ergonomique, on ne peut pas se perdre !

Vertu

Le site utilise plusieurs niveaux de navigation qui fait que l’on aurait tendance à se perdre.
Après avoir sélectionné une première rubrique, les projets s’affichent dans un encart au centre de l’écran, et parfois d’autres liens en bas de page. On ne sait pas trop ou cliquer, et le mouvement des  images de fond n’arrange rien. Dommage le site est agréable avec ses grandes photographies et l’arrangement de la typographie des menus principaux ‘fonctionne’ bien (sur les menus des 2 première pages du site).

Divine Agency

La page « actualité » fait un peu mal au yeux (je vous aurais prévenue).
Le reste du site est sobre, à dominante de noir. La navigation est simple et les travaux présentés sous forme de mosaïque.

Stargraf

Bien que le portfolio soit en construction, il est possible de voir les principaux projets réalisés sur la page d’accueil (en déplaçant les flèches de droite et gauche). Le design est sobre malgré les imposantes photographies et la typographie utilisée en taille élevée.

Eve agency

La présentation de l’agence est intéressante (Eve corporate).
Les activités et services sont présentés sous forme d’une vidéo dans leurs locaux.
Par contre, aucune référence en qui concerne les projets réalisés, ni les clients.

Blanc foncé

Ce site simple avec peu de contenu (seulement 4 rubriques), affiche en « background » une vidéo de style « vintage ».
Mais que l’on ne si trompe pas, l’agence réalise des projets modernes.
D’ailleurs en regardant de plus prêt, on peut voire que l’agence utilise régulièrement la vidéo dans ses projets.

Café Crème

Un site en Flash très sobre, au ton feutré. Aucune chance de se perdre, il n’y a que deux rubriques.
Les travaux s’affichent dès la page d’accueil, et les projets passent de l’un à l’autre avec un basculement de l’image de fond.

Je ne suis pas pour utiliser Flash dans tous les projets, ni pour que « ça fasse joli et que ça bouge » (© certains clients).
Mais dans des cas particuliers, avec un bon concept et de bonnes idées, un site en Flash peut être très accrocheur.

Quelques liens de « showcase » Flash :

- TheFwa
- Creattica
- Pixel perfect portfolio
- Best Flash Gallery

Ce site vitrine est conçu entièrement en  Flash. La direction artistique et la conception ont été confiées à l’agence Grouek située à Paris. Huit  illustrateurs et un animateur ont travaillé sur ce projet dans le but de représenter au plus près l’univers de la marque.

Pendant le chargement de la page d’accueil, un petit (trop petit ?) encart explique l’utilisation de la souris et le principe de navigation. Point intéressant et ludique : vous pouvez changer les couleurs des graphismes en cliquant sur les différents éléments (arbres, sol, nuages, buissons).

La visite du site est guidée par un petit personnage auquel vous indiquez la direction à prendre en déplaçant la souris.
Dirigez le curseur de droite à gauche en bas de la page, le personnage marchera d’une rubrique à l’autre. En dirigeant le pointeur vers le haut de la page, le personnage s’envole et devient un mini-super héros. Vous êtes pressez ? optez pour la navigation à l’aide du menu, notre « petit bonhomme masqué » s’envolera pour un trajet plus rapide.

Le site contient peu de pages, 3 exactement, en plus de la page de chargement.
« L’atelier effervescent  » : cette page représente un paysage urbain, au milieu du quel se trouve l’atelier de fabrication.
On y trouve les informations sur l’équipe et la fabrication des jouets.

La page « Collection » offre un décor de « maison zen et son jardin », un lieu d’amusement pour les enfants. La maison est un air de jeu présentant les produits entreposés ça et là. Une roulette disposée sur le côté de la maison permet d’accéder aux autres pièces. Celles-ci apparaissent à la façon d’un livre dont on tourne les pages.

La page « Contact » représente une « forêt enchantée » très colorée ou vivent des animaux rigolos.

Globalement le site est très vivant, il se passe toujours un événement : une grenouille passe en scooter, les enfants jouent, de la fumée s’échappe des cheminées… Les sons aussi sont amusants, avec des bruitages aux survols des boutons, ou en ouvrant les encarts d’informations.

Un site presque parfait mais quelques points auraient mérité à être développé avant la mise en ligne :
les pages « Actualités » et « Goodies » ne sont pas terminées ce qui nous laisse un peu sur notre faim après la découverte d’un tel site.
Dans la description, les jouets sont assez petits et il est impossible de les agrandir.

Voir le site en ligne :  www.djeco.com
Le site de l’agence Grouek : www.grouek.com

Je ne pensais pas passer autant de temps pour trouver ces pages 404…
Mais en cherchant, j’ai fini par trouver une belle collection, dans des domaines très variés.

L’ erreur 404 est un code d’erreur dans le protocole  HTTP qui signifie que la source (généralement une page) n’a pas été trouvée.
Nous avons tous déjà rencontré cette page.

Mais il en existe des plus originales.
Je commence avec les pages 404 dans le domaine du graphisme : les agences, les freelances et les blogs, puis des pages dans des activités très différentes.

Portfolio de Philippe Mignotte [ephfx] – Graphiste indépendant

Clear Ideaz – Webdesigner

Demain j’arrête – Blog BD de Christophe ANDRIEU

IMD Conseil

Robin Clédière – Webdesigner

Pixanimal Studio

WebGraphik – Graphiste freelance

Blog Bibox – Portfolio de Vincent Dassens

Portfolio de Jessica Perilhou – Webdesigner

Portfolio de Damien Alexandre – Web-développeur

Mon portfolio – Du bout des yeux

Nextum – Développeur freelance

Benjamin DS – Administrateur réseaux

Behind the web design – Developpement web freelance

Tilt Studio

Agence Luna Web

Area 17 Agence

Blog de l’agence Jackson & Kent

Agence Soleil Noir

L’agence Nealite

Agence web Alsacreations

L’agence Capasite

L’agence « Innovablog »

Groupe Reflect

Le blog « Blup ! »

Le journal du geek

Blog Parle de .com

Blog Parle de .com

Blog Regards sur le numérique

Le blog « Wisibility »

Geek and Hype
La page 404 complètement geek !

Blog « Gouik » – BD

Les magasins « Printemps »

Les magasins « La Halle »

Les magasins « La Redoute »

Les magasins « 3 Suisses »

Les restaurants « Hippopotamus »

TKaap – Communauté dédiée aux défis

Dailymotion
Une page 404 avec une vidéo qui aléatoire, très bonne idée !

Le blog Auto

Le blog « Brave patrie »

Le site « Flyprovence »

Blog de préparation à l’accouchement

Le blog « Univers Harry Potter »

Le site du fan club francophone « Hello Kitty »

Le site de la société « Kbane »

Blog Maccilabo

Océanopolis de Brest

Paris CE

La rue des hommes – E-commerce

Mairie de Taverny

La tireuse à bière

TvCampus

Yvelines informations jeunesse

Wibox – Fournisseur d’accès internet

Je termine l’article avec la page de ce blog
La page 404 de 95%

Les pages 404 ne sont pas les pages les plus visitées, pourtant je pense qu’il y a un intérêt à les adapter à la charte graphique du site. Pour exemple, j’ai récemment retrouvé un lien erroné vers mon portfolio sur un site. Une page inesthétique attendait les visiteurs…

A ce moment, soit la page est fermé car sans intérêt, soit le visiteur est un peu curieux et cherche à revenir sur la page d’accueil par lui-même.

La page 404 invite à un retour au site sans trop d’effort.

Avoir sur le même sujet :
Speckyboy Design Magazine : 50 exemples de pages 404
Article de Nextum : créer votre page 404 personnalisée

Je les ai réparti en plusieurs catégories :
- les « graphiques » : pour leur idée originale et la conception,
- les « chics » : pour la sobriété et le côté haut de gamme
- « J’aime aussi » : les sites plus basiques mais avec des petites touches graphiques que je trouve originales.

Les « graphiques »

Absorba :
Le site nous emmène dans un univers enfantin, un brin vintage. Le thème est parfaitement respecté et les bruitages du site ne font que le renforcer.
Des photographies sont traités façon rétro, rehaussées de couleurs pour dynamiser l’ensemble.
Côté technique, le site est mixte : mélange de Flash et JavaScript.

Lili Gaufrette :
Le design est simple mais fonctionne bien. Les photographies entourées d’une bordure blanche et petits pointillés donnent une impression d’images découpées. Le site est entièrement en Flash. Du côté de l’information, les produits sont peu détaillés : pas de zoom sur les articles, ni de prix. Le site reflète bien la ligne de vêtement : chic, mode et intemporelle.

Catimini :
Les rubriques de ce site sont présentées sous forme de boites. La boite s’anime et dévoile une scène différente pour chaque rubrique. L’idée est très bonne, le site est ludique. Des jeux en Flash sont également proposés (mais le premier ne fonctionne pas).
Les catalogues de produits sont originaux, mais sans renseignement concernant les prix. Il n’y a pas de zoom sur les produits.

La queue du chat :
Mon coup de cœur ! Si vous avez des petits, visitez ce site avec eux.
L’univers est enfantin avec des ballons et des animaux rigolos. Le site est également intéressant pour ses articles en coton biologique et son principe de commerce équitable.
Bien que le site soit français, il a été réalisé en Espagne.
Je vous invite à visiter toutes les pages.

Les « chics »

Alice à Paris :
La boutique est sobre et élégante. Les vêtements sont joliment présentés. Les prix apparaissent au survol.
Le site donne une impression de petite boutique Parisienne et haut de gamme, pourtant les articles sont abordables.
Ce site est réalisé en JavaScript.

Marèse :
Ce site en Flash a un design sobre et assez strict. Ici l’univers n’est pas enfantin, la cible c’est bien les parents.
La boutique en ligne est en construction, seul le catalogue est accessible.

Chipie :
Le site est consacré à la mode féminine pour petites filles, adolescentes et femmes.
Le design est assez épuré. Le logo au centre de la page est également un menu.
Chacune des rubriques sont représentées par 3 ambiances différentes : matériaux type Jean’s pour les enfants, plus urbain chez les ados, branché et chic pour les femmes.
Le site est en Flash.

3pommes :
Le site est sobre, les photographies donnent aux enfants un esprit de « petits rebelles » à la mode tendance.
Il y a peu d’information sur les vêtements et leur prix. Un making-off des séances photos est disponible sous forme de vidéo.
Le site est en Flash.

Tartine et Chocolat :
« Il était une fois » … présente des enfants bien sages.
Ce design sobre avec une typographie manuscrite semble nous plonger dans un comte pour enfant où le monde est beau et gentillet. Ici pas d’information sur les prix des articles, mais on identifie une gamme chic et haute gamme.

Bonpoint :
On reste dans le haut de gamme, et le site en a l’allure : épuré et chic.
La gamme de produits s’étend de la naissance jusqu’aux vêtements de grossesse.
Les vêtements sont présentés de façon original sous forme d’ensembles assortis. Les enfants semblent exigeant avec les bulles « Je le veux ! » intégrées dans le catalogue.
Le site de la maison Bonpoint est plus original et ludique avec des illustrations et animations. (lien en bas de la boutique)

« On aime aussi »

Sergent Major :
J’aime :

- l’environnement scolaire : feuille à carreaux, collages et découpages d’images,
- le jeux avec la taille de la typographie sur les majuscules et minuscules,
- la rubrique sur l’évolution du logo.

Le dressing des canailles :

J’aime :

- l’esprit nature, la clarté et la simplicité,
- la présentation des vêtements sur un fil à linge.

Mode en herbe :

J’aime :

- les dessins crayonnés,
- les couleurs,
- son contenu : une mode éthique et écologique.
On aime moins : les séparateurs de contenu en herbe un peu trop répétitif.

Gazouilli :

J’aime :

- la dynamique donnée par les rubans et les étoiles,
- son contenu : une mode enfantine éthique et poétique.

Les petites Choses :

J’aime :

- le menu et les titres des rubriques en crayonné,
- la simplicité et la clarté.
On se pose une question : à quoi servent les couleurs en haut à droite du site ?

Smallabe :

J’aime :

- le logo,
- la simplicité et la clarté,
- l’effet crayonné sur les menus.
On aime moins : la grande zone de lien en bas de page.

Du pareil au même :

J’aime :

- les illustrations
- la rubrique de jeux
- les petites illustrations représentant chaques rubriques

Little Boutique :

J’aime :

- le logo en typo crayonné
- la simplicité
- les petits dessins dans rubriques principales
- les vêtements suspendus au fil dessiné au crayon

Il existe de nombreux sites e-commerce dans le domaine de la mode pour enfant. Le webdesign de la plupart de ses sites ne sont pas confié à des professionnels. Du coup, bons nombres perdent en crédibilité.
Un marché à exploiter pour nous, les webdesigners !

J’ai visité pour cela environ 700 sites de mairies sur toute la France.
Sur un échantillon de 100 sites, voici mon constat :

- 24% des sites ont un design moderne (utilisant du JavaScript ou bannière Flash, structure en « div », couleurs harmonieuses mais restent basiques et n’ont rien d’exceptionnels…)
- 67% auraient besoin d’un sérieux coup de jeune. (site « vieillot », structure en tableau, pas de cohérence graphique…)
- 7% sont très laids (image de fond répétitive avec une image mal calée, gifts animés à profusion…)
- 2% sortent du lot avec un design travaillé, moderne et original.

Voici ma sélection parmi tous ces sites :

Le site de Villeurbanne est très moderne, aussi bien graphiquement que par les technologies utilisées pour son développement (bannière Flash et  JavaScript). Les normes d’accessibilité y sont respectées.

Le design du site est simple mais très propre. Le pied de page d’allure « web 2.0″ est agrémenté d’un paysage en ombre chinoise campagnard très frais. Un menu dynamique affiche simplement l’ensemble des rubriques organisées par catégorie. Un agenda regroupe sur la page d’accueil les événements à venir sous la forme d’un carrousel.

Le site de la ville de Montluçon utilise un style de menu complet semblable à celui de la ville de Chécy. Ce genre de menu est bien pratique pour éviter de tourner en rond à la recherche d’une information. Cependant, ce site le pousse peut-être un peu trop loin par moment avec la rubrique « Infos Pratiques ». L’entête du site est occupé par une bannière animée contenant des focus sur les actualités importantes. Enfin on retrouve dans le pied de page l’habituel et bien utile plan du site.

Le site est actuellement en refonte (ouverture prévu début 2010). La page de présentation semble prometteuse.
Pourtant le site existant n’est pas si mal  http://www.ot-lagrandemotte.fr
A surveiller  !

Le site est simple, mais il est habilement dynamisé par l’utilisation d’entêtes de rubrique et un logo disposés de travers.

Ce site réalisé dans les tons pastels se différencie par sa structure. Elle n’est pas faite en trois colonnes comme la plupart des sites de mairies. Petite déception, le site semble inachevé et de nombreuses pages sont vides. Autre remarque, le script de chargement des images de la bannière ne semblent pas fonctionner tous les jours.

Le site de Sautron est agréable avec son aspect « écolo ». Une petite bannière Flash, discrète se fond sous le menu.
Dans les pages intérieures, l’entête disparait et semble laisser un vide. De même, le pied de page semble vouloir passé inaperçu.

Très agréable, ce site nous emmène dans la région de Luz-Saint-Sauveur avec  vue sur les Pyrénées. L’atout principal est la bannière Flash.

Le site donne une impression de ville dynamique ! L’évènement faisait l’actualité s’affiche en background.
Une carte interactive permet de situer les différents quartiers.

Ce site est intéressant car son apparence semble changer selon la saison. Actuellement, l’entête à l’aspect d’un paysage d’automne. Ce site est développé utilise le CMS Joomla.

Le graphisme met bien en évidence le bord de mer sur lequel se trouve la ville. Pas de bannière Flash, ni d’animation, le site manque un peu de vitalité.

Comme on pouvait s’y attendre, le design du site de la ville d’Evian est axé sur le thème de l’eau. Le liseré sous le menu ajoute une pointe de couleur bienvenue dans cette ambiance sobre et reposante. Des petites bulles discrètes animent sur la bannière Flash contenu dans l’entête du site. Le menu est développé en JavaScript.

Le design est simple et le site est très agréable. Les couleurs sont cohérentes et  le graphisme très propre.
La bannière Flash est basique mais reste parfaitement dans l’esprit du site.

L’ambiance est donnée : Houlgate est au bord de la mer ! Pas d’animation sur ce site, juste un roll-over sur le menu qui fait apparaitre une image supplémentaire dans le décor principal qui enlaidie un peu le tout, dommage !

Le site de Fismes est  agréable de par son homogénéité de couleur. La fluidité du menu est très agréable.
Un peu déçu par le pied de page qui semble ne pas appartenir à ce site.

Le graphisme donne une légèreté au site par les illustrations crayonnés des boutons. Le menu représente à lui seul une grande partie du design.

Les grandes photographies en backgrounds sont le principal atout graphique du site. Les actualités à la une sont affichés dans un encart fonctionnant en JavScript. Le logo est dépassé et aurait du être actualisé pour mieux s’accorder avec le reste du site.

La ville de Châtellerault n’a apparemment pas d’identité visuelle précise. Il n’existe pas de logo. On peut s’en rendre compte en sélectionnant les différentes feuilles de styles (située en haut à droite du site).
Trois choix sont possible : bleu, vert et marron.
La version « bleu » est la plus pertinente graphiquement. L’entête est moderne même si le graphisme est principalement localisé dans l’entête.
La version « verte » affiche des images mals optimisées. Le rendu est décevant.
Quand à la dernière version « marron », elle est sans grand intérêt graphique.

Le site est actuel et les couleurs harmonieuses.
L’intérieur des pages en cohérent avec l’étiquette du logo (coins arrondis et pages penchées).
Un petit post-it  affiche des informations sur la ville.

Le site est développé sous le CMS Joomla.
Il n’y a pas d’animation Flash, le site est assez simple. La bannière donne l’idée d’une ville « verte ».
Une version du site existe pour Iphone (que je n’ai pas pu tester). Il est possible de suivre la mairie sur Facebook.

J’aime beaucoup ce site, je le trouve simple et moderne.
Le menu principal est en css, le menu secondaire avec les icônes est développé en JavaScript et jQuery.

Pour finir, un petit clin d’oeil à la mairie de Paris qui à récemment décliné une charte graphique pour tous les arrondissements (une couleur différentes pour chacun)

Les sites de tous les arrondissements sur cette page.

Beaucoup de site français traitent du sujet mais peu réussissent à réunir un contenu pertinent et une charte attrayante. J’espérais pourtant qu’un tel sujet donnerai naissance à des perles rares, j’ai du pourtant me rendre à l’évidence que le domaine restait encore en friche graphique !

Voici  14  sites sur des thèmes écologiques.

Agir avec Noé
Mon coup de cœur : le site est très agréable à visiter avec une charte graphique très détaillée. Les illustrations d’animaux et de plantes ainsi que les couleurs verte et terre mettent tout de suite l’ambiance.
Il est très instructif et détaillé. La partie « Pour les petits » réalisée sous forme de mini-jeux est ludique, dommage qu’ils ne soient pas interactifs. Une multitude de couleurs et de petites illustrations le rendent intéressant.

Ekolo[geek].com
Consommer oui, mais « consommer responsable », c’est l’information que transmet l’association Ekolo[Geek].
Les articles sont  illustrés de dessins sympathiques et compréhensibles aux couleurs de leur charte graphique.

Portail Eco-emballages
Le site est intéressant : la page d’accueil s’ouvre sur un mini-jeu pour apprendre à bien trier les déchets.
L’ambiance générale est plaisante avec ces grandes photos dans les rubriques principales. Le contenu est ludique et fait participer le visiteur lors des séquences d’explications au travers de mini-jeux.

Greenpeace France
Le site de Greenpeace France, nouvelle version (site refondu en 2009 il me semble).
Globalement le site est plus moderne dans sa structure notamment avec un défilement d’image dynamique sur la page d’accueil. L’information est bien organisée et facilement trouvable. Les articles sont composés de vidéos et de photographies prises lors d’évènements récents.

Campagne Réduisons nos déchets
Ce site de la campagne « Réduisons vite nos déchets, ça déborde ! » actuellement sur nos écrans télévisés est entièrement en Flash. Bien conçu, il est ergonomique et facile d’utilisation. Les différentes informations sont identifiés par des pastilles de couleurs en animées rendant la navigation ludique.

Fondation Nicolas Hulot
Le site de la Fondation Nicolas Hulot que l’on ne présente plus… Ce site est intéressant pour sa longue bannière s’étalant vers la droite, mais la navigation n’est pas celle espérée.  On a tendance à chercher un moyen de faire défiler ce décor dynamiquement, malheureusement ceci est impossible. Le principe de la chaine de mots est pourtant bien pensée.

Défi pour la terre
Le site de la campagne télévisée de « Défi pour la terre » diffusée sur TF1. Le contenu des rubriques est interactive, ce qui rend le site beaucoup plus agréable à parcourir. De nombreux livrets d’informations peuvent être téléchargés en fichier .pdf .

Les deux sites suivant sont le résultat d’un partenariat entre la « Fondation Nicolas Hulot » et « Défi pour la terre »

Des fraises au printemps
« Pour se nourrir dans le respect de la nature et des hommes », tout est dit dans cette phrase. Le site informe sur l’impact de nos choix alimentaires sur la planète et notre santé.

Eco défi
Tester vos connaissances et gagner des lots, le principe est intéressant. Ce jeu est organisé par la Fondation Nicolas Hulot.

Ecoloterie
Ce mini-site est conçu pour participer à une loterie gratuite et tenter de gagner des lots écologiques. La société organisatrice est Abcvert.

Chouett’ Vacances
Le concept de ce site dit « d’éco-tourisme »  m’a laissée sur ma faim.
Bien qu’il soit agréable visuellement, il s’agit surtout d’un annuaire. La rubrique « festivités et marchés de terroirs » est vide ne laissant s’afficher que le laconique message « Il n’y a aucun résultat pour votre recherche dans cette catégorie« , c’est dommage !  Quant aux « Activités, nature et découvertes » du menu principal,  elles débouchent sur une page d’erreur.

Agence des Espaces Verts d’île de France
Ce site peut se révéler très utile pour les amoureux de la nature vivants en Ile de France. On peut en effet y trouver des idées de balades, des parcours et plans des forêts. La rubrique de jeux pour les plus petits est intéressante et interactive. L’ambiance du site est légère et fraiche.

Je termine cette sélection avec deux sites e-commerce…

Buzibi
Buzibi est une boutique de vélo électrique. Le design est assez sobre, mais avec sa dominante de vert, le côté écolo est bien là.

Terra-éco
La boutique Terra-éco est spécialisé dans l’éco-habitat et propose des solutions dédiées aux économies d’énergie et au confort durable. La bannière du site est fraiche et nature, le contenu des pages est très sobre avec une dominante de blanc, ce qui donne au site une note de légèreté.