Il est temps pour les concepteurs de passer de la conception basée sur l'image à la conception basée sur le code

Pourquoi passer d'une conception basée sur l'image à une conception basée sur le code ?

Il y a eu un gros problème depuis l'aube de la conception de produits numériques. Les concepteurs sont séparés du processus de développement du produit et sont obligés de travailler uniquement avec des logiciels.

Les concepteurs utilisent des graphiques matriciels ou des outils de conception vectorielle pour dessiner des images car ils sont isolés du reste de l'organisation. Le processus dans la plupart des cas reste identique même s'ils fonctionnent dans différents logiciels comme Photoshop, Gimp, Sketch ou Fireworks. Un ensemble d'images statiques est envoyé aux ingénieurs en tant qu'intention rendue par les concepteurs.

Il est extrêmement fastidieux de montrer différents états de l'interface via des tableaux d'art statiques. Tout n'est donc pas détaillé par les concepteurs. Et finalement, toute l'interface utilisateur est construite par les ingénieurs à l'aide d'un ensemble d'images statiques incomplètes. Souvent, dans une longue communication aller-retour, tous les états interactifs sont généralement aplanis.

L'expérience n'est pas représentée avec précision avec des conceptions statiques et, par conséquent, les tests sont généralement fastidieux pour les utilisateurs. C'est à cause de ces processus inefficaces qu'une organisation mène à des produits infructueux et à des équipes frustrées.

Grâce à l'évolution de la technologie, nous avons aujourd'hui une meilleure façon de concevoir les choses. Les outils de conception basés sur l'image sont rapidement remplacés par le paradigme des outils de conception basés sur le code. Les représentations statiques de la conception tirées d'outils de conception vectorielle ou raster sont remplacées par des conceptions rendues où les concepteurs l'intentionnent directement dans le code sans savoir réellement comment coder.

Un nouveau flux de travail est fourni par le nouvel ensemble d'outils où :

• Les concepteurs et les ingénieurs établissent tous deux une source unique de vérité
• Sans aucune expérience de codage, il donne aux concepteurs toute la puissance du codage
• Le duo de designers et d'ingénieurs est connecté via un processus créatif collaboratif unique qui crée une évolution spectaculaire du flux de travail

Conception basée sur l'image à basée sur le code avec UXPin

La première question fondamentale ici est de savoir ce qui n'est pas bon ou inefficace avec la conception basée sur l'image avant de passer de la conception basée sur l'image à la conception basée sur le code. Vous savez peut-être qu'il existe deux paradigmes d'outils de conception, à savoir les outils de conception basés sur le code et les outils de conception basés sur l'image.

Un outil de conception basé sur l'image est une approche utilisée depuis de nombreuses décennies et considérablement ancienne. Les concepteurs doivent créer des graphiques vectoriels ou raster lorsqu'ils dessinent quelque chose qui est l'idée de cette approche d'outils.

Avec cette approche, les concepteurs disposent d'une flexibilité maximale. Des illustrations avancées aux icônes simples, tout peut être efficacement dessiné de cette façon, y compris le plus beau niveau de détails. Bien que lorsqu'il s'agit de développement de produits numériques professionnels, cela tombe généralement en panne. Voici la raison pour laquelle cela se produit.

1. Manque d'interopérabilité : l'interface réelle d'un produit, à l'exception des photographies, des illustrations et des icônes, n'est jamais construite avec ces graphiques. Les concepteurs travaillent en dehors des contraintes définies dans le code lorsqu'ils travaillent sur la conception d'interfaces dans des outils de conception basés sur des images. Pour cette raison, ils peuvent créer des choses coûteuses à coder et d'autres difficiles d'une manière inconnue.

2. Manque de précision : Outre la création de superbes conceptions détaillées, les résultats les plus inexacts au cours du processus de développement sont souvent obtenus avec des outils basés sur l'image. Le travail du designer est rendu avec un processus complètement différent.

Par conséquent, il existe une différence dans le code des dégradés, du texte et de la couleur choisis par un concepteur et celui par un ingénieur, même avec l'application des mêmes spécifications. Les équipes sont affectées par un désalignement massif à cause de cela.

3. Conception statique : le workflow axé sur l'outil de conception basé sur l'image consiste à créer des plans de travail statiques pour tous les états de l'interface qui sont éventuellement liés entre eux. Pour les projets professionnels, il s'agit d'une approche par effraction. Dans la fenêtre statique, les modèles les plus simples deviennent comme une liste déroulante qui est ingérable.

Cela se produit en raison du manque de capacité à conserver les composants interactifs pour une réutilisation et en raison d'une quantité considérablement importante de plans de travail. En plus de tous ces outils ne permettent qu'une interaction de base sans la possibilité de définir des variables pour le contenu, les états des éléments, la logique conditionnelle et autres.

4. Faible collaboration en conception-ingénierie : Le processus d'ingénierie est complètement différent de cet outil et ne peut pas être fusionné. La production des deux mondes est déconnectée de sa nature même.

Les technologies utilisées par les utilisateurs sont le produit final du travail des développeurs, tandis que des couches d'abstraction supplémentaires éloignées de l'expérience utilisateur finale sont introduites par la conception basée sur l'image.

Les concepteurs et les ingénieurs sont déconnectés et frustrés les uns des autres en raison des composants interactifs réutilisables, du manque d'interactions réelles et de la possibilité d'importer des connexions à partir du code.

Unicité dans la conception basée sur le code

Il est important de savoir ce qui est spécial dans cette conception car nous mettons l'accent sur la transition de la conception basée sur l'image à la conception basée sur le code. Lorsqu'un utilisateur dessine quelque chose à l'aide d'un outil de conception basé sur du code, il crée un CSS/HTML/JS pertinent et engage le navigateur. Cela permet au moteur d'afficher visuellement les résultats.

Voici les avantages pour les concepteurs après leur transition de la conception basée sur l'image à la conception basée sur le code.

1. Fidélité : il existe une correspondance à cent pour cent entre l'intention d'un concepteur et un résultat codable lorsque l'on utilise une conception basée sur du code. Pour rendre tous les projets de conception, la technologie utilisée dans la conception basée sur le code est la même que celle du développement Web.

2. Élimine les différences de contraintes entre les concepteurs et les développeurs : les éléments difficiles à concevoir et impossibles à recréer dans le code peuvent être créés par les concepteurs dans des outils basés sur l'image. Ces mêmes contraintes s'appliquent à la fois aux concepteurs et aux développeurs d'outils basés sur du code. Par conséquent, il garantit que les concepteurs et les développeurs restent synchronisés.

3. Remplacer les planches d'art par des composants interactifs : au lieu de planches d'art liées, l'outil de conception basé sur du code utilise les interactions les plus avancées sur les composants. Cette approche permet directement aux concepteurs de créer des systèmes de conception interactifs hautement réutilisables et imite également le développement.

4. Interactions réalistes et puissantes : Avec la transition des conceptions basées sur l'image aux conceptions basées sur le code, les objets peuvent interagir les uns avec les autres, se déplacer sur l'écran et créer des motifs complexes. Il ne nécessite pas de savoir coder, ce qui est le plus important pour la collaboration avec les ingénieurs et les tests avec les utilisateurs.

5. Crée la collaboration la plus solide de tous les temps : une approche complètement nouvelle et révolutionnaire de la collaboration en matière d'ingénierie et de conception est réalisée grâce à un paradigme basé sur le code.

Article associé

Différence entre concepteur Web et développeur Web