Hojas de estilo para diseño web como herramienta de comunicación y traspaso
Cuando un proyecto digital está a cargo de diferentes equipos de trabajo, diseñar el traspaso de información es fundamental para una comunicación efectiva. Revisa nuestros consejos para generar hojas de estilo útiles para clientes y equipos internos.
Dentro de la metodología de Diseño Centrado en el Usuario la etapa de diseño web es la más susceptible a la percepción y emoción de las personas, por lo que es necesario presentar las propuestas en un orden coherente mediante el uso de hojas de estilo para diseño web.
Una presentación organizada permite enfocar la conversación en que la solución diseñada sea lo más óptimo, según las necesidades y requerimientos de cada cliente.
Las hojas de estilo ordenan nuestro trabajo y demuestran las decisiones de manera separada, permitiéndonos presentar punto por punto cada uno de sus componentes.
Traspaso de las decisiones de diseño web a otros equipos
La profundidad de las conversaciones y el grado de detalle a presentar debe ser adaptado según el receptor final. Al traspasar el trabajo a otros profesionales del área, las especificaciones deben tener una especificidad técnicas mayor, mientras que para los clientes el enfoque debe ser primordialmente visual.
Es decir, por un lado, al cliente le presentamos las soluciones en el look&feel propuesto para que sea validado, mientras que al equipo a cargo, le entregamos las especificaciones de diseño para poder continuar su desarrollo.
A continuación presentamos consejos para las presentaciones en cada contexto:
Tipografía
Cliente externo
Mostrar la familia tipográfica que se propone aplicar, junto a su aplicación en un par de ejemplos.
Equipo interno
Para un traspaso adecuado es necesario demostrar los siguientes elementos:
- Evidenciar las jerarquías nombradas por niveles (H1, H2, p, ul) mencionando las variables que se aplican.
- Especificar los tamaños de fuente, color, interlínea y fuente utilizada.
- Mostrar la aplicación real de los elementos.
Paleta Cromática
Cliente externo
Se recomienda nombrar el valor para la escala de grises y colores base. También se presentan las variables que se pueden aplicar a los elementos, pero no se detalla el color.
Equipo interno
Se debe detallar el color base del sitio con todas sus posibles variaciones, anotando el nombre sugerido y el valor en hexadecimal o RGBA.
Llamados de acción
Cliente externo
Se muestran los tipos de llamados de acción primarios, secundarios y casos especiales aplicados en ejemplos. Es recomendable utilizar un número contable de variables para mejorar la consistencia y disminuir la curva de aprendizaje del usuario.
Equipo interno
Se indica el valor base de los botones y se detalla la aplicación en sus estados active y hover. Generalmente se utilizan variables de brillo y saturación del color base, que ya se encuentran indicadas en la paleta cromática.
Tamaños de imágenes
Cliente externo
Es importante mencionar el tamaño de imagen que debe utilizar el cliente, sobre todo cuando es él quien deberá administrar el contenido. En esta sección se debe indicar para qué será utilizada la imagen y cuál es el tamaño mínimo requerido para una visualización adecuada (indicar la proporción de imagen es opcional).
Equipo interno
Bajo el principio del Responsive Web Design, se detalla la cantidad de columnas en las que se insertará la imagen, para que el tamaño de ésta dependa del contenedor y no se le atribuya un valor fijo. Si existen excepciones, debe ser indicado el contexto de uso y el valor de ancho de la imagen.
Formularios
Cliente externo
Lo ideal es presentar a cliente un formulario de ejemplo, considerando todos los estados posibles: por defecto, input lleno, mensajes de error, etc.
Equipo interno
Se debe detallar el estado de los input con todas las variables que impliquen cambios, tales como el borde, el color del texto, colores de fondo, sombras e incluso tamaños de texto y color para mensajes que acompañen al formulario.
Plantillas
Cliente externo
Usualmente se presentan 3 páginas tipo más una hoja de estilos que considere los puntos mencionados con anterioridad, mencionando que el diseño será replicado a las otras páginas del sitio bajo el estilo propuesto.
Equipo interno
Al momento del traspaso, junto con la hoja de estilo se entregan todas las plantillas diseñadas para mantener la cohesión y la continuidad en el desarrollo.
Las hojas de estilo para diseño web son una práctica necesaria para establecer una comunicación dirigida con el cliente, ya que estas evidencian un trabajo ordenado y consistente en nuestro diseños, optimizan los tiempos de trabajo al replicar un estilo en todas las páginas del sitio y disminuyen el margen de error que pudiera presentarse en el desarrollo.
A modo de recomendación final, puedes revisar este check list para optimizar tus tiempos de trabajo y aumentar la calidad de tus entregables:
- Trabaja en base a proporciones: Evita considerar medidas arbitrarias para tus elementos, y escoge un valor base aplicable en tipografías, márgenes y columnas para mantener la armonía del diseño. Por ejemplo: Fuente base :16 px, título: h1:2 rem (32px), márgenes: 1,5 rem (24px).
- Cuida el contraste de los elementos: Asegura que el contenido sea siempre legible, especialmente las tipografías.
- Establece un control de cambios: Mantén una buena comunicación con todo el equipo involucrado para que todos tengan claro cuál es la última versión del documento.
Siguiendo estas recomendaciones, lograrás que el traspaso de información sea mucho más claro y efectivo. Si necesitas ayudas para crear un diseño web o realizar un rediseño siguiendo este sistema, no dudes en contactarnos.
Acerca del Autor
Agregar un comentario
Wendys
hace 8 añosExcelente la explicación, esto es nuevo para mi, y su ayuda a través de este escrito me sirve de herramienta fundamental para lo que yo deseo. Gracias!