Parce que c’est dans l’air du temps, on trouve de plus en plus de sites web ayant un design qui intègre parfaitement des sliders. Souvent sur la page d’accueil d’un site, le slider permet de mettre en avant beaucoup d’informations (sous forme de texte ou bien souvent d’images) sans pour autant surcharger la page.

Il peuvent être fait avec du JQuery (voir l’article parlant d’EasySlider), Mootools voire même en flash pour le dernier de cette sélection. Toute l’astuce réside dans le fait de bien l’intégrer dans la page sans qu’il soit différent du style de la page. Le placement et l’intégration des éléments de navigation du slider sont souvent primordiaux, même si on ne les voit pas au premier abord, l’utilisateur saura où les trouver.

J’ai fait pour vous une petite sélection de design intégrant ces sliders :

http://www.etondigital.com/

http://graphik.fi/

http://www.sketchen.com/

http://www.slidedeck.com/

http://www.utah.travel/utah-maps/

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 !

Un petit coup de coeur que j’ai eu il y a quelques temps pour les graphismes de Glennz. Les t-shirts qu’il propose avec ces graphismes geek et bourrés de références : jeux vidéos old-school, séries TV… Je suis l’heureux possesseur de 2 t-shirts (dont celui sur l’évolution des legos que l’on voit sur l’image ci-dessus).

Il est également proposé un système de vote pour choisir les visuels que l’on veut voir disponible en t-shirt. Je te laisse donc aller faire un tour et apprécier les visuels !

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 !

Un des rares sites où j’ai fait wOoh en tombant dessus. Je suis totalement fan du design du blog thepixel.com. Les illustrations du header et du footer sont impressionnantes, très bien réalisées et bien intégrées dans le site. Au final on se retrouve avec un blog au design original, sans cadres pour le contenu, avec des couleurs flashy.

Sur ce, je retourne bosser !