Usando color en estructuras de alambre ... ¿es esto un "no no"?
Recientemente, se inició un debate interno en el trabajo sobre el uso del color en las estructuras alámbricas. ¡Un diseñador junior había terminado un buen conjunto de estructuras metálicas y al final se le dijo que convirtiera todo en escala de grises! Se les dijo que el color no debería estar en estructuras metálicas.
Puedo ver algunas razones por las que diseñar en escala de grises puede ayudar:
- para accesibilidad (por lo que no está obligado a confiar en los colores para la diferenciación)
- para no confundir el diseño visual de la comunicación en wireframes (a veces los clientes pueden asociar una elección de color para ser una decisión de diseño visual en lugar de una forma de comunicar la diferencia visual)
De hecho, uso una paleta de iconos de colores y usaré el color para ayudar a comunicar la diferencia visual. A veces solo hay mucho que puedes hacer usando diferentes tonos de gris o usando patrones.
¿Cuál es la práctica estándar por ahí? He visto wireframes con y sin color.
Parece que sus colegas se perdieron un poco en suposiciones sin pensar en cuál es el propósito de una estructura alámbrica. Comencemos con na definición flexible proporcionada por Wikipedia :
Una estructura de alambre de sitio web (también "estructura de alambre de web", "estructura de alambre de web", "estructura de alambre de web") es una guía visual básica utilizada en el diseño de interfaz para sugerir la estructura de un sitio web y las relaciones entre sus páginas. Un wireframe de página web es una ilustración similar del diseño de elementos fundamentales en la interfaz. Por lo general, los wireframes se completan antes de desarrollar cualquier obra de arte.
Al igual que con cualquier palabra o término, es importante tener en cuenta lo que realmente significa. A modelo de marco de alambre es un término utilizado en el modelado 3D cuando se habla de la representación de la estructura física de un modelo poligonal, que se representa mostrando puntos de conexión entre vértices. ¿Cuál es el punto de un modelo de marco de alambre? Es para mostrar las "entrañas" de una estructura a fin de comprender mejor su composición.
Cuando se traslada a la estructura de alambre del sitio web cuando Wikipedia lo discute, debemos considerar cómo se aplica ese significado, y la definición de Wikipedia lo define: "una guía visual básica utilizada para sugerir la estructura de un sitio web y las relaciones entre sus páginas".
Como puede ver, no se menciona el color ni cómo debería verse esa guía visual. Lo único que importa es que sugiere cómo funciona la estructura del sitio web. Mientras lo logre, es una estructura de alambre efectiva. Entonces, por ejemplo, estos son todos los wireframes "válidos":
- bocetos en una servilleta
- bocetos en 37signals 'Draft o alguna otra aplicación en iPad
- wireframes de aspecto incompleto hechos con una herramienta como Balsamiq Mockups
- wireframes más ajustados hechos usando algo como Axure o Illustrator
- diseños ligeros de un sitio hecho en Photoshop, donde la estructura de la página se hace evidente al tiempo que incluye elementos de diseño donde sea relevante
- Diseños exportables HTML en Fireworks que le permiten ver en qué elementos consiste una página
- tramas completamente interactivas HTML/CSS
Es solo una cuestión de fidelidad y detalle. Tal vez debería dejar en claro qué tipo de fidelidad se espera en la entrega y guiar a sus diseñadores por ese camino. Pero no se trata de "se debe usar el color en una estructura alámbrica": si el color ayuda a comunicar la estructura del sitio, ¡se debe usar absolutamente el color en una estructura alámbrica!
Convenido.
Típicamente, el color trae connotaciones emocionales/culturales a una discusión que se "supone" que trata sobre la estructura básica, el diseño y la IA (arquitectura de la información). Si bien eso se puede debatir, podemos acordar que el uso de Color, al menos, transmitirá MÁS información a la representación.
El objetivo de la estructura metálica es comunicar SOLO lo que es necesario y nada más.
En mi experiencia en la práctica, las personas usan el término "estructura metálica" para referirse a todos y cada uno de los artefactos que Rahul enumera.
Según mi experiencia, es principalmente la segunda razón por la que has enumerado:
- A veces, incluso las partes interesadas internas se confunden con las tramas que parecen demasiado "reales". Mis maquetas Axure tienen una fidelidad mucho mayor que otras maquetas de PowerPoint utilizadas en mi organización, por lo que a veces recibo comentarios que tienen que ver con el diseño gráfico, como botones que se ven de manera diferente o paneles que no ajustan su altura de acuerdo con su contenido, etc.
- Un amigo mío creó una estructura de alambre de alta fidelidad que al cliente realmente le encantó tanto que la implementaron de inmediato :)
He pasado de escala de grises a todo color y viceversa. Creo que a todo color tiende a ser una verdadera distracción para las discusiones que deben ocurrir.
En una nota al margen, resulta que estoy en un proyecto donde no hay un diseñador gráfico entre los desarrolladores y yo, por lo que los wireframes "realistas" o "realmente bonitos" corren el peligro de implementarse tal cual. Esto prácticamente garantiza el desastre porque no soy diseñador gráfico ...
Un inconveniente del color en una estructura alámbrica es que, junto con (lo que se percibe como) una mayor fidelidad de los controles y demás, tarde o temprano uno de sus desarrolladores asumirá que necesitan hacer que la GUI se vea al igual que la estructura alámbrica.
Lo sé. Lo sé. Esto apunta a una idea errónea importante sobre el propósito de una estructura alámbrica.
Pero realmente sucede.
Tiendo a reservar el uso del color para anotar componentes. Me aseguro de que los fragmentos de texto que deben comportarse como hipervínculos estén en azul y subrayados, por ejemplo, a pesar de que el diseño final del sitio podría tener una historia de color completamente diferente. Los bits de texto que no son estáticos y variarán según la entrada del usuario obtienen otro color. Si hay varias cajas y líneas que están en duda o sé que necesitan más pulido, entonces estableceré que tengan líneas rojas. Los bloques de texto que son anotaciones colocadas justo encima de la estructura metálica obtienen un relleno de fondo amarillo pálido.
Es muy aterrador mirarlo visualmente, pero sirve para comunicarse. No representar.
Personalmente, creo que está bien usar color si imparte algún tipo de funcionalidad.
Tiendo a usar el color en elementos interactivos de mis wireframes, como enlaces y botones que son azules. Esto ayuda a resaltar claramente los elementos interactivos cuando se presenta al cliente.
También he usado verde, naranja y rojo para denotar diferentes estados de advertencia en una lista de elementos. Descubrí que esto ayudó a comunicar la funcionalidad al cliente más rápidamente, lo que era menos evidente en versiones anteriores, puramente en escala de grises.
Sin embargo, no usaría el color como elemento decorativo, al menos no en las primeras estructuras o maquetas. Como algunos otros han respondido, los clientes a veces pueden verse atrapados en cómo se ve algo, en comparación con cómo funciona. Esto puede retrasar un poco el proceso.