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 :
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 :
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.
Même recherche d’originalité dans le portfolio d’Aleksandar Nikcevic qui utilise une mise en situation sympathique :
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.
FI
La référence du genre, avec des sites dédiés détaillés au maximum. Un régal !
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.
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.
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.
É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é ?
DONDA Concept
Le designer Tijn Hoyng offre une bonne démonstration du concept de la page d’accueil avec ce petit gif.
Idem sur le projet Fontain déjà vu plus haut dans l’article :
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.
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
Un autre PSD gratuit en 3D
Un lot d’écrans en perspective
Un iPhone au design minimal
HTC One Mockup
MacBook minimaliste
20 templates d’iPhone 5 pour présenter vos applications
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 !
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.
Ê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 !
Veille | Pearltrees
[…] > Marine23 > Outils web 2.0 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 […]
Laurent
Article intéressant.
Et il est vrai que d’intégrer nos belles maquettes web dans leur contexte ou de leur « donner vie » grâce à de belles présentation ne peuvent qu’aider le client à valider et visualiser au mieux sont projet.
Merci pour les ressources PSD !
Technologies web | Pearltrees
[…] Webdesign : idées et ressources pour présenter votre travail […]
Moindzé Quénédie
Lourd !
Visualizers Studio, l'agence du jour #12 | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels
[…] j’ai d’ailleurs découvert le studio en rédigeant l’article « Webdesign : idées et ressources pour présenter votre travail« . Vous y trouverez des exemples de références, comme le travail de […]
19h47
Ah yes, c’est exactement ce que je cherchais. Webdesigner Trends est toujours au top !
WDTrends
Parfait ! Haha merci 😉
Book | Pearltrees
[…] 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. […]
Les mockups de la mort qui tue | Les News du Je(u)di
[…] https://www.webdesignertrends.com/2013/08/webdesign-idees-et-ressources-pour-presenter-votre-travail/ […]
Yann-William
Merci! Ce post a beau dater de 2 ans, il est toujours d’actualité 🙂
WDTrends
@Yann-William : haha merci 😉
Webdesign: 14 vidéos de présentation de sites | Webdesigner Trends
[…] complément de belles captures d’écrans qui mettent bien en valeur votre travail (il y a un article pour ça aussi 😉 ), un beau motion design qui présente le parcours utilisateur est un excellent moyen d’en […]
Veille Webdesign | Pearltrees
[…] Son importance est capitale car il reflète qui vous êtes, ce que vous savez faire et ce que vous avez déjà fait. Autant dire qu’il vaut mieux soigner son portfolio. Voici donc 12 erreurs à éviter dans votre portfolio, un article qui j’espère vous aidera. 1. Future of Web Design – A conference for web designers & developers in 2015 & beyond. La Veilleuse Graphique – La Veilleuse Graphique : l'actu graphisme, de l'imprimé au webdesign! Webdesign : idées et ressources pour présenter votre travail. […]
Articles | Pearltrees
[…] 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. […]