Lors de l'apprentissage de la programmation, on peut rencontrer deux phases distinctes
-
Apprendre les principes fondamentaux : Vous commencez à explorer l'anatomie d'un programme informatique, à réfléchir à des problèmes simples en termes d'unités logiques et à formaliser ces unités en instructions de code. À ce stade, vous apprenez des sujets abstraits et des pratiques simples. Si l'on s'y prend bien et que l'on y consacre le temps nécessaire, n'importe qui peut 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 : l'étape suivante naturelle après l'acquisition de connaissances simples en programmation est de choisir un sous-domaine de programmation (développement web, développement d'applications mobiles, systèmes embarqués et autres) et de commencer à apprendre comment résoudre des problèmes à l'aide de cette plateforme spécifique. La difficulté réside dans le fait qu'il ne s'agit plus de couvrir un ensemble de principes fondamentaux, de pratiquer chaque concept et de répéter. Il est souvent impossible de couvrir tous les outils, toutes les technologies et de suivre tous les principes. 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 que quelques compétences et d'utiliser un certain nombre d'outils pour commencer à effectuer des tâches simples. Une fois que vous serez à l'aise à ce niveau, vous pourrez essayer d'élargir votre champ d'action à un nouvel ensemble d'outils et évoluer régulièrement. En suivant cette méthodologie, nous allons essayer 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 d'atterrissage simples.
Dans cet article de blog, nous allons faire une brève exploration du paysage du développement web frontal, en nous concentrant sur le développement de pages d'atterrissage. Nous passerons en revue une sélection de ressources que nous vous recommandons de consulter pour les différentes parties du développement que vous pourriez rencontrer. À la fin de cet article, vous aurez une idée beaucoup plus claire de la manière de construire une page d'atterrissage. Consultez cette vidéo d'accompagnement pour un exemple pratique.
Paysage du développement des pages d'atterrissage
Une page d'atterrissage est un terme initialement employé par les experts en marketing numérique pour désigner une page web autonome utilisée à des fins de marketing et de campagne publicitaire. Le concept est assez simple : un visiteur intéressé par un produit ou un service fourni par une entreprise clique sur le lien dudit produit, puis "atterrit" sur une page web qui contient une description riche combinant texte, images, etc. du produit ou du service. La page contient un bouton d'achat, appelé "CTA" (Call To Action), afin de convertir le visiteur en client payant. Comme vous pouvez vous en douter, il est essentiel de créer une bonne expérience utilisateur pour obtenir un bon taux de conversion.
Tout au long de cet article, nous allons découvrir de nombreux moyens et outils qui nous permettront de construire des pages d'atterrissage qui remplissent leur rôle. Il est important de mentionner qu'il y a d'autres considérations à prendre en compte lors de la création de pages d'atterrissage, liées à l'optimisation pour les moteurs de recherche (SEO). L'optimisation pour les moteurs de recherche sera abordée dans de futurs ateliers.
Inspiration du design
Que vous ayez de l'expérience dans la création de pages d'atterrissage ou que vous débutiez, vous constaterez qu'il est souvent difficile de déterminer exactement à quoi vous voulez que votre site Web ressemble. Il est également fréquent, lorsque l'on travaille avec des clients, que ceux-ci ne sachent pas exactement quel design ils souhaitent pour leur page web. En général, la maquette et le prototype sont remis au développeur par un concepteur de sites web spécialisé dans ce type de travail. Il peut être utile de disposer d'une source fiable de conceptions de sites web. Ces sources vous permettront de vous tenir au courant des tendances en matière de conception, de stimuler votre créativité et... de vous lancer. Dribbble et Behance sont deux des meilleures sources d'inspiration pour votre prochain projet.
Dribbble
Dribbble est probablement la ressource la plus populaire dans le domaine de la conception de sites web. Il s'agit d'une communauté de concepteurs qui partagent leur travail afin d'améliorer leurs compétences, de s'entraider et de recevoir des commentaires constructifs. Il contient un large éventail de créations dans pratiquement tous les domaines, réalisées par des créatifs du monde entier, ainsi que les commentaires de la communauté, ce qui en fait un endroit idéal pour trouver l'inspiration.
Behance
Behance est une autre communauté de designers très populaire qui peut vous aider à trouver l'inspiration. Ce site web propose des fonctions de recherche avancées qui vous permettent d'accéder facilement à des travaux spécifiques qui vous intéressent, à 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 tous deux d'excellentes plateformes d'inspiration pour la conception de sites web et vous ne pouvez pas vous tromper avec l'une ou l'autre. Nous vous encourageons à commencer à explorer les designs et à inventer les vôtres !
Prototype 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 d'atterrissage. Le prototypage est une phase importante de la construction d'une page d'atterrissage. Il peut être défini comme le processus expérimental au cours duquel vous mettez en œuvre des idées dans des structures visibles, afin de les affiner et de 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 d'atterrissage.
Il existe une pléthore de solutions logicielles qui peuvent être utilisées pour construire 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 outil. Nous allons utiliser Figma, car il est couramment utilisé par les concepteurs d'interface utilisateur. Si vous souhaitez apprendre à utiliser Figma pour le prototypage, vous pouvez consulter notre cours accéléré sur youtube ici.
Figma
Figma est un outil de conception tout-en-un qui permet aux concepteurs UX et aux développeurs de construire et de collaborer facilement sur des prototypes de conception sur une plateforme basée sur un navigateur et hébergée dans le cloud. 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 offre une large gamme de plugins complémentaires, comme Autoflow pour présenter les flux d'utilisateurs, Figmotion pour les animations, et bien d'autres encore.
Icônes et polices
Typographie et style Les icônes font partie des éléments les plus simples à utiliser pour rehausser l'aspect d'une page web. Vous devez utiliser la bonne police et les bonnes icônes sur votre page d'atterrissage pour qu'elles correspondent à l'idée générale que vous voulez communiquer. Heureusement, il est facile de trouver et d'appliquer une large sélection de polices et d'icônes en utilisant Font Awesome ou Google Fonts.
Font Awesome
Font Awesome est un kit de polices et d'icônes basé sur CSS et [Less>](<https://en.wikipedia.org/wiki/Less_(stylesheet_language)). En 2020, Font Awesome était utilisé par 38 % des sites qui utilisent des scripts de polices tiers, ce qui le place en deuxième position 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 permet d'intégrer des polices et des icônes dans une page web aussi facilement qu'un lien CDN. Cette facilité d'utilisation, ainsi que sa large sélection de polices et d'icônes, en ont fait la solution la plus populaire dans ce domaine.
Google Fonts
Google Fonts est un service web gratuit et open-source proposé par Google pour l'intégration de polices dans les sites web. Il offre des intégrations transparentes et un niveau élevé de flexibilité et de personnalisation.
Déployez votre page d'atterrissage
Maintenant que vous avez construit votre page d'atterrissage, il est temps de la partager avec tout le monde ! La dernière étape consiste à déployer votre page d'atterrissage à l'aide d'une solution d'hébergement. Github Pages 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 manière similaire.
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 dans le cadre 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 gratuitement vos projets 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 existe une version gratuite. Nous recommandons Vercel à tous ceux qui ont un projet complexe, car il offre une excellente expérience aux développeurs, ainsi qu'un excellent support. Code Labs Academy l'utilise dans le cadre de son processus de développement.
Conclusion
Cet article présente des outils utiles pour développer une page d'atterrissage. Encore une fois ! La meilleure façon d'apprendre est de faire, c'est pourquoi nous vous encourageons vivement à essayer ces outils dans le cadre de 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é des programmeurs est sa nature collaborative. Nous vous encourageons à tirer parti du travail partagé par d'autres et à apporter votre contribution !
Et si vous voulez en savoir plus sur la conception de sites web cool et leur construction, alors vous voulez consulter nos Bootcamps de conception UX/UI et de développement web!
