Y a-t-il vraiment besoin d’une introduction à ce genre d’article ?
Pour faire court, j’ai sélectionné rien que pour toi, très cher étudiant du DUT Métiers du Multimédia et de l’Internet (ok ok, optimisation SEO j’avoue), des sites d’agences web à voir absolument ! Tu vas pouvoir t’inspirer et te rendre compte de ce qu’il se fait actuellement sur le web. Démarrage des réacteurs … 3 … 2 … 1 … c’est parti mon kiki !

1. Osum Studio

Osum Studio

Osum Studio, c’est du très lourd ! Récompensée par des sites comme Awwwards, CSSLight, CSSWinner ou CSS Reel, tu l’auras compris, cette agence basée en Inde se spécialise effectivement dans le webdesign, développement web et développement d’applications mobiles. Un site one page, vraiment très propre, avec des petits effets de parallax bien placés (juste avant la présentation de l’équipe par exemple). La présentation de leur portfolio est tout simplement géniale, je te conseille d’aller y faire un tour, histoire de faire pareil en projet tutorés la prochaine fois.

[su_button url= »http://www.osumstudio.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]www.osumstudio.com[/su_button]

 

2. Mighty

Mighty

Dans une sobriété la plus totale, Mighty nous a pondu un site web doté d’une navigation au plus simple et qui, de ce fait, fonctionne à merveille. Trois liens de menu, et pour chaque changement de page, un effet d’entrée par la droite de la page en question, très fluide, la classe. Le site consacre à chaque projet une page entière,  avec une présentation en full width. On a donc une vision d’ensemble, un pas à pas et le résumé complet du projet : en gros, ils nous le servent sur un plateau ! Nous avons les palettes de couleurs, les icônes utilisés et le tout raconté comme une histoire. Un concept intéressant pour présenter ton propre portfolio, tu ne penses pas ?

[su_button url= »http://mightyinthemidwest.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]mightyinthemidwest.com[/su_button]

 

3. Dunckelfeld

Dunckelfeld

On pourrait penser que ce sont des fous du Flash, et pourtant, il n’y a pas une goutte du produit d’Adobe ! Rien que le loader du site web montre que ce ne sont pas des petits joueurs. Des effets de parallax par-ci, des animations et transitions par là, le tout intelligemment mis en forme pour un rendu pro et attractif. Dunckelfeld mise aussi sur le full width pour son site, avec des photos qui prennent la totalité de l’écran. On notera l’utilisation de vidéos en background sur leur homepage, et ça aussi ça claque ! C’est d’ailleurs une tendance de plus en plus présente sur le web, du à l’amélioration des langages de programmation (HTML5). Cette agence se spécialise dans tout ce qui est associé à la création visuelle (du print au webdev en passant par le multimédia), et ils ont travaillé pour Microsoft. C’est pas des pinpins quoi …

[su_button url= »http://www.dunckelfeld.de/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]www.dunckelfeld.de[/su_button]

 

4. Centersource

centresource

Que dire sur Centresource ? Certes, la page d’accueil est déjà, mais comme Osum Studio, leur façon de présenter leur projet est superbement bien faite. Beaucoup d’animations qui dépendent du scroll, ce qui donne l’impression que le contenu textuel et les images se chargent au fur et à mesure que tu navigues.
Retour sur la homepage, avec une présentation qui se fait de plus en plus sur les sites web : le fait de synthétiser en une phrase courte les missions et activités principales de l’entreprise, le tout écrit en gros, au milieu, de façon clair et lisible. Au moins, le visiteur sait directement à qui il a affaire.

[su_button url= »http://centresource.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]centresource.com[/su_button]

 

5. Mangrove

mangrove

Mangrove, tout est dit dans l’image ci-dessus. Mais l’idéal, c’est que tu testes toi-même la navigation sur leur site web. Ce site donne l’impression d’être tout simple, presque enfantin avec l’abandon des majuscule sur les titres et le logo, mais aussi la grande taille du corps du texte en général. Travailler avec cette agence semble donc être un vrai jeu d’enfant. Le hasard dis-tu ? Je ne pense pas.

[su_button url= »http://www.mangrove.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]www.mangrove.com[/su_button]

 

6. Kalexiko

Kalexiko

Encore une vidéo en page d’acueil. Ce que j’ai relevé d’intéressant pour ton inspiration sur le site de Kalexiko, ce sont les photos en en-tête de page comme celle-ci par exemple. Il y a un petit bouton « Learn More » en bas à droite. Clique dessus et observe bien l’effet qui va suivre. C’est une façon très « propre » de faire scroller automatiquement une page. L’image de fond disparaît progressivement et son opacité se réduit pour faire ressortir un aplat de couleur qui servira de fond au menu, pour une lisibilité totale. Habile, n’est-il pas ?

[su_button url= »http://www.kalexiko.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]www.kalexiko.com[/su_button]

 

7. Yello

Yello

Le site de Yello, une agence digitale située à Instabul (Turquie) nous propose un site assez original dans son style graphique, avec sa propre ambiance, ce qui la distingue de la plus part des sites d’agence en one page, qui sont si redondants. La façon de composer le menu est très intéressante aussi, tu ne trouves pas ? Et pour la présentation du portfolio, encore une fois, l’utilisateur se retrouve comme devant une superbe démonstration du projet, avec beaucoup d’images de grand taille.

[su_button url= »http://www.yelloistanbul.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]www.yelloistanbul.com[/su_button]

 

8. Webit

Webit

Ils sont rigolos ces trois petits bonhommes non ? Ça en dit long sur l’ambiance de l’agence belge Webit, qui semble plutôt « cool » ! Ce trio gagnant composé respectivement de Yannick, Yves et Jan vous pousse le visiteur dans une atmosphère décontractée, et sans prise de tête. Plutôt malin de véhiculer cette idée pour une agence web non ? Qui ne voudrait pas que son projet se passe comme sur des roulette ?

[su_button url= »http://www.webit.be/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]www.webit.be[/su_button]

 

9. Form

Form

The Form Group, encore une agence digitale qui a su abordé un style graphique original. Un contraste au sein du même site puisque on rencontre des techniques d’intégration très récentes comme des vidéos en backgrounds de header de page, et on mélange les styles avec une ambiance « souvenirs » / « vieille époque » avec des photos en noir et blanc. Des petits effets au scroll sont à noter, sur cette page par exemple, où je te conseille de descendre jusqu’à mi-page, et de t’arrêter sur l’image où les deux personnages plongent. Fallait y penser pas vrai ?

[su_button url= »http://theformgroup.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]theformgroup.com[/su_button]

 

10. LinkSture

LinkSture

Ils ont obtenu une Special Mention par Awwwards, et ils nous proposent un site graphiquement au top ! On a presque l’impression de lire une affiche imprimée plutôt qu’un site web, c’est rare, c’est bien fait, ça vaut le détour ! Et ce qu’il y a d’étonnant, c’est que ce genre de site web ressort vraiment bien sur mobile, la navigation n’est pas altérée et reste très agréable. Nul doute que nous avons ici affaire à une agence ouverte sur le monde du design et du digital. Bravo LinkSture !

[su_button url= »http://www.linksture.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]www.linksture.com[/su_button]

 

11. Airnauts

Airnauts

Élu « Site Of The Day » par Awwwards, le site d’Airnauts est juste à couper le souffle ! Probablement le rêve de tout développeur de livrer ce genre de site pour un client ! Ca pourrait presque s’apparenter à une présentation PowerPoint, du fait de pouvoir naviguer avec les flèches de clavier. Puis ces animations en background, c’est tellement bogooooss! Et le plus dur à croire, c’est que c’est un one page !

[su_button url= »http://airnauts.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]airnauts.com[/su_button]

 

12. Plastic Creative Studio

Plastic Creative Studio

Et encore un site one page, cette fois-ci pour l’agence Plastic Creative Studio, basée à Barcelone. Et encore une fois, la présentation des projets et très bien pensée (et la qualité de leur projet est à voir). Je te laisse analyser par toi même les éléments intéressant sur ce site d’agence.

[su_button url= »http://plasticbcn.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]plasticbcn.com[/su_button]

 

13. Dtail Studio

Dtail Studio

Sérieusement, qui refuserait de faire un stage dans leur boite ? Dtail Studio est une agence web et mobile londonienne qui fait vraiment rêver. Okay ils ont site bien foutu, qui montre bien l’étendue de leur compétences techniques en développement, mais ils sont vraiment impressionnants sur la partie design. Vous comprendrez à visionnant leurs projets. Tant qu’on y est, vous trouverez sur ce site un pack gratuit à télécharger contenant tous les mockups des produits Apple ainsi que certains de Samsung et des Nexus au format AI, PSD et SVG !

[su_button url= »http://dtailstudio.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]dtailstudio.com[/su_button]

 

14. My Client Is Rich

My Client Is Rich

Enfin une agence web française ! Et oui, parce qu’en France on est aussi très talentueux dans ce domaine, exemple ici avec le site web de l’agence My Client Is Rich (rien que le nom fait rêver). L’idée de présenter l’équipe avec des GIFs animés est vraiment réussie ce qui fait ressortir un côté décalé. Cette idée est également exprimée par les images en en-tête qui doivent bien marquer le visiteur pour qu’il se souvienne de cette agence strasbourgeoise. Faites péter les CV !

[su_button url= »http://www.myclientisrich.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]www.myclientisrich.com[/su_button]

 

15. Redweb

Redweb

Je vous mets mon petit préféré pour la fin, il s’agit du site de l’agence Redweb, basée à Londres et fondée par Andrew Henning. C’est un des sites d’agences web qui m’a le plus séduit cette en cette année 2014. Il est simple, avec une navigation agréable. Les effets utilisés pour montrer les compétences techniques sont utiles et non-invensifs. On s’y plait, on n’est pas perdu, on a envie d’en découvrir plus. Les photos sont parlantes, et les paragraphes ne sont ni trop courts, ni trop longs. Il correspond, à mon sens, parfaitement à ce qu’on peut attendre d’un site web en 2014 (responsive, fluidité, technologie). Et toi, qu’en penses tu ?

[su_button url= »https://www.redweb.com/ » target= »blank » style= »flat » background= »#eb3″ color= »#fff » size= »5″  radius= »4″ icon= »icon: external-link » icon_color= »#fff » class= »button »]www.redweb.com[/su_button]

 

Tout ça pour quoi ?

Pourquoi te faire baver de ce genre de sites web tellement high level ?
Dans un premier temps, un simple mot : l’inspiration. C’est toujours bien de regarder comment font les autres, comment font les professionnels. C’est une façon de faire de la veille graphique, de s’enrichir culturellement par rapport à l’image, et ça permet de te donner des idées pour tes futures créations ! Toujours dans le cadre du DUT MMI, au cours de la formation, tu seras amené à faire des stages en entreprise, et ne penses pas que ce genre de studio ou d’agence web est complètement inaccessibles pour de pauvres petits MMI ! Pas du tout! N’oublie pas qu’une de tes meilleures armes est ta motivation ! Si tu n’as pas peur de faire ton stage à l’étranger, et que tu sais te vendre, alors rien ne t’empêche d’envoyer un petit mail à ces agences web pour postuler ! (Le Blog du MMI ne paye pas les billets d’avions).

Si j’ai réussi à te faire découvrir des choses nouvelles, pourrais-tu partager cet article sur ton réseau social favori, où au moins donner une petite note ? Ce serait tellement cool

 

15 sites d’agences web qui font rêver
4.8 (95%) 8 votes

Ce qui pourrait également t'intéresser ...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir