Share
Au fil des ans, j'ai développé des méthodes et des astuces pour améliorer ma productivité et la cohérence de mon travail. Ce didacticiel explique comment intégrer la pensée modulaire dans votre flux de travail, lors de la création d’UI souples et légères avec Adobe Illustrator CS5 (ou une version ultérieure), ainsi que de quelques ressources gratuites. Commençons.
Gridcalculator.dk offre les options dont vous avez besoin pour créer facilement une grille flexible. Cela peut vous faire gagner du temps sur les expériences et les calculs.
Les grilles doivent être séparées des objets pour que vous puissiez basculer indépendamment leur visibilité et les réutiliser lors de la conception de plusieurs pages ou écrans..
Placez vos guides comme couches supérieures de votre document, surtout votre contenu.
Si votre grille comporte plusieurs colonnes, il est préférable de les séparer en couches indépendantes, sinon elle risque d'être trop encombrée. Certaines pages peuvent nécessiter quatre colonnes, d’autres deux. Cela vous permet de gérer la visibilité de la grille en fonction de vos besoins..
L'utilisation d'un navigateur entièrement évolutif sera utile pour exporter des images haute résolution et créer des conceptions réactives..
Placez votre (vos) navigateur (s) sous toutes les couches de contenu..
Remarque: Dans les pièces jointes de ce didacticiel, vous pouvez télécharger ma configuration responsive d’Illustrator, qui inclut les versions vectorielles de Chrome Desktop et de Safari Mobile..
Personnalisation Espaces de travail (Fenêtre> Espace de travail) pour répondre à vos besoins personnels ou à ceux de votre projet est crucial pour votre flux de travail. Je connais les outils que j'utilise le plus souvent, alors fermer / ouvrir des panneaux et déplacer des fenêtres est ennuyeux et improductif. Je travaille actuellement avec trois espaces de travail en fonction de la taille de l'écran:
L’utilisation d’espaces de travail est vraiment pratique: je peux facilement rétablir les paramètres par défaut de l’interface en cliquant sur Réinitialiser (nom de votre Artboard).
Lorsque vous créez un nouveau document, laissez le Aligner de nouveaux objets sur la grille de pixels décoché. Oui, décoché.
Si vous cochez cette option, certains éléments de l'interface utilisateur, tels que le texte décrit (développé), seront déformés et vous ne pourrez pas dessiner librement des formes lorsque vos points s'aligneront constamment sur la grille de pixels..
Vous devez choisir quels objets doivent être alignés au pixel en sélectionnant le Aligner sur la grille de pixels option du Transformer panneau.
Remarque: Une fois que vous appliquez Aligner sur la grille de pixels Pour un objet, il n'y a aucun moyen de rétablir l'objet "non aligné" à l'état d'origine. Décocher cette case ne vous sauvera pas.
Lorsque vous effectuez un zoom supérieur à 100%, vous pouvez réellement voir les pixels comme si vous travailliez avec une image bitmap. Activez-le en allant à Affichage> Aperçu des pixels. Cela vous permettra de repérer quels pixels pourraient causer des contours flous afin de pouvoir les corriger à la volée..
Remarque: La grille de pixels est sensible à l'origine de la règle (0,0). Déplacer l'origine de la règle changera la manière dont Illustrator «rasterise» les illustrations. Assurez-vous également que les coordonnées X et Y de votre objet sont arrondies..
Illustrator dispose de fonctionnalités mathématiques de base pour ajuster les objets dans les panneaux et les boîtes de dialogue. Ceci est utile lorsque vous souhaitez ajouter des valeurs (+), soustraire (-), diviser (/) ou multiplier (*). Ces opérations peuvent être utilisées dans des objets, des traits, de la transparence et dans beaucoup d'autres choses..
Malheureusement, vous ne pouvez effectuer qu'une opération à la fois. Quelque chose comme «260/3 * 2» n'est pas possible.
Généralement, le même composant d'interface utilisateur est utilisé à maintes reprises, ne modifiant que sa taille et sa couleur. Pensez modulaire, planifiez à l’avance et construisez des composants non destructifs pouvant être facilement recyclés. Évitez de vérifier chaque écran pour voir si vous avez oublié de mettre à jour un élément. Les symboles peuvent être très puissants quand ils sont bien sortis.
Chaque fois que vous modifiez le symbole d'origine, ces modifications sont immédiatement répercutées dans toutes les instances présentes dans votre document. Ceci est particulièrement utile pour les régions récurrentes, telles que les boutons, les pieds de page, les éléments de pagination, la navigation, les arrière-plans, etc..
Vous pouvez même utiliser des symboles à l'intérieur de symboles ("combos"). Cela vous fait gagner du temps et garantit la cohérence de l'interface utilisateur..
La mise à l'échelle en 9 découpes est une option d'un symbole avancé qui vous permet de définir les zones d'un symbole qui ne s'étireront pas lors de la modification de sa taille..
Si vous modifiez la largeur d'un symbole sans utiliser cette fonction, vous obtiendrez des formes déformées. Cela peut être particulièrement utile pour les boutons lorsque vous n'avez besoin que d'un segment de symbole pour être étiré..
Remarque: Vous pouvez activer la mise à l'échelle 9 dans un symbole à tout moment. Mais pour de meilleurs résultats, assurez-vous de cocher l'option 9-scaling lorsque vous créez le symbole pour la première fois..
Les attributs d'apparence n'affectent pas la structure sous-jacente d'un objet ou d'un groupe d'objets. Il est très utile d'utiliser des effets comme des coins arrondis ou des piles de couleurs qui peuvent être modifiées ou supprimées à tout moment..
Il existe un moyen de créer des boutons qui s’adaptent à la longueur de votre texte. C'est ainsi:
Jouer avec elle. Vous pouvez enregistrer cela en tant que Style graphique pour une utilisation future.
Remarque: Ceci n'est recommandé que pour l'encadrement car l'alignement des pixels est difficile avec cette méthode.
C'est l'une des fonctionnalités les plus sous-estimées, mais elle est très puissante. Chaque fois que vous modifiez une couleur globale, tous les objets utilisant cette nuance sont mis à jour. Vous pouvez affiner instantanément des dizaines d'objets.
Les groupes de couleurs permettent de gagner beaucoup de temps lorsque vous travaillez avec d’énormes palettes de couleurs ou avec plusieurs marques à la fois. Leur donner des noms clairs facilite la recherche et le travail dans le même fichier..
Si vous souhaitez expérimenter, vous pouvez télécharger des palettes et des palettes de couleurs à partir de sources telles que Kuler et Colourlovers. En outre, jouer avec le Recolorer l'illustration roue pour essayer différents thèmes de couleur: Édition> Éditer les couleurs> Recolorer l'illustration.
Les styles de caractère peuvent être appliqués à n’importe quelle quantité de texte: des gros morceaux aux mots simples. Ils sont plus flexibles et dominent les styles de paragraphe. Comme nous ne faisons pas d’impression, utilisez uniquement des styles de caractère pour vous assurer que votre typographie est cohérente..
Vous devez classer votre liste de styles de caractères par taille: du texte le plus petit au plus petit, par ordre de mise en forme: de haut en bas ou par ordre alphabétique. Cela vous aidera à maintenir une meilleure hiérarchie et à effectuer facilement une recherche dans votre liste..
Ajustez et réutilisez vos styles autant que possible pour éviter de créer trop d'exceptions. Cela simplifiera le développement et améliorera la cohérence.
Tout texte sans contexte ni pertinence par rapport au sujet ne vaut rien. Ne vous abstrez pas de la vraie expérience. “Lorem ipsum” vous donne une forme, mais cela ne vous donne pas de sens. Écrire votre propre copie pour les titres ou la navigation aide à expliquer leur utilisation et les informations précieuses qu’ils peuvent donner. Si votre site ou votre application nécessite la saisie de données, entrez des mots réels et pertinents. Tapez un vrai nom ou une ville.
Lorsque vous utilisez du texte réel, vous découvrez des problèmes qui pourraient autrement passer inaperçus: les colonnes sont trop larges / trop étroites, les champs doivent être plus grands / plus petits, certaines choses fonctionnent dans une langue mais ne fonctionnent pas dans d'autres, etc..
L’utilisation de données représentatives est un bon indicateur du produit final..
Avec Illustrator, vous n'êtes pas limité à une résolution spécifique. Dans un seul document et à l'aide de Artboards, vous pouvez simuler la manière dont une interface utilisateur doit répondre à différentes résolutions d'écran et les modifier simultanément à l'aide de Couleurs globales, Symboles et Styles de caractères. Même avec des dizaines d'écrans différents, le fichier restera petit et facile à gérer.
Nommez chaque Artboard en fonction de la taille du périphérique / de l'écran. Cela nommera automatiquement ces écrans lors de la sauvegarde. Je partagerai quelques astuces de sauvegarde et de nommage dans le didacticiel..
Remarque: Dans les pièces jointes de ce didacticiel, vous pouvez télécharger la configuration illustrator sensible ci-dessus..
Cela vous permet de voir à quoi ressemble une page dans chaque taille d'écran et d'exporter indépendamment tous les calques (pages) d'un Artboard (taille d'écran) sélectionné.
Le nettoyage est essentiel pour conserver vos fichiers en bon état et accélérer les performances. Pour cela, utilisez les options intégrées d'Illustrator..
Windows> Actions> Supprimer les éléments de panneau inutilisés
Cette action parcourt automatiquement chaque panneau, sélectionne les contenus qui ne sont pas utilisés, puis les supprime en quelques secondes..
Cette action par défaut n'inclut pas le nettoyage de vos styles de caractère inutilisés. Vous pouvez ajouter cette étape ou vous pouvez manuellement Sélectionner tout non utilisé, puis les jeter.
Si vous souhaitez vous débarrasser des points parasites, des objets non peints et des chemins de texte vides, voici comment:
Lorsque vous utilisez des calques, masquez tous les groupes ou objets de la liste. Options du panneau Calques. Voici à quoi cela devrait ressembler:
Nommez chaque couche avec un nom de page. Attribuez des numéros au nom de chaque couche pour qu'elle reste ordonnée lors de son exportation. L'utilisation de majuscules et de noms sans espacement les rend parfois faciles à lire.
Ces 59 calques / pages ne pèsent que 2,5 Mo (sans images intégrées), ce qui permet des performances élevées et des économies de temps très rapides..
Pour inclure des guides de style pour le développement dans vos fichiers, vous devez créer un «sous-calque» associé à chaque page / calque. Voici comment vous le faites:
Accentsconagua
GUIDE DE STYLE Ces guides resteront au-dessus de votre contenu et, comme ils sont positionnés dans une «sous-couche», vous pouvez facilement gérer leur visibilité..
Lorsque vous placez des images bitmap, ne pas intégrer les dans votre dossier. Choisir Lien au lieu.
Cela diminuera la taille de votre fichier, améliorera les performances de l’illustrateur et vous permettra d’éditer ces images séparément. Illustrator détecte automatiquement quand un fichier est mis à jour.
Si vous suivez toutes les étapes ci-dessus, vos fichiers doivent être légers. Toutefois, si vous cochez Créer un fichier compatible PDF lors de l’enregistrement, la taille du fichier en sera gonflée et le temps d’économie augmenté. Puisque nous ne traitons que les graphiques d’écran avec plusieurs couches et plans d’art, il n’ya aucun avantage réel à laisser cocher cette case..
Pour un meilleur contrôle des options d’exportation, téléchargez ce script Multi Exporter. Son utilisation est assez simple, mais jetez un œil à la documentation pour en tirer le meilleur parti.
La fragmentation de la taille et de la résolution des appareils rend l'exportation de biens mobiles très longue. Bien, les scripts peuvent aussi aider avec ça. Téléchargez ces scripts Illustrator pour la conception mobile.
Les actifs mobiles nécessitaient un nom de fichier spécifique en fonction du système d'exploitation. Pour respecter leurs conventions de dénomination, il est plus facile de créer des fichiers Illustrator séparés pour chaque système d'exploitation. Si certains actifs sont communs aux plates-formes sur lesquelles vous travaillez, créez un fichier nommé «commun» ou ce que vous préférez..
Dans les environnements Web et mobiles, la performance est essentielle et chaque octet compte. Illustrator ne disposant pas de l'optimisation PNG / JPG, utilisez donc ImageOptim (Mac OS X) après avoir exporté votre contenu..
Nous nous dirigeons vers un Web réactif et agile, où nos interfaces utilisateur doivent être insensibles à la densité de pixels et cohérentes pour de nombreuses tailles différentes. L'évolutivité infinie est inestimable et les vecteurs jouent un rôle important dans l'indépendance de la résolution..
Le flux de travail modulaire d'Illustrator va à l'encontre de l'échelle et du temps. C'est une option solide du point de vue de la productivité et de la flexibilité. Je m'en tiens à ça. Et vous?
