Passez-vous par une étape de design sur Photoshop/Sketch ou passez-vous au code directement ?

Salut,

J’ai toujours sauté l’étape de design sur Photoshop. Je n’ai jamais trouvé ce logiciel très ergonomique.
Et avec des framework css comme Bootstrap, je trouvais plus simple de passer directement d’un croquis papier-crayon à du code html/css.

En revanche, j’apprécie le soft Sketch et je me dis qu’ajouter une étape de design sur Sketch avant de passer au code peut être intéressant.

Indépendamment de Sketch et Photoshop, que pensez-vous du fait de sauter l’étape de design et de passer d’un croquis au code ?
Quels sont selon vous les avantages et les inconvénients ?

Bonjour.

Honnêtement, ça dépend.

Si le client ne souhaite que des fonctionnalités, avec une ergonomie simple, mais sans particularité, un petit prototype Bootstrap, Foundation ou autre est largement suffisant, et pour moi, plus facile à produire.

Cependant, dans le cas où le client souhaite avoir un design particulier ou si son site est un site événementiel ou tout autre raison pour laquelle le design pourrait varier avant la validation, je conseillerai de passer par plusieurs étapes (wireframe, mockup, etc.) pour permettre de valider par étape et ne pas devoir s’embêter à ajouter des détails au code qui seront supprimé plus tard.

Pour conclure, je dirai que ça dépend des compétences, des clients et que ce qui doit décider du choix final, c’est le coût du tout.

J’avais lu cet article très intéressant sur du Bootstrap en skippant l’étape Photoshop :

Mais j’ai l’impression que la plupart des arguments ne tiennent plus avec Sketch.

Pour une très grande majorité des sites que je réalise, je préfère oublier cette étape et passer directement au code. L’organisation est souvent assez classique, et la grande différence niveau design reste la charte graphique que je gère directement en LESS.

Comme le dit @kneelnrise , certains sites par exemple dans l’évènementiel ou le luxe ont pour le coup besoin de se démarquer, et pour les pages qui vont vraiment être originale, là ça vaut le coup de passer un coup sur Sketch ! (Si tu ne l’as jamais utilisé, saute dessus c’est génial pour du design d’UI, j’avais fait un article d’introduction : https://medium.com/@christophepas/introduction-à-sketch-f93a8833f82e)

1 « J'aime »

Tu aurais quelques réalisation à montrer, pour lesquelles tu es passé au code directement ?

Le site de mon ancienne boite par exemple : http://www.staffit.co/ (rien d’exceptionnel, donc c’est plus simple d’y aller directement).

1 « J'aime »

Bonjour @benjamin_bnds

Moi aussi exit la case Photoshop pour faire un design complet ce logiciel n’est pas efficace.

Par contre pour créer une atmosphère / ambiance c’est une bonne solution (et sketch est à mon avis encore mieux car c’est du vectoriel)

Mais le plus difficile reste de convaincre les clients que de belles maquettes en .psd n’ont pas de sens au XXIème siècle.

1 « J'aime »

Hello tous,

Quelque soit la nature du projet, la case design permet de border l’ensemble du projet et de ne pas se faire avoir avec des pages manquantes ou autre. De plus, il est beaucoup plus facile/rapide de déplacer une case en lui changeant sa couleur et sa bordure sur toshop que via du code.
Mais encore faut-il utiliser la composition de calques -__-

Sinon, voici un outil super pratique pour que vos graphistes proposent leurs designs sur une plateforme où tout le monde peut réagir : http://www.invisionapp.com/
Payant, mais très bien fait.

Pour info, j’ai testé photoshop et sketch pour la partie design. Autant dire que @flexbox a raison : toshop n’est pas/plus fait pour ça et sketch le fait tellement mieux. Sauf que ce dernier n’est pas encore assez mature.

Donc oui @benjamin_bnds :

  • Sketch est définitivement plus intéressant,
  • non il ne faut surtout pas sauter cette étape de design
  • je vois beaucoup d’inconvénients (oublis, pertes de temps en aval d’un projet, etc.) pour si peu d’avantages (gain de temps ?)
1 « J'aime »

Salut @crewstyle, par curiosité, qu’est-ce qui te fait dire que Sketch n’est pas assez mature ?

Sinon avec un préprocesseur CSS ( Less et Sass) tu gagnes tout de même énormément de temps; si le client est très exigeant ou a une idée en tête, ça peut devenir gênant de retravailler le code mais dans la grande majorité des cas je n’ai pas eu à faire ça.

Enfin pour ce qui est du cahier des charges, il y a la solution suivante : tu fais une étape de design très très courte en faisant à la main/ sur excel des wireframes de chaque page avec les éléments importants afin d’être d’accord sur le nombre de page et leur organisation.

1 « J'aime »

Hello @christophepas,

Et bien je ne peux pas m’empêcher de penser à Axure lorsque j’utilise Sketch.
Le logiciel a toutes les qualités qu’on demande à un logiciel de prototyping, mais il manque les interactions, la doc auto-générée. Mais au-delà de ça, le logiciel lui-même n’est pas encore assez stable : il est lourd par moments (surtout lors de dé/zooms sur les planches, l’interface met du temps à réagir ou ne réagit pas au moment attendu, et tout est encore trop brouillon.

M’enfin, ça n’est qu’un avis personnel bien entendu.
Autrement, lorsque Sketch est sorti, chez moi on y a vu le messi à l’époque ! :) Il faut dire que ça reste un très bon logiciel qui a de belles années devant lui.

Coté preprocessing, je ne peux qu’être d’accord avec toi, sauf que tu es dans le cas où ton développeur frontend EST ton graphiste (ou alors que ton graphiste sache coder).
Dans l’idée que je me fais des différents profils web, une personne qui sait tout faire est une personne qui ne sait rien faire. Et les choix (couleurs, tailles, typos, etc) que fera un graphiste ne seront jamais les mêmes qu’un frontend.

J’espère avoir répondu à la question ^^
(et ne pas avoir fait de hors-sujet hein)

Bientôt,les pages web seront directement designé et codé sur le site même .
Cette approche a déjà été tenté par le passé mais cette fois ci ce que je viens de voir chez Techcrunch va plus loin .

2 « J'aime »
Human Coders - Le centre de formation recommandé par les développeur·se·s pour les développeur·se·s