Prototypage pour le Web avec Framer
Encadreur est un outil très puissant qui peut prototyper tout ce que vous pouvez imaginer, mais si vous jetez un coup d’œil à Framer's Gallery, vous remarquerez rapidement quelque chose:
Parmi leurs 54 exemples, 48 d'entre eux sont des applications, 4 pour Apple Watch, 1 pour iPad et 1 pour Apple TV. Est-ce que Framer est même conçu pour une conception Web / bureau «traditionnelle»?
Absolument.
Chez IBM Design, la plupart de mes conceptions sont conçues pour des applications Web de bureau d'entreprise. La plupart des designers avec lesquels je travaille utilisent Esquisser (moi y compris). Ces fichiers Sketch sont ensuite prototypés à l'aide d'un outil tel que InVision ou recréé et prototypé en code. En tant que développeur front-end d'une équipe de conception, j'ai un poste unique où je conçois et code des prototypes.
Après avoir appris les bases de Framer, j'ai décidé de l'ajouter à mon flux de travail et cela a vraiment amélioré mon processus de conception. Le plus puissant est de pouvoir importer un fichier Sketch statique dans Framer et de le transformer en un prototype réaliste et interactif dans un laps de temps relativement court.
Avec cela, je n'ai pas à passer un temps précieux au début du processus en recréant des conceptions en code. Je peux obtenir des idées devant les parties prenantes et les utilisateurs beaucoup plus rapidement. Je peux enregistrer plus tard le codage lorsque le projet sera plus solidifié.
Après avoir utilisé Framer pendant quelques mois, voici certaines choses que j'ai apprises:
Planifiez et gérez vos prototypes
Avant de commencer un projet, je décide de quelques choses:
Qu'est-ce que j'essaie d'accomplir?
Que le prototype soit destiné à tester les utilisateurs ou à concevoir une idée, quelle est la quantité minimale de travail nécessaire pour faire passer mon idée ou pour obtenir un aperçu des tests? Je ne suis pas seulement paresseux;), cela aide à décider des interactions, des animations et des écrans nécessaires.
Plus vous consacrez de temps à votre conception, plus vous êtes attaché. Plus vous êtes attaché, moins vous êtes susceptible d'apporter les modifications nécessaires.
Utilisons le prototype ci-dessus à titre d'exemple.
Je travaillais sur un nouveau projet et je voulais explorer à quoi ressemblerait une disposition basée sur des cartes avec des animations de «mélange» entre les états. J'ai esquissé l'idée de base que je voulais faire et je l'ai utilisée comme point de départ.
Si vous regarde sur le prototype fini, seule la première carte est cliquable à chaque étape. Il n'y a aucun moyen de revenir en arrière, aucun état de vol stationnaire, le contenu du dernier écran n'est pas complet, et il n'est pas presque parfait. Aucun de ces éléments n'était nécessaire pour faire passer mon idée, alors je ne les ai pas pris en compte. Framer peut faire à peu près n'importe quoi, mais cela ne signifie pas que vous devriez tout faire dans votre prototype.
Créer des flux d'interface utilisateur à l'aide du module ViewController génial d'Andreas
Vous pouvez utiliser le ViewController Sketch plugin pour créer des flux d'interface utilisateur dans Sketch. Transformez rapidement vos conceptions en prototypes cliquables sans avoir à écrire de code.
Ceci est idéal pour présenter votre travail aux parties prenantes et est très simple à réaliser. Au lieu de parcourir un fichier Sketch contenant une douzaine de plans de travail ou un fichier .pdf, vous pouvez présenter un prototype interactif ou partager l'URL de votre projet Framer hébergé.
Selon ce que j'essaie d'accomplir, je finirai peut-être par écrire du code pour des choses telles que les effets de survol, les animations et les entrées de texte, pour une touche de réalisme et d'interactivité. Encore une fois, en tant que concepteur, décidez de ce qui est nécessaire pour faire passer votre idée et la mettre en œuvre de manière appropriée.
Check-out Andreas 'Créer des flux d'interface utilisateur à l'aide de l'article Sketch and Framer pour en savoir plus sur le plugin.
Microinteractions
Je pense qu'il y a quelques raisons pour lesquelles le prototypage mobile est vraiment populaire avec Framer, l'une d'entre elles étant les microinteractions semblent beaucoup plus courantes sur le mobile. Mais cela ne doit pas être comme ça! Je pense que les concepteurs du web peuvent faire mieux pour que notre travail ait plus de mouvement et que Framer est vraiment doué pour cela.
Ceci est juste un exemple simple d'une interaction rapide que j'ai faite en utilisant un fichier Sketch qu'un designer de mon équipe avait déjà créé. Explorer des interactions comme celle-ci prend quelques minutes.
Bien sûr, mais pourquoi ne pas simplement coder?
En tant que développeur frontal, beaucoup de mes projets finiront par avoir un prototype codé. J'utilise ensuite ce prototype comme base pour écrire le code frontal dans le produit, en parallèle avec l'ingénierie. Alors pourquoi ne pas simplement coder dès le départ?
Comme je l'ai mentionné plus tôt, la vitesse. Je peux rapidement étoffer les idées que moi-même ou un autre concepteur avons déjà faites en les important de Sketch dans Framer. C'est génial pour la première partie du processus de conception où vous explorez des idées et implémentez rapidement vos commentaires. Je peux avancer assez vite dans le code, mais Framer passe au niveau supérieur.
Une autre raison est la liberté. Le simple fait que tout mon code écrit en Framer soit jeté est en quelque sorte génial. Cela me permet d'essayer des choses que je ne ferais pas autrement et d'être un peu plus lâche avec mon code. Je peux passer 15 minutes à explorer une idée et la jeter sans aucun remords.
Quelques conseils et astuces
Vous (ou le concepteur avec lequel vous travaillez) devrez probablement configurer les fichiers Sketch un peu différemment.
- Groupez vos calques. Les couches qui ne sont pas dans un groupe sont ignorées
- Évitez d'utiliser des espaces dans les noms de groupes
- Les calques masqués dans Sketch sont toujours importés, mais leur visibilité sera définie sur false.
- Créez des noms simples et uniques pour vos plans de travail
- Un minus (-) à la fin de votre tableau exclura qu'il soit importé dans Framer
Aplatir tous les calques dans Sketch qui resteront statiques. Cela améliorera le temps de chargement de votre projet, ce qui est particulièrement important lors de la création d'un prototype plus volumineux. Vous pouvez le faire en ajoutant un astérisque (*) à la fin du calque dans Sketch.
Cela vaut la peine de passer un peu de temps avec les concepteurs de votre équipe pour déterminer comment configurer les fichiers Sketch en fonction du flux de travail et de ce qui convient le mieux à l’équipe.
Lorsque vous importez un fichier Sketch dans Framer, vous verrez quelque chose comme ceci:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Remplacez l'esquisse par $ et vous pouvez maintenant utiliser $ pour référencer vos calques d'esquisse, ce qui vous évite d'écrire des centaines de fois l'esquisse du mot:
$ = Framer.Importer.load("imported/design@1x")Utilisez l'extrait de curseur normal pour un pointeur de souris normal:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. J'importe mes designs à @ 2x puis les redimensionne pour qu'ils soient plus nets. Notez que cela ne semble pas se comprendre avec le module ViewController mentionné ci-dessus.
Framer.Device.contentScale = .5Sketch and Framer utilisent différents plans / périphériques artistiques par défaut pour le Web. Sketch utilise 1440 × 1024 tandis que Framer utilise 1440 × 900. J'opte pour 1440 × 900. Ne pensez pas que vous êtes limité à 900 pixels pour la hauteur, cependant, vous pouvez facilement créer des pages à défilement dans Framer.
[- Cet article était à l'origine posté sur Medium , republié avec la permission de l'auteur -]