Los detalles representan un mundo de diferencia cuando tratamos de distinguir entre lo ordinario y lo extraordinario.
Un automóvil lujoso, puede tener el mismo número de neumáticos, puertas, asientos, que un vehículo tradicional pero lo que realmente lo diferencia de la competencia es el tiempo invertido en los detalles: cálidos asientos de piel, sensores de aparcado, una costosa consola digital, etc.
Los mismos principios se cumplen en el diseño Web. Aquellos diseñadores que invierten tiempo en pulir los detalles son aquellos que se destacarán del resto y cuyos diseños obtendrán mayor valor.
La palabra clave es “valor”.
No hay garantías de una relación directa entre el tiempo invertido en un sitio Web y el valor que el resultado pueda tener. Algunos detalles son más importantes que otros, y es importante determinar cuáles producen un mayor impacto,
Detalles que añaden valor
Nos enfocaremos en los aspectos visuales que signifiquen un cambio profundo en la experiencia del usuario, por ejemplo en cómo los usuarios perciben el tema del sitio, o el mensaje principal, o la manera en que navegan por él.
Lo más recomendable es que los usuarios que tienen experiencia en la creación de sitios Web no sean los que determinen qué elementos facilitan la percepción correcta y usabilidad de un sitio Web. Las pruebas hechas por aquellos usuarios sin experiencia en este campo serán más determinantes a la hora de elegir qué elementos eliminar, el resultado revelará los errores de una manera notable.
Estos son los detalles en los que hemos de invertir más tiempo.
Entonces ¿Cómo estos detalles pueden agregar valor a un Sitio Web?
El truco radica en la experiencia del usuario. Los diseñadores web deben tener una comprensión excelente de cómo el espacio negativo, contraste, forma, color y todos los elementos visuales desempeñan un papel deferente en cómo las personas utilizan y perciben el diseño de página web.
¿Cuales son algunas de estas diferencias?
Acercando la mirada
Nos sentimos más cómodos cuando en Photoshop estamos a 500% de zoom o más. Se siente como estar en casa. Veamos un trabajo de diseño que lleva bien lo de guiar nuestra experiencia en los detalles sutiles.
Utilizamos el sitio web de Concentrate, ya que es un buen ejemplo de qué elementos percibimos en un sitio a primera vista.
De un vistazo, podemos ver el juego visual de palabras que se hace en este sitio.
Además de la lata de concentrado de jugo de naranja, vemos el color naranja de la paleta temática y un fondo que hace un trabajo bastante bueno al imitar la textura real esta fruta.
Si analizamos un poco más, vemos que se ha utilizado CSS3 hecho una imitación de texto para aumentar el contraste contra el fondo.
Para apreciar más detalles, tenemos que profundizar un poco más
Perfección Pixel a Pixel
A nivel de pixeles, podemos obtener más información. Podemos observar más detalles al rededor de los botones “que llaman a la acción”. Primero, vemos cómo la sombra detrás de estos botones hace que esta sección de la página se levante ligeramente. Es un simple efecto que se puede lograr con dos pixeles arriba y abajo de esta área. Se trata de un conocido truco de diseño que da a esta página mayor distinción visual entre los demás elementos de la página.
Uno de los pixeles se nota más porque tiene un naranja más brillante, lo que provee de un mayor contraste entre la sombra y el fondo de esta sección; pero lo que realmente ayuda en la segunda línea naranja más oscura. Estas dos líneas trabajan juntas para acordonar la sección superior.
Sombras Sutiles
Las sombras no son ajenas al sitio Web. La mayoría se utilizan para simular profundidad en un medio plano de dos dimensiones. Las sombras y luces pueden mejorar radicalmente la experiencia que el usuario tenga en el sitio.
A medida que se utilice el CSS3 se podrán añadir mejoras realmente impactantes en este sentido.
Continuando con el sitio de Concentrate, podemos observar un excelente ejemplo de cómo utilizar sombras en los textos de una manera sutil y eficaz, que permiten el realce de los mismos.
La propiedad de CSS3 text-shadow ha sido usada de dos maneras aquí. En primer lugar, los titulares rojos han recibido una sombra más ligera para dar un efecto de incrustado que de otro modo no funcionaría tan bien. La segunda sombra está detrás del texto de párrafo, sólo para dar al color blanco un poco de impulso de la página.
Cabe resaltar que al tratarse de un sitio de venta de software para Mac, se han preocupado muy poco en cómo se ve el sitio desde Internet Explorer.
Denotar la Navegación
La cosa más importante en la usabilidad de un sitio es la capacidad que el usuario tenga de navegar a otras páginas del mismo, por lo que nos preguntamos ¿Por qué no invertir tiempo en mejorar los detalles para mejorar esta experiencia?
Tomemos como ejemplo la página de Lipperhey. Aparte de la buena selección de colores para el botón activo de navegación, vemos otros curiosos detalles de diseño. Vemos como el botón Home se “sale” de los límites de la barra, además de tener una sombra detrás que lo destaca aún más.
Estos dos elementos juntos dan el efecto de una nueva dimensión al diseño indicando la importancia del botón activo.
Conclusión
La belleza de trabajar con los detalles, radica en que a través de una observación progresiva, podemos acrecentar el valor hacia una audiencia sin desmejorar el rendimiento de aquellos usuarios que aún usan navegadores obsoletos.
La clave está en usar estas técnicas para añadir valor ,a un ya solido diseño Web. Aplicar estas técnicas sin una base sólida en diseño Web, es como poner al carro, delante del caballo.
