Comment gérer vos inspirations d'UI Design avec Eagle

En bref

Dans ce guide, vous découvrirez l'application Eagle et comment l'utiliser pour gérer vos inspirations d'UI Design, à l'aide d'un tutoriel complet et d'un Eaglepack prêt à l'emploi de la structure de dossier que j'utilise.

Table des matières

• C'est quoi Eagle ?
• Comment j'utilise Eagle pour l'UI Design
• Pour aller plus loin
• Bonus : où trouver des inspirations ?

C’est quoi Eagle ?

Quand on est UX/UI Designer, on a souvent de nombreuses images de designs qui nous plaisent, et on peut avoir tendance à simplement les sauvegarder dans des dossiers sur sa machine ou par exemple, sur des tableaux Pinterest. Cela dit, ce n’est pas vraiment pratique, car les retrouver peut se révéler compliqué à mesure que vous en accumulez.

C’est alors qu’entre en scène Eagle qui est une application pour Mac et Windows qui vous permet d’enregistrer et d’organiser toutes vos images d’inspirations. Il va même plus loin en permettant d’organiser tout type de fichier comme des vidéos, de l’audio ou encore des polices d’écritures voire des fichiers 3D. Personnellement, je m’en sers surtout pour ranger mes inspirations et les retrouver au moment voulu.

Je l’ai découvert il y a quelques années, quasiment lors de leur première version (ils ont d’ailleurs récemment fêté leurs cinq ans en avril 2022 🎂). Depuis lors, Eagle est souvent ouvert tous les jours sur mon Mac, c’est un des outils dont je me sers le plus avec Notion et Figma.

L’application va de pair avec leur plugin pour navigateur (Chrome, Safari, Firefox et Edge) qui permet de sauvegarder facilement des images d’un site ainsi que des marque-pages de vos favoris.

Pourquoi l’utiliser ?

Quand on fait de l’UX/UI Design, ou même n’importe quelle activité créative, se baser sur d’autres travaux est toujours une bonne pratique. Je reparle de la créativité et de l’importance de l’inspiration dans celle-ci ici.

Avec Eagle, vous pourrez enregistrer facilement toutes les images, vidéos et sites qui vous passent sous la main pour pouvoir les retrouver facilement le jour d’un projet, cela vous fait gagner du temps et vous n’avez pas à compter seulement sur votre mémoire.

Comment on ferait sans Eagle ?

Eagle n’est pas le seul moyen d’enregistrer ses inspirations, vous en avez plusieurs à votre disposition, comme des tableaux Pinterest ou encore des collections sur Dribbble et Behance, mais pour moi, Eagle reste le meilleur moyen car vos inspirations sont centralisées en un seul endroit, et non sur plusieurs services. Pour aller plus loin, Je vous présente les avantages et inconvénients des différentes méthodes dans cet article.

Combien ça coûte ?

Oui Eagle est payant mais pour seulement 30$ et avec le temps que ça nous fait gagner, ça les vaut largement, et c’est un paiement en une seule fois avec toutes les mises à jour à venir sans frais supplémentaires. De plus, vous pouvez utiliser votre licence sur deux machines en simultané.

C’est nouveau : Eagle Community

Récemment, avec Eagle 3.0, ils ont sorti de nombreuses améliorations dont l’une des plus importantes est Eagle Community. Accessible en ligne ou directement depuis Eagle, vous pourrez découvrir et directement télécharger dans votre librairie Eagle des packs d’illustrations, liens et autres assets en tout genre, par exemple ce pack d'icône 3D gratuit.

Il y a aussi une partie sur les outils classés par sections.

Parlons quand même des limitations

Alors oui Eagle c’est le top, mais pour que vous ailliez un panorama complet avant de l’utiliser, il faut quand même que je vous parle des principales limitations. Mais honnêtement, elles restent vraiment mineures par rapport aux bénéfices.

Uniquement pour Mac et Windows

Une des principales limitations est qu’il ne marche que sur ces systèmes, donc pas de tablettes ou de smartphones.

Pas de solution de cloud propre à Eagle

Pas vraiment un défaut pour moi mais c’est à vous de mettre en place une utilisation du cloud. Même si vous pouvez tout à fait utiliser Eagle en local, c’est conseillé pour ne pas perdre vos fichiers en cas de crash de votre disque dur et si vous souhaitez utiliser Eagle sur une autre de vos machines. C’est-à-dire qu’Eagle enregistre tous vos fichiers dans un dossier (appelé “librairie”), et c’est ce dernier que vous devrez mettre dans votre solution de cloud (Google Drive, Dropbox, iCloud etc.).

Cela dit, comme ils l'expliquent ici, c’est un choix de leur part qui se justifie par le fait que, développer une solution dans le cloud propre à Eagle demanderait beaucoup de temps et serait potentiellement source de problèmes pour les utilisateurs. Et surtout, cela les rendrait plus chers voire les obligerait à mettre en place un système d’abonnement, donc personnellement, je préfère qu’ils aient fait ce choix.

Partage de librairie

Un autre point à mentionner, concerne le fait de partager une librairie Eagle entre plusieurs designers, il peut y avoir des conflits quand plusieurs personnes modifient une librairie en même temps. C’est pour cela qu’il est mieux adapté à une utilisation en solo.

Une architecture de librairie propre à Eagle

Et enfin, gardez en tête que les dossiers de librairies créés par Eagle sont uniquement lisibles par ce dernier. Donc si l’entreprise ferme et que le logiciel ne marche plus, ça pourra être problématique. Cela dit, même dans ce cas, il y a de fortes chances qu’ils rendent l’outil gratuit, voire open source et qu’il continue ainsi à fonctionner.

Également, quand vous importez un fichier dans Eagle, par exemple une police, il est alors dupliqué dans la librairie Eagle, même si le fichier est déjà dans un dossier à vous sur votre machine. Ce n’est pas vraiment un défaut car cela permet à Eagle d’être plus optimisé, plus d'infos ici.

Comment j’utilise Eagle pour l’UI Design

Maintenant que nous avons fait les présentations et que vous êtes plus familier avec Eagle, voici un tutoriel en six étapes sur comment je l’ai configuré et l’utilise au quotidien dans le cadre spécifique de l’UI Design. Notez qu’avec le temps, après avoir testé plusieurs manières de faire, je pense que je suis arrivé à la plus optimale.

En résumé, les six étapes sont :

• 1. Mise en place
• 2. Enregistrer des inspirations
• 3. Prendre un moment pour trier
• 4. Retrouver des inspirations
• 5. Visualiser les inspirations
• 6. Regrouper des inspirations par projet

Attention, c’est bien sûr une utilisation adaptée pour moi, mais Eagle est puissant et offre beaucoup de souplesse dans son utilisation, c’est-à-dire qu’il y a plusieurs façons d’arriver à un même résultat, à vous de voir donc en fonction de vos besoins et préférences.

Structure de dossier déjà faite

Avant de commencer, j’ai mis en ligne sur Eagle Community un pack avec tous mes dossiers (sans les inspirations) pour vous faciliter la tâche au lieu de partir de zéro :

C’est un fichier .eaglepack et en l’ouvrant (du moment que vous d’abord avez installé Eagle est créé une librairie), cela importera un nouveau dossier “UI” dans Eagle avec toute ma structure de dossier, que je présente dans le point suivant “Création des dossiers”.

1. Mise en place

Installation

Téléchargez la version pour votre système depuis leur page d'accueil. Vous pouvez l’installer et l’utiliser gratuitement pendant 30 jours.

Première librairie

Une fois installé, Eagle vous invitera à créer votre première librairie. Dans mon cas, c’était “inspirations”, c’est celles dont je me sers le plus et comme son nom l’indique, là où je garde toutes mes inspirations. J’utilise aussi une autre “resources” dont nous parlerons après.

Puis, il vous faudra indiquer où la sauvegarder, dans mon cas je l’ai mis dans le cloud car j’utilise Eagle sur deux machines (travail et maison). Notez que vous pouvez d’abord la mettre en local et plus tard, si vous changez d’avis pour le cloud, la déplacer dessus. Eagle vous demandera alors de lui indiquer le nouvel emplacement de la librairie.

Paramétrages

Vous pouvez changer la configuration selon vos besoins dans les préférences (Eagle > Preferences). Personnellement, j’ai juste réglé le thème en auto dans “General”, mis le comportement du défilement de la souris sur “Vertical Scroll” dans “Viewer” et laissé le reste sur les choix par défaut.

Installation du plugin navigateur

Une fois Eagle installé et configuré, il vous faut installer le plugin pour votre navigateur.

Il vous permet de sauvegarder des images en particulier et une partie ou un site en entier ainsi que simplement son URL.

Création des dossiers

Dans mon processus, les dossiers sont des collections classées par thèmes. Voici un aperçu de ce à quoi ça ressemble :

Vous pouvez noter que je n’ai pas que des inspirations d’UI Design, je pense en effet qu’il est important d’également trouver l’inspiration dans d’autres domaines, bien que le dossier “UI” soit celui qui en contient le plus. J’aurais pu d’ailleurs faire deux librairies, pour avoir les inspirations d’UI séparées, mais je préfère avoir tout sous la main.

Pour créer un dossier, ça se passe ici :

Vous pouvez aussi voir que j’ai attribué des couleurs et icônes à chaque collection pour mieux les distinguer. Pour cela, un simple clic droit vous donnera accès aux paramètres (vous pouvez sélectionner plusieurs sous-dossiers en même temps)

Donc, j’ai plusieurs collections mais attardons-nous sur la structure du dossier “UI”, car c’est celui dont je me sers le plus.

À l’intérieur de celui-ci, j’ai créé trois dossiers principaux qui suivent un ordre logique d’UI Design (chaque partie se compose d’éléments de la précédente) :

• Components > Templates > Flows

Si vous ne l’avez pas encore, je vous conseille de télécharger mon pack avec tous mes dossiers d'UI, ainsi, vous n’aurez pas à tous les créer manuellement.

Voyons le contenu de chacun d’entre eux :

1 - Components

Ici, je regroupe tous les éléments de base des interfaces, on retrouve donc des inspirations de boutons, bannières, overlays, formulaires, footers, etc.

2 - Templates

Les templates sont des pages et des écrans communs à plusieurs sites ou apps, par exemple une page 404, article de blog, page des prix, page de stats, etc.

3 - Flows

C’est un dossier que j’ai ajouté récemment, les flows sont des actions concrètes comme “ajouter au panier” ou “créer un compte”. Ils sont donc basés sur des templates, par exemple, l’action “ajouter au panier” se compose d’un template “page produit” et de “page panier”, voire d’une modale après l’ajout pour confirmer l’action. Ce dossier se compose, logiquement, de captures vidéos.

Certains dossiers peuvent avoir le même nom

Par exemple, j’ai un dossier “Shopping carts” dans “1 - Components” et un autre dans “2 - Templates”, leurs différences et que dans les composants, ce seront des inpirations de paniers d’achats utilisés dans des template (comme un overlay) et dans les templates, ce sera une page entière dédiée au panier d’achat. Vous pouvez voir un exemple dans le pack des dossiers si vous l’avez téléchargé.

Cette notation n’est pas universelle

En effet, chaque personne peut l’adapter en fonction de ses préférences et du contexte, qu’on soit par exemple sur Figma, dans une documentation de design system, un framework de code, etc.

Par exemple, Mobbin regroupe dans “elements” ce que moi j’appelle les composants, mais au final, ça reste de la sémantique et peu importent les termes que vous utilisez, du moment qu’ils restent cohérents pour un projet dans le temps et que tous ceux qui travaillent dessus utilisent les mêmes alors c’est bon.

Pour l’utilisateur final, que votre header s’appelle en interne “element”, “componant” ou “section” ne changera rien pour lui.

Attention au syndrome du collectionneur

Capturer des milliers d’inspirations, les classifier selon des niveaux extrêmement précis, pour finalement ne jamais s’en servir peut vite devenir une perte de temps.

Il ne faut pas perdre de vue notre but, qui n’est pas de créer la plus belle est précise des collections d’inspirations, mais bien de nous aider dans notre travail de design.

Il pourrait en effet être tentant de faire encore plus de niveaux de classifications dans les composants, on pourrait les séparer entre ceux de base (ceux qu’on ne peut pas diviser en d’autres composants comme un champ de texte), ceux qui ont plusieurs sous-composants de base comme un header, ou encore, ceux purement structurels comme les overlays (qui peuvent quasiment contenir n’importe quel composant).

Rien ne vous empêche de le faire bien sûr, et c’est même ce que je faisais avant. Mais j’ai finalement simplifié car ça ne m’aidait pas vraiment, au contraire, quand j’ajoutais des nouveaux sous-dossiers dans les composants, je devais passer du temps à réfléchir où le mettre, et parfois ça apportait un nouveau niveau de classification, m’obligeant à réorganiser d’autres dossiers…

Donc je prèfere vous mettre en garde car je suis passé par là et j’ai vu comment ça pouvait vite devenir chronophage ⏳ .

Nous verrons dans le point 4 ci-dessous comment je retrouve des inspirations, et vous verrez que cette organisation marche bien.

Création des tags

Donc, les dossiers sont des collections mais Eagle offre en plus la possibilité d’attribuer des tags à nos inspirations. Dans mon cas, je m’en sers en tant qu’attributs.

Notez que si vous avez téléchargé le pack mentionné au point précédent, je n’ai pas pu mettre les tags groupés par dossier dedans, ce sera donc à vous de les créer.

Pour créer des nouveaux tags, ça se passe en sélectionnant une inspiration puis depuis le panneau de droite (ou en appuyant sur “T”). À partir de là, vous pouvez commencer à taper le nom de vos tags, Eagle les créera s’ils n’existent pas. Vous pouvez ensuite les retrouver dans l’onglet “All Tags” (raccourci ⌘+6 ou Ctrl + 6) :

Vous pouvez voir que je les ai groupés en cinq parties avec une couleur pour chacun, nous verrons après, au moment de retrouver des inspirations, pourquoi c’est utile.

Voyons le rôle de chaque groupe :

Supports

Comme le nom l’indique, pour indiquer un support. Par exemple une illustration peut être sur un livre, un flyer, une carte de visite, ou une inspiration d’UI sur un écran mobile, desktop ou tablette.

Categories

Ici, j’ai les tags pour les domaines, par exemple un header d’un site web dans la catégorie du “E-commerce” aurait ce tag.

Topics

Des fois, j’aime attribuer un thème à une inspiration, par exemple une illustration marrante avec “Funny” ou des inspirations avec des personnages avec “Character”.

States

C’est un groupe que j’ai récemment créé, ils me servent pour décrire un état d’un composant ou un template, par exemple, ça pourrait être utile si j’ai une inspiration de dashboard mais qui est vide car le compte vient d’être créé, de lui attribuer le tag “Empty” ou le même dashboard avec des éléments mais en train de charger avec le tag “Loading”.

Styles

Dans ce groupe, on retrouve des aspects visuels que je donne à des inspirations telles que “3D”, “Minimalist”, “Retro”, etc. Par exemple, une bannière avec un dégradé sympa et une illustration en 3D aurait les tags “3D” et “Gradient”.

Dossiers ou tags ?

La question peut se poser car les deux peuvent être utilisés quasiment de la même façon. J’ai testé plusieurs moyens, par exemple à un moment je n’utilisais que des dossiers mais avec le temps je suis arrivé à cette utilisation des deux, surtout quand je cherche parmi ma base d’inspirations, nous verrons ça au point 4.

2. Enregistrer des inspirations

Allons par exemple sur Dribbble, avec le plugin, vous avez plusieurs moyens d’enregistrer une image, ma préférée est de faire simplement clic droit en maintenant la touche ⌥ (Alt) sur l’image en question. Vous la retrouvez alors dans Eagle sur “Uncategorized”.

Ensuite, admettons qu’un composant d’un site vous plaise, par exemple cette bannière :

Pour faire une image seulement de cette partie, j’utilise la fonction “Capture Area” du plugin avec ⌥+2 (Alt + 2) et Eagle ajoute même à la capture l’URL du site automatiquement :

Astuce : avec le mode “Capture Area”, vous pouvez maintenir ⌘ (Ctrl) et en survolant des composants, Eagle sera assez malin pour les présélectionner. Plus d'infos.

Notez que vous pouvez aussi enregistrer des captures en dehors de votre navigateur, en effet, quand Eagle est ouvert, vous avez une icône de ce dernier dans la barre de menu de macOS en haut à droite avec les options de captures (raccourci ⌥+⌘+E ou Alt + Ctrl + E pour capturer une partie de votre écran). Mais attention, contrairement au plugin du navigateur, vous n’aurez pas l’URL du site.

Et enfin, pour simplement sauvegarder un lien vers un site, comme un gestionnaire de favoris, je me sers de “Save URL to Eagle” ou ⌥+0 (Alt + 0). Notez que dans ce cas, vous pourrez même naviguer sur le site enregistré depuis Eagle qui intègre un navigateur.

Ce sont les trois fonctions de sauvegardes que j’utilise le plus mais vous en avez d’autres que vous pouvez découvrir sur cette page, notamment le drag and drop qui vous permet de mettre vos inspirations directement dans un dossier sans passer par la case “Uncategorized”.

Astuce : capturer un enregistrement vidéo

Disons que par exemple, un effet animé vous plaît sur un site, comment le capturer en mouvement dans Eagle ? Le plugin ne permet pas (encore ?) de faire cela. Mais heureusement, macOS et Windows ont chacun une application native pour capturer une vidéo de votre écran, voici comment je m’en sers sur Mac :

Disons que l’effet sur le header de ce site me plaît et que je souhaite le capturer pour plus tard :

Je vais alors faire ⌘+⇧+5 et définir une zone d’enregistrement puis filmer un instant le site.

Ensuite je vais mettre la vidéo générée dans Eagle sans oublier de copier-coller l’URL du site dans les infos de la vidéo importée du panneau à droite (c’est toujours mieux si on veut revoir l’effet à la source ou simplement retrouver le site d’origine).

3. Prendre un moment pour trier

Bien souvent, mon utilisation d’Eagle se fait en deux temps :

1. Enregistrer des inspirations dans l’onglet “Uncategorized” sans les trier.
2. Prendre un moment une fois par semaine pour observer les inspirations capturées afin de les taguer et les ranger dans un, ou plusieurs dossiers.

En faisant ainsi, j’évite d’interrompre ce sur quoi je suis en train de travailler, car bien souvent, je tombe sur des inspirations alors que je suis plongé dans un projet de design, du coup, je me réserve un moment dans la semaine pour trier toutes les inspirations enregistrées. En faisant ainsi, je “digère” mieux les inspirations, la première fois que je les vois, puis une deuxième fois où je les observe plus en détail pour les catégoriser.

Voici les étapes que je suis au moment de trier :

Attribuer des tags

D’abord je me rends dans l’onglet “Uncategorized” (raccourci ⌘+2 ou Ctrl + 2), prends une inspiration puis, avant de l’envoyer vers un dossier, je vais lui attribuer un ou plusieurs tags (avec le raccourci “T”).

Notez que vous pouvez également attribuer des tags à plusieurs inspirations en même temps si vous les sélectionnez ensemble avant.

Envoyer dans un ou plusieurs dossiers

Une fois les tags ajoutés, il est temps d’envoyer l’inspiration vers un(des) dossier(s).

Pour cela, je fais ⌘+⇧+J (Ctrl + Shift + J) pour sélectionner le ou les dossiers dans lesquels l’inspiration va aller (je me déplace avec les flèches et appuis sur entrée plutôt qu’à la souris) puis je fais ⌘+⏎ (Ctrl + Entrée) pour envoyer.

Vous pouvez aussi attribuer des dossiers à votre inspiration depuis le panneau de droite et dans ce cas ils sont appelés “category”, mais c’est juste de la sémantique.

Et comme les tags, vous pouvez attribuer des dossiers à plusieurs inspirations en même temps.

Une inspiration peut avoir plusieurs dossiers

Si par exemple une illustration est sur un écran de login, est qu’elle me plaît autant que l’écran en lui-même, je peux dans ce cas, attribuer deux dossiers à cette inspiration, “Illustration” et “UI > 2 - Templates > Logins and signups”.

Un autre exemple, avec un composant de témoignage constitué d’un carrousel, je vais l’envoyer dans “UI > 1 - Componants > Testimonials” et “UI > 1 - Componants > Carousels”. Nous verrons dans la partie 4 pourquoi c’est utile de faire ça.

C’est là une des forces d’Eagle : sa souplesse. Ainsi, une inspiration peu être dans autant de dossiers que vous voulez, et du fait de la façon dont Eagle gère les librairies, elle ne sera pas dupliquée.

Utiliser la notation, les notes et les commentaires

Ce ne sont pas des fonctionnalités dont je me sers souvent mais elles peuvent être pratiques pour ajouter des niveaux de classifications en plus.

Évaluations et notes

Vous pouvez donner une évaluation de 0 à 5 étoiles à vos inspirations ainsi qu’une note de texte. Pour l’évaluation, à première vue on peut se dire pourquoi le faire sur des inspirations que l’on garde ? En effet, si on les a enregistrés c’est qu’on les aime et donc a priori elles ont toutes 5 étoiles ! Certes, mais il existe un cas pour moi où elles sont utiles, dans le cas où j’évaluerais non pas la qualité d’une inspiration mais sa difficulté, soit 5 étoiles = difficile techniquement.

Par exemple, si je design un header pour un site et recherche parmi mes inspirations, je peux avoir envie de ne pas afficher les headers trop compliqués techniquement car je sais que je n’aurai pas les temps de faire quelque chose de similaire.

Commentaires

Je m’en sers rarement, mais vous pouvez commenter plus en détail vos inspirations. Ce sera utile après, au moment de les rechercher car Eagle vous permet de filtrer en fonction des commentaires (ainsi que les évaluations et les notes d’ailleurs). Pour cela, une fois votre inspiration ouverte sur Eagle, vous pouvez passer en mode commentaire avec la touche “C”.

4. Retrouver des inspirations

Maintenant que nos inspirations sont taguées et rangées dans des dossiers, c’est là où la magie d’Eagle rentre entre en jeu 🤩. Même si ça peut paraître un peu long et fastidieux, tout ce que nous avons fait avant va nous permettre, avec les outils de recherche d’Eagle, d’afficher facilement et rapidement ce que l’on recherche dans notre base de données, et croyez-moi, c’est vraiment pratique quand on travaille sur un projet et que nous avons besoin d’obtenir rapidement des inspirations spécifiques. Il y a plusieurs approches, voici mes préférées :

Depuis l’onglet “All”

Comme son nom l’indique, ici Eagle vous affiche toutes vos inspirations, classées par ordre d’ajout. Vous pouvez d’ailleurs changer le paramètre de classement ici :

Donc, à partir de cet écran, si vous n’avez pas la barre de filtre affichée, faite ⌘+⇧+F (Ctrl + Shift + F) et vous devriez avoir ça :

Vous pouvez avec celle-ci, par exemple dire à Eagle d’afficher seulement les inspirations dans le style 3D (raccourci ⌥+T ou Alt + T pour ouvrir les tags), ou encore en ajoutant le filtre “Types : gif, video” pour voir uniquement des inspirations 3D en mouvement, et on pourrait même filtrer pour afficher seulement celles qui viennent du site Dribbble par exemple :

C’est là que le fait d’avoir groupé les tags nous aide, car ils sont aussi utilisés dans cette barre. Un autre exemple, je pourrais afficher toutes les inspirations sur desktop avec le tag “Desktop”, dans la catégorie “Finance” avec le style “Dark”.

Attention à bien choisir le mode “All” pour afficher seulement les inspirations qui ont tous les tags et non un ou plusieurs :

Astuce : vous pouvez sauvegarder des filtrages dont vous vous servez souvent, pour cela, une fois vos filtres réglés, vous avez l’option de les enregistrer pour pouvoir les remettre en un clic :

Il y a également la fonction de recherche en haut à droite, dans ce cas Eagle recherchera des occurrences de ce texte dans les titres, notes, commentaire, tags, URL, etc. des inspirations.

Depuis un dossier précis

C’est le moyen dont je me sers le plus. Certes, on peut arriver à la même chose depuis l’onglet “All” vu qu’on peut filtrer aussi par dossier, mais c’est plus direct ainsi.

Pour cela, je me sers souvent du raccourci ⌘+J (Ctrl + J) qui est similaire à Spotlight sur macOS (et qui permet entre autres, de naviguer aussi dans les tags en appuyant sur Tab).

Notez que vous pouvez utiliser le raccourci “/” pour dérouler/fermer tous les dossiers rapidement.

Une fois dans un dossier, j’ai toujours la barre de filtre en haut, sauf que dans ce cas, que ce soit pour les tags ou les dossiers, Eagle ne m’affiche que ceux présents dans ce dossier.

De la même manière, vous pouvez aussi aller sur un dossier de “haut niveau”, par exemple je peux aller dans le dossier “UI” et appliquer des filtres. Par contre, attention à bien cocher la case “Show subfolder contents” en haut à droite.

C’est là qu’avoir mis des inspirations dans plusieurs dossiers peut m’aider à mieux les retrouver. Par exemple si je veux des inspirations de témoignages qui utilisent un carrousel, il me suffit d’aller dans “UI > 1 - Components > Testimonials” et de filtrer par dossier “Carousel” dans la barre du haut :

Mais si maintenant je veux voir des inspirations de carrousels, peu importe qu’ils soient dans une section de témoignages ou une autre, j’ai juste à me rendre dans le dossier “UI > 1 - Components > Carousels” pour tous les voir.

5. Visualiser les inspirations

Une fois les inspirations voulues affichées, vous avez plusieurs options de visualisations, Vous avez par exemple quatre modes d’affichages :

Une fois un mode choisi, vous pouvez zoomer ou dézoomer avec les touches - et + de votre clavier.

Vous pouvez aussi appuyer sur la touche Tab pour masquer les barres latérales. Ensuite, pour visualiser une inspiration en plus grand, vous avez trois options : l’ouvrir avec un double-clic, rester appuyé sur Z au survol ou sur mac, appuyer sur la barre d’espace.

Vous pouvez aussi, mais je m’en sers rarement, ouvrir le fichier avec l’application par défaut avec ⇧+⏎ ou en faisant clic droit, vous avez plus de choix d’applications avec “Open With”.

Si vous avez enregistré une inspiration depuis le web avec le plugin, alors Eagle a automatiquement enregistré l’URL de sa source, vous pouvez l’ouvrir dans votre navigateur avec le raccourci ⌘+⇧+O (Ctrl + Shift + O).

6. Regrouper des inspirations par projet

Dernier point de ce tutoriel, voici mon approche pour faire des moodboards d’inspirations groupées par projet.

J’ai un dossier dédié à ça qui s’appelle tout simplement “Projects” et à l’intérieur, je vais créer un nouveau dossier pour chaque projet que je démarre. Ensuite, durant l’étape précédente de recherches d’inspirations, si une inspiration me plaît et que je souhaite m’en inspirer pour mon projet en cours, je vais l’envoyer dans le dossier de celui-ci (Eagle la laisse dans son dossier d’origine) toujours avec ⌘+⇧+J (Ctrl + Shift + J).

Exemple avec les inspirations pour le design de mon blog :

J’ai également ajouté ce dossier dans les “Quick Access” pour l’avoir toujours en haut dans la barre de gauche, pour cela, c’est en faisant clic droit sur le dossier que vous souhaitez épingler.

Pour aller plus loin

Nous avons vu les fonctionnalités que j’utilise principalement, mais Eagle en a beaucoup d’autres toutes aussi puissantes 🚀, voyons ça :

Utiliser d’autres librairies

Vous n’êtes pas limité à une librairie, vous pouvez en créer plusieurs. Pour cela, vous pouvez faire ⌘+L (Ctrl + L) pour afficher l’outil de gestion des librairies.

Personnellement, je me sers d’une autre pour les ressources. Je ne vais pas la présenter plus en détail ici car sa structure est quasi identique à celle de mon livre gratuit sur les meilleures ressources d'UX/UI Design. Cela dit, contrairement à la librairie des inspirations, je ne me sers pas des tags car c’est plus un gestionnaire de liens que d’inspirations, donc seulement des dossiers c’est suffisant.

Les smart folders

Ce sont des dossiers spéciaux et dynamiques qui ne contiennent pas des fichiers mais en affichent en fonction de filtres. Je m’en sers peu, mais peut-être que dans votre cas ça vous sera utile.

Par exemple, on pourrait imaginer un smart folder qui afficherait toutes les inspirations provenant de Dribbble, ou pour aller plus loin, afficher en plus seulement celles ajoutées dans les 30 derniers jours et qui sont du design mobile. Pour cela, dans le panneau de gauche, créez un nouveau smart folder avec les filtres suivant :

Eagle comme gestionnaire d’assets

Au-delà des inspirations, Eagle peut gérer un grand nombre de types de fichiers, entre autres, des SVG, fontes ou encore, des fichiers audios.

Icônes

Les icônes sont des assets très utilisés en UI Design et Eagle peut vous permettre de les gérer. Ce n’est pas une fonctionnalité que j’utilise personnellement car je préfère utiliser des plugins comme Icons8 ou Material Symbols et une librairie Figma pour des icônes faits sur mesures, mais peut-être que dans votre cas Eagle vous conviendra mieux, notamment avec Eagle Community où vous pourrez trouver des packs d’icônes gratuits et directement les intégrer dans votre librairie Eagle, après quoi, vous pourrez les copier-coller d’Eagle dans votre outil de design.

Images et vidéos

Dans la continuité des icônes, vous pouvez bien sûr aussi gérer des assets photos, illustrations et des vidéos dont vous vous servez souvent dans vos designs.

Fontes

Eagle va plus loin avec ce type de fichier car non seulement vous pouvez les mettre dans Eagle, mais en plus, vous pouvez les activer directement depuis lui. C’est-à-dire, que si une fonte ne l’est pas, c’est comme si elle n’était pas installée sur votre machine. Je ne m’en sers pas car j’en utilise peu mais ça peut être pratique si par exemple, vous en avez des centaines mais que vous utilisez que pour certains projets ciblés ou que simplement, vous préférez les rechercher avec Eagle que l’outil de votre système comme Font Book sur macOS. Plus d'infos ici.

Notez que par défaut, Eagle ne propose pas le filtre “Font” dans la barre de filtre, pour l’activer, ça se passe dans les paramètres.

Autres astuces

Je liste ici quelques fonctionnalités qui pourraient être pratiques dans certains cas.

Filtrer par couleur

Vous pouvez indiquer une couleur dans la barre des filtres et Eagle se chargera de filtrer les inspirations qui ont une couleur dominante qui s’en rapproche.

Recadrer une image

Eagle a également certaines fonctionnalités que l’on retrouverait dans un logiciel de retouche d’images. Une fois l’image ouverte sur Eagle, vous avez cette barre d’outils en haut à droite qui vous permet de la recadrer :

Convertir et réduire le poids des images

Dans la continuité du point précédent, Eagle vous permet même de convertir et compresser des images (pas les vidéos encore). Par exemple, vous pouvez convertir un JPG en WebP en réduisant la qualité voire la taille pour avoir un fichier beaucoup plus léger. Pour cela, sélectionnez votre image puis faites ⇧+E (ou le bouton “Export” dans la barre de droite).

Auto tagging

Vous pouvez paramétrer vos dossiers pour qu’Eagle attribue automatiquement un ou plusieurs tags à tout ce vous mettrez dedans. Pour cela, faites un clic droit sur votre dossier pour y accéder ou utilisez ⌘+⇧+R (Ctrl + Shift + R).

Actions

Une action est une suite de tâche que vous pouvez répéter en un clic, par exemple, ajouter plusieurs tags et déplacer une inspiration dans un dossier, utile si vous devez faire souvent les mêmes manipulations. Pour y accéder, c’est en haut à droite ou avec la touche “G”.

Filtrer les dossiers

Si comme moi vous avez beaucoup de dossiers, une fonctionnalité qu’on ne remarque pas forcément, et le fait de pouvoir filtrer l’affichage de ces derniers dans la barre de gauche, avec le champ de filtre en bas de cette même barre.

Bouger un fichier d’une librairie à une autre

Vous pouvez facilement déplacer un ou plusieurs fichiers vers une autre librairie, pour cela, une fois le ou les fichiers sélectionnés, en faisant clic droit, vous aurez l’action “Add to Other Library”.

Naviguer sur un site depuis Eagle

Si vous avez sauvegardé une URL avec le plugin Eagle (⌥+0, Alt + 0), vous pourrez naviguer sur ce site directement depuis Eagle, et ça marche aussi pour les vidéos comme YouTube. Une fois l’URL sauvegardée sur Eagle, un simple double-clic dessus l’ouvrira dans le navigateur d’Eagle.

Recherche par image sur Google

Vous le savez sans doute, mais Google permet de faire des recherches d’images inversées. Si par exemple vous voulez voir des images similaires à partir d’une que vous avez dans Eagle, vous pouvez faire ⇧+G et Eagle se chargera de lancer la requête sur Google (vous avez aussi d’autres choix comme Bing, pour cela, faite clic droit sur votre image puis “Reverse Image Search”).

Auto-import

Une fonctionnalité puissante mais un peu cachée, elle permet d’indiquer un dossier normal en dehors de votre librairie qu’Eagle surveillera et tous les fichiers que vous mettrez dedans seront alors automatiquement importés dans Eagle. Pour le configurer, ça se passe dans les paramètres :

Mode niveau de gris

Un mode qui peut s’avérer utile si vous souhaitez regarder des images en fonction de leurs contrastes et luminosité sans être “perturbé” par leurs couleurs. Le raccourci pour cela est ⌥+⌘+G (Ctrl + Alt + G).

Pour aller plus loin 🦅

Avec cet article, je vous ai présenté tous les points qui selon moi, sont les plus essentiels pour utiliser Eagle de manière optimale, mais si vous souhaitez aller plus loin, je vous conseille de consulter la documentation officielle d'Eagle.

Bonus : où trouver des inspirations ?

Il existe beaucoup de sources pour trouver des inspirations mais tous ne se valent pas, parmi mes favoris vous avez :

• Mobbin - Très utile pour trouver des designs de véritables apps mobiles, pour iOS et Android et classées selon plusieurs critères.
• Behance - Un classique qui existe depuis 2005. De nombreux projets réels dans tous les domaines créatifs digitaux.
• Dribbble - Plus récent (2010) mais aussi connu que Behance, a plus tendance à montrer des concepts fictifs mais de plus en plus on y voit aussi des projets réels.
• Awwwards - Un site très connu qui note le design de nombreux sites selon des critères comme la créativité, l’usabilité et le contenu.
• Page Flows - Une mine d’or où de très nombreux userflow de produits existants sont présentés en vidéo, c’est payant mais certains sont gratuits.
• Muzli Magazine - Un blog de qualité mélangeant des articles sur l’UX/UI Design et des collections de designs sélectionnés.

Pour en savoir plus, j’ai rédigé un livre gratuit où je liste toutes mes ressources préférées d’UX/UI Design, des meilleurs outils aux meilleures sources d’assets et plus comme où trouver un travail dans ce domaine.

Doko Zero
UI Designer avec des compétences en UX et développement web