16 ene

  • Por tecnoweb
  • En Web
  • Comentarios No Permitidos

Maquetación de Photoshop a HTML Obsoleto

Existen muchos tutoriales que te muestran como maquetar de Photoshop a HTML. Inclusive mucha gente nos ha preguntado porque no existe un curso sobre como maquetar de un PSD a HTML. Además de los tutoriales, hay muchas compañías que aceptan un PSD y lo convierten en una página web por aproximadamente $100 DLS.

Si están popular, entonces porque decimos que es Obsoleto? Buenos es un poco difícil de explicar y hacer que todo quede explicado como si fuera un tweet de 140 caracteres, pero vamos a mostrar como se hace esta maquetación, para resolver las dudas.

 

Qué es PSD a HTML? 

En general, PSD a HTML es un flujo de trabajo. Primero, una web es diseñada en un Documento de Photoshop (PSD) y después convertido a código (usando HTML, CSS, Javascript). Puedes intercambiar Photoshop con cualquier otro editor de imagen (como Pixelmator, GIMP, etc), pero en esencia es lo mismo. He aqui un desglose más detallado de este proceso:

  1. Se diseña un mockup de alta calidad en Photoshop, el diseño tiene que ser exactamente como se verá la web.
  2. Utilizarla herramienta de corte para dividir las imágenes y después exportarlas para usarlas en la web.

A primera vista, esto pareciera una excelente idea. Puede ser difícil comenzar a codificar si no sabemos como se vería el resultado final, entonces experimentar primero en Photoshop y después “exportar” a HTML suena como un proceso sensible.

Tomando esta idea, muchas compañías web han utilizado PSD a HTML como plantilla para los flujos de trabajo de equipo. En otras palabras, un diseñador crea la maqueta de Photoshop y luego lo entrega a un desarrollador que escribe todo el código. En los tiempos modernos, el puesto de trabajo de un diseñador de páginas web tiende a abarcar la estética, así como HTML y CSS.

 

Era buena idea utilizar PSD a HTML?

Si, el flujo de trabajo de PSD a HTML fue una de las mejores maneras de hacer páginas web. Hay dos grandes razones del porque solía tener sentido utilizar este método de trabajo.

La primera razón es por los efectos en las imágenes. Antes de que los navegadores soportaran todas las características modernas de CSS (drop shadows,esquinas redondeadas, gradientes, and más)  era muy difícil crear  efectos entre los navegadores sin el uso de imágenes. Los diseñadores creaban sombras y efectos redondeados como imágenes, y se utilizaban trucos para la codificación para colocar la imagen en la página. Estos efectos eran necesarios sin importar nada, entonces estos se creaban al mismo tiempo que se hacia el mockup de alta calidad.

En segundo lugar (y quizás más importante) la web solía solo estar disponible para los navegadores de escritorio y no estaban presentes los teléfonos y tablas de la manera en que están hoy. Realizar el diseño para una resolución fija de 1024 x 768 solía ser totalmente viable.

Por estas dos razones, es entendible porque un diseñador podría ver a Photoshop como su primer herramienta de Diseño Web. Los efectos en las imágenes se necesitaban para solo una resolución única de pantalla.

 

Qué es lo malo del PSD a HTML de ahora?

Cuando se enfrentan a otras áreas del arte y la tecnología, la web es un medio relativamente joven y las cosas cambian rápido. Hemos hecho docenas de sitios web que utilizan alguna variación de la metodología de trabajo de PSD a HTML mentalidad y estoy seguro de que muchas personas que están leyendo esto han hecho lo mismo, pero es hora de seguir adelante. Estas son las principales razones por las que creo que el PSD a HTML está muerto.

Responsive Web Design

En primer lugar, en la actualidad hay una gran variedad de métodos para navegar por la web. Teléfonos, tablets, escritorio, notebooks, Smart Tv y más. No existe una resolución de pantalla única en la que un diseñador se enfoque. Se podría decir que no hay un número específico de resoluciones de pantalla en la que nos tengamos que enfocar. No voy a ahondar en los detalles más finos del Responsive Design o diseño escalable, pero el punto es que Photoshop funciona a base de Pixel. Páginas Web son fluidas y cambiantes.

Diseño CSS

En segundo lugar, las nuevas características de CSS se han convertido muy comunes. Todavía hay algunos problemas persistentes, aquí y allá, pero la ayuda ha mejorado enormemente en los últimos años. Los efectos comunes como sombras, degradados y esquinas redondeadas se pueden lograr en CSS y por lo general ni siquiera necesitan basarse en imágenes.

Madurez

En tercer lugar, la industria de la web ha crecido mucho. Todos hemos tenido que probar que es lo que nos sirve y que ya no. La mayoría de las empresas prefieren que una sola persona se encargue de la maquetación. Esto también significa que hay muchas mejores herramientas para apoyar las modernas metodologías de trabajo. Existen Frameworks como Boostrap y Foundation que hacen más facíl la codificación. Aplicaciones como Balsamiq y Omnigraffle  ayudan a estructurar los sitios de manera más rápida. Aunque el lápiz y papel han perdurado durante todo el tiempo debido a que permiten extremada iteración.

Significa entonces que Photoshop si está Obsoleto?

Claro que no. Photoshop sigue siendo muy importante para el diseño web. El problema viene cuando una herramienta tan poderosa como photoshop es usada como una solución global para tareas de un nivel alto  (diseño web). Photoshop es asombroso para editar y exportar fotografías para uso web. Existen un montón de situaciones en las que aún tendría sentido generar maquetas con detalles completos (Photoshop, Illustrator, y de más) como parte de un proceso más completo. He aquí un par de ejemplos:

  • Las maquetaciones de alta calidad son de gran ayuda y sirven de mucha comunicación cuando se trabajan con clientes de diseño web. Puede parecer una manera rápida de trabajar, pero puede ser más laborioso a largo plazo porque muchos clientes no podrían entender como un wirefreme se traduciría a una página web. Una maqueta de alta calidad puede servir como una herramienta para previsualizar la idea del diseño antes de escribir  todo el código (solo para poner las ideas sobre la mesa, no lo que realmente desea).
  • Las maquetas de alta pueden ser muy importantes cuando se trabaja en un ramo donde hay equipos de trabajo muy altos.

 

Diferentes maneras de trabajar

No hay una manera exacta de decidir cual es la mejor manera de trabajar, muchos se sienten cómodos maquetando y otros no. La mejor manera de trabajar y eficaz la eliges tu y tu equipo de trabajo.La clave está en conocerse a sí mismo y lo que te hace rendir al máximo. Si hay alguna pregunta u opinión, nos encantaría nos los hicieran llegar!!!