¿Hay alguna ventaja en hacer una maqueta de imagen completa en lugar de sumergirse directamente en escribir HTML / CSS?

En el pasado, muchas empresas y diseñadores web tenían un flujo de trabajo de dos o tres partes, mínimo: diseño, marcado, backend. Estos son generales y las líneas pueden difuminarse un poco ... pero estoy seguro de que entiendes lo esencial.

A menudo, el diseñador web era "visual solamente" y solo sería responsable de construir una maqueta muy detallada en software de edición de imágenes, como Photoshop o Fireworks. Las maquetas mostrarían todos los aspectos posibles de una página web, desde colores y opciones de tipos, hasta fondos, iconos, fotos y otras imágenes que se utilizarán. Pero el "diseñador" nunca se preocupó por la construcción e implementación real en vivo. Se centraron únicamente en la apariencia.

Una vez que se aprobó el diseño (al revisar estos archivos de imagen) se llevó a cabo la segunda etapa: la transición de los archivos de imagen a HTML / CSS en vivo.

• En un entorno individual o independiente, el diseñador web puede haber usado sectores y exportado a HTML a través de algunas opciones de aplicaciones internas. En raras ocasiones, el diseñador puede construir marcos básicos de páginas HTML / CSS.

• En algunos entornos corporativos, estas maquetas permanecerían en forma de un archivo de imagen en capas (.psd, .png [para Fireworks]) para el diseñador web y el diseñador nunca se preocuparía por implementar ningún marcado o código. El "diseñador" nunca tuvo que preocuparse por cómo construir HTML o CSS para implementar esta maqueta de imagen que crearon. Los archivos de imagen fueron / son entregados a un "desarrollador" que luego es responsable de construir HTML / CSS que coincida con el archivo de imagen.

Me imagino que algunos todavía funcionan mucho de esta manera. Sin embargo, con los avances en los lenguajes de marcado, a saber, CSS3, y las mejoras de soporte del navegador, en muchos casos, el tiempo dedicado a construir cuidadosamente una representación ráster de una página web completa puede ser en gran medida inútil en muchos casos.

Con el marcado actual, es muy fácil implementar muchas necesidades de diseño web directamente a través de HTML / CSS y el uso de la aplicación de imagen se limita a generar pequeños activos de imagen o fotografías que pueden ser necesarias. (Las bibliotecas y / o plantillas como Bootstrap han impulsado aún más esta noción).

En mi propio flujo de trabajo, me he alejado notablemente de las maquetas de página completa a menos que se soliciten específicamente . Hago esto para mejorar la velocidad de diseño y asegurarme de que lo que está aprobado esté cerca de lo que finalmente se representará en los navegadores. De hecho, no he creado una maqueta de página completa en varios años. Pero sé que todavía hay flujos de trabajo con este método.

¿Hay algún beneficio real para construir maquetas de página completa en la aplicación de edición de imágenes antes de sumergirse directamente en HTML / CSS para la construcción del diseño?

El beneficio de construir maquetas de página completa es la división del trabajo.

En compañías más grandes que tienen un diseñador y un desarrollador (front-end), el trabajo del diseñador es diseñar y el trabajo del desarrollador es escribir código .

Tener esta división le permite al diseñador pasar todo su tiempo trabajando en el aspecto, la sensación y la interfaz del sitio web y no tener que saber nada sobre cómo se crea. Pueden crear diseños de mayor calidad y pensar en decisiones durante más tiempo precisamente porque no están trabajando para que el código haga lo que quieren al mismo tiempo.

También le permite al desarrollador escribir más código al no tener que pensar en cómo se verá, incluidos los pequeños detalles y los diferentes estados. Implementan el diseño lo mejor que pueden en el tiempo dado y pueden pasar a otro proyecto.

Si el diseñador también es el desarrollador, creo que la mayoría de las personas más o menos están empezando a ponerse del lado de ustedes, ya que crean un producto más tosco e iteran rápidamente para probar las cosas. Esto permite que las ideas se prueben rápidamente en lugar de crear un documento de Photoshop perfecto para píxeles.

Sin embargo, el diseño aproximado e iterativo sin código también es un enfoque válido e increíblemente útil, especialmente para diseños y flujo de trabajo. Los lenguajes de marcado y las nuevas tecnologías no inventaron trabajar rápidamente con ideas aproximadas :)

Voy a molestar a Guffa con esta respuesta. Para ser claros, no estoy tratando de identificar a Guffa, sino que los puntos con viñetas son muy comunes. Me gustaría ofrecer algunos contrapuntos también. No digo que Guffa esté equivocado y tengo razón. Simplemente estoy ofreciendo un contrapunto.

1. La parte creativa del proceso de diseño sufre si se gasta tiempo tratando de descubrir cómo hacer diferentes cosas en HTML y CSS.

Esto es cierto si uno no considera el código igualmente creativo. Photoshop y HTML / CSS / JS son medios para que un artista trabaje. Así como una pintura es tan creativa como el carbón, Photoshop puede ser tan creativo de un medio como HTML / CSS / JS.

Y el gran beneficio de trabajar directamente en HTML / CSS / JS es su multidimensionalidad. Photoshop, al final del día, es un lienzo plano. HTML / CSS / JS es un lienzo dinámico con fluidez, interacción, animación, etc.

En pocas palabras, diría que el código es el medio más creativo en este caso.

2. Cuando los diseñadores y codificadores son personas diferentes, incluso si los diseñadores son bastante buenos en HTML y CSS, rara vez son realmente buenos en la codificación. El resultado sería (en diversos grados) un código ineficiente que está hinchado y difícil de mantener.

El contrapunto a esto, lamentablemente, es algo con lo que me encuentro con demasiada frecuencia: la mayoría de los desarrolladores que trabajan en roles dedicados trabajan en organizaciones más grandes (donde los roles dedicados son más la norma) y, debido a la falta de conocimiento multidisciplinario ( y, a menudo, una falta total de código de capa de presentación) hace que algunos de los códigos frontales más inflados sean difíciles de mantener que he visto.

El punto es que no consideraría las habilidades de diseño visual de nadie como una indicación de sus habilidades de codificación. Iría un paso más allá y argumentaría que un generalista talentoso que conoce el diseño y la codificación, incluso si no es el mejor diseñador o el mejor codificador, a menudo puede crear un producto global mejor que el equipo altamente segregado simplemente debido al hecho que pueden ver la imagen más grande a medida que crean. Se pierde mucho menos en la traducción.

3. Si comienza a escribir el código antes de tener una visión clara de cómo debería ser el diseño, toma decisiones informadas sobre cómo construir el código. El riesgo es que empeorará el código y limitará las posibilidades para el diseño.

Pero diseñar en código no significa que ese sea su código de producción. He trabajado en proyectos en los que la mayor parte del código que creamos era puramente para el diseño completo y luego realicé algunos prototipos. Una vez terminado, haríamos una reescritura limpia. Esto tuvo el beneficio adicional de que pudimos encontrar muchas 'trampas' en la primera ronda de codificación.

4. El código HTML y CSS puede cambiar prácticamente con pequeños cambios en el diseño, lo que haría que el proceso de diseño sea más estático. Corre el riesgo de limitarse solo a los cambios que son fáciles de realizar en el código.

El argumento contrario a esto es que el diseñador se limita solo a los cambios que son fáciles de hacer en Photoshop. No es un muy buen argumento de ninguna manera.

La única razón para no hacer una maqueta de Photoshop primero es si el diseñador no comprende las limitaciones del código. Nunca querrás darle al cliente una compensación de algo que no puede tener en la final.

Siempre que el PSD represente algo que se pueda replicar bastante estrechamente en CSS / HTML (dadas las limitaciones del navegador cruzado y los medios cruzados), lo haría en Photoshop (o InDesign, conozco algunos diseñadores que compiten en eso). Es más rápido y mucho más fácil manipular imágenes. Burlarme de CSS para mí sería codificar antes de codificar, si eso tiene sentido.

Hay varias razones para mantener el elemento de diseño separado del elemento de generación de código, por ejemplo:

• La parte creativa del proceso de diseño sufre si se gasta tiempo tratando de descubrir cómo hacer diferentes cosas en HTML y CSS.

• Cuando los diseñadores y codificadores son personas diferentes, incluso si los diseñadores son bastante buenos en HTML y CSS, rara vez son realmente buenos en la codificación. El resultado sería (en diversos grados) un código ineficiente que está hinchado y difícil de mantener.

• Si comienza a escribir el código antes de tener una visión clara de cómo debería ser el diseño, toma decisiones informadas sobre cómo construir el código. El riesgo es que empeorará el código y limitará las posibilidades para el diseño.

• El código HTML y CSS puede cambiar prácticamente con pequeños cambios en el diseño, lo que haría que el proceso de diseño sea más estático. Corre el riesgo de limitarse solo a los cambios que son fáciles de realizar en el código.