Faut-il oublier Photoshop pour le WebDesign ?

Blog du Freelance > Réaliser ses maquettes web directement en CSS

Réaliser ses maquettes web directement en CSS

La guerre est déclarée entre Photoshop et les CSS ?

Posté le 26 juillet 2013 | Rangé dans Freelance

Faut-il oublier Photoshop pour le WebDesign ?

A mes heures perdues je scrute le web, passant de blog en blog en lisant des tonnes d’articles autour de la création de site web, de WebDesign et de ressources graphiques. Beaucoup de personnes sont soulevées la question de la création de maquettes web directement en CSS, zappant alors tout bonnement la phase de création sous Photoshop (ou d’autres logiciels graphiques)... Et effectivement, cela m’est déjà arrivé de travailler de la sorte sur quelques projets pour moi ou mes clients. Mais quelles sont les différences réelles dans notre travail ?

La création d’une maquette avec Photoshop propose plusieurs avantages : la réalisation de la maquette ne se fait que sous un seul logiciel, cela va alors très vite, avec la possibilité de poser des repères, de sélectionner plusieurs calques et d’en tirer une construction riche. De plus, une harmonie des couleurs, formes et typos est rapide à créer. Et le gros avantage est surtout de travailler avec une vision globale de la page. Mais effectivement j’avoue, cela prends du temps de faire la maquette, la présenter au client pour faire ensuite les retouches graphiques et corrections de contenu avant la phase d’intégration.

A l’inverse, la création directement en CSS permet de gagner un temps important puisque la création se fait directement par le code  HTML/CSS – on a donc l’impression de gagner un temps fou car la maquette est directement prête en y présentant également la partie interactivité au client (roll-over, effets jQuery, parallaxes, …) – mais j’insiste bien : ce n’est qu’une impression. En réalité, nous passons un temps fou à tester, allant de notre page de code à notre navigateur sans arrêt pour voir les modifications et si elles fonctionnent correctement. On essaye différentes typos, différentes tailles et réglages, différentes couleurs et différentes dispositions des contenus les uns par rapport aux autres. Du coup le gain de temps en évitant la fastidieuse maquette Photoshop est immédiatement perdu avec les allers-retours entre notre éditeur et notre navigateur. De plus, Photoshop (ou tout autre logiciel de création graphique) est obligatoirement ouvert, pour y travailler la taille du logo, sa couleur de fond, les textures et images d’arrière plan... On se retrouve alors dans notre dossier de travail tout un tas de fichiers Photoshop qui ne sont que des parties de la maquette initialement zappée. Un PSD pour le logo, un autre pour le fond, l’autre pour le format des miniatures, etc.

Et lorsque le client nous demande une modification, comme le texte en plus gros, ou 4 photos au lieu de 3 sur la largeur, là on arrive à quelque chose de très compliqué : il faut alors revoir le CSS en partie, et bien souvent on a tendance à manipuler les règles CSS en les réadaptant plutôt qu’en les optimisant. Résultat des courses : une feuille de style CSS non-optimisée à force de la retoucher pour les corrections du client, une maquette la plupart du temps moins riche en terme de mise en page, une maintenance plus difficile, ...

En conclusion je ne suis pas sur que passer directement par le CSS pour nos WebDesign est un réel gain de temps. Cela peut être pratique pour nos propres sites mais dès qu’un avis extérieur (comme un client par exemple) vient discuter nos choix, on se retrouve avec une multitude de problèmes à gérer.

De plus, aujourd’hui on est obligé d’optimiser un maximum nos maquettes web avec l’optimisation des images, la génération de fichiers sprites, etc. Qui demande de prendre un certain recul avant t’attaquer la CSS !

On imagine pas une seule seconde un constructeur automobile réaliser un moteur sans avoir réaliser un plan parfait avant, pour voir si il a pensé à tout, ou bien un architecte construire une maison sans avoir fait un plan précis du bâtiment. Alors avant de vous jeter sur la feuille de style CSS, prenez du temps et un recul important en réalisant la maquette sous Photoshop, vous verrez, vous y gagnerez au final !

Et je serais prêt à parier que même le site de Google a été photoshopé avant !

A propos de l'auteur

jacques Danilo, blogueur et freelance

Jacques Danilo
www.pixelcrea.com

Graphiste indépendant depuis 11 ans, photographe et formateur freelance dans le Grand-Ouest. Passionné par le web et les nouvelles technologies, blogueur et entrepreneur, je suis à votre disposition :

Contactez-moi

Sur le blog du freelance

+ de 40 conseils pour gérer sa page pro sur Facebook
oui

Pages pro Facebook : le guide ultime

Vous avez une page entreprise mais qui stagne, aussi bien dans l’engagement que dans la conversion (appels, achats de produits, contacts par mails, ou visites sur votre site) ? ...

Tout savoir sur le content spinning
oui

Le content-spinning

Entre SEO et NSEO, le content spinning est une technique utile pour la création de multiple textes à la volée. Très utile pour la création de backlinks ...

Mes nouvelles cartes de visites imprimées chez moo.com
oui

Nouvelles cartes by Moo

Nouvelle année, et nouvelles cartes professionnelles pour PixelCréation. Afin de poursuivre ma refonte de la communication globale de mon entreprise, j'ai décidé ...

PixelCréation s'agrandit et recherche un agent commercial
oui

Recrutement d'un agent commercial

Dans le cadre de mon activité de formateur et de graphiste, je recherche un agent commercial (homme ou femme). La mission sera de prospecter et d'apporter des solutions en formation ...

Optimisez votre boutique réalisée avec Prestashop
oui

Boostez les performances de Prestashop

Prestashop a un inconvenient de taille, il est lourd et donc lent au chargement des pages. Comme le temps de chargement des pages pour Google a son importance, les sites ...

Partagez cet article sur les réseaux sociaux

Les commentaires

Il n'y a pas encore de commentaires, soyez le premier à réagir
Laissez un commentaire

Laissez un commentaire








* Champs obligatoires

» Retour au blog du freelance