Con la invención de CSS3, ¿debería un diseñador web usar Photoshop?

13

Veo que muchos diseñadores crean hermosos trabajos de diseño web en Photoshop, pero ahora con la llegada de CSS3, cuando quieren cambiar eso a HTML y CSS, simplemente comienzan desde cero y crean algo alrededor del 80% del diseño final usando CSS3.

Por ejemplo, usan el radio del borde, la opacidad, el gradiente de fondo, la sombra del cuadro y la sombra del texto, y otras reglas CSS3 para obtener lo que han creado en Photoshop. Muchas veces solo importan una imagen de Photoshop, que es más como un pincel o un logotipo, o algo así.

Mi pregunta es, ¿deberían los diseñadores web seguir usando Photoshop para crear algo, de los cuales solo el 20% les sería útil?

¿Puede un diseñador web crear todo el diseño directamente en HTML y CSS sin molestarse en agregar otra capa intermedia para crear un diseño en Photoshop, y luego simplemente crear los elementos restantes allí?

Saeed Neamati
fuente
Diseñar la interfaz del sitio versus diseñar el aspecto son dos temas diferentes. Photoshop es una herramienta terrible de marco de alambre; sin embargo, productos como MockFlow son una herramienta visual terrible. El 99% de mis clientes NO PUEDEN interpretar con precisión un marco de alambre en cuanto a cómo un efecto de sombra o un esquema de color funcionarán juntos (o innumerables otras situaciones dependientes visuales).
Dawson
Esto debería ser un chat o al menos meta. No tiene una respuesta finita.
b01

Respuestas:

17

Tengo que estar en desacuerdo con todos. Photoshop no es una herramienta para diseñar un sitio web. Es una herramienta para dibujar un sitio web. El sitio web aún debe estar diseñado en el medio en el que se encuentra, que tiende a ser CSS, HTML y JS.

Eso no significa que no uses Photoshop. Pero ciertamente no tienes que hacerlo.

Soy un gran admirador de no mostrar nunca diseños de sitios web en Photoshop a clientes. No es el medio en el que vivirá el sitio. Las composiciones de Photoshop no ofrecen la capacidad de comunicar interacciones, diferencias de dispositivos, idiosincrasias del navegador, clics, capacidad de respuesta, etc.

Es cierto que, en realidad, muchas veces todavía necesitas mostrar maquetas de JPG. Multa. Usa Photoshop para eso. Pero no tome ese archivo PSD, córtelo y córtelo en un sitio web. Eso tenía sentido en 1999. No tanto hoy. En cambio, toma esa PSD y úsala como guía. Esto es más o menos como debería ser el sitio, pero tenga en cuenta el hecho de que se está construyendo en CSS / HTML / JS y se adapta según sea necesario.

Entonces, para responder la pregunta:

¿Puede un diseñador web crear todo el diseño directamente en HTML y CSS sin molestarse en agregar otra capa intermedia para crear un diseño en Photoshop, y luego simplemente crear los elementos restantes allí?

Si. Ciertamente se puede hacer eso. Lo he visto en paralelo con los diseñadores de PSD. El mayor problema con el enfoque PSD es cuando estás trabajando en un equipo ágil. Los archivos pesados ​​utilizados para la documentación (como PhotoShop) se convierten en cargas bastante grandes para el proceso Agile y terminan agregando más problemas de los que resuelven. Tendemos a trabajar en reversa ... bosquejamos en PS según sea necesario, y luego diseñamos y construimos en HTML / CSS / JS. Cuando necesitemos realizar actualizaciones visuales rápidas para las reuniones, solo haremos una captura de pantalla del marcado de la capa de presentación de trabajo, y lo aplicaremos en PhotoShop y lo modificaremos rápidamente.

DA01
fuente
Estoy contigo @ DA01. +1.
Saeed Neamati
1
+1 gran artículo (bueno, tal vez no sea un artículo), ¡pero seguro que lo resumiste bien! Estoy totalmente de acuerdo con casi todo lo que dijiste. ¡Personalmente, me propongo proporcionar a mis clientes maquetas en vivo de HTML y CSS con una funcionalidad de diseño completa para que puedan 'experimentar' el diseño!
Web_Designer
2
+1 para "captura de pantalla del marcado de la capa de presentación de trabajo". Hasta que leí esta respuesta, estaba pensando en decir algo como esto en mi propia respuesta, pero no tendría mucho que agregar, así que simplemente voté en su lugar ...
Aᵂᴱ
Comencé a hacer la mayor parte de mi trabajo de diseño en el navegador usando css3 por año y rara vez incluso abro Photoshop.
Chris_O
1
+1! Photoshop es principalmente un programa de manipulación de mapas de bits. Para un código ligero y bien controlado, no hay mejor manera que html y css directos. Siempre habrá cosas que tendrán que cambiar de PS a web, y como yo lo veo; PS solo agrega una capa complicada para el cliente.
antes del
7

** EDITAR **

¿Cliente nuevo?

Absolutamente: si está presentando un diseño para un NUEVO cliente / sitio. Los laicos generalmente tienen dificultades para ver lo que hay en tu (mi) cabeza. Las estructuras alámbricas, los dibujos, etc. tampoco siempre lo cortan, rasca eso, no lo cortan. Escucho más, "Pensé que iba a hacer una X" de los clientes cuando todo lo que tienen es un WF, o un boceto que cuando recibo una maqueta con su logotipo, fotos, fuentes corporativas y una interfaz de usuario.

Cualquier otro escenario:

Tal vez no: si puede usar HTML / CSS / JS existente que coincida con los requisitos del trabajo, o si está editando contenido de un cliente existente, será mejor que trabaje solo en el código. Si no, probablemente perderá una gran cantidad de tiempo en Photoshop con muy poco rendimiento. Existen esos casos (como @ DAO1 mencionado) en los que una captura de pantalla y un ajuste a través de Photoshop realmente pueden acelerar un proceso de aprobación, o elaborar una idea, o tres.

** final **

Yo digo si -

Es mucho más fácil vender sus diseños (y mucho más rápido crear composiciones) con un visual, incluso si está simplificado. Ahí es donde PS es más útil para mis trabajos.

También incorporo una capa con un sistema de cuadrícula, para poder ver cómo se presentan las cosas y arrastrarlas rápidamente a donde las necesito. Nuevamente, esto ayuda con las compilaciones y los cambios solicitados por el cliente.

Si mantiene una biblioteca de Photoshop de sus elementos de uso común: cuadros de entrada de esquina redondeada basados ​​en vectores, su (s) cuadrícula (s), cuadro "logotipo va aquí" ... todo en capas de un solo archivo o múltiples archivos (su elección) - podrá construir páginas de inicio y páginas interiores en una fracción del tiempo que lleva codificarlas.

Mantener un archivo CSS común (con configuraciones populares) también ayudará cuando llegue el momento de codificar, pero no veo el valor de eliminar PS del flujo de trabajo, independientemente de cuán robusto sea CSS.

Dawson
fuente
"en una fracción del tiempo que lleva codificarlos", eso realmente depende de muchas cosas, incluido el conjunto de habilidades del diseñador. Me parece que a menudo es más rápido hacer cambios / ajustes del cliente directamente en CSS / HTML / JS que volver a Photoshop. Pero depende de muchos factores.
DA01
DA01: absolutamente. Mi flujo de trabajo cambia a medida que el proyecto madura. Después del lanzamiento, los PSD no se tocan.
Dawson
3

¿Puede garantizar que el 100% de sus usuarios tengan navegadores que verán su sitio exactamente de la manera en que usted (o lo que es más importante, el cliente) pretende que se vea? ¿No? Entonces, ¿qué porcentaje? 90%? 80%?

¿Puede asegurarse de que se degrada bien, de modo que la versión alternativa vista por el 10% restante (20%? 40%?) Sea aceptable?

Si uno o ambos problemas son un problema, necesita un poco de Photoshop.

Lauren-Clear-Monica-Ipsum
fuente
Lo siento; ¿porqué es eso? ¿Puedes explicar a qué te refieres?
antes del
@boblet Por favor sea específico en su pregunta. ¿Explica que?
Lauren-Clear-Monica-Ipsum
Oh, lo siento; Me preguntaba por qué dice que necesita un PS debido a la falta de coherencia del navegador. De alguna manera no tiene sentido para mí.
antes del
@boblet Lo que quiero decir es que con algunos efectos (por ejemplo, esquinas redondeadas) puede crearlo en CSS o Photoshop. Pero los navegadores más antiguos no pueden manejar esquinas redondeadas CSS; salen como esquinas regulares de caja. Entonces, si la esquina redonda es realmente importante, debe usar Photoshop para crearla como un gráfico para que todos los navegadores puedan verla.
Lauren-Clear-Monica-Ipsum
¡Ajá! Eso tiene un poco más de sentido. Ahora veo, sin embargo, que esta es una publicación antigua, y en estos días css esquinas redondeadas, sombras, etc., ya no es realmente un problema. Simplemente me preocupaba la práctica de crear maquetas encantadoras en PS y luego tropezar con problemas para traducir eso en código sensible. A menudo es difícil para los clientes tragar eso; ya que a menudo no entienden el puente que necesita cerrar la brecha entre el mapa de bits y el código. Gracias por la explicación.
antes del
2

Cosas para pensar:

  • Se necesita mucho para poner esos diseños elegantes en la web. Al menos para los más complejos. Photoshop ayuda a ver el resultado final más rápido.

  • Para un diseñador en su trabajo, hacer una maqueta en Photoshop suele ser más rápido y justificado, ya que no pasará todo el día pirateando html y CSS3.

  • Como mencionó, pueden hacer el 80% en CSS3, pero eventualmente necesitarán que Photoshop forme parte.

  • Yo diría que renuncias a hacer una maqueta en Photoshop si eres el diseñador y desarrollador y ahorrarías tiempo; de lo contrario, siempre haz una maqueta en Photoshop.

b01
fuente