Exemples de beaux sites pour votre Inspiration

Voici une très grosse sélection de sites web et blogs pour mieux  comprendre ce qu’est devenu le web design. Style expérimental,  minimaliste, chic, classique, sites réalisés en html 4, 5, XHTML, avec ou sans Flash, un petit commentaire a été fait pour chaque sélection. Si vous souhaitez vous faire un aperçu des tendances web actuelles, cet article est pour vous !

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Des design innovant et pas forcément connus…