Lorsqu’on apprend la programmation, on peut rencontrer deux phases distinctes
-
Apprentissage des principes fondamentaux : vous commencez à explorer l'anatomie d'un programme informatique, apprenez à réfléchir à des problèmes simples en termes d'unités logiques et commencez à formaliser ces unités en instructions de code. À ce stade, vous découvrez des sujets abstraits et des pratiques simples. S'il est bien fait et dispose du temps approprié, n'importe qui pourra acquérir une solide maîtrise de la compréhension et de l'écriture de programmes logiques simples en utilisant le langage de son choix.
-
La deuxième phase, que la plupart des gens trouvent un peu plus intimidante, consiste à apprendre un écosystème de développement : la prochaine étape naturelle après l'acquisition de connaissances simples en programmation consiste à choisir un sous-domaine de programmation (développement Web, développement d'applications mobiles, systèmes embarqués, etc.). ) et commencez à apprendre comment résoudre les problèmes en utilisant cette plate-forme spécifique. La difficulté ici est qu’il ne s’agit plus d’aborder un ensemble de fondamentaux, de pratiquer chaque concept et de répéter. Il est souvent impossible de couvrir chaque outil, chaque technologie et de suivre chaque principe. La bonne façon de procéder est de faire une bonne dose d’expérimentation et de recherche. Il y a de fortes chances que vous n'ayez besoin d'acquérir qu'une poignée de compétences et d'utiliser un certain nombre d'outils pour vous lancer dans des tâches simples. Une fois que vous êtes à l’aise à ce niveau, vous pouvez essayer de vous développer dans un nouvel ensemble d’outils et d’évoluer régulièrement. En suivant cette méthodologie, nous tenterons de construire une base solide dans le domaine du développement web à travers l'exploration des technologies et des outils utilisés pour construire des pages de destination simples.
Dans cet article de blog, nous ferons une brève exploration du paysage du développement Web frontend, en mettant l'accent sur le développement de pages de destination. Nous passerons en revue une sélection de ressources que nous vous recommandons de consulter pour les différentes parties de développement que vous pourriez rencontrer. À la fin de cet article, vous aurez une idée beaucoup plus claire de la manière de créer une page de destination. Regardez cette vidéo complémentaire pour un exemple pratique.
Paysage de développement de pages de destination
Une page de destination est un terme initialement utilisé par les experts en marketing numérique pour désigner une page Web autonome utilisée à des fins de campagne de marketing et de publicité. Le concept est assez simple : un visiteur intéressé par un produit ou un service proposé par une entreprise clique sur un lien dudit produit, puis « atterrit » sur une page web qui présente une description riche combinant textes, images etc. du produit ou service. La page contient un bouton d'achat, appelé « CTA » (Call To Action) afin de convertir le visiteur en client payant. Comme vous vous en doutez, créer une bonne expérience utilisateur est primordial pour avoir un bon taux de conversion.
Tout au long de cet article, nous découvrirons de nombreuses manières et outils qui nous permettront de créer des pages de destination qui remplissent leur rôle. Il est important de mentionner qu’il existe d’autres considérations lors de la création de pages de destination liées au référencement (Search Engine Optimization). Le référencement sera abordé dans les futurs ateliers.
Inspirations de conception
Que vous soyez expérimenté dans la création de pages de destination ou que vous débutiez tout juste, vous constaterez qu'il est souvent difficile de déterminer exactement à quoi vous souhaitez que votre site Web ressemble. Il arrive aussi souvent, lorsqu’on travaille avec des clients, qu’ils ne sachent pas exactement quel design ils souhaitent pour leur page Web. Habituellement, la maquette de conception et le prototype sont remis au développeur par un concepteur Web spécialisé dans ce type de travail. Il peut être utile de disposer d’une source fiable de conceptions Web. De telles sources vous permettront de vous tenir au courant des tendances en matière de design, de stimuler votre créativité et… de vous lancer. Deux des meilleures ressources que vous pouvez utiliser pour trouver l'inspiration en matière de conception pour votre prochain projet sont Dribbble et Behance.
Dribbler
Dribbble est probablement la ressource la plus populaire dans le domaine de la conception Web. C'est une communauté de designers qui partagent leur travail afin d'améliorer leurs compétences, de s'entraider et d'obtenir des retours constructifs. Il contient un large éventail de designs dans à peu près n'importe quel sujet ou domaine réalisés par des créatifs du monde entier, ainsi que les commentaires de la communauté, ce qui en fait un endroit idéal pour s'inspirer.
Behance
Behance est une autre communauté de design populaire qui peut vous aider à trouver l'inspiration. Ce site Web offre des fonctionnalités de recherche avancées qui vous permettent d'accéder facilement au travail spécifique qui vous intéresse, à l'aide de mots-clés, de champs et d'une palette de couleurs. Il est également important de noter que Behance fait partie d'Adobe et s'intègre parfaitement à Adobe Creative Cloud.
Dribbble et Behance sont deux excellentes plates-formes d'inspiration pour la conception de sites Web et vous ne pouvez pas vous tromper non plus. Nous vous encourageons à commencer à explorer les designs et à créer le vôtre !
Prototypage de conception
Maintenant que vous avez été inspiré par le travail de designers talentueux, il est temps pour vous de commencer à prototyper le design de votre page de destination. Le prototypage est une phase importante dans la création d’une page de destination. Il peut être défini comme le processus expérimental dans lequel vous mettez en œuvre des idées dans des structures visibles, afin que vous puissiez les affiner et les valider avec votre équipe ou votre client. À la fin de la phase de prototypage, vous disposerez d’un design prêt à prendre vie sur votre page de destination.
Il existe une multitude de solutions logicielles qui peuvent être utilisées pour créer des prototypes de conception. En fait, il y en a tellement qu’il peut rapidement devenir difficile d’évaluer, de comparer et de choisir un seul outil. Nous allons utiliser Figma, car il est couramment utilisé par les concepteurs ux/ui. Si vous souhaitez apprendre à utiliser Figma pour le prototypage, vous pouvez consulter notre cours intensif sur YouTube directement ici.
Figma
Figma est un outil de conception tout-en-un qui permet aux concepteurs et développeurs UX de créer et de collaborer facilement sur des prototypes de conception sur une plate-forme hébergée dans le cloud et basée sur un navigateur. . Figma met l'accent sur la simplicité et la facilité d'utilisation.
L'interface de Figma vous permet de créer des éléments et de les styliser en contrôlant l'apparence du texte, des grilles et d'autres composants sur la page. Il propose une large gamme de plugins complémentaires, comme Autoflow pour présenter les flux utilisateurs, Figmotion pour les animations, et bien d'autres.
Icônes et polices
La typographie et les icônes de style font partie des fonctionnalités les plus simples à utiliser pour améliorer l’apparence de n’importe quelle page Web. Vous souhaitez utiliser la bonne police et les bonnes icônes sur votre page de destination pour correspondre à l'idée générale que vous souhaitez communiquer. Heureusement, il est facile de trouver et d'appliquer une large sélection de polices et d'icônes à l'aide de Font Awesome ou Google Fonts.
Police géniale
Font Awesome est une boîte à outils de polices et d'icônes basée sur CSS et Less . En 2020, Font Awesome était utilisé par 38 % des sites utilisant des scripts de polices tiers, le plaçant à la deuxième place après Google Fonts (Wikipedia).
Font Awesome est pris en charge par de nombreuses bibliothèques frontales telles que Bootstrap, pour laquelle il a été initialement conçu. Font Awesome rend l'intégration de polices et d'icônes dans une page Web aussi simple que l'inclusion d'un lien CDN. Cette facilité d'utilisation, ainsi que son large choix de polices et d'icônes, en ont fait la solution la plus populaire dans le domaine.
Polices Google
Google Fonts est un service Web gratuit et open source proposé par Google pour l'intégration de polices dans des sites Web. Il offre des intégrations transparentes et un haut niveau de flexibilité et de personnalisation.
Déployez votre page de destination
Maintenant que vous avez construit votre landing page, il est temps de la partager avec l'ensemble ! La dernière étape consiste à déployer votre page de destination à l'aide d'une solution d'hébergeur. Les pages Github et Vercel sont nos meilleurs choix. Ce sont les plus populaires et les plus faciles à utiliser. Vercel est l'outil présenté dans notre atelier, mais Github Pages fonctionne de la même manière.
Pages GitHub
Si vous apprenez actuellement à coder, il y a de fortes chances que vous ayez entendu parler de Github. Github est une plateforme de partage et d'hébergement de code au sein de la communauté open source. Il propose une fonctionnalité appelée GitHub Pages, qui est un service d'hébergement de pages Web publiques pouvant être utilisées par des particuliers et des organisations. Toutes les pages sont hébergées gratuitement sur le domaine github.io de GitHub, ou sur un nom de domaine personnalisé si vous en possédez un. Les pages GitHub sont un moyen simple et efficace d'héberger vos projets gratuitement si vous utilisez déjà Github pour le contrôle de version.
###Vercel
Vercel est une alternative aux pages Github qui offre un large éventail de fonctionnalités et de configurations. Il est livré avec une version gratuite. Nous recommandons Vercel à toute personne ayant un projet complexe, car il offre une excellente expérience de développement et offre un excellent support. Code Labs Academy l'utilise dans le cadre de son processus de développement.
Conclusion
Cet article a présenté des outils utiles pour développer une page de destination. Encore! La meilleure façon d’apprendre est par la pratique, nous vous encourageons donc fortement à essayer ces outils sur votre projet personnel ! Une grande partie du travail d’un développeur consiste à rechercher des solutions existantes aux problèmes qu’il rencontre et à éviter de réinventer la roue. L’avantage de la communauté de programmation est sa nature collaborative. Nous vous encourageons à profiter du travail partagé par d’autres et à contribuer avec le vôtre !
Et si vous souhaitez en savoir plus sur la conception de sites Web sympas et sur leur création, vous pouvez consulter nos Conception UX/UI et Développement Web Des bootcamps !
Devenez un pro du codage à votre rythme ! Rejoignez le [Bootcamp en ligne à temps partiel] de Code Labs Academy(https://codelabsacademy.com/) et améliorez vos compétences en codage. Adaptez l'apprentissage à votre emploi du temps et commencez votre voyage vers la technologie dès aujourd'hui !
