L'ensemble d'outils du concepteur: flux de travail, logiciels et sites Web

Tout comme les développeurs de logiciels, les rédacteurs de contenu, les spécialistes du marketing, etc., les concepteurs doivent disposer d'un bon ensemble d'outils pour les aider à faire face au travail quotidien. Ce que nous avons essayé de faire ici, c'est de décrire ces outils, ces flux de travail et la façon dont vous pouvez les combiner pour accélérer votre travail et réduire les risques d'erreurs et d'erreurs.

Collecter des informations

Lorsqu'un nouveau projet arrive, les premières heures sont principalement consacrées à la collecte d'informations à ce sujet - quels sont les problèmes auxquels le client est confronté, quels sont ses objectifs, ce qu'il aime, etc. autant de données utiles que possible, qui seront utilisées plus tard pour prendre des décisions éclairées.

Evernote

Evernote est un logiciel incroyable - ce n'est pas seulement une application pour prendre des notes. Il peut stocker des fichiers, les combiner dans des collections, des balises, des groupes, etc. Grâce à sa puissante recherche, vous pouvez vous référer à des projets précédents et ainsi de suite. Bien sûr, le côté le plus puissant est la façon dont vous l'utilisez. Ils ont une ligne directrice approximative pour certaines approches organisationnelles.

E-mail, Slack, Zoom…

Le suivant est une autre évidence, mais il y a une raison pour laquelle nous l'avons ajouté: reporter un appel, un message ou une visioconférence pourrait être un retard majeur pour un projet. Souvent, la possibilité de partager un écran et de passer en revue les maquettes, les wireframes, les concepts et les conceptions est une bouée de sauvetage. N'oublie jamais ça

Trouvez l'inspiration

Une fois qu'il y a suffisamment d'informations, l'étape suivante consiste à recueillir l'inspiration - à quoi devrait ressembler une application / un site Web, quel est le style, quel est l'objectif, etc. ? Tous les designers recherchent l'inspiration à gauche et à droite - sites Web, livres, magazines, n'importe quoi.

Dribbble, Behance et sites Web similaires

C'est précisément pour cette raison (et pour que les concepteurs se vantent) que des sites Web comme Dribbble existent. Là, nous, les concepteurs, pouvons rechercher des idées et des approches qui résolvent les problèmes auxquels nous sommes actuellement confrontés. Parfois, l'objectif est de créer «une page de vente générique pour le service A». Cette page de vente contiendrait littéralement quelques paragraphes avec une photo de stock. Un objectif totalement sans intérêt, mais réaliste. Eh bien, la combinaison de couleurs, de typographie, d'espacements, etc. peut être un peu plus unique. Essayez peut-être aussi différentes mises en page! Et l'idée peut venir d'une page de destination aléatoire publiée il y a 3-4 ans. La page Découverte de 99Design est également un bon endroit pour regarder!

Awwwards

Nous mettons des sites comme Awwwards dans une catégorie distincte car ils présentent en fait quelque chose qui a été construit et qui peut être vu fonctionner. Et de plus, il se concentre davantage sur la manière artistique, pas autant sur «n'importe quel travail de conception». La plupart du temps, les sites sont si lourds qu'ils ne deviennent utilisables que sur des machines haut de gamme, mais vous pourriez toujours vous en inspirer.

Palette de couleurs / branding

Pour une toute nouvelle version, où il n'y a pas de couleurs prédéfinies, l'une des étapes pour commencer à travailler serait de choisir quelque chose qui conviendrait au nouveau site. Il y a deux façons de l'aborder: choisissez un jeu de couleurs existant ou définissez une couleur primaire / secondaire et contourner l'ensemble du jeu basé sur eux.

ColorHunt

Des sites Web comme Color Hunt proposent une collection de palettes de couleurs créée par la communauté. Vous pouvez en choisir et en utiliser directement ou choisir les couleurs principales pour commencer. Les amateurs de couleurs ne sont pas aussi beaux mais similaires.

MarqueCouleurs

BrandColors a un objectif légèrement différent: il fournit une liste des grandes marques et de leurs combinaisons de couleurs. Vous pouvez y trouver de superbes nuances et combinaisons qui peuvent inspirer votre construction. Les couleurs ne sont sous aucun droit d'auteur, mais notre conseil est de jouer un peu avec elles au lieu de copier-coller toutes les couleurs d'endroits comme Amazon par exemple.

Actifs premium et gratuits

Il n'y a pas toujours assez de temps pour travailler sur chaque composant du site. Parfois, il est préférable de saisir un pack d'icônes, une illustration ou une photo réalisée par un autre designer / photographe et de l'utiliser directement.

• Font-Awesome - Une énorme collection d'icônes sous la forme de glyphes de police
• Envato Elements - Grand choix d'actifs de première qualité à un bon prix.
• Unsplash - Vaste collection de photos gratuites de haute qualité
• Générateurs SVG comme squircley, getwaves, blobmaker
• Adobe Fonts (payant) et Google Fonts (gratuitement)

Le meilleur conseil ici est de trouver quelques sites comme ceux-ci ci-dessus et de les avoir à proximité, afin de réduire autant que possible le temps et les efforts que vous avez à faire pour rechercher et trouver les meilleurs graphiques pour le travail.

Les principaux outils de conception

Une fois le travail initial terminé, il s'agit de construire la conception. Étant donné que tous les logiciels de progression pour les concepteurs disposent de tous les outils nécessaires pour créer des conceptions Web / d'applications, nous ignorerons les outils de wireframing.

Figma

Notre choix de base pour les travaux de conception chez DevriX est Figma. Il fournit d'excellentes capacités de collaboration ainsi que des applications basées sur un navigateur accessibles à tous les membres de l'équipe, que ce soit Linux, Mac ou Windows. Auparavant, nous utilisions Adobe XD, mais les membres basés sur Linux ne pouvaient pas l'utiliser et Sketch est verrouillé uniquement sur Mac.

Illustrateur / Concepteur d'affinité

Pour un travail plus personnalisé, Illustrator ou Affinity Designer font certainement partie des meilleurs choix. Au cours des deux dernières années, les illustrations personnalisées sont l'une des parties les plus tendances des sites Web. De grands graphiques colorés dominent le pli ci-dessus et plus d'expérience sur les bons outils est certainement une bonne chose à faire. Dans cet endroit, nous pouvons également ajouter des logiciels 3D comme Blender pour le rendu de modèles 3D, qui peuvent être utilisés comme actifs sur les pages Web.

Photo Photoshop / Affinity

Photoshop était le principal logiciel de conception Web. Cela peut sembler bizarre aujourd'hui d'autant plus que nous avons tous ces excellents outils qui se concentrent principalement sur le Web. Mais Photoshop reste un excellent outil et nous l'utilisons souvent lorsqu'il y a des photos qui nécessitent quelques retouches ou recadrer des formes / formes.

Présentation

Mais ce n'est pas seulement le travail de conception - un PNG statique. Certains designers qui se concentrent un peu plus sur les animations et les interactions. Une bonne démonstration de la façon dont les éléments doivent se comporter lors du survol, du balayage ou du clic faciliterait grandement le travail des développeurs frontaux. Figma et Adobe XD peuvent tous deux y contribuer, mais les deux sont également limités.

Adobe After Effects

Les effets secondaires sont considérés comme l'un des premiers choix pour les graphiques animés. Il fournit tous les outils nécessaires pour représenter toutes les actions et animations. Une bonne chose à rappeler aux concepteurs ici est que les animations doivent suivre les limites du Web. L'ajout de flou de mouvement n'est pas quelque chose que vous pouvez faire. Ainsi, lorsque vous vous lancez dans des animations plus avancées, discutez-en définitivement avec votre équipe de développement frontale ou en savoir plus sur les animations sur le Web et ce qui est possible. Il en va de même pour UX et A11y.

Espace de rangement

Figma et Adobe XD sont plutôt axés sur le cloud, vous ne devriez donc pas vous inquiéter de perdre votre travail, mais tout n'est pas comme ça - Photoshop, les fichiers Illustrator, les polices que vous avez téléchargées, les photos, etc. résident tous sur votre ordinateur.

Il est préférable de les sauvegarder et de les rendre accessibles à tout moment, surtout si vous travaillez sur plus d'une machine. Et quand il s'agit de les partager, c'est super facile.

Dropbox

Le premier choix pour cela serait Dropbox. Avec son application de bureau facile à utiliser, il surveillera vos fichiers et les synchronisera avec le cloud dès que vous apporterez des modifications. À partir de là, partagez-les avec le client ou votre équipe en un seul clic.