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 !

La cinquième édition de la conférence Paris Web, aura lieu du 14 au 16 octobre à Paris. Les différentes conférences aborderont les thèmes de l’accessibilité Web, du design numérique et des standards ouverts.

Conférences 14 -15 octobre 2010

Les conférences auront lieu les jeudi 14 et vendredi 15 octobre 2010 à l’IBM forum dans leur nouveaux locaux de Bois-Colombes. Accessible depuis Paris en train ou en voiture.

Adresse :
IBM Forum, 17, avenue de l’Europe, 92275 Bois-Colombes

Programme :
- 23 conférences de 50 minutes
- 7 mini-conférences de 15 minutes

Ateliers 16 octobre 2010

Les ateliers techniques auront lieu le samedi 16 octobre 2010 chez Télécom ParisTech, accessible depuis Paris en métro.

Adresse :
Télécom ParisTech, 49 rue Vergniaud, 75013 Paris

Programme :
- 24 sessions d’ateliers d’1h30

Combien ça coûte ?

Pour les conférences, des tarifs réduits sont disponibles jusqu’au 31 août sur le site de Paris-Web, au prix de 250€. A partir du 1er septembre, le tarif normal sera appliqué soit 340€.
Ce pass donne accès à toutes les conférences, petits-déjeuners et déjeuners inclus.

Pour les ateliers, le tarif est de 22€.
Ce pass donne accès à toutes les ateliers, petits-déjeuners et déjeuners inclus.

La liste détaillées des conférences et ateliers sont disponibles sur le site de Paris-Web.
Bon… on se voit là-bas ?!

Sources : Paris-Web

Tentez de gagner une place gratuite sur le blog de Julien !

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

Le but : se retrouver une fois par semaine, 1h sur Twitter autour du thème du webdesign et aborder des questions sur le métier.

Les questions peuvent être posé ici : http://www.formspring.me/wdfriday, certaines d’entre elles seront abordées la semaine suivante. Pour suivre la discution, le jour J utilisez le hashtag #wdfr sur votre Twitter.

Tous les vendredis à 13h sur Twitter #wdfr

En savoir plus :
http://www.fran6art.com/
http://twitter.com/wdfriday

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

Bonjour Gilles, peux-tu te présenter en quelques lignes :
Bonjour. Je m’appelle Gilles Vauvarin et je vis à Draveil dans l’Essone depuis presque 3 ans maintenant. J’ai grandis en Normandie entre une tarte Tatin et un Camembert au lait cru, puis j’ai émigré vers Paris l’année de mes 27 ans pour raisons professionnelles. J’aime le web, la nature, le sport, la diversité et la création sous toutes ses formes.

Quelles études ou formation as-tu suivies, et depuis quand exerces-tu ce métier ?
J’ai suivis des études de Biologie Marine à l’Université de Caen que j’ai clôturé en 1994 à Jussieu par un DEA d’Ecophysiologie des invertébrés.

Ne trouvant pas un poste en accord avec ma formation et mes envies, je me suis reconvertis aux technologies web en autodidacte. Mes connaissances se sont étoffées au cours de mes différentes expériences professionnelles en tant que webmaster, intégrateur, analyste-développeur, chef de projet puis responsable informatique.

En 2006, lasse du statut de salarié et de la technique, je négocie un départ de la société dans laquelle je travaille. Je m’investis alors à temps plein durant deux années pour me perfectionner en autodidacte au design et au graphisme numérique. Les connaissances acquises durant cette période d’autoformation ont été synthétisées sur mon blog www.pixenjoy.com.

En octobre 2008, je me suis installé comme webdesigner freelance sous un statut d’artiste auteur.

Quel est le type de client avec qui tu travail le plus ?
C’est variable. Je travaille soit en direct avec des entrepreneurs, des organismes, des PME-PMI; soit en sous-traitance pour des agences web ou des SSII.

Quelles sont tes spécialités ?
Je réalise uniquement des prestations de création graphique sur des applications/sites web standard (html/css/js). Pour le moment, les projets sur lesquels j’ai eu l’occasion de travailler en freelance ont essentiellement été des sites de contenu et des sites corporate.

A côté de mon activité de freelance, j’enseigne le webdesign dans une licence professionnelle multimédia à l’IUT de Corté. Je participe aussi cette année comme bénévole à l’organisation du Paris Web 2010, l’événement incontournable pour les amoureux du web et des standards.

Enfin, je travaille sur un projet personnel avec d’autres indépendants du web. Mais pour le moment ce projet est encore à l’état d’ébauche.

Quels sont tes principaux outils de travail ?
De ce côté la, je suis un peu un extra-terrestre dans le monde du graphisme. En effet mon environnement de travail est 100 % Open Source : PC et système GNU/Linux. Pour le travail sur fichier bitmap, j’utilise Gimp avec quelques extensions qui élargissent ses fonctionnalités. Pour les traitements par lot, il m’arrive d’écrire un petit script qui exploite les possibilités de la librairie ImageMagick. Pour les travaux vectoriels, je dessine avec Inkscape. J’ai également une tablette graphique que j’utilise lorsque je veux faire du détourage précis ou pour des travaux d’illustration un peu plus complexe.

Il m’arrive également de produire moi même certaines photographies. Pour cela, j’utilise un reflex numérqiue Olympus E1 et un pied Monfrotto.

Je ne possède qu’un seul écran de 19 pouces mais parfois je me dis qu’un deuxième écran ne serait pas du luxe.
Je tiens à préciser aussi que j’utilise encore beaucoup le papier et le crayon. Pour faire du brainstorming, de la conception, de la recherche d’idées, rien de mieux que les croquis sur papier. C’est rapide, jetable et notre esprit n’est pas pollué par des préoccupations techniques lié à l’utilisation de l’outil informatique.

Où puises-tu ton inspiration ?
A cette question, je pense que tous les créatifs répondront la même chose : « partout ». Que se soit sur le web, le print, dans le cinéma, la publicité, la photographie, la peinture, notre environnement urbain, la nature … il y a toujours quelque chose à prendre pour nourrir notre inspiration.
Il faut savoir être attentif au monde qui nous entoure, être curieux et emmagasiner un maximum d’idées et de visuels. Même si on ne sait pas ce qu’on en fera sur l’instant, il y a fort à parier que cela nous servira un jour. C’est un peu ça se faire un oeil, c’est enrichir notre « base de donnée » visuelle pour que le jour où nous devrons créer une oeuvre graphique, nous puissions disposer d’un vivier d’idées dans lequel piocher.

Comment aimerais-tu faire avancer ta carrière (ton but à court ou long terme) ?
J’aimerais améliorer mes compétences en illustration pour élargir mes possibilités graphiques. Je souhaiterais donc consacrer plus du temps à des activités comme le dessin, le digital et le matte painting, le lettrage etc
Être un bon webdesigner c’est aussi être un bon communicant. Il faut savoir faire passer des messages, donner du sens à ses créations, produire des design cohérent qui remplissent des objectifs concrets. Etre un bon communicant, c’est aussi savoir transmettre ses idées et défendre son travail devant une assemblée. J’aspire donc aussi à perfectionner mes aptitudes à communiquer.

Que penses-tu du niveau de webdesign en France ?
Que ce soit en France ou dans les autres pays, il y a toujours des talents. Le problème des webdesigner Français c’est qu’ils sont peu connu par rapports aux designers Anglo-saxons. Peut être ne travaillent ils pas suffisamment leur visibilité sur le web.

Quels sont les sites de références selon toi dans le métier ?
Un site Français à suivre qui devrait devenir une référence dans le métier notamment pour tout ce qui est process, c’est le blog de Laurent Demontiers. (http://demontiers.com/). Je suis également les blogs Francophones suivant : All For Design de Aurélien Foutoyet, (http://all-for-design.com), Design Spartan de Gaétan Weltzer (http://www.designspartan.com), bbxdesign (http://bbxdesign.com/), DigitalThink de Denis Allal (http://www.digitalthink.fr) … et bien sure maintenant 95%

A l’étranger, je trouve que Smashing Magazine (http://www.smashingmagazine.com/) fait un très gros travail dans le domaine du webdesign. Les articles sont riches et de qualités. Il existe de nombreux autres sites Anglophones intéressants , je citerais en vrac : le blog de l’agence web Viget Inspire (http://www.viget.com/inspire/), le blog de Andy Rutledge (http://andyrutledge.com/), le blog Webdesigner Wall (http://www.webdesignerwall.com/), le blog Asthéria (http://astheria.com/), Abduzeedo (http://abduzeedo.com) …

Un mot à ajouter ?
Battez-vous pour faire ce qui vous plait dans la vie et si vous ne savez pas, continuez à chercher.

Je te remercie, Gilles, pour ta participation et de nous avoir permis de faire mieux connaissance avec ton univers. Je suis tout à fait d’accord avec ton avis sur le webdesign en France, je rajouterais qu’il faut parfois creuser pour trouver des trésors !
Je te souhaite une bonne continuation pour tes projets à venir.

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 !

Le plus étonnant est de trouver parmi ces « plagieurs », des personnes travaillant dans les métiers de la création. Ils sont pourtant censés connaître et respecter la loi sur les droits d’auteur et la propriété intellectuelle.
S’agit-il de malhonnêteté, ou bien de flemmardise tout simplement  ? Peu importe, le plagiat est un délit  et il est punissable par la loi.

Extrait du code de la propriété intellectuelle  :
Article L335-2
Modifié par Loi n°2007-1544 du 29 octobre 2007 – art. 41 JORF 30 octobre 2007
Toute édition d’écrits, de composition musicale, de dessin, de peinture ou de toute autre production, imprimée ou gravée en entier ou en partie, au mépris des lois et règlements relatifs à la propriété des auteurs, est une contrefaçon et toute contrefaçon est un délit.
La contrefaçon en France d’ouvrages publiés en France ou à l’étranger est punie de trois ans d’emprisonnement et de 300 000 euros d’amende.
Seront punis des mêmes peines le débit, l’exportation et l’importation des ouvrages contrefaisants.
Lorsque les délits prévus par le présent article ont été commis en bande organisée, les peines sont portées à cinq ans d’emprisonnement et à 500 000 euros d’amende.

Après en avoir parlé sur Twitter, je me suis rendu compte que nous étions nombreux à être victime de ce genre d’abus. Dans cet article, j’essaie de réunir un maximum d’informations sur le sujet pour vous aider à réagir si cela vous arrivait.

1 – Comment détecter le plagiat

Le plagiat de texte :
- Utiliser Google en tapant un extrait de votre texte entouré de guillemets.
Par exemple : « mon texte a rechercher »
Les sites qui utilisent vos textes seront affichés dans les premiers résultats.

- Utiliser des sites permettant la détection de plagiat de texte tel que Copyscape ou Plagium

• Copyscape permet de retrouver des textes copiés à partir de l’URL de votre site. Ces recherches sont gratuites pour un nombre limité de 5 recherches par mois. Pour accéder à la version illimitée et recevoir des alertes par e-mails, vous devez souscrire à l’abonnement « Copysentry » pour environ $4.95.

Le plagiat ou utilisation de vos photos/images :
- Utiliser le site TinEye
Ce site gratuit permet de détecter des sites qui utilisent une photographie à partir de l’URL d’un site ou bien d’une image provenant de votre ordinateur.

- faire une recherche sur Google avec les mots clefs de l’image recherchée, ou sur le même principe que la recherche de texte, saisissez les légendes ou description de vos photographies.

Détection de Hotlink (vol de bande passante) :
- consulter les statistiques de votre site pour voir les sites référents.

- sur Google , dans la barre de recherche inscrivez : site:www.votre-site.com

2 – Quelle réaction avoir ?

Contacter le webmaster :
Le plagiat provient d’un site appartenant à un  professionnel :
- avant de prendre contact avec la personne, faites des captures d’écran au cas où vous en auriez besoin. Réunissez le maximum de preuves.
- contacter le responsable du site en restant calme et courtois. Précisez si besoin les pages sur lesquels les copies apparaissent.
- Laisser un délai de retour à la personne responsable du site,  faites une relance éventuellement si vous n’avez pas de retour au bout de quelques semaines .

Le plagiat provient d’un site appartenant à un  particulier (site perso, blog…) :
- contacter la personne et  lui expliquer les droits relatifs aux images et photographies car souvent ils ne les connaissent pas. De plus, ils ne pensent pas être dans l’illégalité.

Certains photographes et auteurs recommandent de ne pas contacter le propriétaire du site, mais de facturer directement pour « usage sans autorisation ». Des négociations étant discuter si le « plagieur » prend contact.

Contacter l’hébergeur :
- si vous n’avez toujours pas eu de réponse, et que les éléments du plagiat sont toujours en ligne, contactez l’hébergeur. Celui-ci doit être affiché sur la page  « mentions légales ». Si cette page n’existe pas,  utilisez le site Whois.net pour trouver ses informations.

- expliquez à  l’hébergeur le plagiat dont vous êtes victime en donnant toutes les informations et captures d’écran prouvant les faits.
Les hébergeurs font signer à leur client un contrat qu’ils doivent respecter. Le respect des droits de la propriété intellectuelle en fait parti. L’hébergeur prendra directement contact avec son client pour lui rappeler ses engagements.
En cas de refus d’obtempérer, l’hébergeur peut fermer le site.

Autre solution en cas d’échec auprès de l’hébergeur, vous pouvez contacter Google et l’informer d’une violation des droits d’auteur.
Lorsque votre plainte sera validée par Google, un lien vers votre lettre s’affichera dans les résultats de recherche de Google à la place du contenu retiré.
Vous trouverez la procédure à suivre sur le support de Google : signaler une violation de droits d’auteur

Dernier recours : les poursuites devant la justice
- réunissez toutes les preuves, gardez les e-mails et échanges que vous avez eu avec le webmaster et l’hébergeur.

3 – Comment protéger vos photographies, créations graphiques et textes :

Rappel de l’article L.111-1 du code de la propriété intellectuelle :
« l’auteur d’une œuvre de l’esprit jouit sur cette œuvre, du seul fait de sa création d’un droit de propriété incorporelle exclusif et opposable à tous. Ce droit comporte des attributs d’ordre intellectuel et moral ainsi que des attributs d’ordre patrimonial ».

Voici quelques astuces :
- protéger ces œuvres par un dépôt chez un notaire ou huissier. Certains site en ligne permettent de procéder à ses démarches en ligne comme par exemple le site de la SCAM (Société civile des auteurs multimedia) ou Copyright France.
Vous pouvez en trouver une liste sur ce site :  IRPI (Institut de Recherche en Propriété Intellectuelle).
Liste complète : Culture.gouv.fr

- Méthode simple qui fonctionne également : s’envoyer à soi-même ou à un tiers l’œuvre en lettre avec accusé de réception les données à protéger, le cachet de la poste fera foi. Attention : garder l’enveloppe sans l’ouvrir lors de la réception.

- Quelques astuces techniques en vrac :
Il n’existe aucune technique pouvant faire qu’une photo, un texte ou une création ne sera copiée. Cependant, il existe des moyens de rendre la tâche plus difficile et de dissuader un bon nombre de personne.

• indiquer en bas de vos pages que les droits sont réservés, les personnes ne pourront contester avoir été prévenues.
• mettre un marquage numérique sur vos photographies, ou bien votre nom en transparence. Pour les textes, garder vos brouillons, capture d’écran, etc…
• empêcher l’impression, la capture d’écran avec des astuces en html et css. Vous trouverez un bon nombre d’astuce sur ce site.
• créer vos propres licences d’utilisation. Vous trouverez sur le net des sites permettant de les gérer et les modifier. Par exemple le site Myows (merci à Auré de m’avoir fait connaitre ce site) ou Creativecommons.



• contre le hotlink, utilisez un code css qui mettra d’afficher une autre image sur le site qui les volent. Vous trouverez un tutoriel sur ce Forum.

Je ressens de la colère lorsque je découvre de mes textes copiés par d’autres, d’autant plus lorsqu’il s’agit de personnes travaillant dans le milieu du multimédia.  La création d’un site demande du temps et de la réflexion. Chacun devrait y travailler par soit même et ne pas copier bêtement le site d’une tierce personne.  Il est bien plus valorisant pour soi de créer son site, d’écrire ses textes ou de concevoir des éléments graphiques  de toute pièce.  Cela n’interdit en rien de visiter des sites pour s’en inspirer et chercher des idées.

Ressources :

Détection de plagiat à partir d’un texte :
http://www.plagium.com/

Détection de plagiat à partir d’une URL :
http://www.copyscape.com/

Détection de plagiat à partir d’une image  :
http://www.tineye.com/

Textes de loi sur la protection des droits d’auteur  :
http://www.culture.gouv.fr/culture/infos-pratiques/droits/protection.htm

Information sur le droit à l’image et droits d’auteur :
http://www.copypix.be
http://piratagir.romandie.com/

Aide à la protection de vos photos
http://www.photovoyage.org/blog/astuces-internet/protection-des-photos-sur-internet/

Aide pour retrouver vos images volées
http://blog.aube-nature.com/?2008/05/21/242-tineye-moteur-recherche-images-photos-volees

http://www.commentcamarche.net/faq/sujet-2302-webmaster-empecher-la-copie-de-mes-images-et-autres#1-en-cas-de-litige

Astuces CSS pour la proctection de vos pages et images

http://gcyrillus.free.fr/trucs_css/limiter-la-copie.html#cinq