Dans ce monde virtuel, nous sommes tous dans la course pour avoir la présence en ligne la plus moderne, la plus originale et la plus belle. Votre flux Instagram est peut-être l’endroit le plus évident pour cela, mais les sites Web sont également importants et restent pertinents.
Que vous en ayez besoin pour votre entreprise ou pour vous-même, n’ayez crainte. Ici, nous allons vous aider à obtenir le plus joli site avec un aperçu approfondi de Framer, un constructeur de site Web pour les concepteurs.
Framer
Framer a été lancé en 2015 en tant qu'outil unique de conception, de prototypage et de transfert de développeurs, sur lequel les équipes (des concepteurs aux ingénieurs) pouvaient collaborer et créer des produits numériques.
Depuis lors, il a grandi et évolué pour devenir une plate-forme sur laquelle vous pouvez créer des sites Web au design professionnel.
Il s'intègre à des outils comme Photoshop ou Figma, afin que vous puissiez facilement importer vos projets et transformer votre conception en code.
Fonctionnalités
Tableau de bord
Framer dispose d'un tableau de bord très épuré, idéal pour tout trouver rapidement. Vous pouvez gérer plusieurs espaces de travail et organiser vos projets dans différents dossiers.
Il existe également de belles options de personnalisation comme le mode jour/mode nuit et la possibilité de masquer les boutons « Commencer » une fois que vous êtes familiarisé avec la plateforme.
Création
Lorsque vous vous connectez pour la première fois à Framer, vous verrez un didacticiel vidéo qui vous présente ses principales fonctionnalités. C'est un soulagement car, contrairement à d'autres constructeurs, Framer présente un certain degré de complexité.
Cependant, cela est uniquement dû au niveau de personnalisation que vous pouvez atteindre. Framer est un outil sans code, vous obtiendrez donc un site Web professionnel sans avoir besoin de connaître le code.
L'une des choses qui rendent Framer si cool en termes de design est sa fonctionnalité de conception de positionnement libre. Contrairement à d’autres constructeurs qui vous limitaient au principe du modèle de conception en boîte, Framer dispose d’une plus grande liberté de conception avec laquelle travailler.
Framer vous permet de copier et coller des conceptions Web à partir de Figma. Si vous utilisez Figma pour votre portfolio, c'est vraiment une excellente nouvelle.
Lorsque Framer a démarré, il ne s'agissait que d'un constructeur de prototypes, mais votre résultat est désormais un véritable site Web fonctionnel.
Il dispose également de plusieurs modèles pour créer vos pages et sections de manière plus traditionnelle. Et une fonctionnalité Coller à partir du Web dont nous parlerons dans une minute.
Il dispose même de formulaires intégrés vous permettant de trouver vos polices préférées dans Google Fonts et Fontshare.
Une autre fonctionnalité intéressante est que vous pouvez établir un style de couleur avec des thèmes clairs et sombres et laisser votre ordinateur s'adapter au paramètre d'apparence natif de votre ordinateur.
Animation
Framer propose des fonctionnalités d'animation avancées pour créer des expériences de site Web attrayantes et interactives.
Non seulement il existe des animations dynamiques qui peuvent être déclenchées lorsque les utilisateurs font défiler votre page, mais il existe également Framer Motion.
Framer Motion est une bibliothèque React spéciale qui peut être utilisée pour créer votre style d'animation.
Si vous connaissez déjà Figma et ses éléments de conception animés tels que des boutons avec une animation intelligente, ce sera un jeu d'enfant.
Outils de développement
Bien que vous n'ayez pas besoin de savoir coder pour utiliser Framer, cela vous donne la possibilité d'étendre leurs capacités avec du code.
Framer vous permet d'utiliser uniquement React et JavaScript standards.
Le SEO
Framer générera un plan du site basé sur la structure de votre site pour les robots de recherche. Cela garantira également que vous obtenez un excellent score Google Lighthouse par défaut. Et il vous permet d'utiliser des balises sémantiques sur vos sites Web pour une meilleure structure.
Toutes les sections du panneau Insertion sont réactives par défaut, vous n'avez donc pas à vous soucier de savoir si les visiteurs verront un site intéressant sur leur mobile.
Le système de gestion de contenu (CMS) est pris en charge par Framer, mais il n'est pas très robuste. Webflow est un constructeur qui fait un meilleur travail, par exemple. Si cela vous intéresse, vous pouvez aller voir notre examen de Framer vs Webflow.
Accessibilité
L'accessibilité est souvent négligée. Pourtant, il s'agit d'un aspect clé d'un bon site Web et il est étroitement lié au référencement.
Framer accorde une attention particulière à des éléments tels que le rapport de contraste de votre site et des textes ALT de l'image, ainsi qu'à d'autres éléments importants.
Hébergement
Des excellentes options de sécurité et de protection par mot de passe aux SLA de disponibilité de 99.99 %, vous obtiendrez tout ce dont vous avez besoin pour héberger votre site sur Framer.
La bande passante et les visiteurs mensuels sont cependant un peu limités et Framer ne vous offre que 100 Go de bande passante et 200,000 XNUMX visiteurs.
Intégration
Framer n'a que 8 intégrations : Mailchimp, Hubspot, YouTube et plus encore.
Si vous souhaitez intégrer avec d'autres tiers, vous devrez ajouter le code de suivi à la section Code personnalisé de votre projet.
Traduction et localisation de sites Web
Framer propose des modules complémentaires de localisation et propose également des traductions automatiques et manuelles. De cette façon, vous pouvez facilement tout localiser sur votre site et disposer ensuite d’un contrôle plus granulaire.
La variété des langues est grande. Jetez simplement un œil à toutes les options pour l’espagnol.
Si vous souhaitez accéder à la technologie de l'IA pour faire passer vos traductions au niveau supérieur, il existe un module complémentaire pour 40 $ par mois et par région.
Outils de collaboration
Framer vous permet d'ajouter des téléspectateurs, des éditeurs et des administrateurs à votre lieu de travail. Vous pouvez leur envoyer une invitation par courrier ou simplement partager un lien avec eux.
Il vous offre jusqu'à 5 postes d'éditeur directement à partir de leur plan de base. Vous obtenez ensuite jusqu'à 10 éditeurs sur le plan Pro. Le forfait Entreprise vous offre des espaces de travail illimités et des éditeurs personnalisés.
De plus, Framer donne la possibilité à plusieurs designers de travailler simultanément en collaboration sur un design. Vous pouvez également laisser des commentaires à l'intérieur du projet (voir l'image ci-dessus) comme vous le feriez dans un Google Doc.
Technologie artificielle
Framer dispose d'un ensemble d'outils d'IA pour augmenter l'impact de votre site Web. Vous trouverez parmi eux la traduction AI, la réécriture de texte et le style AI. Ce sont principalement des assistants d'écriture IA et vous pouvez y accéder en achetant un module complémentaire.
Le module complémentaire AI Localization vous offre même une logique de localisation et de visibilité des images.
Où vous pouvez l'utiliser
Les utilisateurs qui choisissent Framer ont deux options : l'utiliser sur leur navigateur ou l'installer en tant qu'application sur leur ordinateur. L'application est disponible pour Mac et Windows.
Il dispose également d'une extension Chrome appelée HTML to Framer qui vous permet de déplacer votre site vers Framer en copiant des mises en page, des textes et des images. Vous pouvez également vous inspirer et copier à partir d’autres sites Web. J'ai copié l'image que vous voyez dans ma capture d'écran ci-dessus à partir du site Web de Framer.
Gardez cependant à l’esprit que, tout comme la fonctionnalité Coller à partir de Figma, elle présente certaines limites. Tous les types d’éléments de conception ne seront pas importés parfaitement, alors soyez-en conscient.
Malheureusement, si vous recherchez une migration de site, il n'existe toujours rien de tel, mais Framer y travaille.
Assistance et ressources
Il dispose d'une académie avec de nombreux didacticiels vidéo, d'un centre d'aide et d'une communauté. Il manque un canal de communication plus direct tel que le chat, le courrier électronique ou le téléphone, ce qui est regrettable.
Ils organisent plusieurs rencontres dans la même journée et dans des endroits différents, donc peu importe où vous habitez, il y en aura une à laquelle vous pourrez assister.
Pour contacter le support, vous pouvez créer un ticket.
Prix
Framer propose cinq forfaits, dont un gratuit :
- Gratuit pour toujours : vous obtenez des pages gratuites, une collaboration, un accès à la fonction d'optimisation d'image et une publication instantanée et bien plus encore.
- Mini : 5 $ par mois. Code personnalisé, publiez sur un domaine personnalisé et obtenez 1 Go d'hébergement de bande passante.
- De base : 15 $ par mois. Publiez un nombre illimité de pages Web et protégez votre site avec un mot de passe.
- Pro : 30 $ par mois. Il comprend analytique, bannière de cookies, modules complémentaires et plus encore.
- Entreprise : personnalisée. Bénéficiez d’un support dédié et d’une formation supplémentaire.
Avantages et inconvénients de l'encadreur
Avantages
- Fonctionnalités d'animation avancées.
- Disponible en ligne et sous forme d'application de bureau.
- Outils d'écriture IA.
Inconvénients
- Vous ne trouverez pas beaucoup de tutoriels ou de support.
- Hébergement limité.
Conclusion
Framer est un créateur de site Web unique pour tous ceux qui recherchent un site d'aspect professionnel et en particulier pour les concepteurs.
Son forfait gratuit permet à quiconque de l'essayer sans risque et ses forfaits abordables aident ceux qui débutent.
De plus, grâce à des fonctionnalités telles que Coller depuis Figma et Coller depuis une URL, vous pouvez importer des conceptions et créer vos pages rapidement.
Bien qu'il manque encore certaines choses, comme un ensemble plus complet de didacticiels et de support, Framer est un jeune logiciel qui résoudra probablement ces problèmes en cours de route.
Dans l’ensemble, c’est un excellent outil pour créer votre site Web et nous vous recommandons de l’essayer.
L'avez-vous déjà utilisé ?
Parle-nous-en dans les commentaires!
Laissez un commentaire