Es una pregunta que muchas personas me han planteado dada la aparición de nuevas tecnologías de desarrollo web.
Aquí intentaré aclarar este tema controversial que da sentido a este blog…
Hoy tocaré un tema bastante controversial y que algunos seguramente no estarán de acuerdo, pero basaré mi explicación en más de 10 años de experiencia en este ambito.
La conversión de PSD a HTML
Por si aún quedan dudas, te comento que la conversión de PSD a HTML es el proceso por el cual un diseño de un sitio web realizado en el programa Adobe Photoshop, se convierte en una pagina HTML funcionando en internet.
Todo sitio web comienza diseñándose en Photoshop u otro software de diseño como si fuera una pieza grafica (de hecho lo es) y luego se debe codificar para visualizar en los navegadores web.
Este es el proceso por excelencia con el cual se crean sitios web profesionales y que consta de diversos pasos específicos que debes seguir para obtener buenos resultados.
(si quieres saber más del tema, te recomiendo a mi curso “PSD a HTML Paso a Paso”)
Hasta aquí todo claro.
Las nuevas tecnologías, y el cambio
Dicho proceso de conversión PSD a HTML se basa en exportar las diferentes partes del diseño en imágenes (sin los textos), para luego poder codificar con HTML, insertar esas imágenes, incluir los textos y lograr que el resultado sea idéntico al diseño original.
Este proceso se llamaba “pixel perfect”.
Esto significaba que uno debía exportar tal cual y con un detalle de pixel por pixel, cada parte del diseño. Los elementos debían tener medidas y ubicaciones exactas para que luego nos quedara un resultado idéntico.
Dicho proceso servía porque justamente la intención era lograr el mismo resultado que en el diseño, es decir, que el sitio final en HTML midiera lo mismo que el original.
El problema vino cuando empezaron a aparecer los diferentes dispositivos móviles (notebooks, tablets, smartphones) los cuales poseían pantallas de diferentes medidas, y como el sitio tenia medidas fijas y las pantallas ya no, entonces la visualización se complicaba muchísimo.
Por ejemplo:
Si el sitio en el diseño original media 960 px, de ancho y yo lo maquetaba usando PSD a HTML, iba a lograr idealmente, un sitio de 960px de ancho fijo con elementos fijos.
Si lo veía en una computadora de escritorio se vería perfecto, ¿pero que pasaba si lo veía en un smartphone cuya pantalla tenia de ancho unos 480px ?
Obviamente, no entraría y tendría que scrollear, desplazarme todo el tiempo para poder ver las partes que no entraban en pantalla.
Adicionalmente, los textos se verían muy chicos y las imágenes también.
La SOLUCION perfecta
En respuesta a esta demanda del mercado (los móviles) se tuvo que implementar otra tecnología que permitirá a los sitios web, adaptarse automáticamente al tamaño de pantalla del dispositivo que lo estuviera navegando.
Esta tecnología se llamó “Responsive Design” o “Diseño Responsivo o Adaptable y sirvió para poder lograr que con el armado de un solo sitio, se pudiera cubrir la visualización para todos los dispositivos.
Realmente es mágico y hoy en día funciona a la perfección.
(si quieres saber más de Resposive puedes acceder a “Responsive Desgin desde Cero”)
¿Pues bien, y el PSD a HTML?
Ok hasta aquí todos contentos, pero con la aparición de Responsive Design, surgieron otras soluciones en Javascript para el armado de sitios web Responsivos como por ejemplo Bootstrap.
Bootstrap es un entorno de trabajo (framework) que permite rápidamente construir sitios responsivos trayendo además, elementos pre-hechos como botones, formatos de textos y demás cosas.
Considero que es una excelente herramienta para crear sitios responsivos rápidamente, sin tener que entrar en detalle sobre la estilización de cada elemento del diseño.
Pero…
Al fin aquí la controversia!
Retomando el tema….con la aparición de estas herramientas de creación web, muchas personas tienden a decir que el proceso de conversión de PSD a HTML ha muerto…. que ya no hace falta… que para que tanto trabajo.
Bien…personalmente pienso que el proceso PSD a HTML no ha muerto en lo absoluto, y aquí te explico por qué.
El diseño, la comunicación y las páginas web
Como dije más arriba, si quieres hacer un sitio rápidamente y que sea responsivo, puede usar perfectamente cualquier framework como Bootstrap.
Pero no debemos olvidar que un sitio web se crea en base a una necesidad, por ejemplo, mostrar un producto o servicio que se ofrece.
Para esto, siguiendo las reglas del diseño, se debe diseñar un sitio web de forma grafica, acorde a la imagen y a las necesidades de la empresa o persona que promociona ese producto o servicio.
Si eres diseñador, sabes que cualquier pieza grafica (un sitio web también) se crea con una intención de comunicar algo y para ello, se combinan diferentes colores, formas, texturas, fuentes tipográficas y demás elementos, con el fin de lograr comunicar lo que hay que comunicar.
Por ejemplo, no se usarán los mismos colores, fuentes y formas para comunicar un producto deportivo y masivo, que para un producto femenino y delicado.
En este punto, un sitio web no tiene mucha diferencia con cualquier pieza grafica impresa en papel ya que ambas comunican algo de determinada forma y con un determinado fin.
Obviamente un sitio web deberá tener resuelta adicionalmente la parte de usabilidad, es decir, como el usuario navegará o interactuará con el sitio de forma fácil y amena.
Mas allá de eso, es como cualquier pieza gráfica comunicacional.
¿Entonces el PSD a HTML aun sirve?
Dicho esto y como podrás ir deduciendo, si uno desea crear un sitio web de forma correcta y que comunica lo que se requiere, siempre se deberá comenzar diseñando la pagina web en un soporte grafico como Photoshop o Illustrator.
La diferencia hoy es que se debe tener en cuenta que el sitio va a adaptarse a las pantallas de los móviles, pero SIEMPRE se parte de un “diseño base” en una medida fija, al menos como para tener una referencia inicial.
Y por supuesto, se utiliza la conversión de PSD a HTML para llegar a la “primera versión” del sitio maquetado y funcional.
Luego de allí, se utiliza Responsive Design para hacer que el sitio se adapte a los móviles como nosotros queramos.
Conclusión
Si queremos crear sitios web profesionalmente, debemos diseñar páginas de forma grafica (por ejemplo con Photoshop) siguiendo los requerimientos comunicacionales del proyecto en sí.
Luego debemos convertir ese diseño de PSD a HTML para lograr una versión que funcione en los navegadores.
Y por último, utilizar la tecnología de Responsive Design para hacer que el mismo se adapte a las pantallas de los dispositivos.
NO HAY otra camino para lograr sitios web que comuniquen lo que el cliente desea y que funcionen correctamente en todos los dispositivos y navegadores.
Por lo tanto, señoras y señores, el PSD a HTML seguirá vivo por mucho tiempo más.
Saludos!
Cristian
Excelente artículo. Ojalá se mantenga la labor hecha con Photoshop, Fireworks y otras herramientas. Si desaparece , detrás viene la desaparición del diseñador gráfico e iremos a un mundo monótono y aburrido de plantillas pre-hechas donde el navegante no verá diferencia entre una web de moda y una de canalizaciones industriales.
Asi es Esteve, estoy de acuerdo contigo.
Justamente a eso apuntaba el articulo, a que con la aparición de nuevas tecnologías que facilitan el desarrollo web, muchas veces se pierde la verdadera esencia de la pieza gráfica que es comunicar algo.
Esperemos que no pase.
Saludos!
Cristian
El origen y el futuro es vectorial, asi se inventó la interfaz grafica en Xerox en los años 60 con trazas analogicas de vectores en un tv de rayos catodicos (quien con mas de 40 no jugo al arcade Asteroids.. recuerdan lo pristino de esas lineas blancas en pantalla?), estamos en una etapa de transición «responsiva» hacia el diseño unificado de web e interfaces gráficas de usuario, por eso esta difundiendose el uso de xml para GUIs hasta que se logre consolidar un estandar a nivel de sistemas operativos como lo es actualmente la gestión de tipografias, introducidas por Steve Jobs hace varios años. Creo que a medida de los dispositivos moviles incrementen su potencia es muy probable que veamos nuevas y potentes herramientas de diseño pero más cerca de un formato SVG del Inkscape que de bitmaps de Photoshop.-
Anibal
La tecnología SVG esta avanzando mucho en los últimos tiempos y realmente es muy interesante para muchas cosas, sobre todo para representacion de imágenes en tiempo real o dinámicas.
Pero si partimos de la base de que un sitio web es una pieza comunicación de diseño, pienso que justamente para el proceso de diseño siempre se va a recaer en un software que maneje mapas de bits, al menos por un tiempo largo mas.
Por lo tanto la maquetacion seguirá existiendo, obviamente hoy por hoy podemos hablar de la inclusión de HTML5, CSS3 y jQuery (javascript) pero como complementos de la maquetacion en si y no como un reemplazo.
Saludos y gracias por tu aporte!
Gran artículo y muy desarrollado!! Solo hay una cosa que quiero comentar yo he hecho y montado tanto diseño psd como páginas web, y el diseño hay que tratarlo de dejar lo más parecido posible, pero idéntico al 100% es imposible sea cual sea,el diseño es orientativo. Porque no es lo mismo maquetar una foto,una revista o un flyer que una web, que lleva problemas con navegadores,las tabletas, y sus correspondientes resoluciones. Saludos Cordiales desde Zaragoza España
Gracias Jesús.
Así es, hoy en día es difícil lograr un 100% de igualdad entre el PSD original y el sitio terminado, aunque te digo que si se puede.
Yo sigo trabajando asi, respetando 100% el diseño original y luego aplicando Responsive para hacerlo adaptable a móviles.
Saludos!