A través de Anieto2K me entero de este artículo en el que en Peivem nos explican las pautas a seguir para diseños web en Photoshop en los que tiene que haber una buena comunicación entre el equipo de diseño y el de desarrollo HTML.

Os dejo una lista resumida de lo que habla en el artículo:

  1. Preparar los wireframes (herramienta para definir el contenido página por página).
  2. Generar el mapa del sitio para tener una buena guía a la hora de desarrollar.
  3. Definir un ancho del PSD según la resolución óptima del sitio
  4. Tipografias sin suavizado, ya que de la otra manera pueden crear conflictos.
  5. Tipografías en tamaño real (no escaladas) para que el desarrollador sepa realmente que tamaño tiene el texto.
  6. Utilizar tipografías de sistema para textos ya que no todos los ordenadores tienen la misma tipografía instalada en su sistema operativo. Por tanto habrá que acogerse a alguna de estas que son las comunes:

    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

  7. Los títulos pueden ser imagen o Flash.
  8. Trabajar en capas y con mucho orden.
  9. Organizar elementos en carpetas, cada sección debe de ir separada (cabecera, pie, contenido, menu, banners, etc ..)
  10. Generar una capa adicional para rollovers
  11. Utilizar notas para explicar comportamientos de objetos. Esta herramienta la ofrece el mismo Photoshop
  12. Dejar definido lo que va a ocurrir fuera de los márgenes del PSD, ya que el usuario puede tener resoluciones mayores para su pantalla y tiene que tener un fondo, patrón o algo que rellene lo que no tiene contenido.
  13. Dejar seperados los elementos con alfa, es decir los elementos con transparencias. El diseñador tendria que dejarlo en una carpeta a parte para que el desarrollador lo pueda utilizar independientemente.
  14. Si el fondo no es un color plano, generar un patrón para que así el tamaño de la web no sea excesivo.
  15. Adjuntar gifs animados por ejemplo cuando se carguen capas con Ajax y se muestre un preloader, en este caso habria que incluir la imagen GIF a parte.

Como véis unos muy sabios consejos que todos deberiamos seguir.

Compártelo

Posts Relacionados