Aujourd’hui, pour construire les maquettes d’un site, d’une application, le designer doit avoir plusieurs compétences dans ses bagages…
Cet article relativement court prouve qu’un designer sans aucune connaissances en intégration ne sera pas aussi à l’aise pour la conception de ses maquettes.
Petit rappel
Définition : un infographiste est une personne capable de créer des images numériques par ordinateur. Ce concept a été introduit dans les années 1970. Il est souvent confondu avec le graphiste, qui travaille sur un support non informatique. C’est aussi un ensemble de techniques comme la retouche photo, la mise en couleur de BD, l’architecture…
Conception de sites Web
La totalité des sites est développée en langage HTML, langage qui permet de structurer l’agencement de la page. Il est toujours accompagné du CSS, qui permet de styliser cette structure, en lui apportant des couleurs, des dimensions, et tout un tas de propriétés graphiques (merci à l’inventeur du CSS !)
Pour concevoir un site il faut donc connaître ces deux langages de description, ou au moins quelques bases solides.
Conception de maquettes
Pour concevoir une maquette de site web, l’outil le plus utilisé est Adobe Photoshop… Ce qui n’est pas étonnant, puisqu’il permet de rendre visuel toutes les idées. Oui oui, toutes les idées… C’est bien le problème !
Venons en au fait…
Pourquoi est-ce que la connaissance des langages web est obligatoire pour tout infographiste?
C’est relativement simple à comprendre…
La faisabilité
Lorsqu’on dessine une maquette sous Photoshop, tout est possible. Des mélanges de couleurs, des formes extravagantes…. et j’en passe, évidemment !
Par contre, lorsque l’on met en place notre page web, il y a des contraintes de code et des règles qu’il faut connaître !
L’idéal est donc d’avoir de bonnes bases en intégration (le passage d’une maquette image à une page web utilisable) pour produire un travail qui sera utilisable par l’intégrateur ou le développeur…
Faciliter l’avancement du projet
Le web utilise le HTML et le CSS pour afficher les pages, mais aussi des images (logo, puces, etc) qui doivent être découpées par l’infographiste.
Si il a des connaissances en développement, il saura ce qui doit être repris en format image, et ce qui peut être dessiné en CSS.
Aussi, il saura s’adapter, et surtout adapter son travail aux contraintes du projet (navigateur cible, réseau utilisé…)
Personnellement…
Je viens d’une formation dans laquelle j’ai appris à coder en C, Java, et j’en passe… Clairement, ça ne m’intéresse pas du tout. Aucune couche visuelle au programme, seulement quelques centaines de lignes de code pour arriver à afficher que 2 chèvres + 3 moutons = 1 ferme… La joie 
J’exagère un peu, mais j’ai été un peu « dégoutté » par la complexité du travail pour arriver à une page complète !
D’ailleurs, je tire mon chapeau aux développeurs, sans qui mes idées resteraient purement visuelles et non fonctionnelles…
Durant ma formation, j’ai choisi un parcours de « Synthèse d’image avancée », qui m’a appris de bonnes bases en 3D (3DSMax) et je participais d’ailleurs aux options de « développement web avancé ». Pour l’anecdote, je faisais un peu le CSS de tout le monde ! C’était drôle, c’était comme si j’étais le messie ! (Mais non…)
Lorsque j’ai commencé mon stage en tant qu’infographiste, j’ai découvert de nouveaux langages (comme le C#, .NET…) que mes collègues utilisent avec succès et facilité. Enfin… Je crois !
Et j’ai enfin compris que ce que j’avais appris ne me servirait certainement jamais, déjà parce que le design est ma passion, mais aussi parce que les langages qu’on a essayé de m’apprendre sont dépassés…
C’est du moins ce que je pensais…
Lorsque je réalise mes maquettes sous Photoshop, je suis capable d’imaginer la partie fonctionnelle. Je suis donc en mesure de créer des interfaces « faisables ».
Quand je vois certains design sur Dribbble (mon site préféré) je ne peux m’empêcher de me dire « c’est beau ça mon p’ti gars, mais intègre le, et on en reparlera… »
Et oui, mes compétences me servent donc ! Je pense que si je demandais à mes collègues de poster en commentaires leurs impressions sur mes capacités, ils seraient d’accord avec moi !
On va essayer tiens !
Ici un exemple de mon travail, au stade maquette, puis une fois en ligne : (application 2Threes, disponible sous Windows Phone 8 et Windows 8)
Vous remarquez ici que la maquette et la réalité sont… très très proches ! Ce qui prouve l’importance de connaître quelques bases !
Maintenant je suis calé (vive l’apprentissage « sur le tas ») en HTML, CSS, XAML (langage équivalent au HTML mais pour Windows 8 et Windows Phone 8).
Merci aux collègues qui m’ont appris de bonnes bases et qui m’ont aidé ! Surtout que maintenant, je sais de quoi je parle.
C’était mon moment « vantard »…
Merci à vous chers lecteurs, vous êtes 800 visiteurs depuis Juin, et ça me fait bien plaisir !
N’hésitez pas à commenter !