Aujourd’hui, j’ai décidé de présenter plusieurs galeries / blogs qui aident à trouver de l’inspiration et de suivre les dernières tendances en matière de web design.

Foliofocus.com

Foliofocus est une galerie de sites web, la particularité de celle-ci est qu’elle ne présente que des portfolios ! On y trouve donc pas mal de sites audacieux.

CssLeak.com

CssLeak propose, quant à lui, à la fois un blog qui parle de toute la partie front end dans la création de sites web : design, intégration, javascript (j’y ai même lu des articles sur JQuery !)

designshack.co.uk

Un peu le même principe que CssLeak, Design Shack propose un blog (qui ne parle ici quasiment que de web design) et une galerie CSS. La manière de parcourir la galerie est bien faite : on peut trouve un design par couleur, par forme de site ou par catégorie.

thedesigninspiration.com

The Design Inspiration est un blog qui se veut une grosse source d’inspiration. On y retrouve des logos, des illustrations, des web design, des photos, des patters et des typographies. Il y a en moyenne une dizaine d’articles par jour !

A ce que j’ai compris, Swiths est une agence web Polonaise. Le web design (tout en texture bois) et l’en-tête tout particulièrement est très travaillé. Je trouve que le rendu est très réussi. Le menu en Flash est simple mais j’apprécie l’effet de survol, le switcher de langue est également bien fait ! Le footer où l’on voit la fin du bureau donne un bel effet je trouve.

Et comme dirait Pascal, ils sont forts en web design dans les pays de l’Est ! Bon assez parlé, je te laisse y aller !

Le site du jour, que je viens tout juste de découvrir : TheyMakeApps.com. Le site propose de référencer les agences de création d’applications pour « ordiphone » – smartphone en anglais – : Iphone, Android…

Le design tout d’abord. Tout, ou presque, est en gris (#303232) et blanc. Cela donne un certain style (assez classe je trouve) au site. Un gros travail a donc été fait sur les typographies (tu peux déjà compter le nombre de typos différentes sur la capture ci-dessus !). Les icônes et petites illustrations (en dehors des images des agences) sont également très travaillés et bien réussies.

Ensuite la navigation sur le site lui-même. La première fois que l’on y accède, il est demandé de choisir entre modes de navigation : à la souris (classique) ou tout au clavier (avec, nous promettent-ils « more fun »). Après avoir choisi clavier, tu pourras constater que tout a bien été étudié pour naviguer dans le contenu, activer un bloc, voir les détails d’une agence et revenir sur le listing…

Cela faisait quelques temps que je n’étais pas tombé sur un site web tel que celui là

Pour reprendre les (bonnes) habitudes, une petite présentation de deux sites web très réussis graphiquement et qui présente la particularité d’être animés avec du JQuery.

Le premier est le portfolio d’un web designer australien : Jay Hollywood. Un design sur fond gris (toujours classe si bien réalisé !). Le fun commence sur la page d’accueil avec le slider : l’effet de mise en avant est vraiment bien fait avec des effets d’ombre porté et de masque sur les éléments à droite et à gauche. On retrouve du JQuery sur toutes les pages du site. Les illustrations de l’en-tête du site sont toutes nickel je trouve. Enfin je suis également fan du formulaire du contact et du petit effet de transition lorsque l’on clique sur « Just saying Hello »…

Le deuxième est totalement différent. Indofolio est le portfolio d’un web designer indien. Il fait partie des sites web dits horizontaux. Sa particularité (outre son design particulièrement réussi) est dans les effets de transition : une sorte d’effet Parallax. En effet il a donné de la profondeur au site, les images des différents plans ne se déplace pas à la même vitesse. Autre petit effet sympa est le drag’n'drop sur la partie « My Network » pour être redirigé vers la page voulue.

Enfin, je peux également citer le re-design de mon portfolio : arnaud-k.fr (également avec de JQuery) mais j’y reviendrai bientôt !

Pour l’inspiration, je partage avec toi le site Alexarts.ru qui est le site d’un web designer / illustrateur moscovite. Je trouve le design de son site particulièrement réussi. L’image de fond en plein écran, l’effet tilt-shift de la photo, les bulles, tout est bien trouvé.

Les quelques animations JavaScript ont été réalisé avec le framework Scriptaculous ainsi qu’un peu de JQuery avec l’utilisation de la lightbox Fancybox.

Designbump est un digg-like (voir une définition sur wikipedia) uniquement centré sur le web design et le développement web. Il est tout en anglais, mais comme ce n’est que du language technique, c’est facilement compréhensible.

Il est également possible d’être encore plus précis si l’on souhaite suivre seulement une catégorie (à chosir parmi web design, graphic design, programming, tutorials and learning, wordpress…)

Les ressources apparaissant en première page sont toujours intéressantes. Ce digg-like permet d’avoir de découvrir des blogs, des articles centrés autour d’un seul sujet. Je pense que c’est un gros avantage par rapport à des digg-like plus généralistes (fuzz, par exemple). Il ne faut donc pas hésiter à ajouter le flux RSS dans son flux !

Le site KevAdamson.com est le site d’un web designer anglais travaillant en freelance. J’ai particulièrement aimé le design de son portfolio en ligne. Les effets papier et site web faits « à la main » sont bien rendus. J’aime aussi beaucoup le GIF animé (pour une fois pas du tout kitsch) en haut à droite du blog, j’ai même cru à une animation flash.

Le site utilise également JQuery, tout d’abord avec des JCarousel pour les miniatures sur la page d’accueil (il faut tester les petites flèches en dessous). L’utilisation du plugin est assez originale avec les 4 caroussels les uns à côté des autres et avec l’effet papier déchiré en haut. On retrouve ensuite des petites touches de JQuery dans la colonne de droite avec divers blocs affichés sous forme d’onglet.