Mes pensées sur la conception dans le navigateur par rapport à la conception dans Photoshop

La conception dans le navigateur devient de plus en plus populaire avec la montée des «concepteurs qui codent». Mais ce n’est pas parce que nous avons acquis de nouvelles compétences que nous devons abandonner notre papier, nos logiciels d’édition assistée par ordinateur, nos logiciels de publication assistée par ordinateur et nos outils de wireframing et nous lancer directement dans des prototypes de codage.? 

Navigateur contre Photoshop est un sujet brûlant

Si vous travaillez dans l’espace numérique, avec des concepteurs et des développeurs, vous aurez certainement constaté la tendance croissante chez les concepteurs d’avoir des compétences en codage.. 

Beaucoup de gens sont pour, alors que certains pensent que les concepteurs ne devraient pas toucher au code. Cependant, les concepteurs qui utilisent le code deviennent de plus en plus confiants et certains affirment même que la conception dans Photoshop n’est plus pertinente dans certains scénarios.. 

Je suis d'avis que la créativité est indépendante de l'outil, mais je peux voir les avantages et les inconvénients des deux approches isolément (je les ai énumérées ci-dessous afin que vous puissiez avoir mon point de vue sur la discussion).. 

Dans cet article, j'utilise le terme «Photoshop» et «UXPin» de manière lâche. Je parle vraiment de n'importe quel outil de ce type, que vous utilisiez Sketch, Balsamic ou autre chose! Le même argument s'applique. Photoshop et UXPin sont juste mes outils de prédilection.

Aller directement dans le navigateur

Copyright © 2013 Olle Svensson Licence Attribution-commerciale-Share Alike 2.0

Une situation courante dans laquelle une personne d’une organisation peut concevoir dans le navigateur est qu’elle est qualifiée en conception visuelle, mais qu’elle est également à l’aise pour coder. Par exemple, le but peut être de communiquer à un développeur qui construit un CMS un aperçu de la conception. Un PSD conviendrait, mais le concepteur pourrait penser qu’il serait plus utile de montrer tous les extras, tels que l’animation et la réactivité, de manière plus proche de la version finale..

Avantages

• Des frameworks tels que Bootstrap et Foundation accélèrent le processus. D'après mon expérience, il est bon d'apprendre à coder à partir de rien avant de s'appuyer sur des cadres, car vous apprendrez ce qui se passe dans les coulisses..
• Apprendre à coder en amont réduit les goulets d'étranglement, surtout si votre équipe est plus lourde du point de vue de la conception. Vous pouvez laisser les développeurs se concentrer sur davantage d'aspects difficiles du développement et des domaines spécialisés.

Désavantages

• La conception dans le navigateur peut être un peu plus lente si vous n'êtes pas sûr de coder. D'après mon expérience, il peut être rentable de s'inscrire à un cours de développement front-end et de s'essayer à des concerts indépendants tels que la création d'une page de destination simple..
• Ce processus peut détourner l'attention des concepteurs de leurs principaux atouts. Oui, il peut être bon d'avoir des côtelettes de codage. Cependant, certaines personnes font valoir que la division du travail (personnes se concentrant sur des tâches très spécifiques) conduit à une plus grande efficacité de la production. Les réalités du marché (et la flexibilité recherchée dans l’espace numérique) peuvent amener les gens à dire le contraire!

Conception dans Photoshop / UXPin

Droit d'auteur © 2013 Licence Serg Kij Attribution-commercial-Share Alike 2.0

Les logiciels de publication assistée par ordinateur tels que Adobe Photoshop et les logiciels en tant que services (SAAS) tels que UXPin ne sont que quelques-uns des nombreux outils indispensables aux concepteurs. Même les designers qui pouvez le code et souvent la conception dans le navigateur trouveront utile de planifier d'abord en utilisant ces outils.

Avantages

• Les applications graphiques conviennent parfaitement aux premières phases de planification et de recherche. D'après mon expérience, le papier et les narguilés sont des moyens rapides et sales de définir rapidement quelque chose.
• Les structures filaires peuvent être un bon moyen pour un analyste métier ou un autre intervenant non visuel de communiquer des métadonnées de base. Concevoir dans un navigateur serait probablement excessif, car le but de cette étape est de générer quelque chose de lâche pour la discussion..
• Planifier et prévoir avec des maquettes moins fidèles peut réduire considérablement le temps de développement.

Désavantages

• Concevoir pour le Web réactif peut sembler répétitif dans Photoshop et ne pas traduire de manière réaliste en quoi ressemblera la construction réelle. D'après mon expérience, il est plus facile d'ajuster vos requêtes de média à l'œil de différents appareils. Vous obtiendrez ainsi un retour en temps réel sur l'apparence de la construction réelle, plutôt que de produire plusieurs maquettes spéculatives dans Photoshop.
• Il est difficile de reconnaître les limites techniques lors de la conception dans Photoshop. Par exemple, une fois, je concevais une page de destination pour un client. Il comportait une boîte de saisie de courrier électronique, qui est devenue très difficile à concevoir en raison de sa complexité. En fin de compte, j’ai «conçu» dans le navigateur la manière paresseuse, ce qui était beaucoup plus pratique.

Conclusion

La créativité est indépendante de l'outil. Travailler directement dans le navigateur vous confronte immédiatement aux limitations possibles et vous aide à faire évoluer votre conception. Cependant, selon mon expérience, cela ne remplace pas une réduction précoce dans UxPin et Adobe Photoshop. Ces approches ne sont pas non plus mutuellement exclusives. J'utilise beaucoup Adobe Photoshop, même lors de la conception dans un navigateur. Ces jours-ci, il dispose également d'excellentes extensions pour vous aider à coder beaucoup plus efficacement..

Êtes-vous un concepteur qui code? Ou préférez-vous créer vos maquettes avec un logiciel de publication assistée par ordinateur tel que Photoshop? Laissez un commentaire ci-dessous!