Guía para diseñadores gráficos

Guía para diseñadores gráficos > Presupuesto y entrega del diseño al maquetador

Presupuesto y entrega del diseño al maquetador

Javajan hace más de 10 años que trabaja maquetando y programando páginas web para diseñadores gráficos. Las siguientes recomendaciones –seguramente compartidas por todos los maquetadores– están encaminadas a facilitar un trabajo impecable y eficiente cómo maquetadores y programadores web, así como eliminar cualquier posibilidad de malentendido o equivocación.

Presupuesto previo

Normalmente, antes de empezar proyecto alguno, el diseñador o cliente final necesitarán un presupuesto que especifique el coste del trabajo del maquetador. Basándonos en nuestra experiencia en Javajan, un maquetador necesita como mínimo la siguiente información para presentar un presupuesto ajustado al diseñador o cliente final:

  • Arquitectura del sitio web (ver: arquitectura de un sitio web):
    • ¿Cuántas secciones o páginas tendrá el sitio web?
    • ¿Será un web con un solo idioma o multi-idioma?
  • Estructura de las páginas web (ver: Adaptación de la estructura en función de la resolución):
    • ¿El diseño de cada página web será fijo, fluido o sensible?
    • Si el diseño es sensible, ¿cuántas transiciones existirán?
  • Contenidos de las páginas:
    • Orientativamente, ¿qué contenidos tendrá cáda página web (elementos de diseño, texto, imágenes, formularios, vídeo…)?
    • ¿el contenido y elementos de diseño serán similares entre las distintas páginas? Es decir, ¿todas las páginas mantendrán la misma estructura de diseño cambiando solo los contenidos?
  • Efectos especiales:
    • ¿Existirá algún elemento poco común en el diseño web?
    • ¿Se van a diseñar animaciones para los bloques?
    • ¿Serán animaciones estándares que se pueden copiar públicamente o serán animaciones que se tendrán que programar desde cero?

Entrega del diseño web

Una vez el presupuesto del maquetador esté aceptado, el diseñador puede trabajar libremente en el proyecto, dando vía libre a su creatividad, pero cumpliendo con las limitaciones técnicas presentadas en esta guía y las especificaciones del presupuesto.

A la vez que el diseñador va creando el diseño de cada página web, puede ir generando los documentos que tendrá que enviar al maquetador, los cuales también se podrán utilizar para que el cliente final dé el visto bueno al proyecto. (Antes de enviar el diseño al maquetador, asegúrese que el cliente final ha aceptado su diseño, pues las correcciones de un web maquetado acostumbran a ser costosas).

Idealmente, los documentos del diseño web se deberían de enviar todos juntos al maquetador web. A no ser que el maquetador especifique otra vía, se puede enviar por correo electrónico (por ejemplo comprimida en un zip), se puede enviar a un directorio ftp, o se puede enviar físicamente con un dispositivo de almacenamiento digital.

A continuación se listan todos los documentos que necesitará el maquetador para codificar el diseño de un sitio web.

Arquitectura del web

A no ser que el sitio web a maquetar conste de pocas páginas web, se debería entregar un documento titulado "arquitectura del web" que muestre todas las secciones y las páginas web que tendrá el sitio, especificando el acceso a cada una de páginas web, el número de idiomas...

El documento se puede entregar en formato texto (por ejemplo Word) listando las secciones y páginas en diferentes niveles o en formato gráfico (por ejemplo Photoshop o Illustrator) mostrando visualmente la estructura.

Más información sobre el diseño de la arquitectura web en esta guía.

Ejemplo de documento de arquitectura web proporcionado por Manolo J a Javajan para maquetar una página web: MAPA WEB -- MELNIK, S.L.

Diseños de páginas web

Se debe de entregar un documento con el diseño de cada página web que tenga un diseño y/o estructura diferenciado del resto. Es decir, es suficiente entregar un único diseño de página web para todas aquellas páginas web que compartan la misma estructura y elementos de diseño, aunque tengan un contenido diferente (textos y/o imágenes).

A modo de ejemplo: Para sitios webs sencillos, será suficiente entregar el diseño de la página principal, el diseño de la página de contacto (con el diseño deseado para el formulario) y el diseño de una página secundaria que se utilizará para presentar la empresa, productos, servicios...

Los diseños se podrán generar con un programa de tratamiento de imágines (Photoshop), en el cual se puede sacar provecho de las capas (por ejemplo, agrupando capas se pueden definir los efectos de los enlaces o menús al pasar el ratón por encima). Igualmente, los diseños de pueden generar con un programa vectorial (Freehand, Illustrator o Indesign). En este último caso, a no ser que el diseñador indique lo contrario, el diseño se transformará a píxeles tomando una resolución de pantalla de 72ppt (en la mayoría de los casos se verá a la misma resolución que veía el diseñador en su pantalla).

Con independencia del programa de diseño utilizado, para cada una de las páginas web diseñadas será necesario mostrar el aspecto de la página web deseado y los efectos de los enlaces o menús de navegación (en capas o diseños aparte).

Para diseños sensibles o adaptables, será necesario comunicar los píxeles o resoluciones de pantallas en las que se producirán las transiciones y mostrar un diseño de la página para cada una de las estructuras. Para cada uno de los bloques de la estructura se debería indicar si su ancho será fluido o fijo y/o si su posición será fluida o fija. Si algunos bloques incorporan transparencias, movimientos u otras características especiales, también será necesario especificarlo.

No es necesario enviar separadamente las imágenes utilizadas en el web, pues los maquetadores podrán extraerlas fácilmente de los documentos de los diseños de las páginas web.

Tipografías utilizadas

En caso de utilizar alguna tipografía poco común para el diseño web, será necesario enviarla junto a los otros documentos.

Contenido de las páginas web

Enviar bien estructurado el texto de cada página web. Idealmente, también se deberían enviar las traducciones al mismo tiempo, manteniendo todas la misma estructura. Si las imágenes no estaban incluidas en los diseños de las páginas, también será necesario enviarlas, idealmente al tamaño y formato (jpg, gif o png) definitivo. Igualmente, en caso de incorporar otros contenidos (vídeo, música…) se deberán de enviar juntamente con los anteriores contenidos.

Palabras claves, descripciones y títulos de páginas web

Junto a los contenidos de cada página web, sería ideal ajuntar el tílulo, descripción y palabras clave de cada página (Ver optimización para buscadores)

Fichero ico

Junto con todos los documentos anteriores, sería bueno entregar un fichero .png (con transparencias si se desea) de 16x16 píxeles que será utilizado para identificar gráficamente el sitio web en los navegadores (pequeña imagen que aparece en cada una de las pestañas de los navegadores web).

JAVAJAN [somos maquetadores y programadores web]. Webs for designers & you. www.javajan.com © 2012 | Avís legal
TwitterFacebookRSSe-mail