Nous arrivons maintenant à la fin du cours. Bravo à vous pour votre implication jusqu'ici, et pour votre progression dans le maquettage. Profitons-en pour passer en revue ce que vous avez appris... !
Vous avez commencé par comprendre l'importance qu'a le maquettage dans le développement web. Non seulement le maquettage est une étape essentielle pour s'éviter des ennuis futurs, mais cela permet aussi de gagner du temps. C'est aussi à ce moment-là que vous avez créé votre premier wireframe papier afin de structurer le projet de site Internet de Yummy Nouilles.
Puis vous avez découvert Figma, la référence en webdesign collaboratif. Vous avez appris à créer des formes et blocs de texte afin de retranscrire vos wireframes dans un fichier Figma, et à les adapter au format mobile.
Enfin, vous avez construit votre premier univers visuel, vous permettant de créer votre maquette finale haute-fidélité.
Vous pouvez vraiment être fier de vous.
Mais vous vous posez sûrement la question de la suite. Alors, quelles sont les prochaines étapes de votre apprentissage ?
Découvrez quelques ressources de design supplémentaires
Avant que je vous laisse, je tenais à vous partager quelques ressources que j'utilise constamment dans ma vie de développeuse, depuis que j'ai commencé à créer et à collaborer sur les maquettes.
Tout d'abord, commençons avec quelques ressources qui vous permettront d'avoir des ressources visuelles de qualité :
Unsplash est une banque d'images haute définition libres de droit.
Pexels permet d'obtenir des images et vidéos libres de droit.
Flaticon permet de télécharger des icônes et illustrations en SVG.
Undraw est un excellent site pour trouver de très belles illustrations libres.
J'en profite également pour vous rappeler d'autres outils que nous avons vus dans le cours :
Figma pour créer vos maquettes et wireframes.
Dribbble pour chercher de l'inspiration en webdesign.
Coolors pour créer des palettes de couleurs.
Typewolf pour vous aider à trouver des polices d'écriture.
Awwwards pour s'inspirer des plus beaux sites Internet.
Mais bien sûr, ces outils sont pertinents à l'heure où je vous parle. Peut-être que d'ici quelques années, d'autres outils incontournables émergeront. Pour les découvrir et se tenir au courant, rien de mieux que d'organiser une veille sur le sujet. Vous avez d'ailleurs le cours "Mettez en place un système de veille informationnelle" à ce sujet. Renseignez-vous, suivez quelques personnes référentes sur les réseaux sociaux tels que Twitter et LinkedIn, abonnez-vous à des newsletters, etc.
Projetez-vous dans les prochaines étapes
Quelles étapes en maquettage ?
Vous avez appris les bases pour construire des maquettes pas à pas dans ce cours. Mais si vous ne vous sentez pas encore prêt à créer vos propres maquettes seul, pas de panique. Pour voler de vos propres ailes, vous pouvez commencer par essayer de reproduire des sites connus ou qui vous plaisent sur Figma, afin de maîtriser l'outil, et de voir les bonnes pratiques qui sont appliquées.
Puis une prochaine étape peut ensuite consister à faire de tout petits projets : juste une page, un CV par exemple, ou le design d'un petit test technique.
Comme pour tout le reste, vous vous améliorerez en pratiquant, donc laissez-vous le temps qu'il faut, et profitez de toutes les opportunités qui s'offrent à vous pour apprendre !
Et pour la suite en code ?
Eh bien pour la suite en code, il faudra vous mettre à l'intégration. Alors oui, vous êtes développeur, et pour l'instant vous n'avez vu que le maquettage… Rassurez-vous, c'est une excellente première étape afin de construire des bases solides pour la suite.
Pour en savoir plus sur le maquettage et comment se préparer pour l'intégration, suivez le témoignage de Quentin, directeur technique, ci-dessous :
Pour apprendre l'intégration, il est essentiel de vous construire des bases solides en HTML et CSS. Le HTML fera la structure de vos pages web, et vous créerez le style avec le CSS. Pour cela, vous pouvez suivre le cours Apprenez à créer votre site web avec HTML5 et CSS3… Et encore une fois, saisissez chaque opportunité pour mettre en pratique ce que vous apprenez !
Notre cours touche maintenant à sa fin. Je tenais encore une fois à vous féliciter pour le chemin accompli ! J'espère que vous avez pris autant de plaisir à suivre ce cours que j'en ai eu à le créer. Je vous souhaite une excellente continuation dans votre vie de développeur ! Pour terminer le cours, je vous propose de tester vos connaissances avec un dernier quiz. :)
