Avec l'invention de CSS3, un concepteur Web devrait-il utiliser Photoshop?

13

Je vois que de nombreux concepteurs créent de belles œuvres de conception Web dans Photoshop, mais maintenant avec l'arrivée de CSS3, quand ils veulent changer cela en HTML et CSS, ils partent tout simplement de zéro et créent quelque chose autour de 80% de la conception finale en utilisant CSS3.

Par exemple, ils utilisent le rayon de la bordure, l'opacité, le dégradé d'arrière-plan, l'ombre de la boîte et l'ombre du texte et d'autres règles CSS3 pour obtenir ce qu'ils ont créé dans Photoshop. Plusieurs fois, ils importent uniquement une image de Photoshop, qui ressemble plus à un pinceau ou un logo, ou quelque chose comme ça.

Ma question est la suivante: les concepteurs Web devraient-ils toujours utiliser Photoshop pour créer quelque chose, à partir duquel seulement 20% leur seraient utiles?

Un concepteur Web peut-il créer la conception entière directement en HTML et CSS sans prendre la peine d'ajouter une autre couche intermédiaire de création d'une conception dans Photoshop, puis de simplement y créer les éléments restants?

adobe-photoshop website-design css Saeed Neamati
la source
Concevoir l'interface du site et concevoir le look sont deux sujets différents. Photoshop fait un terrible outil de fil de fer; cependant, des produits comme MockFlow constituent un terrible outil visuel. 99% de mes clients NE PEUVENT PAS interpréter avec précision un cadre filaire sur la façon dont un effet d'ombre ou un jeu de couleurs fonctionnera ensemble (ou d'innombrables autres situations visuellement dépendantes).
Dawson
Cela devrait être un chat ou au moins une méta. Il n'a pas de réponse finie.
b01

Réponses:

17

Je dois être en désaccord avec tout le monde. Photoshop n'est pas un outil pour concevoir un site Web. C'est un outil pour esquisser un site Web. Le site Web doit toujours être conçu sur le support dans lequel il se trouve - qui a tendance à être CSS, HTML et JS.

Cela ne signifie pas que vous n'utilisez pas Photoshop. Mais vous n'avez certainement pas à le faire.

Je suis un grand fan de ne jamais montrer de conceptions de site Web dans Photoshop à des clients. Ce n'est pas le support sur lequel le site vivra. Les compositions Photoshop n'offrent aucune capacité de communiquer l'interaction, les différences entre les appareils, les particularités du navigateur, la cliquabilité, la réactivité, etc.

Certes, en réalité, la plupart du temps, vous avez encore besoin de montrer des maquettes JPG. Bien. Utilisez Photoshop pour cela. Mais ne prenez pas ensuite ce fichier PSD et découpez-le en un site Web. Cela avait du sens en 1999. Pas tant aujourd'hui. Au lieu de cela, prenez ce PSD et utilisez-le simplement comme guide. C'est à peu près à quoi devrait ressembler le site, mais prenez en compte le fait qu'il est construit en CSS / HTML / JS et adaptez-le au besoin.

Donc, pour répondre à la question:

Un concepteur Web peut-il créer la conception entière directement en HTML et CSS sans prendre la peine d'ajouter une autre couche intermédiaire de création d'une conception dans Photoshop, puis de simplement y créer les éléments restants?

Oui. On peut certainement le faire. J'ai vu cela en parallèle avec les concepteurs PSD. Le plus gros problème avec l'approche PSD est lorsque vous travaillez dans une équipe agile. Les fichiers lourds utilisés pour la documentation (tels que PhotoShop) deviennent des charges assez importantes pour le processus Agile et finissent par ajouter plus de problèmes qu'ils n'en résolvent. Nous avons tendance à travailler ensuite en sens inverse ... nous esquissons en PS au besoin, puis concevons et construisons en HTML / CSS / JS. Lorsque nous devons ensuite effectuer des mises à jour visuelles rapides pour les réunions, nous allons simplement faire une capture d'écran du balisage de la couche de présentation, le gifler dans PhotoShop et le modifier rapidement.

DA01
la source
Je suis avec toi @ DA01. +1.
Saeed Neamati
1
+1 excellent article (d'accord, ce n'est peut-être pas un article), mais vous l'avez bien résumé! Je suis totalement d'accord avec à peu près tout ce que vous avez dit. Personnellement, je tiens à fournir à mes clients des maquettes HTML et CSS en direct avec des fonctionnalités de conception complètes afin qu'ils puissent «expérimenter» la conception!
Web_Designer
2
+1 pour "capture d'écran du balisage de la couche de présentation de travail". Jusqu'à ce que je lise cette réponse, je pensais à dire quelque chose comme ça dans ma propre réponse, mais je n'aurais pas grand-chose à ajouter, alors je vote plutôt à la place ...
Aᵂᴱ
+1 J'ai commencé à faire la plupart de mon travail de conception dans le navigateur en utilisant css3 un an à la fois et j'ouvre même rarement Photoshop.
Chris_O
1
+1! Photoshop est principalement un programme de manipulation de bitmap. Pour un code léger et bien contrôlé, il n'y a pas de meilleur moyen que direct html et css. Il y aura toujours des choses qui devront changer du PS au Web, et comme je le vois; PS ajoute seulement une couche compliquée pour le client.
benteh
7

** ÉDITER **

Nouvelle cliente?

Absolument - Si vous présentez un design pour un NOUVEAU client / site. Les laïcs ont généralement du mal à voir ce que vous avez dans la tête. Les wireframes, les dessins, etc. ne le coupent pas toujours non plus - grattez-le - ils ne le coupent pas. J'entends plus, "je pensais que ça allait faire X" des clients quand tout ce qu'ils ont est un WF, ou un croquis que je leur fais quand ils reçoivent une maquette avec leur logo, des photos, des polices d'entreprise et une interface utilisateur.

Tout autre scénario:

Peut-être pas - si vous pouvez utiliser un code HTML / CSS / JS existant qui correspond aux exigences du travail, ou si vous modifiez le contenu d'un client existant, vous feriez mieux de travailler uniquement dans le code. Sinon, vous allez probablement perdre un temps brut dans Photoshop pour très peu de retour. Il y a des cas (comme @ DAO1 mentionné) où une capture d'écran et une modification via Photoshop peuvent vraiment accélérer un processus d'approbation, ou élaborer une idée, ou trois.

** fin **

Je dis oui -

Il est beaucoup plus facile de vendre vos conceptions (et beaucoup plus rapide pour créer des compositions) avec un visuel - même si c'est simplifié. C'est là que PS est le plus utile pour mon travail.

J'intègre également une couche avec un système de grille, afin que je puisse voir comment les choses sont disposées et les faire glisser rapidement là où j'en ai besoin. Encore une fois, cela aide avec les compositions et les modifications demandées par le client.

Si vous conservez une bibliothèque Photoshop de vos éléments couramment utilisés: boîtes de saisie à coins arrondis à base vectorielle, votre ou vos grilles, boîte "logo va ici" ... le tout dans les couches d'un seul fichier ou de plusieurs fichiers (votre choix) - vous pourrez créer des pages d'accueil et des pages intérieures en une fraction du temps nécessaire pour les coder.

Garder un fichier CSS commun (avec des paramètres populaires) aidera également au moment de coder, mais je ne vois pas l'intérêt d'éliminer PS du flux de travail - quelle que soit la robustesse de CSS.

Dawson
la source
"dans une fraction du temps qu'il faut pour les coder" cela dépend vraiment d'un certain nombre de choses - y compris les compétences du concepteur. Je trouve qu'il est souvent plus rapide d'apporter des modifications / ajustements au client directement dans CSS / HTML / JS que de revenir dans Photoshop. Mais cela dépend de nombreux facteurs.
DA01
DA01 - absolument. Mon flux de travail change à mesure que le projet mûrit. Après le lancement, les PSD ne sont pas touchés.
Dawson
3

Pouvez-vous garantir que 100% de vos utilisateurs ont des navigateurs qui verront votre site exactement comme vous (ou plus important encore, le client) avez l'intention de le voir? Non? Alors quel pourcentage? 90%? 80%?

Pouvez-vous vous assurer qu'il se dégrade bien, de sorte que la version alternative vue par les 10% restants (20%? 40%?) Soit acceptable?

Si l'un de ces problèmes ou les deux posent problème, vous avez besoin de Photoshop.

Lauren-Clear-Monica-Ipsum
la source
Pardon; pourquoi donc? Pouvez-vous expliquer ce que vous voulez dire?
benteh
@boblet Veuillez être précis dans votre question. Expliquer quoi?
Lauren-Clear-Monica-Ipsum
Ah désolé; Je me demandais pourquoi vous dites que vous avez besoin de PS à cause du manque de cohérence du navigateur? D'une certaine manière, cela n'a pas de sens pour moi.
benteh
@boblet Ce que je veux dire, c'est qu'avec certains effets (par exemple, coins arrondis), vous pouvez le créer en CSS ou Photoshop. Mais les navigateurs plus anciens ne peuvent pas gérer les coins arrondis CSS; ils sortent comme des coins de boîte réguliers. Donc, si le coin rond est vraiment important, vous devez utiliser Photoshop pour le créer sous forme de graphique afin que tous les navigateurs puissent le voir.
Lauren-Clear-Monica-Ipsum
Ah! Cela a un peu plus de sens. Je vois maintenant, cependant, que c'est un vieux post, et ces jours-ci, les coins arrondis, les ombres, etc. ne sont plus vraiment un problème. J'étais juste préoccupé par la pratique de créer de délicieuses maquettes dans PS, puis de me heurter à des problèmes de traduction en code sensé. Il est souvent difficile pour les clients d'avaler cela; car ils ne comprennent souvent pas le pont qui doit combler l'écart entre le bitmap et le code. Merci d'avoir expliqué.
benteh
2

Points à considérer:

  • Beaucoup de choses sont nécessaires pour mettre ces conceptions fantaisistes sur le Web. Du moins pour les plus complexes. Photoshop permet de voir le résultat final plus rapidement.

  • Pour un concepteur dans son travail, faire une maquette dans Photoshop est généralement plus rapide et justifié, car vous ne passerez pas toute la journée à pirater HTML et CSS3.

  • Comme vous l'avez mentionné, ils peuvent en faire 80% en CSS3, mais ils auront éventuellement besoin de Photoshop pour faire partie.

  • Je dirais que vous renoncez à faire une maquette dans Photoshop si vous êtes le concepteur et le développeur et que cela gagnerait du temps, sinon faites toujours une maquette dans Photoshop.

b01
la source