Webdesign inspiration

Webdesign : idées et ressources pour présenter votre travail

Créer le plus beau et le plus efficace webdesign de la Terre entière est une chose, mais réussir à le mettre en scène pour le sublimer en est une autre… Pour vous aider dans votre quête de belles présentations, je vous propose quelques idées inspirées par des portfolios de designers.

Ces derniers mois, nous avons pu voir émerger un vrai travail de fond dans les portfolios et les galeries en ce qui concerne la présentation d’un webdesign. En travaillant sur le web, il est difficile et absurde de se constituer un book papier comme pourrait le faire un graphiste print par exemple. Pour sentir l’essence même du design et parfois même de l’UX, les webdesigners redoublent d’ingéniosité en proposant des idées originales.

Au delà de ce pur aspect « cosmétique », n’oublions pas qu’un travail bien vendu, vous apportera une visibilité et une crédibilité plus pertinentes auprès de vos prospects.

Plutôt que d’afficher votre création en fullscreen dans un iMac 27″ (troll), je vous propose un petit tour d’horizon de réelles créations, de sites dédiés, au cas d’études, en passant par divers effets graphiques, pour terminer sur de belles ressources bien entendu !

Utilisez des vues décomposées

Zoom, effets de perspective, effets 3D, tout est mis en œuvre pour donner du volume au design, d’habitude si plat sur un écran. Grosse tendance du moment, ce type de vues permet d’apprécier le design sous tous les angles et met en avant les détails.

Premier exemple avec le concept « Adobe Photoshop Lego Edition » de Rick Garcia qui utilise divers effets de zoom :

Webdesign exemple zoom

Le second exemple est un gros « case study », un cas d’étude, réalisé par l’agence Saturized. La présentation sur Behance décompose le projet au niveau design d’une manière originale. Plutôt que présenter une suite de captures d’écrans, le travail ici est vraiment sublimé par divers effets :

Webdesign exemple zoom

Webdesign exemple zoom

Webdesign exemple zoom

Webdesign exemple zoom

Webdesign exemple zoom

Webdesign inspiration

Ces mises en avant permettent de montrer la propreté du travail du webdesigner dans ses moindres détails.

L’agence Visualizers n’hésite pas à faire voler des iPhones dans l’espace pour rendre la présentation dynamique. Jetez d’ailleurs un œil à leur portfolio, plutôt bien conçu.

Webdesign

Même recherche d’originalité dans le portfolio d’Aleksandar Nikcevic qui utilise une mise en situation sympathique :

Webdesign inspiration

Sur cet exemple, les captures sont un peu trop petites pour apprécier les détails, mais le designer a le mérite de proposer quelque chose de différent.

Créez des cas d’études et des sites dédiés

Moyen ultime pour présenter la réalisation d’un projet digital, le site ou la page web dédiés offrent un espace réservé au projet et lui donnent ainsi une très bonne visibilité. Lancés principalement par des agences comme Fantasy Interactive (FI) par exemple, elles ont pour vocation d’assoir les compétences du studio en décortiquant toutes les étapes du projets. Cette tendance a atteint petit à petit les designers indépendants, qui n’hésitent pas à faire de même sur leurs portfolios. Exemples :

Genève Aéroport

Grâce à cette présentation de projet, j’ai pu découvrir le travail de qualité de l’agence Suisse Atipik. Du beau boulot !

Teehan+Lax Social Portrait

Clairement plus orienté business et process que design, le case study de cette opération ne reste pas moins intéressant.

Webdesign

FI

La référence du genre, avec des sites dédiés détaillés au maximum. Un régal !

Webdesign inspiration

Webdesign inspiration

Webdesign inspiration

Webdesign inspiration

LOOP

L’agence Loop propose un concept plus classique en changeant uniquement le fond du site en fonction des projets. Déjà une bonne chose, qui permet de se plonger au mieux dans le cadre du projet.

Loop Agentur

Moresleep

Presque le même principe que chez Loop, le site de l’agence Moresleep présente ses projets avec des pages dédiées. Elles contiennent les chiffres clés du projet, des vidéos, des vues éclatées du design, toujours basées sur une charte commune.

Webdesign

Webdesign

Webdesign

Webdesign

Squared

Pour aller plus loin dans les cas d’études, je vous propose celui du projet Squared. Ce n’est pas du web, mais le contenu est intéressant.

Squared

Évidement, le travail pour monter de tels cas d’études n’est pas négligeable ! Mais au final, si le site est bien réalisé, il constituera une superbe vitrine de vos savoir-faire.

Animez vos interfaces

Pour faire une petite démonstration des effets et autres interactions utilisateur, rien de tel que de naviguer le site me direz vous… Mais dans le cadre d’une présentation projet, pourquoi ne pas utiliser de la vidéo ou du gif animé ?

Webdesign

DONDA Concept

Le designer Tijn Hoyng offre une bonne démonstration du concept de la page d’accueil avec ce petit gif.

Webdesign GIF

Idem sur le projet Fontain déjà vu plus haut dans l’article :

Webdesign en gif

Pour encore plus d’exemples du genre, je vous invite à jeter un oeil au site GUIFFF.

Mettez le design en situation

Devenu un classique, les mise en situations permettent de placer le design dans le monde réel. Smartphones, tablettes et navigateurs sont devenus le cadre de nos œuvres.

Webdesign

Webdesign

Quelques ressources :

Pour finir cet article, je vous réserve quelques petits PSD et des ressources pour vous faire gagner du temps. Honnêtement pour être original, créez le votre, c’est presque tout aussi rapide et facile.

Un PSD 3D en perspective pour application mobile

3D Mockup

Un autre PSD gratuit en 3D

3D Mockup

Un lot d’écrans en perspective

Webdesign

Un iPhone au design minimal

Iphone

HTC One Mockup

Freebies

MacBook minimaliste

Webdesign

20 templates d’iPhone 5 pour présenter vos applications

Iphone Templates

Aarnis

Un framework de périphériques basés sur du CSS et de l’HTML5. Pratique pour créer rapidement une mise en page pour présenter un projet. À tester !

Webdesign

Place IT

Le desormais très connu PlaceIt qui vous permet de générer des mises en situations en quelques secondes, grâce à une galerie de périphériques.

Webdesign

Êtes-vous prêt à mettre en scène vos réalisations ?

Ces quelques idées peuvent apporter une véritable valeur ajoutée à votre portfolio en boostant votre visibilité. Elles sont bien évidement complémentaires, comme vous avez pu le voir dans les exemples ci-dessus. Bien au-delà d’un aspect propre et soigné, ce type de présentation apporte de la transparence au processus de création : une bonne base pour éduquer votre client. N’hésitez pas à mixer les techniques et les outils pour obtenir au final un rendu le plus complet possible et original possible !

Dernière chose, la réalisation d’une présentation complète demande évidement du temps de création supplémentaire. Avant de vous engager dans de telles manœuvres, demandez-vous si le jeu en vaut la chandelle. À vous de doser le temps de travail en fonction de l’importance que vous accordez à votre projet. Bonne chance !

Personnellement, je suis vraiment accro aux « cas d’études » détaillés, pas vous ?

14 commentaires

Répondre Moindzé Quénédie Annuler la réponse

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

*