8 façons de concevoir des sites plus rapidement dans Photoshop
En tant que concepteur Web, il est difficile de rester organisé. Non seulement vous équilibrez plusieurs projets à la fois, mais vous êtes probablement confronté à des délais serrés et à des clients difficiles. Vous pouvez également rebondir de marque en marque et apprendre constamment de nouvelles lignes directrices et de nouveaux styles.
Heureusement, il existe de nombreuses façons de rendre votre flux de travail plus efficace. Pour vous aider, j'ai réuni ces huit conseils pour vous aider à rester sain d'esprit dans votre carrière en conception de sites Web.
1. Gardez vos fichiers organisés
Une des choses les plus faciles à faire pour garder votre santé mentale est de garder vos fichiers organisés. Créer et maintenir une structure de dossiers cohérente facilitera la recherche de vos fichiers. Des problèmes surviennent lorsque vous structurez un dossier différemment d'un autre, ce qui complique la recherche de ce fichier Final-Final-logo.ai .
Les conventions de dénomination cohérentes des fichiers sont essentielles lors de l’organisation de vos fichiers. C'est là qu'intervient la gestion des versions. Certains concepteurs utilisent des dates, d'autres utilisent des numéros de version et d'autres utilisent des tours. Cela dépendra de votre industrie et de vos préférences personnelles, mais c'est une bonne pratique. Grâce au contrôle de version, vous pouvez facilement suivre le fichier le plus récent, surtout si vous avez de vieilles versions enregistrées pour référence.
Je garde généralement deux à trois anciennes versions au cas où le client souhaite revenir à cette stratégie de héros de Round One, ou préfère votre traitement mobile à la deuxième ronde. Afin d'éviter la mentalité de raté, il est bon d'archiver ou de supprimer des fichiers plus anciens pour éviter que votre disque dur ne s'enlise.
Voici un exemple de structure que j'utilise chez Clearlink.
La combinaison d'une structure de dossiers cohérente et de conventions de dénomination avec gestion des versions facilitera également la recherche. Par exemple, si vous démarrez tous les noms de fichiers d'une marque portant le nom de marque ou l'abréviation, vous pouvez filtrer plus facilement les actifs de cette marque. Cela aidera à différencier "ATT-logo-final.ai" de ce qui pourrait être une mer de "logo-final.ai".
2. Comprendre votre cadre
Une chose que je n'ai pas apprise avant plusieurs années dans ma carrière de concepteur est de savoir comment utiliser correctement un cadre existant. Les deux gros frappeurs dans le monde du cadre sont actuellement Bootstrap et Fondation , mais Google Se concrétiser va sûrement leur donner une course pour leur argent dans un proche avenir. La société pour laquelle je travaille utilise Foundation pour la majorité de ses sites de marque.
Foundation est livré avec une grille réactive intégrée, ainsi que des styles pour les boutons, les champs, la typographie, la navigation, etc., entre autres choses pour vous faciliter la vie. En utilisant la grille intégrée de la Fondation dans vos PSD, il sera plus facile pour le développeur d’implémenter vos conceptions d’une manière plus parfaite que si vous agissiez vous-même. Photoshop possède cet outil de mise en page astucieux qui non seulement facilite la création de grilles, mais les associe également à l’art-board pour faciliter la restructuration et le déplacement des fichiers.
Capture d'écran de la Feuille de triche de fondation
Les cadres fournissent également un bon point de départ pour le style des boutons, les formulaires, etc. et aident à montrer les possibilités et les limites des stratégies de conception que vous pouvez implémenter. Non seulement cela vous donnera un excellent point de départ pour votre conception, mais cela contribuera également à favoriser une collaboration plus amicale avec votre développeur.
3. Organisez vos calques par section de contenu
Lorsque vous traitez avec des DSP de conception Web complexes avec autant de dossiers, de calques, d’objets intelligents, etc., il est facile de créer des problèmes. Une fois que la couche 2 455 arrive, vous commencez à vous rendre compte que vous avez besoin d’une sorte d’organisation au sein de votre PSD. C'est pourquoi je recommande d'organiser votre PSD par sections.
Les dossiers sont généralement composés de dossiers tels que Nav, Hero, Intro, Packages, Benefits, Footer, etc. Je colore également ces dossiers en mode arc-en-ciel, ce qui facilite leur navigation. Cela facilite la mise à jour des sections et la reprise de votre PSD.
J'organise mon fichier en dossiers de section codés en couleur arc-en-ciel pour une numérisation facile.
Par exemple, si vous devez agrandir la section des héros, vous pouvez facilement faire glisser tous les dossiers ci-dessous en une seule unité (commande maintenue), puis les faire glisser une fois la mise à jour effectuée. Cette stratégie aide également les développeurs et autres concepteurs à naviguer facilement dans votre fichier. En utilisant des noms compréhensibles comme "Hero" et "Nav", un nouveau concepteur peut facilement accéder au dossier et apporter les modifications nécessaires.
Certains concepteurs vont même jusqu'à nommer des calques individuels, ce qui peut être extrêmement bénéfique, mais peut prendre un peu de temps. Comme les calques sont faciles à trouver via l'outil de sélection automatique lorsqu'il est défini sur "Calque", il est facile d'accéder aux calques individuels de nos jours. Il appartient donc au concepteur individuel d'organiser ses calques. Le fait est que vous avez fini.
4. Mémorisez tous les raccourcis clavier que vous utilisez normalement
Celui-ci est un grand pour l'efficacité. Si vous utilisez régulièrement un raccourci clavier spécifique, mémorisez-le. Vous augmenterez votre efficacité de manière exponentielle si tous les raccourcis clavier principaux sont désactivés.
Parmi les plus importants, citons la sauvegarde, la taille de la police et le premier, l’ordre des calques, l’enregistrement pour le Web et l’opacité, entre autres. Photoshop vous permet également de créer des raccourcis personnalisés. Dans mon livre, la commande la plus importante à avoir mémorisée consiste à enregistrer votre fichier. En raison des pannes aléatoires d'Adobe, il est préférable d'épargner souvent plutôt que de risquer de perdre une partie de vos progrès.
Adobe vous permet de personnaliser vos raccourcis clavier sous Modifier> Raccourcis clavier
Les raccourcis sont également liés à l’organisation de vos calques en fonction des dossiers des sections de contenu (comme mentionné ci-dessus). Il est plus facile de placer des calques en haut et en bas d'un dossier en utilisant des raccourcis clavier que de réorganiser des calques dans un fichier non organisé. C'est là qu'intervient l'organisation de votre fichier au fur et à mesure de votre conception. La mémorisation des raccourcis clavier fréquemment utilisés et l'organisation de vos calques amélioreront considérablement votre efficacité et aideront les autres concepteurs à travailler avec vos fichiers.
5. Utiliser les bibliothèques CC
L'une des meilleures choses qu'Adobe a ajouté depuis la création de CC est constituée par les bibliothèques. Si vous n'avez pas entendu parler d'eux, vous devez vérifier cela tutoriel incroyable sur la façon de les utiliser.
Je pense que chaque équipe de conception devrait utiliser cette fonctionnalité étonnante. Les bibliothèques vous permettent de créer une bibliothèque de marques avec des ressources telles que les couleurs, les styles de police, les photos, les icônes et les symboles (comme les en-têtes et les pieds de page). Grâce aux bibliothèques, vous pouvez facilement collaborer avec des créations de plusieurs organisations en utilisant une seule bibliothèque de marque.
Les bibliothèques facilitent la modification des couleurs et la mise à jour des styles de texte en un seul clic. Ils permettent également de stocker les icônes de marque qui peuvent facilement être mises à jour au même endroit, avec des mises à jour reflétées rapidement sur les PSD. Ceci est extrêmement bénéfique pour les en-têtes et les pieds de page de votre site, où vous êtes susceptible de faire de petites mises à jour tout au long du projet.
J'utilise également les bibliothèques CC pour le style des polices tout au long de ma conception. Je définirai des styles pour les copies de héros, les titres, les sous-titres, les copies de corps, les clauses de non-responsabilité, etc. pour les applications de bureau, de tablette et mobiles. En ce qui concerne la bascule de vue, je me retrouve à utiliser le format de liste plus que la vue en mosaïque en raison de sa facilité de numérisation.
Éléments de la bibliothèque considérés comme un collaborateur
Les bibliothèques sont également idéales pour la collaboration en équipe. Vous pouvez choisir de collaborer avec d'autres créations afin de pouvoir les modifier et les ajouter à la bibliothèque, ou vous pouvez partager le lien de la bibliothèque pour y accéder facilement. Ils ont également une fonctionnalité "Créer une nouvelle bibliothèque à partir du document", mais je préfère créer la bibliothèque moi-même, elle reste donc organisée et ne dispose que des ressources les plus pertinentes.
Malheureusement, les bibliothèques ont quelques inconvénients, notamment l'absence de styles de caractères et de paragraphes distincts pour le texte. Je travaille autour de cela en appliquant mon style de caractère dans une boîte distincte, puis en collant des styles différents dans une boîte afin de faciliter la gestion des zones de texte dans le fichier. Un autre inconvénient est que vous ne pouvez actuellement pas mettre à jour un style de personnage de manière globale. Actuellement, la bibliothèque ne dispose d'aucune capacité d'organisation pour créer des sous-dossiers dans les catégories (couleur, styles de caractères, etc.), mais j'espère qu'Adobe y travaille également.
Le mode de fonctionnement actuel de CC Libraries est que l'actif le plus récemment mis à jour / ajouté apparaîtra en haut. Les couleurs de la bibliothèque CC ne peuvent pas être appliquées à un texte individuel dans des zones de texte et ne s'appliquent que facilement aux formes et aux zones de texte entières. Je suis sûr qu'Adobe travaille dur pour résoudre ces problèmes, alors je ne suis pas trop inquiet, surtout que les avantages l'emportent nettement sur les inconvénients.
6. Gardez les images et les vecteurs au format objet intelligent
Même si cela rend votre fichier plus volumineux, conserver vos images et vecteurs au format objet intelligent facilitera la tâche aux futurs concepteurs pour éditer vos fichiers PSD. Imaginez ceci: le client revient avec des modifications qui incluent le recadrage d'une photo de héros et la modification de petites icônes vectorielles. Cela se fait plus facilement si le PSD inclut la photo en pleine résolution plutôt qu'une version plus petite et pixellisée. Les vecteurs sont également faciles à modifier lorsqu'ils sont des objets intelligents d'Illustrator plutôt que des graphiques pixellisés.
Avoir des photos dans un format d'objet intelligent présente un autre avantage lorsque vous les enregistrez en tant que PSD, puis les placez dans votre fichier en tant qu'objet intelligent. L'utilisation d'une photo PSD placée facilite l'ajout de calques de réglage et les modifications dans un fichier photo séparé, plutôt que d'encombrer votre fichier source. L'utilisation d'objets intelligents comme graphiques de bibliothèque vous donne encore plus d'une combinaison gagnante. Vous pouvez non seulement éditer facilement les objets vectoriels, mais les graphiques de bibliothèque seront mis à jour dans toutes les applications.
Le graphique "Hero Illustration" peut être édité dans un fichier PSD séparé pour limiter l'encombrement du fichier principal.
7. Créez un guide de style et respectez-le
Un grand nombre de marques auront un guide de style à suivre pour les polices, les couleurs, les photos, les icônes, les illustrations, etc. Cette ressource est utile, mais ne vous permettra pas toujours de garder un style spécifique à votre site Web. . J'ai considérablement amélioré mon efficacité en créant des guides de style Web pour chaque site spécifique sur lequel je travaille.
Parfois, les marques ont plusieurs sites avec des styles différents, alors je m'assure d'en avoir un pour chaque site, afin que je puisse rester cohérent pendant que je conçois. Cela crée également une ressource de glisser-déposer facile lorsque j'ai besoin de boutons, d'icônes, d'illustrations, de photos, etc. Non seulement cela vous rendra plus efficace en tant que concepteur, mais cela vous aidera à rester cohérent dans votre style.
Quel espacement dois-je utiliser entre les sections? Consultez le guide de style! Quelle était la couleur et le rembourrage du bouton principal à nouveau? Prenez-le du guide de style! Cela aidera également les autres concepteurs à accéder facilement aux conceptions du site avec facilité et efficacité. Si vous fusionnez l'utilisation des bibliothèques CC avec le guide de style, vous êtes encore plus en avance.
Je crée un guide de style PSD pour toutes les différentes marques sur lesquelles je travaille afin que je puisse facilement saisir des éléments tels que des boutons et des icônes.
Beaucoup de designers sont tentés d'ajouter de nouveaux styles chaque fois qu'ils rencontrent un nouveau problème dans la conception. Par souci de cohérence, il est préférable d'éviter cela et de toujours respecter les normes que vous avez établies dans votre guide de style. Si vous ajoutez de nouveaux calques et styles, assurez-vous qu'ils sont appliqués sur l'ensemble du site.
Plus les nouveaux styles créés sont nombreux, plus les conceptions futures seront complexes et plus les nouveaux concepteurs auront de la difficulté à se lancer dans des projets et à conserver des conceptions cohérentes. Dans de nombreux cas, la cohérence est plus importante que l'innovation constante en matière d'expérience utilisateur. Même si cela peut prendre plus de temps pour créer le guide de style Web au début d'un projet, cela augmentera votre efficacité pour toutes les pages futures.
Une des meilleures pratiques que j'ai apprises de Brad Frost est de faire une inventaire d'interface soit pendant le processus de conception, soit sur un site existant sur lequel vous travaillerez. Un inventaire d'interface consiste à collecter tous les différents styles de texte, styles de boutons, etc. via des captures d'écran et à les compiler pour détecter les incohérences. Vous pouvez ensuite présenter vos résultats au client pour proposer des mises à jour et des améliorations.
Étant donné que les sites Web touchent plusieurs concepteurs au sujet de leur existence, le service de cohérence peut devenir très complexe. Une fois que vous avez trouvé un style de conception unifié pour les éléments de la page, veillez à mettre à jour votre guide de style afin que tout le monde soit à jour.
Capture d'écran de l'inventaire d'interface de http://bradfrost.com/blog/post/interface-inventory/
8. Favoriser la collaboration interministérielle
Beaucoup de gens qui font carrière dans la production marketing (concepteurs, développeurs, rédacteurs, etc.) ont tendance à être introvertis, il est donc difficile de sortir de votre zone de confort en matière de collaboration. Il est également difficile de quitter votre bulle d’expertise, en particulier quand il est plus facile de communiquer avec les gens de votre domaine. Même si cela peut parfois être gênant ou inconfortable, quitter votre bulle et collaborer régulièrement avec des personnes d'autres départements peut considérablement améliorer la qualité de vos conceptions et votre efficacité.
Les concepteurs et les développeurs collaborent à une nouvelle conception. Vous devriez rencontrer le développeur au préalable pour voir quel cadre ils utilisent, vous renseigner sur le système de grille et évaluer les possibilités. Une fois le travail de conception terminé, assurez-vous de partager votre bibliothèque Photoshop afin que le développeur puisse accéder facilement à la palette de couleurs, aux styles de police, etc. Il est également utile de partager le guide de style avec tous les composants que vous avez conçu pour leur donner une bonne longueur d'avance.
La collaboration avec d'autres concepteurs de votre équipe utilisant les bibliothèques vous aidera également à rester cohérent et à être plus efficace. Donner au directeur artistique ou à la plupart des responsables concepteurs des mises à jour de la bibliothèque et du guide de style éliminera la confusion et maintiendra la cohérence de la marque. Assurez-vous simplement qu'il existe une ligne de communication lorsque les mises à jour sont effectuées, afin que tout le monde soit sur la même page.
Rester sain d'esprit
La conception Web peut être écrasante et parfois difficile. Cela ne doit pas toujours être comme ça. En suivant ces conseils simples sur l'efficacité de Photoshop, vous pouvez atténuer une bonne partie de votre stress. Non seulement cela améliorera votre bien-être, mais les gestionnaires et les administrateurs, tant du côté des affaires que du côté créatif, apprécieront vraiment votre dur travail et vous en féliciteront. Après tout, tout le monde est bon avec un design plus cohérent, efficace et magnifiquement conçu.