Muchas veces, al intentar maquetear diseños de sitios Web nos encontramos con varias sorpresas.Para evitar esto, es necesario generar una buena comunicación entre el equipo de diseño y el de desarrollo HTML.

El objetivo de este artículo es conseguir que un diseñador pueda enviarle un archivo PSD a un desarrollador Web que se encuentre en otro país, ciudad u oficina, y que la maqueta que reciba de vuelta sea exactamente igual a lo que el diseñador espera recibir.

Planteo esta pauta para que los diseñadores sepan que cosas deben y pueden entregar para hacer más fácil la comunicación entre ellos y los desarrolladores.

¿Qué debe esperar un diseñador al entregar un diseño Web?

Cualquier diseño, por complejo que sea, puede ser maqueteado exactamente igual al diseño que nos entreguen.

Un buen maqueteador se las ingeniará para calcar la gráfica, utilizando todos los recursos existentes, como backgrounds o imágenes y los distintos formatos (png, gif y jpg).

¿Qué debe esperar un desarrollador web?

Que el diseño entregado siga una lista de pautas que nos hagan la tarea fácil. Más que fácil, la idea es que ambos equipos de trabajo se entiendan.

Lo ideal sería que el diseñador entregue un diseño y el desarrollador pueda interpretarlo sin problemas, y sin tener que hacer preguntas.

Antes de empezar

Preparar los wireframes

Los wireframes son una excelente herramienta para definir el contenido página por página. Hacer este paso antes del diseño evitará tener que rehacer los diseños y, por lo tanto, tener que corregir las maquetas más adelante.

Guiarse por el mapa del sitio

Si al momento de hacer un diseño no existe un mapa del sitio, es un buen momento para pensar en hacer uno. Un buen mapa de sitio define los vínculos que irán en la página y entregarlo junto con el diseño permitirá que el desarrollador haga la maqueta tal como fue pensada y no se olvide de vincular lo que corresponde.

Definir un ancho del PSD según la resolución óptima del sitio

Aunque suene obvio, hay que recordar definir un ancho antes de comenzar con el diseño. Debemos definir cual será la resolución óptima del sitio. 1024x768? Entocnes tenemos que hacer nuestro PSD más pequeño que 1024: 960 es un buen tamaño pues debemos considerar espacio para los scrolls del navegador.

Tipografías

Tipografias sin suavizado

Photoshop ofrece varios tipos de suavizado a la hora de escribir texto (none, sharp, crisp strong smooth). El problema que esto nos causa es que la tipografía web (en la mayoría de los navegadores) no posee suavizado por defecto. Es decir, que todas las personas verán los textos como si tuvieran el tipo de suavizado "none" en Photoshop.

En la teoría, supuestamente esto no nos hace ninguna diferencia (da lo mismo que algunos vean los textos suavizados y otros no), pero en la práctica si hay una gran diferencia: los textos suavizados ocupan más espacio que los sin suavizado (los textos suavizados son más anchos). Esto nos trae graves problemas cuando los títulos están alineados a algo específico y dependen del ancho de la tipografía.

En resumen: no es bueno usar tipografías suavizadas porque aveces generan conflictos, y visualmente el diseño no se verá igual a la maqueta.

Tipografías en tamaño real (no escaladas)

Si hay que escribir un párrafo, lo ideal es que al crear la caja de texto se defina un tamaño (por ejemplo 12px o 12px). Si encontramos que el texto es muy grande, para achicarlo hay que bajarlo a 11pt, pero NUNCA se debe escalar. Si se escala el texto, es muy difícil que el desarrollador pueda saber el tamaño real del texto y eso implicará una demora en la maqueta o que el desarrollador escoja un tamaño que "al ojo" se vea parecido.

La idea es que el desarrollador haga click en la caja de texto y vea las propiedades del texto: "arial, 11px, bold" y eso lo represente en la maqueta.

Utilizar tipografías de sistema para textos

No todos los computadores tienen las mismas tipografías instaladas, pero sí tienen una lista de tipografías por defecto que pueden ser utilizadas en los sitios web.

Dreamweaver, por ejemplo, nos ayuda a definir las tipografías entregándonos familias de fuentes similares.

Arial, Helvetica, sans-serif
"Times New Roman", Times, serif
"Courier New", Courier, monospace
Georgia, "Times New Roman", Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Cada familia de fuentes posee varias tipografías separadas por comas. En CSS, si no se encuentra la primera tipografía de la lista se busca la segunda, y sino la tercera.

Si nos guiamos por esta lista de familias, probablemente no tengamos problemas con nuestro sitio, pero si escogemos tipografías que no están acá, probablemente nuestro sitio se verá distinto en cada computador y la culpa no será del desarrollador.

Los títulos pueden ser imagen o Flash

Por supuesto, no todo tiene que ser tan rígido. Existen alternativas para hacer que algunos de los textos se vean igual que en el diseño, sin que la persona tenga instalada la tipografía. Una opción es utilizar imágenes en vez de textos. La otra es utilizar flas para mostrar los textos, como el sIFR.
Pero como es obvio, la idea es no abusar de estas alternativas.

Si usamos muchas imágenes, los buscadores no sabrán lo que contiene nuestro sitio, el servidor se sobrecargará, y las personas no podrán copiar los textos. Si usamos mucho sIFR, estaremos dependiendo de que el usuario tenga flash instalado y que el navegador reemplace los textos por flash, por lo tanto estaríamos recargando todos los textos dos veces (normal y luego flash).

Capas

Trabajar en capas

Probablemente decir esto está de más, pero lo que no está de más es el orden y el nombre de las capas. Un buen diseño implica mucho orden en las capas.

Organizar elementos en carpetas

Luego de tener las capas hechas, es imprescindible que cada sección esté separada por carpetas. Cabecera, Cuerpo, Pie, Menú lateral, Banners, etc. Esto ayudará tanto en el maqueteo como en el diseño.

Generar una capa adicional para rollovers

Esta capa es bastante útil pues la gracia del HTML es que posee elementos dinámicos como los rollovers. Generar una capa adicional con esta información implica evitar tener que inventar después el comportamiento de los links o las imágenes y permite que todo sea más ordenado.

Utilizar notas para explicar comportamientos de objetos

Photoshop posee esta herramienta que no siempre es utilizada y que permite explicar cosas como "este link muestra un lightbox" o "el popup debe aparecer centrado" o "aca debe ir un preloader". Es una buena manera de facilitar la explicación de algunos elementos.

Gráfica

Dejar definido lo que va a ocurrir fuera de los márgenes del PSD

Al principio de este artículo mencioné acerca de definir el ancho del PSD según la resolución óptima del sitio. Lo que hay que considerar también es que en la maqueta pasarán cosas fuera de ese espacio, según sea la resolución de la pantalla. Para estos casos es necesario definir si luego del ancho del PSD va a continuar un color plano, una imagen de fondo, etc, para cada sección (cabecera, cuerpo, pie).

Dejar seperados los elementos con alfa

Muchas veces los logos poseen transparencias o semitransparencias. En esos casos es necesario que el diseñador lo deje con sus transparencias correspondientes en una capa separada, para que el desarrollador pueda exportar la imágen como corresponda (gif, png o jpg según corresponda).

No abusar de semitransparencias ni sombras

No en todos los navegadores se muestran las semitransparencias. Sobre todo en los navegadores antiguos, como el famoso Internet Explorer 6. Por lo tanto no es bueno que los diseños se basen en semitransparencias. Las sombras, implican semitransparencias, por lo tanto, a menos que estén sobre fondos de un color plano, tendrán que ser exportadas como png, es decir, como semitransparencias.

Si el fondo no es un color plano, generar un patrón

Muchas veces los fondos no corresponden a un color plano, como blanco o negro. Aveces los fondos son imágenes o manchas. En esos casos hay que pensar en el tamaño de la imágen que va a tener que exportar el desarrollador.

Si es una imágen muy grande, sólo conseguiremos que el sitio se demore más en cargar. En esos casos, la idea es generar un patrón repetitivo lo más pequeño posible pero que consiga el efecto lo mejor posible. Si es posible entregar el patrón separado en una capa adicional (oculta), mucho mejor.

Adjuntar gifs animados

Aveces los diseñadores entregan la maqueta y algunas cosas deben cargarse con ajax. En esos casos, es bueno definir de que manera se cargarán los contenidos. Con un texto "cargando" o con un preloader?. En el caso del preloader, lo mejor es que lo envíen como una archivo aparte. Pueden crear uno o escoger alguno de los que ofrecen servicios gratuitos como http://www.preloaders.net.

Como siempre, cualquier aporte será bienvenido.