Cuando diseñamos, creamos un montón de material como guías de estilo, pautas elementales, etc. Esto es para ayudarnos a nosotros mismos y a las personas que van a coger nuestro diseño y convertirlo en una web, una aplicación, etc. o para futuros diseñadores que sigan con nuestro trabajo o creen nuevo material.
Del mismo modo, los desarrolladores usan otras herramientas para facilitar su trabajo como Bootstrap, Bourdon, etc. Tenemos que tener en cuenta que existe un compromiso para trabajar juntos, y como diseñadores una de nuestras tareas ha de ser poner lo más fácil posible la tarea que los programadores van a realizar con nuestro diseño. A la larga esto también nos facilitará las cosas a nosotros cuando tengamos que diseñar modificaciones o nuevas funcionalidades.
El diseño online no se trata de diseñar una sola instancia o página, sino de diseñar siempre teniendo en mente un panorama general.
Una forma en que podemos simplificar las cosas para que sea más fácil crear ese panorama es hacer una división jerárquica.
Una posible división podría ser esta:
1- Fundamentos absolutos 2- Combinaciones básicas 3- Combinaciones complejas 4- Plantillas 5- Páginas
1- Fundamentos absolutos
Aquí incluiríamos las paletas de colores, fuentes, elementos individuales (es decir, los encabezados, párrafos, botones, etc.) y cualquier otra cosa que se combina con otros átomos para crear una molécula.
2- Combinaciones básicas
Las combinaciones básicas son las piezas que construimos a partir de los fundamentos absolutos. A pesar de que algunas combinaciones pasarán a ser complejas, la simplicidad es la clave aquí.
Las combinaciones básicas incluyen cosas tales como campos de formulario con una etiqueta o una tabla con encabezados y columnas de datos.
3- Combinaciones complejas
Las combinaciones complejas son donde comenzamos a ver como se une la interfaz. A través de combinaciones básicas podemos combinarlas y contruir otras más complejas. Por combianciones basicas que combinamos podemos construir más otras más complejas.
Un ejemplo de combinación compleja podría ser un navegador de cabecera que incluye un logotipo, enlaces de navegación y un campo de búsqueda o botón de registro.
4- Plantillas
Las plantillas son esencialmente nuestras estructuras de página. Creadas mediante la combinación de múltiples combinaciones complejas. Aquí realmente comenzamos a ver el panorama general de lo que estamos construyendo. En este punto es importante tener en cuenta que la construcción sea a través de un grill que permita o facilite la posterior versión responsive y la maquetación de la misma.
5- Páginas
Las páginas son la versión de alta fidelidad de nuestras plantillas.
Las páginas no siempre son necesarias, sobre todo cuando ya hemos realizado algunas para enseñar al cliente. A mi particularmente me gusta hacer páginas de todas las plantillas principales y validarlas con el cliente. Pero depende de la magnitud del proyecto muchas veces se puede convertir en una perdida de tiempo.
Una cosa que recomendaría a todos los diseñadores es que aprendan a programar, no hace falta que sea a nivel avanzado. Programar te da las herramientas para saber que se puede hacer, que no, que se tarda en realizar y a la vez diseñar pensando en el programador front-end que tendrá que traducir tu diseño a código.
En resumen, creo que es muy importante una buena relación de trabajo entre el diseñador y el programador así como diseñar siempre teniendo en cuenta el panorama general.
Un abrazo
Jorge Mateo