Finding Inspiration from Design – Patrick McNeil

Cette conférence fut l’une des plus intéressante pour moi, Patrick Mc Neil assez connu pour ses sites Daily Slurp et Design Meltdown allait nous parler l’inspiration dans le domaine du Web Design.
Il a tout d’abord évoqué l’idée que l’inspiration pour créer des sites ne venait pas uniquement du web. Tout ce qui nous entoure nous inspire, essentiellement les choses dans d’autres domaines artistique comme les peintures anciennes.
Il est revenu sur l’emploi du nombre d’or et son influence dans le Web Design (vous pouvez d’ailleurs regarder le très bon article de Br1o à ce propos).

Et pour clore ce premier chapitre, il a abordé le sujet assez complexe de la frontière entre l’inspiration d’un site web et sa copie. Il est vrai qu’on se demande souvent où s’arrête l’inspiration et où commence la copie. Nous pouvons considérer un site comme copie à partir du moment que celui-ci reprend la css d’un autre et que l’auteur s’est contenté de changer quelques images. Par contre un site dont on a modifié la css et les images mais qui reprend le même esprit qu’un autre (par la grille, les couleurs, les icones, …) peut-il être considéré comme copie?
Il a ensuite évoqué les tendances actuelles dans le Web Design tel que les larges headers avec de grandes images et un texte gigantesque, et l’emploi des familles de bruns et des web designs texturés.

Il a aussi parlé des textes « super sized » dans le Web Design, un des exemples les plus concret de cette tendance et le formulaire d’inscription au site de microblogging trumblr qui utilise d’énormes champs d’input . Cette technique facilite grandement la lisibilité et donne une impression de simplicité d’utilisation à l’internaute.
Dans une 3ième partie il nous a fait part de ses prévisions sur les futures tendances du Web Design. Il préconise le retour aux couleurs claires et assez désaturées dans les sites après une longue période « web2 » aux couleurs hyper contrastées et saturée.
Il a ensuite évoqué la nouvelle tendance des sites « wide » sans scroller horizontal (en html / css). Personnellement je ne crois pas trop en cette tendance qui peut être bien pour un portfolio mais ne contient pas assez de place pour un blog ou un site avec trop d’information.
Pour finir il nous a parlé de l’emploi de plus en plus fréquent de la vidéo dans les headers des Web Design récents.

Web is the New Print – Elliot Jay Scott

Après une inoubliable conférence à New York en octobre dernier (d’ailleurs celle de 2008 est déjà programmée, avis aux amateurs ^^) sur le thème « Destroy The Web2 Look », Elliot allait cette fois aborder un thème complètement différent avec l’instruction que peut avoir le domaine de l’impression sur celui du web. Cette question peut apporter plusieurs réponses plus où moins valables, je vais tenter dans ce paragraphe de confronter les miennes aux siennes. Il commença par nous montrer des couvertures assez avant-gardistes et typographiques de George Orwell en nous avouant qu’il n’aimait pas trop ses livres ^^.

Il nous évoqua ensuite le fait que l’impression est beaucoup plus libre que le Web Design en terme de contraintes (nous n’avons aucun code html/css dans le print voire même d’action script). Celui-ci est au final une grande page blanche sur laquelle nous pouvons tracer, dessiner, positionner et ainsi exprimer notre créativité. Ainsi, nous pouvons sortir d’une grille beaucoup plus facilement en impression que dans le web. Il a aussi évoqué les affiches faites entièrement de typographique, ce qui est plutôt rare dans le web (nous reviendrons dessus plus tard).
Il rappela que domaine du Web Design et beaucoup plus récent que le print dans le domaine de l’art, il y a donc encore énormément de chose à faire dans ce domaine et de nombreux horizons inexplorés.
Il nous a ensuite parlé un peu de flash, « la saveur de l’univers » et nous a cité une phrase que Khoi Vinh avait écrite dans un de ces récents billets

Flash speaks their language. It’s visual in nature and has similar tools and UI to Photoshop, Illustrator, and their ilk.

Il montra ensuite un site flash assez connu Conclave Obscurum (il ne faut pas oublier qu’Elliot adore les designs assez « grunge » et texturés). Le moins que l’on puisse dire c’est que ce site sort véritablement de la norme web. Premièrement nous avons vite de grand espaces blanc, les pages, ce qui nous oblige à bien nous concentrer dessus. Au fur et à mesure de la visite du site de nombreux obstacles viennent gêner la navigation (saut d’écran, passage « à blanc », obligation de clics intensifs pour afficher des parties, alors que la norme veut que les sites soient de plus en plus intuitifs, accessibles et agréables à la navigation. On pourrait aussi citer les différents éléments assez repoussants (2ième niveau de l’accueil ou encore réglage du volume) ce qui se veux assez revendicateur. On se demande bien sur quelles sont les intensions du webmaster en créant un tel site. Question à laquelle Eliot a répondu par 3 points :

• « Casser la moisissure » c’est-à-dire sortir des sentiers battus et de la norme qui veux que les sites soient beaux et agréable à naviguer.
• Créer un grand niveau de tension, ce qui permet de vire une expérience unique sur un site web.
• Faire participer l’utilisateur en l’obligeant à rester attentif

Il prit ensuite la direction de la deuxième partie des designs web : les sites html et css. Il nous montra des sites typographique sortant de la norme tel que l’excellent Seed Conference ou encore Standard image (à ce propos je vous conseille vivement la lecture de l’excellent blog d’analyse de site typographique typesite). Il nous parla ensuite des sites narratifs. Pour lui ceux-ci ne sont pas justes des sites dans lesquels nous naviguons rapidement en appuyant sans cesse sur les boutons page précédentes / suivantes. Ces sites ont une structure évolutive faite de problèmes et de solutions qui forment un mouvement continu sensé. Il nous a ensuite montré l’excellent site de Shaun Inman qui change de couleur suivant plusieurs paramètres (ancienneté du post, pertinence, …). Il nous a ensuite exposé la pyramide de Freytag qui définit la «dramatic structure » dans l’écriture de nouvelles.

Elliot aime les cartes de visites, il nous fait donc profiter de ses favorites (je vous conseille d’aller un jeter un coup d’œil dans la présentation ci-dessous, il y en a des très bonnes). Et nous rappelle que notre page d’accueil n’est pas notre carte de visite, au même titre que notre navigation ou même notre page de contact. Notre conception est notre carte de visite.
Il en vient enfin à tirer sa conclusion : le design du print se divise en deux tangentes dans le monde du web : les sites flash et les sites html. Nous devons unifier ces deux tangentes afin d’être encore plus libre dans le domaine Web Design. Un bon design n’est pas forcement un design qui se contente d’être joli, c’est un design qui impressionne. Ainsi il ne faut pas hésiter à tirer différents éléments et philosophie du print pour les appliquer au web.
Personnellement je pense aussi que nous devrions essayer de casser les « normes » établies dans le Web Design, qui je pense va prendre peu à peu la même voie que l’histoire du print avec différents mouvement revendicateurs qui établiront des base pour le futur (il suffit de regarder le mouvement avant-garde que j’apprécie tout particulièrement). Nous avons deux grandes branches qui commencent à se diviser dans le web design actuel à savoir les sites très graphiques avec un contenu littéraire souvent assez faible et des sites contraires avec un design assez « pauvre » mais une véritable valeur littéraire. Il faut tenter tant que nous le pouvons d’unifier ces deux branches afin de créer des sites à la fois riches en design et en narration. Et c’est dans ce sens qu’il nous reste encore beaucoup à apprendre du print.

Design the user experience - Andy budd

D’après Andy budd l’expérience d’un utilisateur sur un site web pouvait se diviser en 7 grandes parties :

• La première impression : elle a toujours son influence, et se fait souvent par la vue (donc le design du site y contribue grandement). Il est donc clair qu’avoir un design de site web soigné est important. Cette première impression peut être aussi considéré comme une expérience, tout le monde se rappelle de la première fois qu’il a déballé un iPod ou iPhone.
• Avoir un site clair : avoir une bonne usabilité est très importante, sachez guider l’internaute et ne laissez rien au hasard.
• La personne : prendre en compte l’internaute comme acteur du site (ou être humain tout au moins) est une notion importante. On pourrait prendre comme exemple StarBucks qui au lieu de vous appeler par un numéro ou le nom de votre café vous appelle par votre nom, ou Flickr qui vous dit « Hey Paul, welcome back ! ».
• Le soucis du détail : les détails de votre site sont très importants. Essayez de personnaliser votre site afin que les utilisateurs puissent le reconnaître facilement. Par exemple dans un parc d’attraction, même les poubelles sont brandées avec la marque du parc.
• Les commentaires & le feedback : les gens peuvent vous aider à améliorer votre site, n’oubliez pas de prendre en compte les commentaires et les feedbacks.
• Make it fun: n’hésitez pas à partager avec vos visiteurs, vous pouvez le faire grâce à nombreuses applications web2 tels que flickr pour les photos, last fm pour la musique…
• Donnez aussi en retour et n’hésitez pas à allez voir les sites de vos internautes.
• Créez l’expérience : à vous de jouer !

From design to deployment - John Hicks

Jon étant un grand amateur de fromage, il s’est basé sur un exemple de réalisation d’un site internet sur la culture du fromage en 24h: Cheesophile.
Sa première directive fut de créer des dossiers de travail et de les classer afin de ne pas s’y perdre rapidement avec ses différents fichiers. Puis de mettre en place un serveur local sur Apache utilisant MAMP ou Headdress.
Il a ensuite crée son « balisage » mais sans div structurel : juste les paragraphes, la liste des articles, les rubriques et les différents éléments.
Puis il nous a parlé des grands débats « css fluide vs fixe », « em vs pixels », « HTML ou Flash » et il en a tiré la conclusion que tout dépendait du type du contenu. En effet chacune de ces solutions peuvent être plus ou moins bonnes suivant la situation, il n’existe pas de « combinaison magique ».
Il a ensuite parlé du choix des navigateurs web qui devraient supporter votre site, pour lui il n’est maintenant plus nécessaire d’aller au-delà d’ie6 pour un site personnel ou de petite échelle.

Il aborda ensuite les @imports pour les CSS et leur importance pour le bon développement d’un site web. D’après lui le marqueur * { margin: 0; padding: 0; } est devenu peu pertinent et n’empêche pas les erreurs, il préconise donc l’utilisation de la feuille de style « Reset CSS » de Eric A. Meyer qui permets un d’avoir une page vraiment propre.
Il préconise également l’usage d’une feuille de style dédiée au texte et à leur mise en page. A ce niveau, il pense qu’il faut arrêter d’utiliser les polices dites « web-safe » (et aussi des couleurs) qui sont trop limitative et de voir dans un choix plus large tout en respectant leur ordre d’importance.

Il a ensuite vanté les mérites de Fireworks quant à sa capacité à compresser d’image, passant d’une photo de base de 550ko, à 180ko dans Photoshop pour finir à 67ko dans FireWorks (j’ai vérifié, ça marche plutôt pas mal).
Puis il a abordé la construction d’une grille grâce à certains add-ons firefox ou petites applications web.
Pour finir il a rappelé que la phase de débugage était essentielle et devenue assez simple grâce au très bon add-on firebug (à essayer d’urgence si vous ne connaissez pas encore).
Il a continué avec ie6 qui est la hantise des développeur html/css. Sur ce sujet, il opte pour la solution du HasLayout (vous pourrez également trouver une explication en français ici) avec l’emploi de la propriété « zoom :1 ; « par exemple.
Cette présentation m’a vraiment beaucoup plu, elle était assez synthétique et donnait pas mal de bonnes astuces concernant la création d’un site.

Get your design approved in 12 simple steps - Larissa Meek

• 1- Faites-vous ami avec votre client : ça ne doit pas être très difficile pour elle ^^ , cependant garder toujours en tête que votre client n’est pas votre ennemi et qu’il vaut mieux avancer ensemble qu’à contresens.
• Posez vous beaucoup de question : n’hésitez pas à vous poser de nombreuses questions à vous-même ainsi qu’à votre client. Vous apprendrez ainsi à mieux maîtriser votre projet, n’hésitez pas à vous renseigner sur le secteur et les entreprises concurrentes.
• Posez vous encore plus de question : dans un 2ème temps, posez vous la question de qui sera l’utilisateur de votre site. N’hésitez pas à faire tester votre site par de vraies personnes.
• Créez un fil conducteur, mais ne devenez pas dépendant ! Il est très important pour le client d’avoir un fil conducteur et souvent une maquette (papier ou numérique) sous les yeux. Cependant il est clair que ce fil peut évoluer ou être modifié suivant les conditions et/où les difficultés rencontrées.
• Parlez de votre conception avant d’ouvrir photoshop : soyez sûr de ce que vous allez faire avant de commencer votre design. Il est beaucoup plus rapide de rassembler différentes ressources avant de commencer que de commencer un Web Design sans aucune ressource.
• Connaissez votre direction : donner trop d’options à votre client n’est pas la bonne solution. Sachez garder une ligne directrice sans trop vous égarer.

• Présentez dans un navigateur : pensez bien à montrer la maquette de votre site dans un navigateur.
• Faite des prototypes : n’hésitez pas à mettre en place des prototypes de votre site surtout si il s’agit d’une application web.
• Demandez des commentaires constructifs : il est important d’avoir des retours constructifs de la part du client afin de pouvoir faire évoluer votre travail. Mais prenez garde à ne pas avoir trop d’interlocuteurs afin de ne pas faire de modification inutiles (il vaux mieux réunir tous les commentaires dans un document, plutôt que de les recevoir au coup par coup par différentes personnes).
• Soyez confiant en votre travail : guidez le client dans ses choix et enseignez lui ce qu’il ne sait pas.
• Le temps nous le dira : même si votre client ne comprend pas tout de suite votre point de vue, avec le temps et les explications il finira toujours par comprendre.
• Tirer le meilleur parti des situations difficiles : en cas de situation difficiles, restez positif et optimiste. N’oubliez pas de toujours avoir le client avec vous et non contre vous.

Pour conclure, une très bonne journée passée à Londres en compagnie de Bastien. Vraiment beaucoup de choses à absorber en une journée qui est passée très vite. Au final cet article m’a permis aussi de réfléchir un peu sur ce que j’avais entendu mais pas forcement retenu. Il est clair que le futur du Web Design est encore assez flou au vu des nombreuses tendances et des nouvelles techniques qui se créent. Il faut tenter avant tout de lier de plus en plus les techniques qui pendant longtemps se fuyaient tel que le flash et la combinaison html/flash mais également dans le rapport contenant/contenu. Il faut maintenant penser aux futurs mouvements qui pourraient naître et ne pas seulement réfléchir en termes de « normes » actuelles.

Crédit photos: Bastien Labelle

Pour aller plus loin :

• Thaisie FOWD Review
• Wrapping up The Future of Web Design
• Sketch notes from Future of Web Design conference
• FOWD 08 Review

Pour bien commencer un peu d’histoire ainsi qu’une définition de cette couleur: le beige est à la base la couleur naturelle de la laine, c’est une couleur assez lumineuse dans les tons jaune-brun. Aaron Priven, un des fondateurs de l’internet tel que nous le connaissons actuellement la décrivait comme la couleur du diable, en effet nous associons souvent le mal à des couleurs comme le rouge ou le noir, par exemple un enfant va tout de suite reconnaitre les couleurs du sang ou de la nuit comme de « mauvaises couleurs ». Nous ne pouvons pas associer le blanc au mal car c’est une couleur “pure”, le beige quant à lui, même s’il reste proche du blanc est une couleur beaucoup plus permissive. Aaron en donnait une bonne définition :

Most people think that, if colors have attributes such as good or evil, that the color of evil is either the red of arterial blood gushing from a wound, or the deepest black of the darkest night sky. While these are certainly evil colors, they are not as evil as beige.

Le terme “beige” qui définit cette couleur est assez récent vu que sa première utilisation a vu le jour en 1887, et comme vous vous en serrez douté c’est un nom français (cocorico :D).

Actuellement nous pouvons trouver dans le domaine du web design un grand nombre de beige différents, celui-ci pouvant allez d’une couleur assez neutre à des tons jaunâtre-rose assez intense.

Le principal intérêt de cette couleur est quelle s’harmonise avec beaucoup d’autres couleurs tel que le bleu, le magenta ou le vert. Elle semble donc s’établir petit à petit comme une bonne alternative au blanc comme couleur de fond et commence à prendre racine.
Ce n’est pas une couleur neutre comme le blanc, ce qui lui confère un certain caractère, elle ne s’impose pas non plus comme une couleur tonique car elle reste très désaturée. De plus s’il existe un seul blanc, un beige peu assez facilement varier et être harmonieux avec un grand nombre de couleurs.
La couleur la plus souvent utilisée avec celle-ci est incontestablement le brun qui est l’opposé du beige dans la luminosité. Le bleu clair à tendance à également tendance à donner une bonne pointe de dynamisme à cette couleur, bien que cette couleur tonique puisse être différente ma préférence va vers celle-ci.

En ce moment un grand nombre de web designs récent emploie du beige, ceux-ci peuvent se diviser en 3 grandes catégories. Alors que certains l’emploient comme une couleur « classieuse », à l’opposé, d’autres l’emploient comme une couleur plutôt « sale » et ancienne. Nous pouvons enfin trouver des web designs assez intéressants mélangeant les deux. Je vais tenter d’illustrer mes propos par de très sympathiques sites trouvés aux quatre coins du web.

WebDesing propres :

Dans ces web design, la couleur beige a plus une notion classieuse et lumineuse, il me semble que c’est un des premiers emplois de cette couleur dans le web design.

Cabedge

Une référence dans le domaine pour un design sombre et efficace. Un beige très lumineux y est employé, je vous conseille d’allez faire un tour sur leur travaux tous plus convainquant les uns que les autres.

Happy Corg

Un site incontournable fait par pour tous les interressés du web design tout comme un de leur blog A List Apart (n’hésiter pas à allez y faire un tour). Le design y est également très sobre avec une très bonne lisibilitée.

Nitram Nunca

Un très bon emploi des différents luminosité du beige, un web design très leché qui plait à coup sûr.

South Creative

Des couleurs magnifiques et un menu de navigation qui prend tout le header assez original

Foamee

Un site incoutournable pour tous ceux qui utilise Twitter, je mets Foamee comme j’aurais aussi pu mettre d’autre site de SimpleBits, un design très sobre et efficace que j’affectionne tout particulièrement.

31 Three

Je pense qu’il n’est plus utile de présenter ce site, un exellent webdesign qui a déjà fait parler de lui plus d’une fois…

Tijs Vrolix

Très bon exemple de la diversités des couleurs allant parfaitement avec le beige avec ce web design quadri-couleur.

Joyent

Excellent site web avec une navigation des plus agréable et joliment illustré.

unFortunate

Bon site pour apprendre le chinois ?

Cork’d

Parfait exemple d’un design assez classieux acoompagné d’illustration, personnellement j’aime beaucoup.

iune Wind

Un bon exemple d’utilisation de beige et de bleu.

Advanced Wallness

Un magnifique web design que j’affectionne tout particulièrement

Nice Icons

Un beige virant presque au rose pour un design simple et efficace.

Sacha Greif

Design de blog assez sobre et bien organisé.

Olamar Living

Encore une bonne utilisation des différentes luminositées du beige.

LIDI

Un web design très soigné et moderne.

Mark & Velma’s

Site très simple, pas de remplacement SiFR, on apprécie tout de fois la bonne lisibilité.

Toggle Design

Sobre avec une bonne utilisation d’une alliance bleu/beige.

Tiny Price

Site assez simple mais très lisible.

Design By Anderson

Exellent site mélangeant image organique et web design.

WebDesigns semi texturé:

Mélangeant la couleur comme couleur assez sobre et “propre” avec un brin de texture, ces web designs commencent à être de plus en plus présent sur le web.

Marius Roosendaal

Un des plus beau portfolio en html/css actuel

Tilly Moss

Mélange de pattern un peu texturer tout en restant sur une base très claire, cela lui donne à ce site une ambiance ancienne pour se design assez sobre.

Belgrade Jazz Festival

Une très bonne interface pour ce site de musique, on apprécie le fond clair et les quelques touches texturées.

Mobile Web Book

Un exellent site pour cet exellents livre sur les standards du web design sur mobile.

Jen Gordon

Un des meilleurs web design actuel à mon gout, les couleurs y sont très finement employer et les pattern très réussis.

Webstock

Exellent site web très reconnu en outre-merre, ils organisent d’exellente conférence, si vous avez l’occasion d’assister à l’une d’elle n’hésiter par à me faire un faire signe ?.

TTF4

Assez peu texturer, ce site offre une exellente lisibilitée ainsi qu’une bonne catégorisation des différents éléments/rubriques.

Sahayata

Un vrai design semi texturé, on apprécie la lisbilité et la simplicité du site.

Spike Girl

Joli design pour de magnifiques illustrations.

Vision Forum Ministries

Site majoritairement beige et haut en image, on apprécie un peu moins la coupe des « ombrages ».

StoneTire

Exellent site avec un semblant de texture sur les différents menu du corps. Je vous invite vivement à aller y faire un tour.

Jason Graphix

Blog de l’auteur de l’excellent livre « The pronciple og beautifull webdesign », quelques bons petits conseils et une interface claire.

WebDesign texturés:

Mes préférés, une majoritée des webdesign texturés emploient du beige, il est donc normal de leur réserver une catégorie ici. Ces sites sortent de la norme de l’internet et se différencie tout particulièrement du style graphique dit « web2.0 ». Ceux-ci me rappelle un peu les sites du débuts années 2000 sur les jeux vidéos tels que Starcraft ou en Warcraft3 avec des beaux designs en tableau (et oui à l’époque on ne parlait pas de css :p). Enfin ce qui est surtout important à retenir c’est que l’utilisateur a plutôt tendance à retenir ces sites qui « sortent un peu de la norme » et bien que ceux-ci peuvent parfois paraître assez grossier, ils sont en réalité très lechés pour la plupart.

Legendary Aircraft

Les avions ne sont pas ma passion mais il faut avouer que quand on tombe sur ce site on sait directement à quoi on a affaire. Un parfait exemple de site très texturé qui sort un peu de l’approche plutôt « papier » de la plupart des sites texturés.

Jason Santa Maria

On ne peux pas passer à côté de ce site sans remarquer sa beauté. Exemple type des webdesign texturé que l’on va nommer « papier », c’est un de mes webdesign préféré (oui je sais j’aime beaucoup le beige ^^).

Jesus Rodriguez Velasco

Blog plutôt inpressionnant surtout quant on sait que Jesus est professeur d’université. Ultra lisible (personnellement je trouve la typo un peu grosse mais c’est une question de goût), on remarquera aussi que la 2ième colonne passe sous la première pour les petites résolutions.

Lakata

J’ai découvert ce portfolio assez récemment, un très bel exemple de design vintage.

Firsticuff Design

Site très interressant et assumé pour une agence, un style typique que l’ont retient à coup sur.

Kindred Spirit

Design assez simple pour ce site très propre.

RobGoodlatte

Blog folio qui dégage vraiment une ambiance particulière, tous les éléments ont été très travaillé et reste très lisible.

Web Designer Wall

Comment passer à côté de ce site qui a su s’imposer en quelques mois comme une référence dans le domaine. Un style graphique très particulier et très bien pensé, c’est le genre de webdesign texturé que l’on a envie de retenir ?

MindTwitch

Un design que l’on pourrait qualifier « d’hyper texturé », personnellement je moyennement accroché car je le trouve assez lourd, après c’est à vous de voir !

Here’s Life Africa

Très beau site pour cette association caritative, on regrette juste la découpe un peu grossière (une seule grosse image pour le corps alors qu’on aurait pu répéter une image plus petite) enfin je chipote ?

Team Green

Un autre design « ultra texturé » mais cette fois on reste plus sobre avec une petite pointe de Flash. Encore un web design qui ne laisse pas indifférent l’utilisateur et qui donne envie de revenir.

Miss Potter

Site assez texturé, le web design est vraiment cool mais le développement (code) assez nul avec pas mal de flash qui aurait pu être évité :s et une découpe assez grossière.

Buzz Is Media

Ca arrive bientôt en tutorial sur Split Da Diz :)

Pour aller plus loin :

• Très bonne définition du beige.
• L’article de Aaron sur le beige
• Vintage Web Design
• La gestion de la couleur: Guide exhaustif à l’usage des graphistes

Cette liste est certes assez personnelle mais j’espère que vous pourrez y faire quelques découvertes intéressantes. Pour plus de simplicité j’ai classé le tout par catégories. N’hésitez pas à me faire part des vôtres s’il ne se trouve pas dans la liste, et à vos bookmarks ^^.

Graphisme général :

1- Spunk United

Excellent magazine, avec au programme sélection des meilleurs artistes mondiaux par catégories, interviews et articles très intéressant.

2- You The Designer

Blog plutôt jeune (ouvert en septembre 2007) que j’ai découvert il y a peu. J’ai accroché instantanément aux articles très complets et diversifiés.

3- Computer Arts UK

Le site anglais de l’excellent magazine international Computer Arts.

4- NTMY

Site communautaire pour tous les graphistes du monde, un référence.

5- Behance

Site regroupant les portfolios des artistes du monde entier, une véritable mine d’inspiration.

6- Pdf Mags

Comment passer à côté de ce site qui référence tous les magazine pdf qui sortent.

7- Roots Arts

Toute l’actualité française de ce qui ce passe sur le web en matière de graphisme, le nouveau Design est superbe.

8- Étapes

Le magazine français de graphisme.

9- Visual Evasion

Excellent blog francophone traitant du graphisme en général.

10- Le Club Club

Un blog très diversifié, des articles et un style rédactionnel d’une grande qualité, en plus il est très souvent mis à jour, que demande le peuple !

11- Art Skills

La référence française en terme de graphisme.

12- FreeLance Switch

Le site communautaire de référence pour tous les freelances.

13- Design You Trust

Excellent blog traitant du graphisme en général.

Web Design :

14- Noupe

Un excellent site sur le web design & le développement web (CSS & Ajax) sans qui cet article n’aurait jamais vu le jour.

15- Smashing Magazine

LE blog/magazine du web design, un incontournable !

16- Think Vitamin

Excellent blog de l’équipe Carsonified, à consulter de toute urgence.

17- 24 Ways

Calendrier de l’avant des Web Designer tenu par les plus grands Web Designers mondiaux, la qualité des postes est irréprochable.

18- A List Apart

Un autre pilier du Web Design, de très bons articles avec des contributeurs diversifié ayant une vision différente du Web Design.

19- Site Point

Site très diversifié, graphisme, css, ajax, … Egalement éditeur de livres référents en terme de Web Design.

20- The Rissington Podcast

Dernier site qui propose d’excellent podcasts plein d’humour des excellents Web Designer John Oxton et Jon Hicks.

21- Web Appers

Blog de ressources Open Source pour Web Designer.

22- Happy Cog

Magazine web de grand Web Designer Mondiaux, à consulter d’urgence

23- Vandelay Design

Un très bon blog bourrés de ressources et de très bons articles.

Ressources :

24- Design Float

Comment passé à côté de site qui répertorie tous les meilleurs articles de graphisme du web !

25- Psd Tuts

A su s’imposer en quelques mois comme un des meilleurs sites de tutoriaux du web.

26- Blue Vertigo

Le site de répertoire d’une grande partie des sites de ressources du web, à bookmaker !

27- SXC.hu

Mon site favoris d’image gratuite et libre de droit, de plus les photographes y sont vraiment sympa et n’hésitent pas à vous donner leur accord pour l’exploitation de leurs photos, même à titre professionnel !

28- Icon Finder

Site d’icônes libre de droit, une librairie très complète.

29- Da Font

Le site de polices gratuites, un incontournable.

30- Maniackers Design Font

Excellent site de polices gratuites et originales.

31- Colour Lovers

Le site pour tous ceux qui aiment la couleur, trouver, créer et échanger vos palettes de couleurs favorites.

ShowCase :

32- Command Shift 3

Comparateur de sites web, j’ai découvert ce site il y a peu, depuis j’en suis accro, à tester d’urgence.

33- Showcase Point

Répertorie un très grand nombre de Show Case Flash & CSS avec plusieurs options de tri.

34- Zeniltuo

Une autre grosse base regroupant un grand nombre de site de Show Case.

35- The FWA

Le site de Show Case Flash mondialement connu, a perdu un peu de crédibilité depuis que l’on doit payer pour l’inscription mais reste quand même une référence.

36- CSS Mania

Un des plus Gros CSS Show Case au monde

37- CSS Remix

Une très bonne galerie CSS

38- Best Web Gallery

Une très bonne sélection de design

39- ScreenFluent

Encore une très bonne sélection de web design.

40- W3C Sites

Excellente sélection de sites valides W3C.

41- CSS Beauty

En plus d’être une bonne galerie, le site propose des liens vers des articles très intéressants sur le développement

42- Edu Style

Les écoles et universités ont aussi droit à une galerie css, celle-ci est particulièrement remarquable.

Développement :

43- Pompage

Le site français de référence pour tous les développeurs web.

44- 456 Berea Street

Un excellent site pour tout ceux qui veulent se lancer dans le développement.

45- Pro Blog Design

Blog assez récent proposant des articles de qualité, je vous invite à allez le visiter.

46- WP Designer

Le blog de référence pour tous les développeurs WordPress

47- Ajax Rain

Une des plus grosse librairies Ajax du web.

48- CSS3.info

Le site du futur standard CSS3

49- CSS Globe

Site référençant les meilleurs articles sur le développement CSS du web.

50- Référencement, Design et Cie

Excellent site sur le référencement.

Flash & Flex :

51- Adobe Labs

Nouvelle technologies et développement Adobe.

52- Christophe Coenraets

Blog d’un développeur Flex

53- Blog XML

Super blog français pour tous ceux qui souhaitent en savoir plus sur Flex & Air.

54- Adobe AIR Tutorials

Le site des tutoriaux AIR

55- Mike Chambers

Le blog du grand Mike Chambers

56- The Flash Blog

Blog incontournable pour tous ceux qui veulent en savoir plus sur l’Action Script 3 et le Flex.

57- Jean Phi Blog

Un des plus grands flasheurs français.

58- Advergames

Le site testeur des jeux flash commerciaux le plus en vue.

Typographie :

59- Ink Magazine

Excellent blog français de typographie, je vous conseille vivement d’aller y faire un tour.

60- Swiss Legacy

Référence en terme de typographie et de design.

61- I Love Typography

En quelque mois, ce site a su s’imposer comme un incontournable pour tous ceux qui aiment la typographie.

62- Design & Typo

Le célèbre blog de Peter Gabor, des articles d’une grande qualité.

63- Le Typographe

Le site français de typographie.

64- Slanted

Gros site allemand sur la typographie

Vidéo & Motion :

65- Stage6

Le YouTube des vidéos de motions et animation (2d et 3d).

66- Fubiz

Qui ne connaît pas l’excellent blog français de l’ami Fubiz, en plus le site dispose d’un nouveau thème bien frais, à voir et à revoir.

67- Motiono Grapher

Référence internationale en terme de motion.

68- Video Copilot

Excellent site de tutoriaux after effect gratuits et de packs d’effets spéciaux.

69- Motion Graphics/

Blog italien de Motion, des articles d’une grande qualité mis à jour très régulièrement.

70- FX Guide

Grand site communautaire de Vidéo et de Motion, un incontournable.

71- Motion Works

Le site de John Dickinson, à consulter de toute urgence.

Blog perso :

72- Elliot Jay Stocks

Mon héros, l’homme du « destroy web2.0 look », un excellent blog pour tout ceux qui souhaitent avoir une vision un peu différente du Web Design.

73- Veerle Blog

Vous connaissez non ? Un des plus beau blog du web, articles et tutoriaux très complets, bref un must.

74- Web Designer Wall

Depuis sa sortie en été 2007, ce blog a su s’imposer comme une référence envers tous les Web Designer mondiaux avec plus de 5000 readers. J’ai hésité à le mettre dans la catégorie Web Design mais Nick La ce qui rend le travail effectué est encore plus remarquable.

75- Jina Bolton

Design de Jina Bolton (aka Sushi Monster), auteur du livre « Art & Science of CSS » et de l’excellente conférence « Create Sexy StyleSheet » travail actuellement à la Sylicon Valley sur les nouvelles normes W3C.

76- Snook

Blog du graphiste, développeur, écrivain et maître de conférence (rien que ça ^^) Jonathan Snook, des articles très complets pour tous les Web Designer.

76- Stuff And Non Sense

Le super (et superbe) blog de Markley, un des meilleurs WebDesigner mondiaux.

77- Lysergid

Blog de l’excellent Directeur Artistique français Loïc SATTLER, des articles d’une grande qualité.

78- Iso 50

Blog de l’excellent graphiste vintage Iso50 qui nous fait découvrir de nouvelles œuvres à chacun de ses posts.

79- John Nack Blog

Blog de John Nack, composé d’article très complet sur le graphisme et les softs Adobe.

Web2.0 :

80- NetVibes

Mon agrégateur de flux préféré, vivement la nouvelle version ginger pour partager plus facilement ces flux, la démo au Web3 m’a paru prometteuse.

81- Del.Ico.Us

Outil de bookmaking (favoris) social & online, une façon très simple de sauvegarder ses marques pages et de les utiliser avec n’importe quelle machine. Une V2 est actuellement en bêta et devrait voir le jour pour le grand publique début 2008 avec son lot de nouveautés.

82- Twitter

Le site de micro blogging, il faut avouer que je n’étais pas trop fan au début, mais depuis que j’ai trouvé pas mal de beau monde dessus (notamment quelques bonnes graphistes internationales), je m’y attache beaucoup plus.

83- FaceBook

Le site inutile sur lequel on passerait sa vie …

84- Flickr

Le site de photo social, un grand nombre de personnes y sont présentes, de nouvelles photos à découvrir chaque jour.

Détente :

85- Vinyl abuse

Magazine incontournable sur les toys, à découvrir d’urgence.

86- Discobelle

Excellent site de musique Hip Hop & électronique avec une ou deux musiques à chaque article.

87- Hype Beast

Le magazine de référence en terme de tendance.

88- Lense

Déjà une référence pour tous ceux qui souhaitent en savoir plus sur la photo.

89- We are the 90’s

Back to the 90’s.

90- PopRave Blog

Excellent blog de fringues tendance.

Divers :

91- Hug My Mac

Dernière création de Carsonified, un site pour tout ceux qui aiment leurs macs.

92- North x East

Excellent blog sur les blogs et la façon de bloguer, à consulter de toute urgence si vous souhaitez créer un blog ou rendre le votre encore plus intéressant.

93- Ads Of The World

Site web qui publie toutes les publicités mondiales.

94- Marie /// Julien

Blog sur les concours web bidon ouvert il y a peu et déjà une référence dans le domaine.

95- Bien bien bien

En voilà un blog qu’il est bien !

96- Boing Boing

Excellent blog généraliste, on y trouve pas mal de choses sympas ?

98- W3sh

Le magazine français de toute les tendances, un incontournable.

99- Split Da Diz

Et oui, c’est clair que je ne pourrai pas me passer de mon blog ^^

The Principles of Beautiful Web Design

Ce dernier né de la famille des « sitepoint books » s’adresse non seulement aux graphistes avertis mais aussi à tous ceux qui rêvent de faire de jolis web design mais qui n’ont jamais suivi de formation particulière dans le domaine. Au cours de cet ouvrage très complet, Jason Beaird vous invite à (re)découvrir les différentes étapes qui constituent la création de web design. De vrais articles de fond parfaitement illustrés avec des exemples tirés de sites des plus grands web designers mondiaux vous feront comprendre les différents éléments qui constituent la construction d’un bon web design : grille, couleurs, texture, typographie et images).

You don’t need to have gone to art school or have artistic flair to create stunning designs using the methods outlined in this book.

Ce livre est disponible en précommande au prix de 40$ pour la couverture souple et 45$ en édition cartonnée (avec le pdf offert pour le moment) sur l’excellent Site Point (vous pouvez rajouter tous les flux dans votre agrégateur si vous ne les avez pas encore ^^). Mais c’est aussi une très bonne occasion pour vous d’acquérir l’excellent « The Art & Science Of CSS » de Jina Bolton et toute sa clique de la Silicon Valley qui étaient présent à la conférence FOWD pour nous parler de CSS3, dans ce cas ils vous offrent les frais de port et vous envoient même un poster (enjoy :D).
Je vous invite vivement à télécharger le sample pdf gratuitement ici, et pour en savoir plus sur cet ouvrage ça se passe par là.

Crackpot Calendar 2008

Excellente découverte dont j’aimerais vous faire profiter, Crackpot Calendar 2008 est un calendrier collaboratif avec des artistes du monde entier. Au fil d’une illustration par semaine (soit un total de 56 magnifiques illustrations avec la couverture et les extras) ce calendrier saura donner à vos amis une inspiration hebdomadaire. J’ai surtout apprécié la grande diversité entre les oeuvres, ainsi, d’une illustration vectoriel semi typographique en noir et blanc, on passe à un dessin très coloré type aquarelle. Bref, un calendrier qui fera plaisir aussi bien à des enfants, qu’aux plus âgés, il est disponible sur de nombreux site pour seulement 15€.

Pack sérigraphie chez Whe

J’avais promis de vous en reparler, voilà qui sera chose faite :D. L’excellent sérigraphe et ami Steve vous propose de partager sa passion pour la création de tee-shirt et stickers (initiative plus qu’honorable de sa part) grâce à un nouveau kit mis à disposition dans son shop. Il propose ainsi à tous ceux qui le souhaite de sérigraphier leur tee shirt/stickers et de le faire de façon très simple grâce à son excellent « magik kit ». Là où la sérigraphie est très forte c’est qu’un tee shirt en impression normale (type maison) ne dura qu’une dizaine de lavages (et encore…), alors qu’une sérigraphie est presque immortelle (enfin on va dire que tant que le tee n’est pas mort, elle est toujours présente). Un excellent cadeau pour tous ceux qui souhaitent offrir quelque chose d’original qui permettra à vous ou à vos proche de se lancer dans la sérigraphie de tee-shirt et de stickers. De plus Steve est trop web2.0 et n’hésitera pas à répondre à vos question sur Twitter (non, non j’y suis pour rien ^^), bref n’hésitez plus, c’est dispo sur la boutique WHE pour seulement 50€, à titre indicatif vous pourrez faire environ 25-30 tee shirt avec un pot de peinture.

Impression de tableaux chez Manzi

Vous êtes un créatif plutôt numérique et vous avez toujours rêvé d’offrir vos œuvre sur une toile, c’est maintenant possible grâce à l’excellente boutique Manzi de l’ami la crapule Veuch. Les petites toiles de 18/24 cm sont imprimées sur une grande toile, à vous de les découper et les mettre sous verre (pour indication, un cadre coûte environ 6€ en grande surface), la qualité de l’impression est irréprochable et le papier spécial vous donnera la parfaite illusion d’avoir peint votre travail. Pour ceux qui voient en grand, vos œuvres peuvent aussi être imprimées sur un format de 31×45cm, cette fois-ci elles sont montées sur cadre et prêtes à être offerte telle qu’elles, pour indication, vous pouvez faire imprimer vos petites toiles à partir de 5 exemplaires pour environ 10€ la toile, et les grandes toiles montées vous coûteront 72€ chacune et vous permettront d’offrir un très beau cadeau ! Pour information, plusieurs toiles de très bons artistes sont toujours disponibles dans le shop à différents formats, pour plus de renseignements sur les impression c’est par ici.

DVD Collector Emob

Notre jeune pousse national du e-learning (que j’avais déjà présenté lors d’un précédent article) nous propose depuis quelques temps un DVD très intéressant en pré commande. Sur plus de 14 heures de tutoriaux vidéos, e-mob nous enseigne les logiciels majeurs de la suite CS3 (photoshop, illustrator, after effect), ainsi que 3Ds max. Connaissant un peu leurs tutoriaux vidéo, je peux vous dire que ceux-ci sont très accessibles même pour ceux qui n’ont pas une connaissance très pointue de ces logiciels, mais ils arrivent aussi à apprendre des choses même au plus initiés. Ce DVD est limité à 500 exemplaires (va savoir pourquoi, il parait que c’est la mode des éditions limités), il est disponible sur une page spécialement mise en place pour l’occasion aux prix de 95€, à offrir à tous ceux qui veulent se diversifier dans le monde du graphisme et maîtriser de nouveaux logiciels / techniques. Je vous invite ci dessous à découvrir le teaser du dvd :

Switcheroo’s smokey plush

J’ai complètement craqué pour cette nouvelle peluche de 36″ made in Frank Kozik ! Vous connaissez peut être les modèles 12″ de ce célèbre designer de toys, en gros un très bon cadeau à offrir à toutes les fanatiques de peluches (prix indicatif : 65$ US).
Et pour tous les fanatiques de customisation de toys, je vous propose les nouveaux modèles House Of Liu’s Mei and Di Di, petite figurine vynil vierge qui offre un excellent support pour tous les créatifs (prix indicatifs : 26$ US).

Un peu de fringue

Et oui, vous commencez presque à me connaître, comment écrire un article sur des cadeaux sans parler un peu des nouveautés niveau vestimentaire ! Personnellement je suis tombé amoureux de l’excellent hoddie bisounours trouvé chez Raimbow Girl mais apparemment c’est que pour les filles :(. A remarquer aussi un excellent tee-shirt du 123 klan chez 5years, à acquérir de toute urgence pour ceux qui ne l’ont pas déjà ! Et enfin la nouvelle collection de casquettes chez New Era est enfin là !

Comme chez Split Da Diz on est gentil, voici quelques cadeaux pour vous ! Tout d’abord le très bon blog/calendrier de l’avant 24 ways vous offre tous les jours un article d’un grand(e) web designer / développeur mondial, à ajouter d’urgence à votre agrégateur ! Je vous invite aussi à allez consulter les très bon articles et sites 39 Addictions - Designers just can’t stop, 379 helpful links for webdesigners, What does Accessibility mean? et Best of CSS Design 2007.

Un petit mot pour la fin pour dire que ce blog est loin d’être mort, je n’ai juste pas pu poster pour des raisons professionnelles et personnelles et je m’en excuse. Mais pas d’inquiétude, de nombreux articles encore plus intéressants sont à venir durant la semaine prochaine.

Crédits photos :

• Artaman
• Toysrevil
• Victor

Contenu de l’archive :

- Le thème en lui-même, il vous suffit de le déposer dans le répertoire wp-content\themes de votre blog.

- Des plugins indispensables à la bonne utilisation de ce thème, à placer dans wp-content\plugins :

• PageNavi : permet de naviguer entre les différentes pages une fois la page principale remplie. Pour retirer le « 1 of X », il vous suffit d’aller dans options/Page Navi et de supprimer le premier champ « Text For Number Of Pages », de plus pour une meilleure utilisation, régler le nombre de pages montré à 9.
• SimpleTag : permet de crée le nuage de tag en bas de la page et d’afficher les articles relatifs (à la fin de chaque billet).
• Fuzzy Recent Post : permet d’afficher les derniers billets dans le header.

- head_droit_vierge.jpg, vous permet de créer votre propre header, à renommer en black.jpg une fois édité et à placer dans le dossier wp-content\themes\SplitDaDizTheme\images\head.

- head_gauche.psd, à ouvrir avec photoshop, vous pouvez modifier le header de droite comme bon vous semble. Une fois l’édition terminée faites un jpg nommé « vecto.jpg » à placer dans le dossier wp-content\themes\SplitDaDizTheme\images\head.

- Le fichier lisez-moi.txt qui contient ces informations.

Autres plugins recommandés :

• Google XML Sitemaps : créer fichier map.xml à la base de votre site afin que le robot google référence bien toutes vos pages.
• WP AJAX Edit Comments : permet d’éditer les commentaires sur un page de billet, plugin facilement configurable et manipulable.
• Comment Twitter SMS Notification: permet de recevoir les commentaires postés sur son blog directement par sms.

Licence :

Ce thème est sous licence creative commons : Paternité-Pas d’Utilisation Commerciale-Partage des Conditions Initiales à l’Identique.
Vous êtes libres :

• de reproduire, distribuer et communiquer cette création au public
• de modifier cette création

Selon les conditions suivantes:

• Paternité. Vous devez citer le nom de l’auteur original de la manière indiquée par l’auteur de l’oeuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d’une manière qui suggérerait qu’ils vous soutiennent ou approuvent votre utilisation de l’oeuvre).
• Pas d’Utilisation Commerciale. Vous n’avez pas le droit d’utiliser cette création à des fins commerciales.
• Partage des Conditions Initiales à l’Identique. Si vous modifiez, transformez ou adaptez cette création, vous n’avez le droit de distribuer la création qui en résulte que sous un contrat identique à celui-ci.

Vous pouvez donc modifier le thème comme bon vous semble, vous devez juste laisser le footer corporing (celui tout en bas) tel quel, et reproduire un contrat similaire sur le thème.

Utilisation des classes et balises:

- Mettre une image d’en-tête: il faut juste rajouter un class=”align-left” à votre image
Exemple : <img src=”http://votre_image.jpg” alt=”Votre image” class=”align-left”;

-Mettre un effet lightbox sur une image: rajouter la propriété rel=”splash.image” à votre image
Ex : <a href=”http://votre_grande_image.jpg” title=”ma grande image” rel=”splash.image”><img src=”http://votre_petite_image.jpg” alt=”Ma petite image” /></a>

-Pour ouvrir un lien dans une nouvelle fenêtre, employer la propriété class= »blank »
Ex : <a href=”http://votre _image.jpg” title=”mon image” class= »blank” />

- Mettre une lettrine: enfermer votre lettre dans des balises span comme celà:
<span class=”firstletter”>U</span>

Scripts:

Par soucis d’accessibilité, certains scripts ont été retirés, vous pourrez les retrouver sur Mootools, framework très léger et modulable.

Remerciements et téléchargement:

Encore un grand merci à Kanou, sans qui ce thème n’aurait jamais été disponible.

Je reste à votre disposition pour tous types de questions dans les commentaires.

English instruction (merci à Victor)

Le monde de l’information et de la communication a suivit une évolution exponentielle ces dernières années, celle-ci est due, en grande partie, à la généralisation mondiale d’Internet. Un des tournant s’est fait à partir de l’arrivée du web2.0 qui place l’utilisateur comme un acteur et non plus comme un simple spectateur. Aujourd’hui n’importe qui peut créer un site digne de ce nom, contrairement à ces dernières années où seul les webmasters pouvaient créer en créer ansi que les grandes marques qui avait le “luxe” d’avoir un site web.Dans cette première partie, je parlerai plutôt des évolutions du web design dit « classique » (xhtml/css), et dans un second billet, je tacherai d’exposer les futures évolutions des applications Flash et rich media.

Une évolution matérielle

Il est certain qu’on peut maintenant affirmer qu’ Internet est bien ancré dans les « mœurs française », en effet une grande majorité des français a déjà surfé sur le web. Même si tout le monde n’est pas encore acteur de ce grand réseau, un grand nombre l’utilise quotidiennement (ne serait-ce que pour des raisons professionnelles). L’évolution du matériel informatique a eu une grande influence sur l’évolution du web design, notamment avec l’augmentation de la puissance des ordinateurs et des vitesses de connexion internet. Permettant ainsi aux nouvelles technologies, souvent très gourmande en ressources, et au web design plus complexes et plus lourds (en termes d’images, de scripts, …) de se développer.

L’évolution des diagonales d’écrans a aussi marqué cette évolution, en effet il y a quelques années, posséder un écran en 800*600 était quelque chose qui permettait de naviguer agréablement sur la toile. Alors qu’aujourd’hui la plupart des sites développés sont au moins fait pour les résolutions de 1024*768 et supérieur (80% des utilisateurs web en janvier 2007 d’après les statistiques officiel W3C), ce qui offre beaucoup plus d’espace aux différents éléments graphiques. Nous pourrions également évoquer le fait que les couleurs sur le web au départ ce réduisait à 256 afin d’être compatible avec toutes les configurations qui affiche maintenant des milliards de couleurs.

Notons aussi une grande amélioration au niveau des logiciels de créations graphique avec des softs bitmap de plus en plus puissant (Photoshop par exemple qui offre maintenant la possibilité de manier des objets 3D et de la vidéo), mais aussi des contenus flash de plus en plus impressionnants (maîtrise de la 3d grâce à PaperVision, inclusion vidéo détourée, …) ainsi que des applications rich media sur lesquels nous reviendront dans un prochain article.

Rentrons maintenant dans le vif du sujet, et abordons les choses qui font vraiment évoluer le web design.

Rss & Atom, l’obligation de toujours faire mieux

Il est clair que l’arrivée des flux RSS aussi bien qu’Atom a sérieusement remis en cause l’univers du web design. En effet, un site placé dans un agrégateur de flux n’a plus besoin d’être affiché, l’utilisateur pouvant lire les articles uniquement par affichage du texte. Ce qui signifie qu’un site, même avec une très bonne qualité graphique ne peut être que moyennement visiter. L’évolution de ceux-ci pousse les différents sites (et webmaster) à se démarquer par leur aspect visuel donnant ainsi l’envie aux visiteurs de revenir. Et d’un autre côté, les flux permettent aux visiteurs de revenir à chaque nouveauté et ainsi de suivre plus facilement l’évolution du site.

Du web design accessible à tous

Il est clair que l’univers du web design devient de plus en plus accessible à tous. Que ce soit avec la multitude de template proposé par les différents services, mais aussi grâce aux générateurs et ressources en ligne très présents ces derniers temps sur la toile.Du site de logos gratuit au générateur de background en passant par les sites d’icônes gratuites, il est maintenant possible de trouver n’importe quelle ressource permettant à un utilisateur quelconque de créer son site web sans ouvrir le moindre logiciel de création graphique.

Nous pourrons aussi citer l’arrivée d’applications rich media tel que Scrapblog, PicNik bien que depuis la fin de la beta un grand nombre de fonctions soit devenu payant ou encore Vector Magic qui permettent à n’importe qui de retoucher des images directement sur le net, de façon totalement gratuite sans avoir à obtenir une licence.Cependant celles-ci n’auront peut être pas de véritable notion de mise en page.

Même si les éléments récoltés peuvent, individuellement, se révéler très jolis graphiquement, l’ensemble ne serra pas forcement cohérent et ne donnera pas toujours une bonne lisibilité au site.La tendance pousse donc les futurs web design à vraiment apporter des éléments innovant en matière de graphisme si l’ont ne veut pas se retrouver avec des éléments qu’un utilisateur x peut aussi avoir sur le sien.

Vers un monde d’Ajax

Grâce à l’arrivée des applications dites «web 2.0 », les scripts Ajax se sont répandus sur un grand nombre de site. Celui-ci présente une bonne alternative à des langages d’animation tel que l’action script (flash) sans pour autant avoir besoin que l’utilisateur installe un player externe (la plupart des navigateurs pouvant lire le java script de base). Il permet aussi de charger du contenu sans avoir pour autant à recharger une nouvelle page. Bien que ceux-ci soient parfois assez lourd à utiliser, les scripts Ajax continuent à se développer et deviennent de plus en plus malléable. Ainsi, il n’est plus rare de trouver des scripts, tel que Light Box, sur de nombreux site, cependant celui-ci pose de grande question d’accessibilité, en effet, mal utilisé il peut rendre un site totalement inaccessible.

CSS3, c’est pour bientôt

On entend de plus en plus parler de CSS3, que ce soit par des sites dédiés, ou par des blogs. Mais quelles nouveautés ont été apporté par rapport au développement CSS2 actuel ?Même si la plupart des propriétés évoquées ci-dessous n’en sont encore qu’au stade de la recommandation, un grand nombre d’entre-elles ont des chances d’être approuvées par le W3C.

Tout d’abord on note une grande amélioration des background, qui seront beaucoup plus simple à manipuler comme bon nous semble. Nous aurons la possibilité de les positionner ceux-ci par rapport à un éléments en lui-même (le centré par exemple) ou par rapport à son origine, ainsi que la possibilité d’avoir des background multiple pour un même élément.Évolution qui se produit aussi au niveau des bords de cadre, car nous aurons la possibilité de les arrondir directement en css, et de les passer en images (l’image choisi suivant le contour du cadre).

Au niveau des couleurs, il est dorénavant possible de les écrire directement en RVB (et non plus seulement en hexadécimal), ainsi que de leur donner un certain pourcentage d’opacité.

Pour la mise en page, les min-width et max-width permettront de donner une largeur minimal et maximal à chaque élément, et les mutli-colonnes permettront d’avoir plusieurs colonnes de texte dans un même éléments très simplement. A noter aussi l’arrivée des drop shadow sur les textes avec plusieurs paramètres à la manière de Photoshop.Je finirai cette partie avec la présentation de «Creating Sexy Stylesheets» de l’excellente Jina Bolton, graphiste & artiste à la Silicon Valley, une des auteurs de « The Art & Science Of CSS », consultante entre autre pour le W3C.Pour information il faut savoir que l’actuel Internet Explorer 7 ne supporte pas encore le CSS 2.1, on est encore loin (enfin surtout chez Microsoft ^^)…

Illustrations et identité visuelle

Il est clair que pour se démarquer, les sites web doivent de plus en plus avoir une identité visuelle qui leur est propre. Ce qui explique la présence grandissante d’illustrations (j’entends par là la mascotte vectoriel) dans le domaine du web design.Mettre en avant un personnage illustré sur l’ensemble du site permet une meilleure identification visuelle par l’utilisateur qui la repèrera dès le premier coup d’oeil.

Ce genre d’illustration qui n’apparaissait jusqu’à présent que dans le logo du site, est maintenant utilisé plusieurs fois dans des « positions différentes » pour orienter l’internaute à travers les différentes catégories, allant parfois jusqu’à remplacer le texte. Bien sûr ce genre d’identité visuelle est plutôt réservé au blog « corporate » qui peuvent faire appel aux services d’un illustrateur où aux illustrateurs eux-mêmes, car celle-ci doit être intelligemment utilisée pour ne pas gêner la lisibilité (des exemples sont disponibles dans un de mes précédents billet.

L’effet Web 2.0

Le style graphique « web2.0 » est-il un simple phénomène de mode ou un véritable « renouveau » du web design ?Les reflets dit « web2.0 », les dégradés avec des effets « glossy » (bande blanche à opacité réduite) ou encore les bords arrondis n’ont jamais été aussi tendance. Ils forment ce qu’on pourrait appeler « l’effet web 3.0 ».

Durant la conférence du FOWD, Elliot Jay a présenté son point de vue sur le sujet, et il n’y va pas avec des pincettes :D, mais sa conférence se révèle réellement intéressant.En effet, il nous rappelle que la plupart des sites des « grands » web designers n’ont presque rien de cette tendance web2.0, et que les éléments qui sont la base de cette tendance graphique sont inutiles et présentent une véritable gêne pour l’internaute. Pour ma part, je pense que tout comme l’effet dit « futuriste » de ces dernier temps, cette tendance n’est qu’un simple phénomène de mode et va passer pour laisser place à une autre.Je vous invite donc à consulter la présentation de sa conférence ci-dessous ainsi que son blog.

| View | Upload your own

Et après ?

Pour conclure sur cette première partie consacrée au web design dit « classique », il est clair qu’avec la popularisation du web design et au vu du nombre toujours grandissant de site, les sites web devront de plus en plus se faire remarquer d’un point de vue graphique pour être consulté (à part peut être les « gros » sites référents).

Pour ma part, je pense que l’arrivée de nouvelle norme tel que le CSS3 va pleinement contribuer à une réelle avancée en terme de graphisme, et même si le web design devient de plus en plus accessible pour n’importe quel utilisateur, les vraies innovations sortant du lot continurons à ce faire.

Pour finir voici quelque article résumant le conférence FOWD: ici (fr),ici, et ici.

A bientôt pour la prochaine partie de ce « mini dossier » consacré au futur du web design.

Lexique (Wikipedia):

Ajax

AJAX, ou Asynchronous JavaScript And XML (« XML et Javascript asynchrones »), est un acronyme désignant une solution informatique libre pour le développement d’applications Web.À l’image de DHTML ou de LAMP, AJAX n’est pas une technologie en elle-même, mais un terme qui évoque l’utilisation conjointe d’un ensemble de technologies libres couramment utilisées sur le Web.

Atom

L’appellation Atom réfère à deux standards liés. Le Format de Syndication Atom est un format de document basé sur XML conçu pour la syndication de contenu périodique, tel que les weblogs ou les sites d’actualités, tandis que le Protocole de Publication Atom (APP) est un protocole simple basé sur HTTP pour la création et la mise à jour de ressources Web.

Background

Un fond d’écran est une image qui est utilisée comme surface du bureau. Selon les systèmes d’exploitation, les termes varient mais désignent trivialement une image qui est choisie comme fond d’écran. Avec Windows, il s’agit de papier-peint (ou wallpaper en anglais), alors qu’avec Mac OS, il s’agit d’image de bureau (en référence au terme motif de bureau qui désigne une petite image répétée plusieurs fois de façon à remplir l’écran). On retrouve également le terme arrière-plan (ou background en anglais).

CSS

Le langage informatique CSS (Cascading Style Sheets kæ’ske?d?? sta?l ?i?ts : feuilles de style en cascade) est utilisé pour décrire la présentation d’un document structuré écrit en HTML ou en XML, et c’est le World Wide Web Consortium (W3C) qui en a la direction.

RSS

Ce système est habituellement utilisé pour diffuser les mises à jour de sites dont le contenu change fréquemment, typiquement les sites d’information ou les blogs. L’utilisateur peut s’abonner aux flux, ce qui lui permet de consulter rapidement les dernières mises à jour sans avoir à se rendre sur le site.

W3C

Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994 pour promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n’émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels.Le W3C est supervisé par Tim Berners-Lee, le principal créateur du protocole URL, de l’HTTP, et de l’HTML.

Polo : Salut Tetsouille

Tetsouille : Salut

Polo : Pourrais tu te présenter en quelques mots pour ceux qui ne te connaisse pas encore?

Tetsouille : Donc Tetsouille, Spaghetti-Boy pour certains, Spa-ghetto pour d’autres, 24 ans, graphiste multimédia, illustrateur et peintre.
Je suis originaire de Digne, une petite ville du sud de la France, à mi chemin entre la Provence et les Alpes du Sud. Fort heureusement, la lavande n’étant pas ce qui m’inspirait le plus, j’ai migré quelques années à Montpellier pour mes études et me voilà à Annecy depuis un peu plus d’un an.

L’actu graphique est tellement vaste, qu’il y a toujours un truc fou à voir chaque jour, c’est plutôt passionnant.

Polo : Peux tu en dire un peu plus sur ce que tu fais à Annecy?

Tetsouille : Alors, à la base, j’ai bougé de Montpellier vers Annecy pour suivre la formation concepteur réalisateur multimédia aux Gobelins, d’où le fait de s’expatrier dans les Alpes savoyardes. Il y a pas mal d’agences sympas dans le coin, mais la ville reste un peu petite et ça bouge moyen. On verra où le futur me mène.

Polo : Ok, au niveau des agences ça à l’air cool avec des gens comme mégalos, c’est vraiment une bonne boîte de création de site web (avec dernièrement le premier site commercial sous papervision (diesel)) !

Tetsouille : Oui ils se bougent pas mal, et beaucoup de compères travaillent là-bas.

Polo : Quand tu parles de réalisateur multimédia, tu entends quoi par là ? A quel poste en agence (ou chez l’annonceur) ça amène et quels logiciels utilises-tu le plus ?

Tetsouille : Pour moi, la formation prépare surtout à un job en agences, et pas assez pour l’option freelance à mon goût. Les cours enseignés restent très technique mais également orientés gestion de projet. De ce fait parfois, je me sens un peu un OVNI en étant vraiment concentré à 100% sur le graphisme, d’où mes exutoires / projets persos les soirs et les week end !

Polo : Je pense que c’est le cas chez la plupart des gens qui sortent d’étude (à part peut être les écoles spécialisées en animation 3D).
Sinon, je suis vraiment fan de ce que tu fais niveau illustrations : toiles, cutos (nous y reviendront plus tard), … Pourrais tu nous en dire un peu plus sur tes influences ?

Tetsouille : Je pioche énormément dans tous les sens, ça peut aller du traitement de la couleur chez Gauguin, à la japanim’ et le pop art japonais surchargé graphiquement, au street art, graffiti, sports de glisses etc …
L’actu graphique est tellement vaste, qu’il y a toujours un truc fou à voir chaque jour, c’est plutôt passionnant. Puis l’émergence de la motion design chez le grand public (effet MTV) donne des trucs très positif graphiquement.
C’est un peu comme un exercice mental, je pense tout le temps au “graphisme” que j’ai vu, aux projets sur lesquels je suis en train de bosser, pour faire mûrir mes idées. J’ai opté un peu pour l’option standard chez les créatifs.
Il y aussi la musique qui m’influence beaucoup (dur pour moi de créer sans musique). C’est pour cela que j’essaye de me tourner depuis très récemment vers la vidéo, où on retrouve plusieurs médias ensemble.

Polo : Ça roule, je suis tout à fait d’accord avec l’effet motion qui impressionne toujours et donne une très bonne impression aux gens. Et je suis tout à fait d’accord avec toi, il y a une énorme diversité dans la vidéo, manque plus que l’interactive ^^ (peut être que ça va aider avec le rachat de macromedia par Adobe et flash 10).
Sinon y a t-il des graphistes (au sens large du terme) que tu affectionnes tout particulièrement ?

Tetsouille : Oui, je dirais beaucoup de graphistes de mon entourage proche : Elroy, BG, Pier et tout le collectif Play en sens large, Onekon7, Woumpah, Playmoo. Puis les papas : Mist, Tilt, Run, Rolito, 123Klan ou le studio HelloHikimori (depuis très récemment). Que des super frenchies !

Polo : Yeap, c’est vrai que le collectif PLAY fait vraiment des bons trucs en ce moment (alors que le collectif et assez récent).

Tetsouille : Ils se sont formés à la 3D cet été oui, sinon des graphistes talentueux et réfléchis depuis quelques temps, la technique vient facilement au final.

Polo : Et de ton côté tu t’es pas mal mis au motion alors, prêt pour nous monter le nouveau motion MTV ?

Tetsouille : La pression ! Le motion c’est super mais c’est aussi très long à composer. Mais j’ai préparé de la matière qui devrait sortir de l’ombre prochainement…

Polo : J’approuve, n’hésite pas à nous faire signe dès que ce serra prêt ^^.
En ce moment tu es bien présent sur le domaine de la customisation (toys, casquettes, skateboard, …) quel est ton support favori ?

Tetsouille : Ca doit faire deux ans que je customise pas mal d’objets.
Je me suis aperçu que j’étais plus à l’aise que sur support plat, ou bien parce que ça m’apportait une fraîcheur du fait de passer sur un support en volume. J’ai commencé avec l’expo Deck’On en customisant un skateboard, j’étais vraiment allé à fond dans l’esprit, en customisant la planche, mais aussi le grip en rajoutant des matières type jean, de la peinture en relief etc …
Puis je suis passé au casquettes, ça a été un peu la révélation.
Il y a aussi les toys qui sont vraiment super plaisant à customiser, avec par exemple les Qee tout en formes rondes. C’est pas super original pour un graphiste de dire qu’on customise des toys, mais on peut réellement aller très loin avec une forme vierge !
Là je viens de peindre une vieille TV en blanc, on dirait maintenant un vaisseau dans Star Wars, je vais tester un custom, ça devrait être cool !

Polo : La grande classe quoi !
Et sinon tu t’es un peu mis à la customisation physiquement sur toy (genre avec des têtes remplacés, en rajoutant des objets spéciales dessous, … ?

Tetsouille : Non je n’ai jamais encore testé les modifications physiques. Peut être parce qu’au final je fais plus du custom à la manière d’un graphiste, comme si je plaquais mon motif sur un volume en 3D. C’est pour cela j’aime aussi réellement bosser sur des projets dans le textile.

Polo : Et avec quel outils te sens tu le plus à l’aise (bombe, posca, peinture, souris, …) ?

Tetsouille : Pas mal de choses au final, il faut essayer de toucher à tout. Après c’est vrai qu’avec le temps on a tendance à choisir des matières de prédilection. Pour moi souris ou à la main c’est du quasi au même, mis à part qu’à la main on a réellement l’objet dans les mains et le Ctrl (pomme) + Z en moins.
Mais pour répondre à ta question, je dirai pour résumer : bombe pour le remplissage, acrylique, beaucoup de posca et marqueur. Et pour les outils infographiques, principalement Photoshop, Illustrator, Flash et After Effects.

Polo : Sinon tu as aussi exposé dernièrement alors, content ?

Tetsouille : « Moi ce qui m’importe c’est quand les gens sont vraiment très content ». Omnikrom
C’est vrai que c’était ma première exposition, l’appréhension de la première fois. J’ai réellement été très content, le retour aux sources à Montpellier, et énormément d’amis se sont déplacés au vernissage, c’était top !
Et puis ça permet de toucher des gens qui ne connaissent pas forcément mon travail, de sortir un peu du cocon “promotion sur internet” et de rencontrer des gens super sympa sur place. Prochaine étape, je déplace l’exposition à Toulouse au concept store Rice and Beans du 2 au 29 février 2008.

Polo : Ça le fait bien, vivement Paris ! Niveau collaboration, as-tu des projets en cours ?

Tetsouille : Un projet en cours devrait se fignoler avec Onekon7 et Woumpah, mais c’est encore trop tôt pour en parler, je vous tiendrai au courant.
Avec de la vidéo et de la musique pour les plus curieux !

Polo : Je suis sûr que ça va bien envoyer ^^
Et ton avenir, déjà des choses de bien définies où ça va être du Freestyle ?

Tetsouille : J’ai vraiment de beaux projets sur lesquels je bosse en ce moment qui verront le jour (tous dans le textile). Puis j’ai le souhait depuis un moment de m’installer à Montréal fin 2008 avec ma copine. On espère mener cette idée à terme.

Polo : Yep, j’ai plusieurs pote qui sont là bas (et même de la famille ^^), à ce qu’il parait l’hiver ça caille pas mal, par contre les teufs sont tout simplement énormes (enfin bref faudrait que j’y retourne après NYC).
En tout cas, merci pour l’interview et pour l’énergie dans les réponses, on y trouve vraiment des choses très intéressantes.
Un petit mot à rajouter pour la fin?

Tetsouille : Un grand merci à toi d’avoir pris le temps de m’accorder cette ITW, continue tes articles pleins de ressources sur ce blog.
Et un merci à tout mon entourage, mes amis et ma famille de me soutenir, c’est là que j’y trouve ma plus grande motivation.
A bientôt

Liens utiles :

• Site web de Tetsouille
• Blog de Tetsouille
• Myspace de Tetsouille
• Expos de Tetsouille

Bon je m’emporte un peu, revenons à la typographie, je vais tout d’abord vous présenter un tout nouveau site regroupant d’excellents fonts : Fawnt. Ce site (un peu dur à prononcer certes mais très “web2.0” ) nous propose une sélection des meilleurs fonts extraits de plusieurs sites web plus ou moins important (allant de dafont à des petites boites de productions sur lesquelles je reviendrais plus tard). Au total, cela donne un site vraiment sympathique avec une très belle sélection de fonts à suivre de près.

AinsiFont est un petit atelier de production francophone, avec un site régulièrement mis à jour. On y retrouve des typos de tout type (avec & sans empattement, fantaisiste, script, …), pour des prix allant de 4€ à 100€, les typos proposées y sont vraiment originales et bien présentées. Petite mention spéciale pour la STONE HEURE (consultable ici), qui a eu le droit à une petite impression chez Trendless en sweat & en tee-shirt.

J’aimerais aussi vous parler du site japonais totalement gratuit : Maniackers Design Font. Ce site regroupe un grand nombre de typos avec beaucoup de nouveautés et de mises à jour. La mise en page de certaines polices est tout simplement excellente, on apprécie aussi le fait qu’on ne trouve ces polices presque nulle part ailleurs.Et, pour ceux qui ne connaissent pas, voici un excellent site qui permet de comparer des paragraphes à l’écran avec les polices web standards ainsi que toutes leurs dérivations.

Niveau blog, en vrac, celui qu’on ne présente plus, l’excellent blog Typo du Monde Peter, en ce moment plutôt sur le mouvement Dada, les articles sont toujours très intéressants et bien illustrés. Typorifik est un blog français de typographie qui nous présente un bon nombre de typos et livres même si celui-ci n’est plus très mis à jour.A remarquer, l’excellent blog assez récent I love typography qui regroupe un grand nombre de ressources (fabrications de fonts, livres, fonts gratuits, …).
Swisslegacy est un excellent blog anglais, vraiment très complet, au programme : vidéos, expositions, livre, concours et même des podcasts ! A noté aussi « 40+ Excellent Freefonts For Professional Design » sur l’excellent Smashing Magazine, blog regroupant un très grand nombre d’articles très intéressants avec énormément de ressources. Et enfin le blog de l’excellente fabrique de font : Exljbris qui nous propose des fonts gratuits & interdits de grande qualité.

Pour finir voici une petite collection de fonts gratuits que j’apprécie tout particulièrement.

Festigo

Baruta Black

176MKSD-AL

Moderna

Renzor Broken

071MKSD

Big Mummy

Bastardus Sans

Liens utiles :

• Polices de caractères en libre téléchargement : DaFont
• Download Free Fonts and Dingbats: Urbanfonts
• Pixelfonts, Fonts For Flash : Pixelfonts
• Download free fonts: TypeNow.net

Freelance Switch (en):

Communauté internationale de Freelance, ce site & son blog se sont vite imposés comme une référence dans le domaine. En plus de vous proposer un blog très complet et très beau, le site vous propose également des ressources, un forum, une plateforme de recherche d’embauche et en plus les créateurs n’hésitent pas à mettre la main à la patte pour proposer des tutoriaux sur d’autres communautés.

J’aime bien :

• l’excellente gestion des couleurs,les graphismes très soft & légers,
• la qualité rédactionnelle et le grand nombre d’article,
• la mascotte et l’identité visuelle.

J’aime moins :

• le surplus de pub, même si l’espace est bien géré, on aimerai en voir moins,
• la colonne parfois beaucoup plus longue qu’un article (à cause du nombre de pubs :s).

Mention spéciale pour la box Related Posts // Subscribe (accessible en cliquant sur le titre d’un article) que j’affectionne.

Veerle’s blog (en):

Veerle est une talentueuse graphiste / web designer Belge (et oui ça existe ^^), qui a ouvert son blog il y a plus de 4 ans (actuellement en version 2). Son blog de renommé international est devenu une véritable institution en matière de graphisme, regroupant conseils de développement, design, évènements, tutoriaux, …

J’aime bien :

• le design très bien construit,
• le mélange de couleurs,
• l’illustration du header,
• le grand nombre d’articles intéressants.

J’aime moins :

• le fait que l’on ne puisse lire qu’un seul article sur la home, même si il faut avouer que ça donne vraiment quelque chose de très clair où tous les éléments son mis en avant sans scroll,
• un peu d’Ajax aurait été un plus (pour le “skip the content “en haut de page par exemple).

Mention spéciale pour le pattern (papier peint ou image de fond) du haut de page.

Web Designer Wall (en):

Dernier petit de Nick La (N-Design Studio & Best Web Galery), ce blog regroupe toutes les idées en terme de web-design et de graphisme de ce graphiste talentueux. Comme il définit le lui-même :

I love to share ideas and design techniques. This site serves as my public blog where I post my design ideas, tutorials, and talk about modern web design trends.

J’aime bien :

• les illustrations (c’est bien sûr @@…),
• le design très original,
• la pointe d’Ajax vraiment très sympathique,
• la qualité des billets.

J’aime moins :

• la recherche et le poll, histoire de chipoter ^^ ;

Mention spéciale pour le design autant original que bien réalisé.

EMob (fr):

Cocorico, enfin un blog français , Emob à su s’imposer comme un des sites francophones de référence en matière de E-Learning. La première version était très sobre et bien construite, la 2ième change un peu de style. Au programme pattern d’ornement floraux, beaucoup plus de dégradé qui donne une dynamique plus « web2.0 ». Mais hélas beaucoup d’éléments viennent s’ajouter. Personnellement je regrette un peu le temps où les tutoriaux vidéo étaient totalement gratuit, même si ceux qui sont en vente sont vraiment de meilleure qualité. Je trouve que les initiatives de la part de la team se sont un peu dégradées, et que ce blog est devenu largement plus commercial (on a un peu trop de musique plutôt que de papertoys ou de petits tutoriaux )…

J’aime bien :

• le pattern,
• l’aspect plus « web2.0 » du site,
• les présentations d’artistes,
• les couleurs très classes,
• le logo.

J’aime moins :

• la colonne réservée aux publicités qui diminue la largeur des articles d’un tiers !
• le surplus d’informations pas assez différenciées les unes des autres,
• le double footer (pied de page) et les mentions posées sans support,
• la jointure du 1er footer (le noir), histoire d’abuser un peu,
• le scrolleur horizontal en 1024*768.

Mention spéciale : ça fait plaisir de voir un beau blog français même si je trouve quand même que la qualité des articles a baissé.

Go To Css3 (fr):

Site français peu connu, fait par Nokliolabs (auteur du design de paperblog) consacré au prochain format de feuilles de style le css 3 (css 2 étant la version actuelle utilisée par la plus part des navigateurs qui commence à s’adapter au 3 (s’en parler d’Internet Explorer :p). Le style très « zen » fait un peu penser au célèbre Zen Garden, référence mondiale en terme de développement css (enfin ça à tendance à vieillir un peu mais les bases sont là ). On apprécie bien les illustrations sans contours qui nous font un peu penser à Dofus.

J’aime bien :

• les couleurs assez sobres,
• les illustrations très bien intégrée dans les blocs,
• le style très « web2.0 » allié à de belles illustrations,
• vivement que le format css3 soit adopté par tous les navigateurs.

J’aime moins :

• la cadance des billets plutôt faible,
• le footer inexistant,
• la coupure du header sur la gauche.

Mention spéciale pour la colonne de droite avec les commentaires et les informations du billet à l’intérieur.

I Love Typography (en):

Global Zoo’blog (de):

Sylivia Loh (en):

Malene Hald (en):

SimpleBits (en):

The Geniant Blog (en):

Kloobik (fr):

FusionFox (en):

Alex Buga (en):

Photo Matt (en):

Deziner Folio (en):

Lense’s blog (fr):

Design You Trust™ (en):

PSDTuts (en):

Blog de Michaël Villar (fr):

Colour Lovers blog (en):

Spoon Graphics (en):

RootsArts (fr)

Chewy Tha Scratchy Nutz (fr):

N-Design Studio (en):

Liens utiles :

• A weblog dedicated to web-developers and designers: Smashing Magazine (en);
• A gallery of CSS web design in Yorkshire UK: CSS Web Design Yorkshire (en);
• CSS Gallery is a showcase of outstanding W3C compliant web sites from designers and developers that are inspired by and work to W3C Standards: CSS Gallery (en);
• Your Daily Design Dose * Demo Tapes and Dreams Studio K — We’re ready to take your order: CSS Flash (en).

Pour commencer, le studio NYLON basé à Los Angeles qui allit de l’excellente 3d, des très bon effets de caméra mais aussi de l’image par image et des illustrations, qu’ils poussent même au dessin animé magnifiquement réalisé. Qui se définissent comme quelque chose qui m’a bien faire rire (je défie n’importe quel agence française de mettre une phrase du genre (quoi que ^^…)) dont voici un passage :

We specialize in juxtaposing übern outside-of-the-box, orhanic thinking with inspired, modern, intergalactic, qui-infite intergration which captures our sens of viral filmic synergy.

On aime bien le design très sobre du site, la navigation est facile et nous invite à visiter toutes leurs créations (et par la même occasion à ne pas se recliquer sur les créations déjà vues (à l’aide de mots barrés). On regrettera cependant la présence de flash sur toute l’interface alors que certaines parties auraient pu être facilement faites en Ajax (c’est pas leur taf vous me direz…). Pour consulter la bande annonce de leur “studio” , rendez-vous dans la partie Reel de leur site, je vous mets ci-dessous une de leurs réalisations typographique entièrement en 3D, et en noir & blanc :

Pepper Melon est un collectif de 4 animateurs de Buenos Air, en Argentine, qui produit des films & animation pour « les plus de 7 ans » :). Ils réalisent pas mal d’introductions pour MTV, mais travaillent aussi pour des gros clients tel que Nike. Une grande partie de leurs travaux sont réalisés en 3D, alliant souvent un très bon design souvent très proche de l’illustration. Le design est à nouveau très sobre, mais on apprécie l’absence de flash sauf pour les vidéos que l’ont est obligé d’ouvrir dans une fenêtre pop-up au format Quick Time (merci pour les PC :p). Je vous invite donc à découvrir leurs travaux sur leur site et je vous présente ci-dessous une image tirée de leurs réalisations.

Et pour finir, un jeune graphiste freelance de 23 ans : Guianluca Fallone, qui allie travaux d’illustrations, de design & de motion. Le graphisme reste très sobre et un peu similaire à celle de NYLON, on regrette par contre l’absence d’un peu d’Ajax, niveau du scroller horizontal mais aussi pour le chargement des pages… Pour la navigation, il faut avouer que ce n’est pas terrible : on s’y perd vite, on recharge les pages qu’on as déjà vu, bref on s’y perd un peu…Au niveau des travaux, c’est vraiment très varié, un grand nombre d’illustrations vectoriels retravaillées sous Photoshop notamment pour les flous (blur pour les anglophones ). Pour ce qui concerne le design : des exercices typographique, et des essais sur différents supports (packaging, tee-shirt, …). Pour la partie motion, j’avoue que j’ai été un peu déçu (à part une vidéo faite avec un collectif), c’est beau mais ça manque un peu de tonus niveaux des mouvements de caméra et on aurait aimé voir plus de créations. Cependant n’oublions pas qu’il travaille tout seul (contrairement aux 2 premiers présentés) et qu’il n’a que 23 ans, ce qui est une magnifique performance pour son âge (j’en connais qui aimerait en faire autant dans certains domaine ^^)…

Pour rester sur le thème de la vidéo, une première vidéo qui m’a bien fait rire (merci au bisounours), et une seconde vidéo qui m’a vraiment bien plu sur les illusions d’optique (forme, couleurs, …) trouvée sur Ink:

Comme je vous adore, voici un excellent lien (merci à Manu), il s’agit d’une présentation du Web Master Jam de plus de 160 slides sur le design classique et le web design, à consulter d’urgence ! (si quelqu’un trouve comment télécharger le pdf ou le ptt je suis preneur) .

Tout ce qui est compris dans l’article ci-dessous est un avis strictement personnel, n’hésitez pas à réagir si vous etes d’un autre avis ;).

Liens utiles :

• Motion graphics, design, animation, filmmaking, vfx and bombastic banter: Motion Grapher (EN);
• Grafica in movimento, Motion Graphics, Motion Design, Animazione e Tutorial: Motiongraphics.it (IT);
• The website of John Dickinson - broadcast designer and After Effects tutor: MotionWorks (EN);