Pequeña sugerencia de diseño: coherencia 5 de Noviembre de 2009, por Rumoroso
Recientemente hemos recibido una grata sorpresa al ver que la web del W3C ha modificado su diseño. Y digo grata sorpresa porque el nuevo diseño resulta más elegante y actual que el anterior. El conjunto de estilos incluye una gama cromática más sencilla, pero sensiblemente menos estridente y más eficaz.
Aun así, hoy me di cuenta de un detalle que me sirve para comentar una idea. Cuando queremos jugar con la simulación de sombras, es importante mantener una cierta coherencia. Mejor será que lo ilustre (las imágenes funcionan como enlaces para acceder a su ampliación):
Esta es la cabecera actual de una sección cualquiera de la web, en concreto del área de noticias. De ella me gustaría destacar tres zonas concretas:
Como se puede observar, hay tres efectos de sombra, dos de ellos conseguidos con imágenes y el tercero con el color de los bordes superior e izquierdo. El problema es que la sombra que genera el área azul (la que incluye el logo) trata de simular que la capa inferior es ligeramente cóncava (o la superior convexa), mientras que la que genera la cabecera con la palabra NEWS es totalmente plana. Para rematar el terceto tenemos la sombra de la capa para intercambiar las Views y es la que generada con el color de borde. Mientras que en las dos primeras la luz proyecta la sombra hacia la parte inferior, en la tercera la sombra se sitúa por encima de la capa, con lo que no existe una coherencia en la dirección de la luz o en la ubicación de la misma.
Por este motivo, me atrevo a hacer una simple sugerencia que creo que mejora la situación (os recuerdo que la imagen funciona como enlace para acceder a su ampliación):
Únicamente se trata de hacer dos simples cambios:
- Las dos sombras principales podrían pasar a unificarse (en el ejemplo opté por el segundo tipo de sombra, más recto y definido).
- Por otro lado, en el submenú Views podría haber sugerido intercambiar los colores de los bordes de arriba a abajo y de izquierda a derecha, pero como la sombra creada por estos no considero que sea eficaz, pienso que una opción podría ser desplazar dicho submenú hacia la derecha, alineándolo con el buscador. No creo acertado el que deba tener tanto peso visual como para situarse en un área destacada (como está actualmente). Y ya puestos, al emplear esquinas redondeadas, yo lo pondría como una pseudopestaña que surje de la parte superior de la web. Opcionalmente, lo simplificaría eliminando la opción de la vista actual (por ejemplo, si estamos en la vista desktop, no es necesario incluir dicha opción).
En conclusión, cuando simulemos efectos de sombreado, seamos coherentes. Si queremos que el resultado parezca natural, debemos tener en cuenta la posición de la luz y su direccionalidad.
nota: De acuerdo, enviaré esta sugerencia al propio W3C. Ya os contaré…
Pequeña sugerencia de diseño: coherencia
Categoría: CSS
1 comentario
-
Pequeña sugerencia de diseño… coherencia 5 de Noviembre de 2009 [...] …simulación de sombras, es importante mantener una cierta coherencia. Mejor será que lo ilustre…[...]
Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También puedes enviar un trackback desde tu sitio.
