Concevoir, prototyper et collaborer au sein d'une entreprise »Zone Martech

Ces derniers mois, j’ai aidé à développer et à intégrer une instance WordPress hautement personnalisée pour un client. C'est un équilibre entre le style, l'extension de WordPress à l'aide de champs personnalisés, de types de publication personnalisés, d'un framework de conception, d'un thème enfant et de plugins personnalisés.

La partie difficile, c'est que je le fais à partir de simples maquettes créées à partir d'une plateforme de prototypage propriétaire. . Bien qu’il s’agisse d’une plate-forme solide pour la visualisation et la conception, elle ne se traduit pas facilement en HTML5 et CSS3. Ajoutez toutes les autres itérations, et mes journées sont très frustrantes parce que les progrès sont extrêmement lents.

L'un des morceaux du puzzle est que l'agence de création a tout simplement remis les prototypes, sans fournir aucun type de feuille de style maître… travaillant pour accomplir cela en exportant les prototypes dans Zeplin puis en traduisant le CSS en WordPress. Le nombre d'étapes nécessaires et les écarts entre les plates-formes rendent le processus difficile. Sans oublier d'essayer de simplifier les complexités liées à la vitesse et à l'évolutivité

Figma

Figma centralise une grande partie de ce travail avec une plate-forme permettant la conception, le retour d'informations et la collaboration entre tous les membres de votre équipe, notamment: [19659006] Designers – Collaborez en contexte et en temps réel. Ne vous inquiétez jamais de la vétusté de vos fichiers ou de leur travail de remplacement.

Figma présente des caractéristiques uniques:

• Opérations booléennes – Avec quatre formules: union , soustrayez, intersectez et excluez, vous pouvez combiner avec précision tout jeu de calques de forme.
• Composants – Créez plus rapidement et de manière plus cohérente des éléments réutilisables et évolutifs dans vos fichiers. Accédez aux couches dans chaque instance afin de pouvoir modifier et remplacer intuitivement le texte et les images en ligne.
• Contraintes – Mettez votre dessin à l'échelle à la taille de l'écran en fixant les objets à un cadre parent, en alignant un objet sur une grille, ou même en création de composants à cette échelle.
• Cadres de périphérique – Présentez vos conceptions dans les environnements appropriés. Vous pouvez même choisir entre le mode portrait et le mode paysage.
• Interactions – Donnez vie à vos prototypes en définissant les interactions au clic, en faisant du vol stationnaire, en appuyant, et plus encore.
• Les superpositions – With relative et en vous positionnant manuellement, vous avez le plein contrôle sur l'emplacement et la manière dont les superpositions apparaissent.
• Pixel-perfection – L'édition interactive à 60 images par seconde vous apporte des aperçus et des exportations ultra-nettes et parfaitement synchrones. connecter des écrans et ajouter des éléments tels que des interactions, des transitions, des superpositions, etc. Au lieu de synchroniser avec d'autres outils, partagez simplement une URL pour recevoir des commentaires.
• Responsive Design – Étendez vos présentations et voyez comment elles réagiront aux changements de taille d'écran.