Si son nom ne vous dit rien Jean-François Porchez est typographe, directeur de Porchez typofonderie, professeur à l’ENSAD, il a été le président de l’ATypI (Association Typographique Internationnale) durant 3 ans et a participé au jury des plus grands concours typographiques mondiaux. Il a notamment créé : Ambroise, Apolline, Bienvenue, Costa, Dereon, Le Monde, Parisine, Sabon Next.

Cet article sera illustré par des extraits de ses réponses à quelques unes de mes questions. Une courte interview que j’ai réalisé et que vous pourrez retrouver dans son intégralité à la fin de cet article.

La typo et le web : un conflit d’intérêts ?

Le rendu typographique d’une page web dépend de multiples facteurs : les choix typographiques du webdesigner, le navigateur utilisé, le système d’exploitation, les préférences de l’utilisateur final etc.

Pour limiter la différence de rendu des pages web, les webdesigners ont longtemps opté pour des polices qualfiées de «Websafe» c’est-à-dire des polices présentes sur les machines des internautes : Arial, Verdana, Georgia, Helvetica, Tahoma, Lucida Grande, Lucida Console etc… Le site Codestyle a classé les polices en fonction de leur disponibilité.

En travaillant avec ces polices, les webdesigners gardent un maximum de contrôle sur le rendu final des pages qu’ils ont créé. Cependant, il est parfois frustrant de passer à côté d’un choix typographique qui semble coller parfaitement à la problématique soulevée par le client, par souci d’homogénéité du rendu final…

Des solutions ont donc été trouvées au fil du temps pour permettre aux webdesigners d’intégrer un plus large choix typographique dans leur processus de création. En général, ces solutions (Cufon, SIFR, FaceLift, Typeface.js etc.) s’appuient sur Flash, Javascript ou encore PHP.

Chacune d’entre elles possède ses avantages et ses inconvénients mais voici les problèmes récurrents : texte impossible à sélectionner, référencement, sémantique, temps de chargement, compatibilité, respect des standards etc.

…Nous parlons beaucoup de nouveaux modèles de licences pour rendre possible l’usage de fontes sur le web en respectant le droit d’auteur…

L’arrivée des CSS3 a considérablement transformé les moyens d’agir sur la typographie sur le web. La propriété «@font-face» a focalisé tous les regards. Avec cet outil, il est possible d’afficher une police dans un navigateur web même si celle-ci n’est pas installée sur la machine de l’utilisateur final.

Avec «@font-face», il suffit de placer votre fonte (le fichier de police) sur un serveur et d’indiquer le chemin dans votre feuille de style. Même si le travail de standardisation de tous ces nouveaux outils CSS3 n’est pas terminé, il est dores et déjà possible d’utiliser ces propriétés sur de nombreux navigateurs.

La solution est toute trouvée alors me direz-vous, plus besoin de chercher midi à quatorze heures, utilisons tous «@font-face» et ne nous limitons plus dans nos choix typographiques !

Hum hum… en fait, cette solution extrêmement puissante pose deux problèmes majeurs :

1. Comment gérer les droits d’auteur des fontes ainsi utilisées ?
2. Comment protéger ces fichiers ? En effet, si j’ai accès à l’url du fichier, je peux le télécharger et l’installer sur ma machine (je vole donc le créateur de cette fonte).

…il est aujourd’hui important de proposer des alternatives viables et faciles d’usage pour éviter de se retrouver dans des usages qui ne respectent pas les droits d’auteurs, comme il est possible techniquement avec le «@font-face» dans sa version brute.

Inutile d’être juriste spécialisé en droit de la propriété intellectuelle pour comprendre le problème qui se pose avec cette nouvelle solution…

Typographie et droit

Dans le droit Français, une police de caractères est protégée au même titre qu’un logiciel. L’utilisation de l’un ou de l’autre doit se faire après l’achat d’une licence. Cette dernière n’est valable que pour un nombre défini de postes (un ou plusieurs selon les cas).

Exemple : Une entreprise qui souhaite s’offrir une nouvelle identité typographique devra acheter autant de licences que de postes informatiques sur lesquels sera installée cette fonte. A grande échelle, inutile de préciser que les coûts des licences sont globalisés.

Si vous vous demandez pourquoi est-ce si contraignant d’utiliser des polices de caractères, il faut savoir que leur conception demande énormément de travail aux typographes (des semaines, des mois voir des années).

La seule source de revenu pour ces créateurs reste la vente de licences.

Vu sous cet angle, on comprend aisément que les fonderies portent un œil attentif à la question de la gestion des licences et à la protection des fontes.

La solution Typekit

Typekit est un service web qui met à disposition un catalogue de polices commerciales afin d’élargir les choix typographiques des webdesigners.

Le but est de pouvoir proposer des pages web affichant des textes dans des polices qui ne sont pas forcement installées sur les machines des internautes.

Les polices proposées sont hébergées sur une centaine de serveurs éparpillés dans le monde entier. Le site assure une très bonne qualité de service et propose même un lien d’accès aux statistiques des serveurs typekit (ping et temps de réponse).

Le modèle proposé par typekit

Typekit utilise la propriété «@font-face» pour permettre l’affichage de polices sur vos pages web.

Heuuu… oui mais nous venons de voir que cette opération est à la portée de n’importe quel webdesigner donc quel est l’intérêt ?

La valeur ajoutée se situe sur la gestion des licences et sur la sécurité. Les fontes sont sécurisées et il est impossible pour l’utilisateur lambda de les télécharger pour les réutiliser à son tour.

C’est pour cette raison que de nombreuses fonderies (dont Porchez Typofonderie) collaborent avec Typekit et mettent à disposition une partie de leur catalogue aux utilisateurs de ce service.

Typekit : comment ça marche?

Après avoir ouvert un compte, vous devez proposer les noms des domaines sur lesquels vous utiliserez ce système. Cela permet de définir précisément les limites d’utilisation des polices.

Ensuite c’est très simple, vous avez accès à une bibliothèque de polices. La classification est plutôt bien faite puisque vous pouvez faire votre choix en fonction des fonderies, de la forme des caractères (serif, sans, script, decorative), en fonction de tags (bitmap, small caps, art deco, bold, etc.) ou encore en fonction de l’utilisation que vous comptez en faire (titre ou labeur).

Typekit vous donne la possibilité de tester la police choisie avec votre propre texte, dans plusieurs styles (bold, italic, roman…) et biensur plusieurs corps (12pt, 13pt, 15pt etc.).

Le site propose une solution au problème de la gestion des licences en présentant 4 offres tarifaires de 25$/an (soit 17€) à 250$/an (soit 175€) pour la première année d’utilisation.

La différence entre ces offres se situe au niveau de la taille de la bibliothèque de polices utilisables, le nombre de noms de domaines enregistrables et de la bande passante qui vous est allouée. A noter qu’en version d’essai, vous devrez vous acquitter d’un badge Typekit obligatoire en bas de la page web utilisant le service..

Une police de caractère sélectionnée dans le catalogue sera automatiquement ajoutée dans votre « kit », une page accessible rapidement qui vous permet de visualiser votre panier et de gérer l’utilisation de vos polices.

Sur cette page vous pourrez assigner une classe css à une police. Une fois dans votre site, il vous suffira d’ajouter deux lignes de code dans le header de votre page puis d’appliquer cette même classe css à un élément pour voir le texte automatiquement transformé dans la police que vous avez choisie.

L’image ci-dessus est un screenshot d’un kit (version gratuite).,On peut voir que j’ai ajouté la police « Apolline STD » à mon kit. La classe css «.tk-apolline» m’a été proposée pour transformer le texte de ma page web avec les css.

Vous avez la possibilité de modifier le nom des classes par défaut, vous pouvez également créer vos listes (css font-stack) de remplacement pour les navigateurs ne prenant pas en charge la propriété «@font-face» (attention toutefois puisque les font-stack Typekit sont liées à Javascript… Pas de Javascript, pas de service Typekit)

Si vous souhaitez vous faire une idée du rendu voici une page de demo Typekit.

On constate donc que l’opération est extrêmement simple. Le code reste propre, la sélection du texte est possible tout comme le reste du texte sur la page web…

Concernant la compatibilité, Typekit fonctionne sur tous les navigateurs prenant en charge la propriété «@font-face» : Firefox 3+, Safari 3.1+, Internet Explorer 6+.

Les inconvénients de Typekit

Même si Typekit est une solution satisfaisante, elle n’est pas parfaite pour autant et présente quand même quelques inconvénients.

• Utiliser ce service va alourdir votre page et donc augmenter le temps de chargement. Le poids de chaque police est indiqué en bas de votre page de kit (100ko minimum pour une fonte complète)
• Typekit ne fonctionne pas sans Javascript… Les font-stack css que vous avez spécifié dans votre kit fonctionnent également avec Javascript… Il faudra donc prévoir des polices de remplacement pour les utilisateurs ayant désactivé Javascript (en ajoutant une liste font-family dans votre propre feuille de style).
• Le prix du service risque d’augmenter après la première année de souscription. Une promotion est en cours au moment où j’écris ces lignes : si vous souscrivez maintenant, le prix restera le même jusqu’à ce que vous décidiez de partir.
• Actuellement, les fonctions OpenType ne sont pas encore correctement supportées.

Les fontes Typofonderie disponibles sur Typekit ne sont que des fontes basiques, collection STD, car les fonctions OpenType ne sont pas encore totalement supportées sur le web et les navigateurs.

Bref… chaque solution possède des inconvénients et Typekit ne fait pas exception. Cela dit, ce service a le mérite de proposer une solution au problème de la gestion des droits d’auteur des polices commerciales et à la sécurisation des fontes. Rien que pour cela, nous pouvons saluer cette belle initiative.

Le point de vue de Jean François Porchez

Pour terminer cet article je vous livre les réponses que Jean François Porchez a apporté à quelques-unes de mes questions.

1. Comment avez-vous connu Typekit?

C’était quelques mois avant le lancement, car nous parlons beaucoup de nouveaux modèles de licences pour rendre possible l’usage de fontes sur le web en respectant le droit d’auteur.
Déjà avec les fontes incorporées à des produits logiciels, ce sont des sujets sensibles. Le Flash, d’autres choses comme le TrueDoc, le Sifr, etc. Depuis les CSS avec ce nouvel outil @font-face, cela devient très problématique. Il existe également le format Woff, supporté par Firefox, moins pire que FontFace mais pas forcement adapté comparativement à Typekit.

2. Qu’est ce qui vous a poussé à proposer vos fontes sur ce service ?

Comme je disais il est aujourd’hui important de proposer des alternatives viables et faciles d’usage pour éviter de se retrouver dans des usages qui ne respectent pas les droits d’auteur, comme c’est le cas techniquement avec @font-face dans sa version brute.

3. Quels sont les bénéfices de la présence de PTF sur Typekit ?

Impossible à dire, c’est trop tôt.

4. Comment s’est effectué le choix des fontes que vous avez mis à disposition ? Aviez-vous des spécifications minimales requises ?

Un extrait de catalogue, d’autres arriveront plus tard logiquement. Si les fontes sont correctement conçues, il y a normalement aucun problème d’affichage écran avec les systèmes d’exploitation contemporains, type MacOs X et Vista-7.
Les fontes Typofonderie disponibles sur Typekit ne sont que des fontes basiques, collection STD, car les fonctions OpenType ne sont pas encore totalement supportées sur le web et les navigateurs.
Exemple : Parisine et Parisine PTF, le support OpenType et le nombre de glyphes n’est pas identique.

5. Quel est votre regard concernant l’évolution de la typo sur le web ?

De gros changements très positifs comparativement au début de la dernière décennie, où la main mise d’Internet Explorer rendait impossible le développement d’un web qui respecte les normes du W3C.
Voyez ça : Le redesign de Typofonderie et Type sites do web standards.

En guise de conclusion

Il me semble que nous vivons actuellement une vraie révolution des outils et pratiques de création de sites web. Avec l’arrivée des CSS3, du HTML5, nous avons (ou aurons bientôt) accès à une multitude de nouveaux outils.

Des services comme Tyepkit peuvent être d’un réel intérêt s’ils sont utilisés à bon escient. Nous ne devons pas perdre de vue que le but est avant tout de répondre à la problématique de nos clients. Avoir accès à des milliers de polices de caractère c’est bien, savoir les utiliser correctement c’est encore mieux.

Il me semble qu’en matière de typographie, les webdesigners auront tout à gagner en se servant de la longue expérience du monde de l’impression.

Ne perdons pas de vue le célèbre adage «Form follows function» et sachons tirer parti de toutes ces nouvelles solutions qui s’offrent à nous pour enrichir nos pratiques.

Le but de ce tutoriel est d’arriver à créer un fil d’ariane constitué d’images et qui s’adapte au contenu (technique des sliding-door ou portes-coulissantes).

Démonstration

Vous pouvez dès maintenant télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS.

Une version de démo est visible sur cette page : Démo : fil d’ariane avancé en css.

Explications

Pour réaliser notre fil d’ariane nous allons nous servir des balises html <ul> et <li> et nous allons y placer des images de fond.

L’important ici c’est de repérer les ensembles d’éléments. Ici il y en a trois :

• Le premier élément de la liste : l’image de fond est différente des autres
• Tous les éléments de la liste sauf le premier et le dernier : l’image de fond est identique à chaque fois
• Le dernier élément de la liste : ne contient pas de lien

Un petit schéma pour mieux comprendre la construction html de notre fil d’ariane :

Pour chaque élément de la liste il y a trois images. Puisque les « multiple-backgrounds » n’en sont encore qu’à leur début en CSS3, il faudra se contenter d’une seule image de fond par élément html. Il faut donc nécessairement 2 éléments html en plus du <li>. J’ai utilisé les balises <a> et <span>.

Puisque le dernier élément de la liste n’est pas cliquable, j’utiliserai deux balises <span> côte à côte.

Venons-en au cœur du problème à savoir le code…

Le code html

<div id="breadcrumb">
 <ul>
  <li class="first"><a href="#" title="Back to item1">item 1</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 2">item 2</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 3">item 3</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 4">item 4</a><span class="end"> </span></li>
  <li><span>item 5</span><span class="end"> </span></li>
 </ul>
</div><!-- /breadcrumb-->

Le code CSS

/*Largeur du div englobant*/
#breadcrumb{width:500px;}

/*Reset sur les éléments de la liste*/
#breadcrumb ul, #breadcrumb li {
list-style-type:none;
margin:0;
padding:0;
}  

/*Style de la liste*/  
#breadcrumb ul{
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
margin:10px auto;
padding:10px;
}  

/*Premier élément de la liste*/
#breadcrumb li.first {
background:url(../images/first-left.png) 0 0 no-repeat;
height:33px;
}

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}  

/*Style de élément central : a (pour tous les éléments sauf le dernier) et span(pour dernier élément de la liste)*/
#breadcrumb li a, #breadcrumb li span {
float:left;
background:url(../images/bg-gradient.jpg) 0 0 repeat-x;
height:33px;
margin:0;
padding:0 0 0 5px;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.02em;
}  

/*Style du span.end pour image de droite*/
#breadcrumb li span.end {
float:left;
background:url(../images/general-right.png) 0 0 no-repeat;
width:15px;
height:33px;
}

Quelques explications complémentaires…

<div id="breadcrumb"> ...</div>

Ce div englobant peut vous permettre d’éviter les soucis d’interprétation du modèle de boite par les différents navigateurs… Ainsi vous pouvez donner une largeur au div#breadcrumb et donner les valeurs de padding/margin à votre liste ul. Aucun de ces deux éléments ne couple width+margin+padding. En codant ainsi, vous ne rencontrerez aucune différence de rendu entre navigateurs.

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}

Ici on place l’image de fond située sur la partie gauche des <li> principaux. Pour ne pas que le contenu empiète sur l’image de fond, on donne un padding-left de la même largeur que l’image de fond soit 13px.

Pour centrer verticalement le contenu d’un élément de type « inline » on utilise la formule : height = line-height.

Compatibilité IE6…

J’ai volontairement utilisé des images transparentes en png pour cet exemple puisque les navigateurs sont maintenant capables de très bien gérer ce format. Cependant, le format png n’est pas pris en compte par IE6 et cet exemple ne fonctionnera donc pas vraiment sur ce navigateur.

Pour ceux qui sont pour le progrès, laissez tombez ce qui va suivre…

Pour ceux qui sont souhaitent encore optimiser leur contenu web pour les utilisateurs d’IE6, voici 3 solutions pour gérer correctement la transparence du format png sur ce navigateur :

Vous trouverez une solution qui fonctionne parfaitement en allant voir de ce côté : IE PNG Alpha Fix v2.0 Alpha 4.

Vous pouvez aussi utiliser des images en gif en plus de vos images png et faire en sorte qu’elles ne soient prisent en compte que pour IE6 grâce à la propriété : «!important». Je vous renvoie à l’article de Gopal Raju sur son blog ProductiveDreams : IE CSS hack without using any hacks!

La troisième et dernière solution consiste à utiliser les filtres Alphaimageloader. Elle est à bannir si vous voulez passer la validation du W3C mais s’avère être tout à fait fonctionnelle. Pour plus d’infos à ce sujet je vous renvoie à l’article d’Alsacreations : Obtenir la transparence PNG avec Internet Explorer 6.

Conclusion

Cet article touche à sa fin ! N’hésitez pas à me faire des retours. J’ai essayé de trouver un moyen fonctionnel pour arriver à mes fins mais il y a peut-être mieux ?! Pour finir je vous donne les deux liens de téléchargement et de démonstration :

Télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS. Le contenu du zip est visible sur cette page : Démo : fil d’ariane avancé en css.

Quelques explications…

C’est après avoir découvert le nouveau blog de Sandrine Abraham : «95%», ayant pour but de faire découvrir le webdesign Français, que j’ai eu l’idée de créer un nouveau bureau public exclusivement francophone et focalisé sur le Webdesign, le Graphisme et l’Intégration Web. Son nom : Webdesign, Graphisme et Intégration > Français. Je sais ce n’est pas très fun mais je suis ouvert à toute suggestion.

Hein?! Symba… quoi ?

Si vous ne connaissez pas encore Symbaloo, il s’agit d’un outil gratuit permettant de créer des espaces publics ou privés appelés « bureaux », accessibles sur le web via votre navigateur, dans lesquels vous pouvez placer des bookmarks, des flux RSS, des widgets etc…

Pour ma part j’utilise Symbaloo comme outil pour centraliser tous mes bookmarks dans des bureaux regroupés par thèmes. J’ai ainsi créé plusieurs bureaux publics sur des thèmes divers et variés (Webdesign & graphisme, Magazines, Tutoriaux, Groupes FlickR etc…).

Si cela vous intéresse, je vous renvoie à cet ancien article : «Webdesign, Graphisme, Magazines… 200 adresses partagées avec Symbaloo !» sur lequel je présente cet outil ainsi que les nombreux bureaux publics que j’ai déjà créé. Pour les feignants, vous retrouverez la liste à la fin de cet article :) .

Webdesign : Les sites Français mis en avant

Aujourd’hui je reviens donc à la charge avec un nouveau bureau public sur lequel vous trouverez les meilleurs sites web et blogs francophones axés Webdesign, Graphisme & Intégration.

Vous pourrez ainsi retrouver pour le moment une trentaine quarantaine de sites web et blogs parmi lesquels :

• Design Spartan
• CSS 4 Design
• JS 4 Design
• Pixenjoy
• Antisocial, le blog de Joolz
• Pioupioum’s dev’
• Webdesign 2803
• Lazyheart
• 95%
• Mattrunks Tutoriaux
• Babylon Design
• Fran6Art
• FredZone
• Inéation
• Vendeesign
• Jarodxxx
• Webdesigner Trends
• DITW : Design is the Weapon
• Dot Design
• EgoBlog
• Bob Martien Design
• Snoupix Actualités
• Cowlor
• Vains Faktory
• Fuegin
• We Love Webdesign
• Grafikart
• 1DCafé
• Wizibility
• Webdesign Mag : le blog
• Advanced Creation : le blog
• Fubiz
• Etapes
• PixelCreation
• Picture & Co
• Alsacreations
• ArtSkills
• Pompage
• Graphic Exchange
• HTML Zen Garden
• Webmark
• WebInventif
• Weedle
• Oxynel
• Laurent Demontiers
• BBX Design
• WebMark
• Delisigns
• BlogMotion
• Redsan

Cette liste est amenée à évoluer et je vous invite à partager toute adresse pouvant être ajoutée à ce bureau.

Les autres bureaux publics Symbaloo

Comme promi, pour ceux qui avait oublié, voici la liste des bureaux précédemment créés et qui ont beaucoup évolué depuis leur création.

• Webdesign & Graphic Design #1 : Les meilleurs sites traitant de Webdesign et de graphisme (part.1)
• Webdesign & Graphic Design #2 : Les meilleurs sites traitant de Webdesign et de graphisme (part.2)
• Coding : Liste de sites axés Développement Web / Intégration / Ergonomie.
• Inspiration : Une impressionnante liste de sites pour se tenir informé des tendances graphiques et pour trouver l’inspiration.
• Magazines : quelques bons magazines format web.
• Ressources & Tools : Couleurs, Typo, Images, Textures, etc… Voici une grosse liste de ressources et d’outils variés pour vous faciliter la vie.
• Tuto : Les meilleurs sites de tutoriaux : Création numérique, Intégration, Flash, Motion etc etc…
• FlickR Inspiration : une liste de profils et de groupes FlickR intéressant.
• Webdesign, Graphisme & Intégration > Français : le petit nouveau exclusivement francophone !

Nous arrivons à la fin de ce post, comme je l’ai dit précédemment, ce nouvel espace est voué à évoluer et je suis ouvert à toute proposition pour peu qu’elle s’intègre dans l’univers de ce bureau à savoir : le webdesign, le graphisme et l’intégration web.

Update : Merci beaucoup pour vos retours, une dizaine de sites se sont déjà ajoutés à la liste ! Je rappelle que ce bureau à pour vocation d’être une ressource et non un espace publicitaire. Les portfolios et sites d’entreprises n’y ont donc malheureusement pas leur place (même si la qualité des travaux présentés est remarquable).

Jusqu’à présent le site web du W3C était plus connu pour le fond que pour la forme. La densité des infos proposées, le manque de clarté et la technicité du contenu pouvaient faire un peu peur à première vue et il fallait vraiment avoir quelque chose à trouver pour naviguer dans ses nombreuses pages. Quand au design, n’en parlons même pas, nous étions sur quelque chose de plutôt…basique.

Aujourd’hui tout cela est terminé ! Le W3C a lancé son nouveau site web et la refonte est réussie. Nous allons voir ce qui a motivé ce changement, les nouvelles fonctionnalités proposées et enfin nous verrons comment est organisé le contenu dans le site.

Une refonte, pourquoi ?

Comme je le disais plus haut, une refonte générale du site web était nécessaire pour de plusieurs raisons :

• Aller vers une modernisation du design
• Faciliter la recherche de l’information
• Agréger le contenu de la communauté entière en un seul endroit
• Permettre la compatibilité du site sur les terminaux mobiles

Le design du nouveau site a été réalisé afin de respecter ces différentes contraintes et bien plus encore…

Les nouvelles fonctionnalités

En arrivant sur la page d’accueil, on est agréablement surpris par la clarté qui s’en dégage. La structure est assez basique et présente une largeur fluide. Cela permet une adaptation aux écrans de toute les tailles, même les 800px passent sans problème… Le mien fait 1440px et la page s’affiche également parfaitement.

La zone de haut de page comprend un menu de navigation principal, un sélecteur d’apparence : Web / Mobile / Print, un moteur de recherche ainsi qu’un sélecteur de régions. Le Sélecteur d’apparence est très efficace et il est intéressant de voir comment le support (écran mobile, web ou papier) affecte la mise en page du contenu.

Pour mieux vous en rendre compte voici les screenshots des versions Mobile et Print :

La colonne de gauche nous propose un second niveau de navigation pour accéder aux 7 catégories composant les standards.

Juste en dessous on peut voir un autre menu qui s’intitule « Web for All ». Vous pourrez y retrouver le fameux : « W3C A To Z», des infos sur le web mobile, l’accessibilité etc..

Toujours sur la homepage on peut voir un bloc central présentant les événements en cours et à venir ainsi que les dernières news en provenance d’articles divers, sites web, blogs etc… On se rend compte de la volonté de faire de ce site un endroit central autour duquel vont graviter les nombreuses communautés travaillant sur les standards du web.

Pour finir avec la structure je ne pouvais pas mettre de côté la zone réservée au breadcrumb (Fil d’ariane en Français) qui a visiblement été très travaillée.

Cette zone est centrale dans le site. Elle vous permet de vous situer au niveau n, n-1 mais également n+1 puisqu’elle présente les titres de chaque sous-catégories de la rubrique en cours. Je ne me rappelle pas avoir déjà vu un tel niveau de précision quelque part sur le web. En gros, il est quasi impossible de se perdre sur ce site sauf pour un total néophyte en informatique ne connaissant pas un mot d’Anglais.

Après avoir présenté succinctement la structure, je vais maintenant m’attarder sur le contenu…

L’organisation du contenu

Les standards sont donc scindés en 7 catégories principales présentées sur la page Standards. Chaque catégorie (=standard) possède sa propre page d’accueil où l’on retrouve une liste de tous les domaines couverts.

Lorsqu’on s’enfonce encore dans le site on trouve les sous-catégories. Par exemple : « HTML & CSS » est une sous-catégorie de « Web Design and Application ». Autrement dit, les langages « HTML & CSS » font partie du standard « Web Design and Application ». Sur ces pages on trouve (ou on trouvera bientôt puisque le site n’est pas encore entièrement terminé) des articles en relation avec le sujet, des tutoriaux, des outils etc…

La partie « Current Status of Specifications » en bas de page donne accès aux spécifications sur les domaines couverts par la rubrique (ex : spécification HTML).

Toutes les spécifications ont été englobées dans la rubrique « All Standards and Drafts ». Elles sont regroupées comme suit : Standards / Informatives Notes / Drafts / Ressources Developed Outside W3C.

Toujours dans le but d’apporter un maximum d’information à l’utilisateur, une petite note a été ajoutée sous chaque titre de spécification.

Conclusion

Comme nous l’avons vu , ce travail de refonte a été particulièrement bien mené et apporte un réel intérêt au site du W3C. D’un point de vue structurel, ergonomique, esthétique ou concernant l’accessibilité, ce nouveau design remplit pleinement ses fonctions.

Cependant, comme l’explique le W3C, il reste encore du travail à accomplir. Certaines pages ne sont pas encore entièrement complétées, il y a encore quelques bugs à corriger, les feuilles de style nécessitent encore du travail (en particulier la version print) etc.

Chacun de nous peut contribuer à améliorer le site en proposant ses solutions. Pour cela il suffit d’envoyer vos retours à site-comments@w3.org avant le 23 Avril 2010. Votre commentaire apparaitra ensuite dans la liste des archives publiques.

1. 1. US Air Force

   Je ne suis vraiment pas un fan de l’armée mais il faut bien avouer que le site de l’US Air Force est une réussite. Tout a été réalisé en Flash ce qui permet d’obtenir de magnifiques effets 3D. Le design général est assez clair, ce qui a du représenter un réel travail vu la densité d’information présente sur le site.

   

2. 2. Andrew Freedman

   Même si ce site est très simple, il n’en demeure pas moins qu’un joli travail d’illustration a été réalisé sur le background. A elle seule, l’image de fond permet d’habiller chacune des pages et de délimiter les 2 colonnes de contenu…

   

3. 3. Area17

   Le site web de ce studio basé à NewYork et Paris se distingue par sa simplicité. Le type (Helvetica Neue) et la taille de police jouent un rôle important sur le rendu final. Ici, ce sont de petites touches subtiles qui font toute la différence.

   

4. 4. Bernat’s showcase

   Vous êtes peut-être déjà tombé sur un site similaire et c’est normal puisqu’il s’agit d’un design made by « Cargo Collective». Ce CMS possède de magnifiques templates pour créer des portfolios simples et efficaces, le tout gratuitement bien entendu.

   

5. 5. Borderleft

   Avec son site Borderleft, le webdesigner « Rui » nous offre un bel aperçu de son talent. Ici la tendance est au minimalisme et ça tombe bien puisqu’on y gagne en clarté. Le choix de couleurs claires couplé à de petites touches de peintures font de cet endroit un vrai régal pour les yeux.

   

6. 6. Brian Hoff portfolio

   Le portfolio du créateur de TDC (The Design Cubicle) est une vraie réussite. Les couleurs utilisées et la l’attention toute particulière apportée à la typographie rendent la lecture de ce site vraiment agréable. La encore, c’est la simplicité du design qui en fait sa force.

   

7. 7. Bubble Wood

   Bubble Wood est un « concept store » (vêtements, accessoires et objets design) basé à Paris. Le site web est entièrement réalisé en Flash ce qui permet une navigation très sympa. Le rendu général est très agréable et on se prend vite à cliquer partout pour voir la suite. Ils ont même pensé à intégrer un espace 3D que je n’ai malheureusement pas pu tester n’ayant pas de lunettes adaptées…

   

8. 8. Canarygraphics

   Si vous jetez un oeil au code source de Canarygraphics, vous remarquerez surement qu’il s’agit d’un site entièrement réalisé en HTML5. Même si on ne comprend pas le contenu écrit en Japonais, on peut tout de même admirer le design, et notamment ce dégradé de couleurs en background qui se déplace avec le temps qui passe… C’est beau…

   

9. 9. Chris Arbini portfolio

   Il se dégage de cet endroit une impression de calme et de sérénité. Chris Arbini a su créer un univers très personnel grâce à une charte graphique cohérente. Les couleurs, le jeu de transparence et l’illustration servant d’image de fond forment un site au design tout à fait remarquable.

   

10. 10. Chris Carey portfolio

    Le portfolio de Chris Carey, un graphiste des Bahamas, attire l’œil immédiatement grâce au style « Letterpress » (encore appelé effet « Inset ») appliqué sur certains éléments, comme cet énorme « Welcome » sur la page d’accueil. Même si nous ne sommes pas sur un site d’exception, il reste néanmoins une cohérence sur les couleurs utilisées et un design tout à fait singulier.

    

11. 11. Core Engine

    Le design du site de cette agence de communication basée à Metz (France) a été créé autour d’une identité visuelle « space/vintage/futuriste». Un soin particulier a été apporté sur la construction de la page d’accueil où les couleurs, textures et illustrations forment un tout cohérent. Petite note négative sur la lisibilité générale des paragraphes entachée par une hauteur de ligne trop faible à mon avis.

    

12. 12. Cube Club

    Créé par l’agence Remood pour le compte d’un night club Allemand, ce site a été présenté sur de nombreuses galeries web. Le design est tout à fait singulier, très coloré sans tomber dans la mauvaise parodie, parfaitement lisible et magnifiquement illustré. Pour ne rien gâcher, le code très propre permet une compatibilité quasi-parfaite, même sur de vieux navigateurs.

    

13. 13. Daniel Marino

    Le site du webdesigner et développeur Daniel Marino est extrêmement simple. 3 couleurs principales, une jolie police pour le titre, du texte très aéré et quelques petits détails rehaussant le design… et voilà encore un site équilibré et agréable à lire.

    

14. 14. Daniel Van Cuylenburg

    Le site de Daniel Vanc a récemment fait son apparition dans certaines galeries web. Normal me direz-vous puisque nous avons à faire à un très haut niveau de créativité et de technicité. Je vous conseille de vous balader un peu pour découvrir certains détails particulièrement réussis. Dans la section Blog, vous pourrez notamment découvrir un gigantesque champ de recherche rappelant celui trônant dans le footer du site d’Elliot Jay Stocks.

    

15. 15. Denis Olenik

    Denis Olenik nous offre un site entièrement réalisé en Flash d’une grande sobriété. C’est très propre, très clair et je trouve que la navigation est particulièrement efficace. Je me pose quand même une question… Pourquoi avoir utilisé Flash sachant que la quasi totalité des effets pourraient être implémentés via Javascript ?

    

16. 16. Dope Creative

    Dope Creative est un studio de création multimédia situé à Los Angeles. Le design de leur site est très sobre, aéré et efficace à l’image du logo que j’aime particulièrement. La navigation verticale (jquery) est très aisée.

    

17. 17. Dreamerlines

    Voici le portfolio de Janis, un webdesigner travaillant pour le studio Digibrand. Dans son site, Janis a réussi a recréer son univers personnel, très coloré, dont chaque partie est illustrée façon patchwork. Un site web très créatif à voir absolument.

    

18. 18. Dripping in Fat

    Alors que les sites de vente en ligne sont généralement plutôt sobres, le design de « Dripping Fat » est vraiment original et créatif. Réalisé entièrement en Flash, il nous propose une navigation horizontale permettant une petite balade parmi les T Shirts suspendus à des fils et dont les couleurs dégoulinent par terre…

    

19. 19. Duplo studio

    Le site de ce studio spécialisé dans le Motion design est tout en contraste. Le noir, utilisé comme seule couleur de fond, couplé à des couleurs très contrastées (rose, bleu) permet de faire ressortir tous les éléments importants du design. Petit détail sympa, la customisation de la barre de scroll du bloc Noticias.

    

20. 20. Elliot Jay Stocks portfolio

    Je ne pouvais pas faire ce petit tour d’horizon sans présenter le site du mondialement connu Elliot Jay Stocks. Pour moi, cet endroit est un modèle en matière de créativité et de construction web.

    

21. 21. Esquareda

    Voici le portfolio d’ Eric E. Anderson. Encore un autre exemple de belle harmonie des couleurs et de clarté. Je vous conseille d’aller jeter un œil aux différentes rubriques afin d’admirer le travail autour du design et de la structure des différentes pages. Tout est très clair, sobre et d’une grande efficacité.

    

22. 22. Eric Johansson portfolio

    Voilà un site assez atypique grâce à sa structure horizontale mais surtout par son système de navigation peu commun. Ici, tout se fait par l’intermédiaire d’un curseur qui vous permet de faire avancer Eric dans son univers et de découvrir les pages (peu nombreuses certes…). Le tout est très joliment illustré. Un très bel exemple de créativité.

    

23. 23. The Interactive Firm

    Fi fait partie des studios les plus talentueux au monde. Classé dans le célèbre FWA Wall of Fame, le site web est à l’image de la réputation de l’agence. Cette équipe brille par son talent et sa créativité. Pour vous en convaincre, allez visiter les différentes rubriques du site et n’oubliez surtout pas la rubrique « Works »…

    

24. 24. Filipe Carvalho

    Voila un design tout à fait créatif, brisant les règles habituelles de construction web. C’est simple, c’est créatif, c’est efficace. Très bon pour l’inspiration !

    

25. 25. Firebird

    Firebird est un site présentant un concept basé sur un projet mettant la danse en avant. La charte graphique est recherchée, les couleurs du site sont très belles et harmonieuses. Il se dégage de cet endroit une réelle atmosphère en totale adéquation avec le projet. La structure du site est également assez sympa, construite à partir de formes géométriques simples, remplies de couleurs unies. Un joli travail réalisé par le studio Media Pozitiv basé en Roumanie.

    

26. 26. FL’2

    Ce qui retient notre attention sur le blog de l’agence multimédia FL2 (Colorado, USA) c’est la taille absolument énormissime du header. L’unique mot « Blog » de 500px de haut sur lequel a été placé une petite touche bleue suffit à faire de cet endroit un site unique en son genre.

    

27. 27. Fudge

    Fudge fait vraiment partie de mes site favoris. Ce design particulièrement créatif et ambitieux rappelle l’univers de la création graphique. On peut y voir le damier blanc et gris de Photoshop en guise de background,la barre d’outils du même logiciel calée dans le coin en bas à gauche, les guides, les règles etc… Les preview des projets sont visibles au travers d’une zone transparente placée au milieu du cadre central. Scrollez pour admirer le très subtil jeu de transparence entre le premier et l’arrière plan. Du très très beau travail.

    

28. 28. G3

    Le site G3 est d’une grande simplicité. Ici ce sont les rayures verticales et l’emploi unique de noir et de blanc qui retient notre attention. La navigation reste elle aussi très simple mais efficace. Je vous conseille d’aller regarder la partie « Experimental», il y a des choses très marrantes (réfléchissez à deux fois avant de cliquer sur l’énorme lien : link for 100 pages… vous serez bon pour 100 clics…) .

    

29. 29. Greg White

    Il faut être sacrément sur de soi pour créer un site comme celui de Greg White. La page d’accueil est assez singulière puisque l’auteur à choisi un aplat de couleur rouge en guise de fond. Je ne sais pas s’il est possible de faire plus minimaliste… Que l’on aime ou pas, cette construction à au moins l’avantage de placer les projets au centre du design.

    

30. 30. HALO Creative Agency

    En plus de son côté très sobre et d’une grande clarté, la force de ce design c’est clairement ses backgrounds composés d’illustrations très certainement réalisées par le célèbre Cyrill Clunev (également connu sous le pseudo « Dualform »).

    

31. 31. Hello Nosotros

    Un design sobre, un magnifique logo, l’utilisation d’un style graphique que l’on appelle « inset » (style Apple), beaucoup de clarté et une bonne utilisation de l’espace… Et encore un site qui en impose !

    

32. 32. Hennessy

    Le design du site de cette marque de spiritueux est à l’image de la marque elle-même : classe. Les couleurs oscillant entre le bleu et le noir, les subtils reflets de lumière, les polices très fines et les magnifiques visuels font de cet endroit un véritable outil de communication véhiculant l’image de la marque.

    

33. 33. Hull Digital

    En définitive, il n’y a que très peu de sites web qui parviennent à allier une structure solide, claire, accessible et un design parfaitement équilibré avec une subtile harmonie de couleurs… Le site présentant the Hull Digital Conference au Royaume-Unis, est un de ceux-là. J’ai cherché qui en était l’auteur et je suis bien sur tombé sur le nom du très célèbre Rob Palmer, qui fait décidément partie des web designers les plus talentueux.

    

34. 34. Isa Costa

    Le design du portfolio d’Isa Costa est vraiment créatif, nous sommes presque à la limite de l’expérimental. Arrivés sur la seule et unique page du site vous êtes plongés dans une feuille de style placée sur un damier gris et blanc rappelant celui de Photoshop. Chaque partie du « site » correspond à une classe css, le contenu est placé au niveau des propriétés et des valeurs de ces mêmes classes. C’est très bien fait et je suis sur qu’il y a une réelle recherche derrière cette simplicité apparente. On regrette peut-être le manque de contenu (comme une présentation de travaux par exemple).

    

35. 35. Jared Christensen portfolio

    Lorsqu’on navigue sur le portfolio de Jared Christensen on ne peut qu’être étonné par la clarté et par la grande douceur qui s’en dégage. L’harmonie des couleurs, le travail sur les textures de type papier et le grand raffinement apporté à certains détails font de ce design une belle réussite. Je trouve que la présentation des travaux sous forme de grandes vignettes est une bonne idée, c’est agréable à regarder et plutôt créatif.

    

36. 36. Jesus Rodriguez Velasco portfolio

    On a l’habitude de dire qu’il ne faut pas trop utiliser de polices dans un site web. Comme chaque règle a son exception, voici un portfolio hors du commun, très réfléchi, au design peu conventionnel et très créatif. On peut noter le gros travail réalisé sur les illustrations et sur le choix des couleurs. Si vous visitez ce site ne serait-ce qu’une fois, vous ne l’oublierez pas.

    

37. 37. Joe Nyaggah

    Une récente découverte (merci les galeries) dont je ne me lasse pas… Le site du graphiste Joe Nyaggah est vraiment un magnifique exemple de ce qu’il est possible de faire avec du bon goût et une bonne dose de créativité et de technicité. La charte graphique est très harmonieuse, les deux couleurs gris et orange qui composent le site ont été bien choisies et bien utilisées. La structure est créative et très efficace. Il faut beaucoup de talent pour réaliser un design comme celui-ci. Bravo.

    

38. 38. Leeds Web Design

    Goinnovate est un petit studio basé à Leeds en Angleterre. Le design n’est pas exceptionnel mais c’est très « propre ». Vous ne trouverez aucune couleur sur ce site mis à part un rouge sombre utilisé pour les lien. Le choix s’est plutôt porté sur des nuances de gris allant du très clair au très foncé. L’ensemble est très classe, très pro.

    

39. 39. Lojabirds

    Lojabirds est le site d’un magasin brésilien de bijoux, sacs et accessoires. Le design aux tonalités rouges et blanches est assez créatif puisqu’il suit le thème des perchoirs pour oiseaux. Chaque rubrique est comme suspendue à son petit perchoir. C’est mignon et ça reste très clair et accessible.

    

40. 40. Lord Likely

    Lord Likely est le blog d’Andy Fanton, dessinateur et écrivain Anglais. Ce site qui a été conçu par Adam Wintle reprend les codes graphiques des vieux journaux anglais du milieu du 19ème siècle. Le design est assez impressionnant puisque tout a été pensé et conçu pour coller au plus près à cet univers. Même les publicités sont factices, on s’y croirait vraiment.

    

41. 41. Magnetic North

    L’intérêt de ce site c’est clairement la navigation. Pour parcourir le contenu il suffit de dessiner des formes avec votre souris. Une forme fermée fera apparaître un projet à l’intérieur, un barre horizontale vous permettra de lire une news, une barre oblique déclenchera l’affichage du champ de recherche. Même si le système n’est pas nouveau, il reste très ludique et efficace. Petit bonus pour la fonctionnalité d’historique vraiment bien pensée et très pratique.

    

42. 42. Mattrunks blog

    Mattrunks est le blog de Mattias Peresini, un tout jeune motion designer de 19 ans qui a déjà beaucoup de talent. La structure de son blog est peu commune et regorge de bonnes idées créatives. Si vous aimez le motion design, je vous conseille d’aller très vite jeter un œil à Mattrunks Tutoriaux, son site de tutoriaux vidéos tournés autour du Motion Design et de la création numérique. Cet endroit fait partie selon moi, des meilleurs site en la matière, et Français de surcroit. Je vous parie qu’on entendra parler du jeune homme dans les années à venir…

    

43. 43. Mcinen.net

    La homepage de ce site réalisé entièrement en Flash, met en avant un énorme background prenant tout l’écran et sur lequel l’auteur a ajouté une sorte de trame composée de minuscules pointillés noirs. Vous avez surement déjà vu cet effet de plus en plus utilisé (dans les showreel notamment). A part cette impressionnante page d’accueil, nous avons une navigation horizontale / verticale plutôt classique mais hyper efficace.

    

44. 44. Merge

    Merge est le nom d’une agence marketing ayant réalisé un joli travail sur leur vitrine web. Le design est soigné, le mouvement des nuages en arrière-plan sur la homepage fait toujours son effet. Il y a là encore un gros travail de recherche sur les textures et les illustrations. Le code est également très propre. Bref, je ne peux qu’être admiratif.

    

45. 45. Monkey Works

    J’ai placé ce blog dans ma liste pour montrer qu’un beau site n’est pas forcément constitué de nombreux éléments. Sur le blog du designer Dave Mott, le header et le menu suffisent à eux seul à réhausser le niveau d’un template ultra-basique.

    

46. 46. Nate Kadlac Design

    Kadlac est le portfolio de Nate Kadlac, un designer basé à Minneapolis dans le Minnesota. Design très sobre, un très joli header avec titre et menu centrés, une image de background très classe noir/gris/blanc. Un site minimaliste mais bien pensé et bien réalisé.

    

47. 47. Net ontwerp

    NetontWerp est typiquement le genre de site très souvent réalisé avec Flash mais pouvant être construit en Javascript. Ici l’auteur a opté pour Jquery et ça fonctionne parfaitement ainsi. Le design entier tient dans un carré centré sur la page. Toute la navigation se fait à l’intérieur de cette forme, chaque rubrique glisse horizontalement. La partie Work fait apparaître des preview carrées de chaque projet remplissant l’espace central. C’est bien réalisé même si on aimerait peut-être avoir des explications sur chacun des projets présentés.

    

48. 48. Nora Rose Travis

    Le portoflio de Nora Rose Travis est un bon endroit pour trouver l’inspiration. Le design de son site est tout à fait hors du commun. A première vue, sur la page il n’y a que des formes colorées rondes entrecroisées. Lorsqu’on passe la souris au dessus de chaque forme, on peut voir un petit aperçu du projet qu’elle renferme. Une présentation de chaque projet est lancé via une light-box après avoir cliqué sur les ronds colorés. Ce site est extrèmement sobre, et tout à fait créatif. Une vraie belle réussite selon moi.

    

49. 49. Olivier Kavanagh

    Ceci n’est pas un site mais une simple page renvoyant vers plusieurs espaces (blog, portfolio, linkedIn, Twitter, etc…).. La disposition des différents titres composant la page est très bien pensée et bien réalisée. Mine de rien, c’est assez difficile de savoir occuper l’espace sans que cela ne fasse « fouilli ». Une version de la même page en Flash est également disponible.

    

50. 50. Pirata London

    Je trouve ce site particulièrement créatif et très bien construit. Le menu composé de cercles transparents superposés est du plus bel effet. La présentation des projets sur une large zone est également vraiment réussie et très efficace avec une excellente visibilité et une bonne mise en valeur des projets présentés.

    

51. 51. Rézoactif

    Rezoactif est le site d’une agence de consulting axée SEO. Leur site aux couleurs gris/rose flashy est plutôt bien réalisé et agréable à lire. Le choix de Jquery a permis l’utilisation de jolis effets, visibles un peu partout sur le site et très utiles dans la partie « Clients ».

    

52. 52. Rin & Wendy

    L’idée qui se cache derrière ce blog est très simple : un couple (Rin et Wendy), un blog et chacun sa partie. Chacun des deux auteurs possède donc sa propre colonne et peut publier ses articles indépendamment de l’autre. L’idée est super créative, le design est bien réalisé et colle parfaitement au concept du blog (notamment avec les codes couleur bleu et rose permettant d’identifier les parties appartenant à Rin ou Wendy).

    

53. 53. Rockatee

    Vous avez surement déjà du voir le site Rockatee de Maleika Attawel (Allemagne) puisqu’il fait partie des design particulièrement réussis, créatifs et reconnus comme tels. Un gros travail a été réalisé sur les textures pour obtenir ce style très léger, faisant penser à du pastel sur papier. J’aime également beaucoup le style du menu. Je vous conseille d’aller faire un tour dans la partie « Blog » à la présentation peu commune mais néanmoins très réussie. Un bon endroit où aller lorsqu’on est en mal d’inspiration.

    

54. 54. Saizen Media Studio : Night Wish

    Ce site entièrement réalisé en Flash est absolument hallucinant. Les illustrations et les multiples effets d’animation sont à couper le souffle. Même si l’endroit date un peu, il reste toujours pour moi un véritable chef d’œuvre.

    

55. 55. Scandinavian freelance

    Scandinavian freelance est le site de « Gummisig», un talentueux webdesigner. Au premier coup d’oeil, on peut admirer le superbe travail d’illustration servant de background au header. La structure sur 2 colonnes est basique mais très équilibrée. L’espace vide a été utilisé comme élément constitutif du design. Il n’y a quasiement pas de séparateurs ou de délimiteurs de colonnes.

    

56. 56. Serial Cut

    Serial Cut est un studio de création basé à Madrid. Ce qui rend leur site si attractif c’est cet énorme background servant de vitrine pour les différents projets. La navigation verticale et horizontale est très efficace. C’est un très bon exemple d’utilisation conjointe de html (structure de la page) et de flash (présentation des projets). A noter que la taille des visuels s’adapte à la taille de l’écran ce qui permet de conserver le même ratio entre texte et visuel.

    

57. 57. Siete de Febrero

    Ce site a été présenté à de nombreuses reprises sur différents sites web. Le contenu est intégré dans de nombreux blocs rectangulaires placés côte à côte de façon « pseudo » aléatoire mais finalement tout à fait réfléchie. L’espace est superbement bien optimisé, les couleurs sont harmonieuses et les coups de pinceaux derrière le titre du site ajoute un vrai cachet au header. Ce site est vraiment une réussite.

    

58. 58. Simple Bits

    Le site de ce petit studio web créé par Dan Cederholm est vraiment réussi. Même si la structure est plutôt simple, la construction est très propre. Les couleurs ont été judicieusement choisies, la lisibilité est parfaite. Du beau travail.

    

59. 59. Teoskaffa

    Sur ce site entièrement construit en Flash, tout a été pensé et construit en rapport avec l’univers graphique du pixel art. Le curseur de souris géant vous met de suite dans l’ambiance et la police pixélisée à l’extrême s’inscrit également dans le même univers graphique. La navigation est assez classique mais efficace. Ce site est vraiment un endroit à part, un univers à découvrir au plus vite.

    

60. 60. The man in the see

    Ce site a été créé par Matthew Todd Spiel, un designer de 24 ans, habitant du Missouri. J’aime beaucoup la clarté du design, le background un brin grungy mais très sobre. On voit tout de suite la grande minutie dans la réalisation du site. Très beau travail.

    

61. 61. TODA : The Other Design agency

    Voici le site de « Toda » alias « The Other Design Agency« . L’approche est très créative, le site s’étend sur l’écran complet, les couleurs sont vives et la présentation des projets sur l’écran entier est sacrément efficace.

    

62. 62. The Squad

    The Squad est le portfolio d’un studio de création. L’ambiance est très zen, le design est épuré. On retrouve là aussi le orange et le gris comme étant les 2 couleurs principales du site. La présentation des projets en « accordéon » est simple et très pratique. Je me permets d’ajouter que les projets présentés sont tous de très haute qualité.

    

63. 63. The things I do

    Le design de ce site est tout à fait particulier. Nous avons à faire à une seule et unique page. Ce qui attire l’œil tout de suite c’est l’image de fond vous plongeant dans une ambiance quasi mystique aux tonalités noir bleutées. La jolie police manuscrite utilisée sur les titres ajoute encore une touche toute personnelle à cet endroit. La page se décompose en 2 parties dont une cachée derrière un lien en bas de la page. Le site est visiblement encore en construction mais l’idée générale est bien trouvée.

    

64. 64. Things that are brown

    Il n’est pas forcément évident de réaliser un site de couleur marron. En plus de jouer sur les mots, Matt Brown a su créer une charte graphique vraiment harmonieuse dans un design simple mais efficace.

    

65. 65. Tim Benniks

    Tim Benniks a choisi de créer son portfolio en HTML5. En plus de cette petite touche de modernisme, le design est tout à fait réussi. Un site à visiter.

    

66. 66. Tomas Pojeta

    Ce site possède deux atouts principaux. Le premier c’est clairement la qualité des illustrations qui composent la page. Le second c’est le concept de ce portfolio tout à fait singulier. Tomas Pojeta, un graphiste Tchèque, a décidé de créer un site évolutif. Ainsi, nous pouvons proposer des idées d’illustration à ajouter au site. Si votre idée est retenue, Tomas créera un nouvel élément et l’intègrera dans le design. En passant la souris sur certaines illustrations, on peut découvrir le nom de la personne qui l’a proposé.

    

67. 67. Ugmonk Shop

    Ugmonk est un site de vente en ligne qui a attiré mon attention par la simplicité et la force de son design. Vous ne trouverez rien d’exceptionnel ici mais le site est très clair, la navigation limpide. Le choix du bleu et du gris comme seules couleurs permet de ne pas surcharger les pages, laissant ainsi la part belle aux articles présentés (peu nombreux certes). Niveau code il y a mieux c’est vrai mais le design tient la route. Voilà, c’est mon petit coup de coeur.

    

68. 68. VisualBox

    VisualBox est un portfolio tout en contraste. L’imposant titre donne le ton, le fond noir permet de faire ressortir les preview très colorées des projets. La navigation se fait sur un premier espace de preview carrées collées côtes à côtes. Après avoir cliqué vous descendez verticalement sur la page à l’endroit du projet. Que des preview mais magnifiquement présentées. Un super travail.

    

69. 69. Werkstette

    Werkstette est un studio basé au Danemark et spécialisé dans la retouche de photographies et la post-production au sens large. Leur site, entièrement réalisé en Flash, est une belle réussite et a d’ailleurs été élu « Site of the Day » par le FWA. La navigation est enfantine et fonctionne sur 2 niveaux horizontal/vertical. Chaque projet est présenté en plein écran. On en prend plein les yeux et c’est ça qui est bon.

    

70. 70. Yay Paul

    J’ai gardé le meilleur pour la fin. Le portfolio de Paul West est un vrai régal. Le design très simpliste révèle de nombreux petits effets d’animation (Javascript) cachés absolument partout. Pour vous en convaincre, survollez le contenu avec la souris. Rien a été oublié. Le détail qui tue : si vous scrollez, les preview des projets vont passer sous une zone transparente à première vue invisible, cachée sur le fond blanc… On comprend vite que la réalisation d’un tel site a du être un vrai travail…

    

Nous arrivons à la fin de cet article… J’aurais pu continuer cette liste encore longtemps tellement le web regorge de sites web magnifiquement réalisés. Vous aurez surement remarqué mon choix de ne pas inclure certains sites web très connus et dont la réputation n’est plus à faire. Même s’il y a certaines exceptions, j’ai essayé de vous présenter des projets récents, des design innovant et pas forcément connus.