Chaque mois, nous récapitulons les meilleurs nouveaux portefeuilles publiés au cours des quatre semaines précédentes. Ce mois-ci, nous examinons l'ensemble de 2019 et sélectionnons 19 de nos favoris au cours des 12 derniers mois. Il y a ici un mélange de couleurs et de retenue, expérimental et attendu; la seule chose qu'ils ont tous en commun est une attention aux détails qui crée un UX exceptionnel. Prendre plaisir!

WTF Studio

Si vous voulez nommer votre entreprise WTF Studio, vous avez besoin d'un site WTF approprié. Able Parris est un directeur créatif basé à New York qui est plus qu'heureux de vous gifler avec la couleur et le mouvement. Ce que nous avons vraiment aimé sur ce site, c'est qu'une fois que vous avez fait défiler l'introduction anarchique, c'est en fait très sûr, très clair. L'attitude ne signifie pas nécessairement sacrifier l'UX.

wtf "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/wtf.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2019/10 / wtf-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/10/wtf-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/10/wtf-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Stéréo

La stéréo propose une animation fluide, une belle palette et un type vraiment magnifique. Ce qui le distingue, c'est le menu de navigation inhabituel – il défile au centre de l'écran comme un chapiteau à l'ancienne. Nous avons également adoré son animation de balayage lors de sa transition d'un État à l'autre.

15-stéréo "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/15-stereo.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/08/15-stereo-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/08/15-stereo-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/08/15-stereo-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Eva Garcia

Cette année, nous n'avons pas seulement été impressionnés par les portefeuilles des agences de design. Le portfolio d'Eva Garcia est un exemple classique de la façon de créer un site de portfolio. Il est adapté à la marque, intuitif à utiliser et permet au travail de prendre le dessus.

15-eva "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/15-eva.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/06/15-eva-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/06/15-eva-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/06/15-eva-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Kévin Chassagne

Le site de Kévin Chassagne est un excellent exemple de site qui offre une excellente mise en page et une animation impressionnante, sans s'appuyer sur JavaScript. Le JavaScript ici est utilisé pour quelques détails, mais vous ne perdez vraiment rien sans lui. Tout, de la typographie à la palette de couleurs en passant par le simple UX, est idéal pour un portefeuille lorsque vous parcourez potentiellement des centaines de sites à la fois.

20-kevin "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/20-kevin.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/08/20-kevin-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/08/20-kevin-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/08/20-kevin-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Nicky Tesla

Le portefeuille de Nicky Tesla est l'un des plus originaux de 2019. C'est un tableur; cela ne ressemble pas seulement à une feuille de calcul, c'est en fait un; il s'agit d'une feuille de calcul accessible au public sur Google, avec un domaine attaché. Ce n'est pas le plus beau portfolio que vous ayez jamais vu, mais il est audacieusement attaché à son concept de base.

07-tesla "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/07-tesla.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/03/07-tesla-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/03/07-tesla-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/03/07-tesla-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Florian Wacker

Le portfolio de Florian Wacker présente une typographie absolument magnifique. Ce site nous a époustouflé en début d'année, quand le minimalisme était encore de rigueur. En tant que présentation aux agences de design qui apprécient la bonne typographie, cela est presque sans faille.

11-florian "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/11-florian.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/04/11-florian-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/04/11-florian-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/04/11-florian-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Adam Brandon

Plus de minimalisme dès le début de 2019 sous la forme du portefeuille d'Adam Brandon. Sa liste de clients est assez formidable, avec Netflix, Apple, Nike et Ford là-dedans. Le site prend sensiblement du recul et laisse l'œuvre se promouvoir.

02-adam + 1

EVOXLAB

Evoxlab est un site inhabituel pour nous, en ce sens qu'il a fait tout son possible pour imiter les diapositives PowerPoint, qui est à la limite du skeuomorphisme. Eh bien, un peu. Cela ressemble certainement à un diaporama. Nous l'avons inclus parce qu'il est vraiment attaché au concept, et dans ce cas, cela fonctionne.

16-evox "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/16-evox.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/05/16-evox-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/05/16-evox-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/05/16-evox-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Branchez & jouez

Le site de l'agence pour Plug & Play est l'un des sites les moins difficiles que nous ayons vus en 2019. À bien des égards, il frise le cliché, mais tout cela est intentionnel, car ce site concerne une expérience utilisateur simplifiée. De plus, nous aimons la façon dont il passe du mode sombre à la lumière pendant que vous faites défiler.

plug_play "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/plug_play.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2019/11 / plug_play-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/11/plug_play-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/11/plug_play-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Athlétisme

L'athlétisme se lance directement dans des études de cas vidéo plein écran de travaux pour des clients comme IBM. À ce stade, si vous avez le budget, vous êtes probablement vendu, mais l'athlétisme poursuit avec une grille de travail de conception plus discrète, mais tout aussi passionnante.

athlétisme "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/athletics.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2019/10 / athletics-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/10/athletics-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/10/athletics-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Revolve Studio

Le site de Revolve Studio se démarque vraiment non pas en raison de l'expérience utilisateur de style présentation, mais parce qu'il est intégré dans ASP.NET. Il se démarque également en ne montrant aucun travail, ce qui est une approche inhabituelle qui a été étonnamment populaire au cours de la dernière année.

05-revolve "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/05-revolve.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/09/05-revolve-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/09/05-revolve-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/09/05-revolve-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Florian Monfrini

Le portfolio de Florian Monfrini est une approche de collage élargie en plein écran. Il remplit bien l'espace et a été l'un des sites à avoir adopté cette approche bien avant qu'elle ne devienne à la mode.

05-florianmonfrini "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/05-florianmonfrini.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/03/05-florianmonfrini-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/03/05-florianmonfrini-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/03/05-florianmonfrini-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Angle2

Nous adorons la typographie d'Angle2. C'est un autre site de style diaporama, mais il prend vie grâce aux angles et à l'inclinaison de la typographie. Malgré le texte énergique et la variété de designs – un par page – il reste toujours utilisable.

06-angle2 "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/06-angle2.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/05/06-angle2-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/05/06-angle2-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/05/06-angle2-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Florent Biffi

Si 2019 a été l'année d'un seul effet, c'était l'année des effets ondulants de style liquide. L'un des premiers que nous avons vu était le site de Florent Biffi, avec une typographie énorme et audacieuse et un effet ondulant subtil sur la conception.

03-Florent "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/03-Florent.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/01/03-Florent-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/01/03-Florent-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/01/03-Florent-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Bethany Heck

Nous avons vraiment adoré l'approche semi-brutaliste du portefeuille de Bethany Heck. C’est juste une collection de titres de projets, et à certains endroits les logos qui les accompagnent, qui mènent soit au site soit référencé, soit à un lien interne avec une typographie ravissante.

06-diable "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/06-heck.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/03/06-heck-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/03/06-heck-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/03/06-heck-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Audacieux

Le portfolio de Bold est une présentation simple avec des détails exceptionnellement sophistiqués. Nous avons adoré la façon dont la bordure se développe à partir des images lorsque vous faites défiler, créant ainsi l'impression de zoomer sur un projet. C'est un portefeuille confiant et discret qui se vend à de grands noms, avec de gros budgets.

bold "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/bold.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2019/10 / bold-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/10/bold-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/10/bold-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Orchestre du film transatlantique

Le Transatlantic Film Orchestra fait de la musique pour la vidéo. Son site Web s'ouvre sur des images calmes, sombres et monochromes, et absolument aucun son en lecture automatique, ce qui est exactement la bonne approche. Lorsque nous avons choisi de lire l'audio, nous avons adoré l'interface utilisateur.

02-TFO "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/02-TFO.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/02/02-TFO-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/02/02-TFO-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/02/02-TFO-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Nick Losacco

Le site de Nick Losacco met en évidence de nombreuses compétences différentes, notamment sa conception de caractères. L'ensemble du site s'appuie fortement sur une typographie audacieuse et un fond rouge acide pour sa personnalité.

12 pseudo "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/12-nick.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/06/12-nick-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/06/12-nick-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/06/12-nick-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

Versett

Le portefeuille de Versett est un site propre et moderne, qui penche vers une approche d'une page sans jamais l'adopter pleinement. Il est facile de scanner si vous êtes une entreprise qui compare des agences potentielles, et nous avons adoré l'option de menu "Plus +" qui vous oriente vers différentes options telles que la conception de produits ou le lancement d'une nouvelle entreprise.

06-versett "width =" 1856 "height =" 1280 "srcset =" http://www.guidsite.com/wp-content/uploads/2020/01/06-versett.jpg 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2019/04/06-versett-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/04/06-versett-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2019/04/06-versett-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
</p></div>
																	</div>
														</div>
														<div class=

Taux: