La plateforme de développement Web du futur

(Cet article est sponsorisé.) Le time-to-market joue un rôle crucial dans la conception Web moderne. La plupart des équipes de produits souhaitent minimiser le temps nécessaire pour passer de l'idée à un produit prêt à l'emploi sans sacrifier la qualité de la conception tout au long du processus.

Lorsqu'il s'agit de créer un site Web, les équipes utilisent souvent plusieurs outils: un outil pour la conception graphique et visuelle, un autre pour le prototypage et un autre pour le codage. Webflow tente de simplifier le processus de conception de sites Web en vous permettant à la fois de concevoir et de développer.

Problèmes typiques auxquels les concepteurs de sites Web sont confrontés

Il est important de commencer par comprendre quels sont les défis des équipes de concepteurs de sites Web. face quand ils créent des sites Web:

• Déconnexion entre la conception visuelle et le codage
  Les concepteurs visuels créent des prototypes / prototypes dans un outil visuel (comme Sketch) et les transmettent aux développeurs qui doivent les coder. Cela crée une série supplémentaire de va-et-vient, car les développeurs doivent effectuer une itération supplémentaire de codage.
• Il est difficile de coder des interactions complexes (en particulier les transitions animées).
  Les concepteurs peuvent introduire de superbes effets en hi-fi. Les prototypes, mais les développeurs auront du mal à reproduire la même présentation ou le même effet dans le code.
• Optimisation des conceptions pour différents écrans
  Vos conceptions doivent être réactives dès le début.

Qu'est-ce que Webflow?

Webflow est un outil de conception intégré à un navigateur qui vous donne le pouvoir de concevoir, de créer et de lancer des sites Web réactifs de manière visuelle. Il s'agit essentiellement d'une plate-forme de conception tout-en-un que vous pouvez utiliser pour passer de l'idée initiale au produit prêt à l'emploi.

Voici quelques éléments qui différencient Webflow :

• La conception visuelle et le code ne sont pas séparés.
  Ce que vous créez dans l'éditeur visuel est optimisé par HTML, CSS et JavaScript.
• Il vous permet de réutiliser des classes CSS.
  Une fois défini, vous pouvez utiliser un classe pour tous les éléments qui devraient avoir le même style ou l'utiliser comme point de départ pour une variante (classe de base).
• Il s'agit d'une plate-forme et à ce titre, elle propose des plans d'hébergement.
  Pour 12 $ par mois, elle vous permet de connecter un domaine personnalisé et d’héberger votre site HTML. Et pour 4 dollars supplémentaires par mois, vous pouvez utiliser le CMS Webflow.

Création d'un site Web d'une page à l'aide de Webflow

Le meilleur moyen de comprendre ce dont est capable cet outil est de créer un produit réel. Pour cet examen, j'utiliserai Webflow pour créer une simple page de renvoi pour un périphérique fictif de haut-parleur intelligent.

Définition de la structure de la page d'avenir

S'il est possible d'utiliser Webflow pour créer une structure de votre mise en page, il vaut mieux d'utiliser un autre outil pour cela. Pourquoi? Parce que vous devez expérimenter et essayer différentes approches avant de trouver celle qui vous semble la meilleure. Il est préférable d’utiliser une feuille de papier ou n’importe quel outil de prototypage pour définir les os de votre page.

Il est également crucial d’avoir une idée claire de ce que vous essayez d’atteindre. Trouvez un exemple de ce que vous voulez et dessinez-le sur papier ou dans votre outil de création préféré.

Conseil: Vous n'avez pas besoin de créer en permanence un motif haute fidélité. Dans de nombreux cas, il est possible d’utiliser des wireframes lo-fi. L'idée est d'utiliser un croquis / prototype comme référence lorsque vous travaillez sur votre site Web.

La structure suivante est nécessaire à notre site Web:

• section héros avec une image de produit volumineuse, une copie et un bouton d'appel à l'action
• Une section présentant les avantages de l'utilisation de notre produit. Nous utiliserons une disposition en zig-zag (cette disposition associe images et sections de texte).
• Une section contenant des commandes vocales rapides qui permettra de mieux comprendre comment interagir avec un périphérique.
• Une section contenant les informations de contact. Pour faciliter les recherches des visiteurs aux visiteurs, nous vous fournirons un formulaire de contact au lieu de l'adresse électronique habituelle.

Créer un nouveau projet dans Webflow

Lorsque vous ouvrez le tableau de bord Webflow pour la première fois, vous remarquez immédiatement une image amusante. illustration avec une ligne de texte courte mais utile. C'est un excellent exemple d'état vide utilisé pour guider les utilisateurs et créer la bonne ambiance dès le début. Il est difficile de résister à la tentation de cliquer sur «Nouveau projet».

Lorsque vous cliquez sur «Nouveau projet», Webflow vous proposera quelques options pour commencer: un espace site, trois préréglages communs et une liste impressionnante de modèles prêts à l’emploi. Certains des modèles que vous trouvez sur cette page sont intégrés au CMS, ce qui signifie que vous pouvez créer du contenu basé sur le CMS dans Webflow.

Les modèles sont parfaits quand vous le souhaitez. pour être opérationnel très rapidement, mais puisque notre objectif est d'apprendre à créer le design nous-mêmes, nous choisirons «Site vierge».

Dès que vous créez un nouveau projet, nous verrons le design frontal de Webflow. interface. Webflow fournit une série de vidéos de procédures rapides. Ils conviennent à quiconque utilise Webflow pour la première fois.

Après avoir visionné les vidéos d'introduction, vous verrez une zone vierge avec des menus. côtés de la toile. Le panneau de gauche contient des éléments qui vous aideront à définir la structure de votre mise en page et à ajouter des éléments fonctionnels. Le panneau de droite contient les paramètres de style des éléments.

Commençons par définir la structure de notre page. Le bouton en haut à gauche avec un signe plus ( + ) sert à ajouter des éléments ou des symboles à la zone de travail. Tout ce que nous avons à faire pour introduire un élément / bloc visuel consiste à faire glisser l'élément approprié sur la toile.

Les éléments doivent être familiers à quiconque construit un site Web, Symboles peut encore être un nouveau concept pour beaucoup de gens. Les symboles sont analogues aux fonctionnalités d'autres outils de conception populaires, tels que les composants de Figma et XD. Les symboles transforment tout élément (y compris ses enfants) en un composant réutilisable. Chaque fois que vous modifiez une instance d'un symbole, les autres instances sont également mises à jour. Les symboles sont intéressants si vous souhaitez utiliser un menu de navigation que vous souhaitez réutiliser en permanence sur le site.

Webflow fournit quelques éléments permettant de définir la structure de la présentation:

• Sections . Les sections divisent des parties distinctes de votre page. Lorsque nous concevons une page, nous avons généralement tendance à penser en termes de sections. Par exemple, vous pouvez utiliser des sections pour une zone de héros, une zone de corps et une zone de pied de page.
• Une grille, des colonnes, un bloc div et des conteneurs sont utilisés pour diviser les zones au sein des sections.
• Composants . Certains éléments (la barre de navigation, par exemple) sont fournis dans des composants prêts à l'emploi.

Ajoutons un menu supérieur à l'aide du composant prédéfini Navbar, qui contient trois options de navigation et des espaces réservés pour le logo du site:

Créons un symbole pour notre menu de navigation afin de pouvoir le réutiliser. Nous pouvons le faire en allant dans «Symboles» et en cliquant sur «Créer un nouveau symbole». Nous lui donnerons le nom de «Navigation».

Notez que la couleur de la section est passée au vert. Nous voyons également combien de fois il a été utilisé dans un projet (1 instance). Maintenant, lorsque nous avons besoin d’un menu sur une page nouvellement créée, nous pouvons aller dans le panneau Symboles et sélectionner une «Navigation» prête à l’emploi. Si nous décidons d’apporter une modification au symbole (c.-à-d. Renommer une option de menu), ce changement sera automatiquement appliqué à toutes les instances.

Nous devons ensuite définir la structure de notre section héros. Utilisons Grid pour cela. Webflow dispose d'un très puissant éditeur de grille qui simplifie le processus de création de la bonne grille: vous pouvez personnaliser le nombre de colonnes et de lignes, ainsi que l'écart entre chaque cellule. Webflow prend également en charge la structure de grille imbriquée, c’est-à-dire une grille dans l’autre. Nous allons utiliser une grille imbriquée pour une section héros: une grille parent définira l'image, tandis que la grille enfant sera utilisée pour le bouton En-tête, paragraphe de texte et appel à l'action.

Maintenant, plaçons les éléments dans les cellules. Nous devons utiliser les éléments Heading Paragraph Button et Image . Par défaut, les éléments remplissent automatiquement les cellules disponibles lorsque vous les faites glisser dans la grille.

Il est possible de personnaliser le style du texte, des images et ajouter du contenu réel au lieu d'espaces réservés factices, nous ignorerons cette étape et passerons aux autres parties de la présentation: la disposition en zig-zag.

Pour cette présentation, nous utiliserons une grille 2 × 3 (2 colonnes × 3 lignes). ) dans laquelle chaque cellule contenant du texte sera divisée en 3 rangées. Nous pouvons facilement créer la première cellule avec une grille à 3 lignes, mais lorsqu'il s'agit d'utiliser la même structure pour la troisième cellule de la grille principale, nous rencontrons un problème. Dans la mesure où Webflow remplit automatiquement les cellules vides avec un nouvel élément, il essaiera d’appliquer la grille enfant à 3 lignes au troisième élément. Pour changer ce comportement, nous devons utiliser Manuel. Après avoir défini la sélection de la grille sur Manuel, vous pourrez créer la présentation correcte.

Comme dans la section héros, nous allons ajouter le contexte factice aux sections de la grille. . Nous modifierons les données après avoir terminé la présentation visuelle.

Nous devons maintenant définir une section avec des commandes vocales. Pour économiser de l'espace, nous allons utiliser un carrousel. Webflow a un élément spécial à cet effet: Curseur .

Une fois tous les éléments requis en place, vous pouvez créer un rythme vertical en ajuster la position de chaque article que nous utilisons. Premièrement, nous devons ajuster l'espacement des éléments dans les grilles. Modifiez la marge et les rembourrages et Alignez vous-même avec l'image afin de la placer au centre de la cellule.

Il est maintenant temps de remplacer le contenu factice avec un contenu réel. Pour commencer à ajouter des images, vous devez cliquer sur l'icône en forme d'engrenage de l'élément Image et sélectionner l'image de notre choix.

Notez que Webflow stocke toutes les images dans une zone spéciale appelée Assets . Tous les médias ajoutés, qu'il s'agisse d'une vidéo ou d'une image, vont directement dans cette zone.

Après avoir introduit une image dans la mise en page, nous devons modifier l'en-tête et Sections de texte.

Webflow fournit un style visuel pour chaque élément utilisé dans notre conception. Prenons par exemple une section Heading: Il est possible de jouer avec la couleur, la police, le poids, l’espacement, les ombres et les autres propriétés visuelles de cet objet. Voici ce que nous aurons en ajoutant une copie réelle et en jouant avec la couleur de la police de caractères.

Une fois que nous aurons une section de héros agréable et propre, nous pourrons ajouter du contenu à notre zig- zag layout.

Notez que chaque fois que nous appelons quelque chose, nous lui donnons un sélecteur (une classe), afin que Webflow sache que le style doit être appliqué spécifiquement à cet élément. Nous pouvons utiliser la même classe pour styler d'autres éléments. Dans notre cas, nous avons besoin du même style pour les images, les en-têtes, les descriptions et les liens que nous avons dans la disposition en zig-zag.

Webflow permet également de créer des classes combinées – lorsqu'une classe est utilisée comme classe de base et qu'une autre classe est utilisée pour remplacer les options de style de la classe de base. Dans l'exemple ci-dessous, nous remplaçons la couleur de police par défaut de l'en-tête à l'aide de la classe «Zig-Heading-Second». Les classes combinées peuvent vous faire gagner beaucoup de temps, car vous n'avez pas besoin de créer un style à partir de zéro.

Voici à quoi ressemblera notre mise en page après les modifications:

Webflow fournit une fonctionnalité très utile pour aligner le contenu. nommé "guide superposition" qui peut être situé dans le panneau de menu de gauche. Lorsque vous activez le guide, vous verrez les éléments qui rompent la grille.

Une fois la mise en page en zig-zag terminée, nous devons ajouter des informations sur les commandes vocales. dans le curseur. Ajoutez une section de titre dans une diapositive appropriée et modifiez les options de style visuel de cet objet.

C'est aussi simple que cela

Enfin, nous devons ajouter un formulaire de contact sur notre site. Ajoutons une section juste en dessous de Slider.

Il existe deux façons d’ajouter un formulaire à la page. Premièrement, Webflow comporte un élément spécial pour les formulaires Web appelé Form Block . Un formulaire créé à l'aide d'un bloc de formulaire comporte trois éléments: un nom, une adresse électronique et un bouton d'envoi. Pour notre formulaire, nous aurons besoin d'un champ Message. Nous pouvons facilement en créer un en dupliquant l’élément Adresse électronique de l’élément et en le renommant. Par défaut, le bloc de formulaire a un alignement de 100% de la largeur, ce qui signifie qu'il occupe toute la largeur du conteneur. Nous allons utiliser les paramètres de la grille pour ajuster la largeur du formulaire.

Deuxièmement, Webflow permet d’intégrer du code personnalisé directement dans la page. Cela signifie que nous pouvons créer un formulaire dans un outil tel que Typeform, copier le code intégré fourni et le placer dans le composant Embed que nous avons placé dans la section. Notez que les incorporations ne s'affichent que lorsque le site a été publié ou exporté – pas pendant la conception du site.

Une fois que tous les éléments sont en place, nous devons optimiser notre conception pour mobile. Près de de la moitié des utilisateurs (au niveau mondial) accèdent à des sites Web sur leur mobile. Dans Webflow, vous pouvez redimensionner la fenêtre du navigateur afin de voir à quoi ressemble votre conception avec différents points d'arrêt.

Modifions maintenant l'affichage en tant que Mobile, en cliquant sur l'icône Mobile – Portrait .

Comme vous pouvez le constater, son design est médiocre sur son mobile. Cependant, il est relativement facile d'optimiser la conception à l'aide de Webflow: cela vous permet de modifier l'ordre des éléments, l'espacement entre les éléments, ainsi que d'autres paramètres visuels, afin que la conception ait fière allure sur votre mobile.

Une fois les modifications apportées à notre conception, nous avons deux options: nous pouvons exporter la conception et l'utiliser sur notre propre hébergement Web (c'est-à-dire l'intégrer dans votre CMS existant) ou nous pouvons utiliser Le propre hébergement de Webflow fourni. Si nous décidons d'utiliser la deuxième option, nous devons cliquer sur le bouton Publier et sélectionner les options de publication appropriées, c'est-à-dire les publier sur le domaine webflow.io ou sur un domaine personnalisé.

Si vous décidez d'exporter le code, Webflow préparera un zip complet avec HTML, CSS et tous les éléments que vous avez utilisés pour créer votre dessin. Le code exporté vous aidera à établir une base solide pour votre produit.

Conclusion

Webflow est un excellent outil pour créer des prototypes haute fidélité et inviter les membres de l'équipe et les parties prenantes à faire connaître leurs commentaires. Les personnes qui examineront votre prototype n'auront pas besoin d'imaginer le comportement et l'aspect du produit fini – elles peuvent l'expérience à la place!

Cet outil simplifie la transition d'un prototype à une interface utilisateur entièrement terminée, car vous concevez des produits avec du code réel, par opposition à la création de modèles cliquables dans Sketch ou de tout autre outil de prototypage. Vous ne perdrez pas de temps à utiliser un logiciel pour construire des prototypes et un autre pour transformer ces prototypes en produits réels. Webflow résout ce problème pour vous.

(ms, ra, il)