¿Por qué el desarrollo web se ve diferente de los diseños PSD que me han enviado para su verificación?

Answer 1

¿Por qué un modelo se ve diferente en la portada de una revista cuando camina por la calle?

Photoshop es tu ideal, tu HTML es tu realidad.

Una sola imagen de Photoshop es fácil de producir (bueno para personas con más talento que yo) y se mantendrá constante sin importar a través del navegador que la vea. Literalmente puede controlar el color y la posición de cada píxel.

Construir la página es un juego completamente diferente.

Aquí se trata de entidades en vivo como el texto que se representa en la fuente que especifique, pero cómo elige el navegador / SO / dispositivo e incluso si tiene acceso a la fuente que especificó. Ahora amplíe este problema de representación para incluir una gama de navegadores que han evolucionado en los últimos 20 años, al menos cinco sistemas operativos principales (Win, Linux, OSX, iOS, Android), cada uno con sub versiones y compilaciones (Win7, Win8, Win8. 1, Gingerbread, KitKat, Mountain Lion, Mavericks, Yosemite, RedHat, Fedora, …). Su usuario final también puede optar por anular su fuente, tamaño, colores, pero aún así espera que la página funcione.

Su compilación HTML probablemente tenga algunas interacciones de hoja de estilo e JS y dado que está hablando de un sitio moderno, probablemente también responda.

¿Su sitio también necesita ser accesible, rápido y tal vez llamar algunos datos externos?

El trabajo de un desarrollador no es fácil. Estoy asombrado de lo que nuestros muchachos producen a diario en comparación con lo que producía hace 20 años.

Alternativamente, sus desarrolladores podrían ser una mierda y necesita encontrar algunos mejores.

Answer 2

Este es un problema común con el diseño y desarrollo web. Su navegador representa las imágenes de manera diferente que Photoshop (Photoshop es sorprendente en el suavizado), por lo que su fuente en las páginas estáticas se verá diferente.

Si su desarrollador está separado de su diseñador, es posible que no sepan extraer los activos de sus psds correctamente, pero pueden ser un desarrollador brillante de los archivos correctos.

Pídale a su diseñador que corte los recursos para la web (guarde logotipos / imágenes en PNG o JPG de alta resolución, deben saber qué elegir) y pasárselo a su desarrollador. También solicite al diseñador que encuentre alternativas de fuentes web para que las use su desarrollador.

¡Espero que esto ayude! pm, si necesita más consejos, con gusto lo ayudaré.

Answer 3

Desafortunadamente, muchas cosas que son fáciles de hacer en Photoshop son difíciles o imposibles de hacer en un sitio web real. Los buenos diseñadores conocen las limitaciones y los buenos desarrolladores coinciden estrechamente con las especificaciones de diseño, pero si hay alguna deficiencia en cualquier lado de esa ecuación, habrá inconsistencias entre el diseño inicial y el producto terminado.

Answer 4

O el diseñador diseñó algo que no se pudo construir
o
La comunicación entre el diseñador y el desarrollador no ha sido óptima.

Pregúntele al desarrollador y al diseñador por qué el diseño no coincide.

Answer 5

Hay razones por las que un desarrollador puede querer degradar la calidad de la imagen o tomar atajos, como el ancho de banda de la imagen o el tiempo de desarrollo para iniciar. Un desarrollador web comunicativo obtendría cierres de sesión antes de hacer compensaciones, pero no todos los desarrolladores tienen ese rasgo.

Sugeriría que el gerente se asegure de que estas compensaciones estén articuladas por parte del desarrollador, y que elija si estos son sacrificios aceptables. Si se espera una alta fidelidad en todos los aspectos de ese diseño gráfico, entonces eso debe comunicarse claramente.

Answer 6

Las imágenes estáticas están diseñadas para verse sin conexión. Mientras que un sitio web si tiene demasiadas imágenes de alta definición tardará años en cargarse con una conexión a Internet lenta.

Sin embargo, las imágenes pixeladas son inaceptables y deben resaltarse para el desarrollador y deben reemplazarse con archivos de mayor definición.

Esto también podría ser un problema debido a que la diferencia en la resolución y el tamaño de la pantalla es diferente, en cuyo caso debe considerar el desarrollo de un sitio web receptivo.

Informe a su desarrollador de inmediato que no está satisfecho con la pixelación. Cuanto antes mejor.

Answer 7

en photoshop, puedes apilar elementos fácilmente. En html y css, * puedes * hacer esto, y luego rehacerlo para todos los diferentes navegadores, pero la mayoría de las veces, simplemente no vale la pena. Si puede obtener una excelente representación en 2 horas, o una copia exacta en todos los navegadores en 30 horas, ¿cuál le gustaría pagar?