Experiencia y Diseño Digital

En los últimos años destaca una tendencia al minimalismo en el diseño web. Y parte relevante de esta apuesta por el minimalismo consiste en un uso importante del espacio en blanco. Es lógico: más espacio en blanco, menos información cabe en pantalla. Pero ese uso extendido del espacio en blanco como recurso en el diseño web, ¿es bueno o malo para la experiencia de usuario y para la imagen de un sitio web?

La respuesta a esta pregunta debe partir de una constatación: el espacio en blanco, también conocido como espacio negativo (ya que en realidad no tiene por qué ser blanco), es un elemento indispensable del diseño web. No es correcto hablar del espacio en blanco como espacio perdido. Como en la música: sin silencio es imposible disfrutar las notas en plenitud.

Ahora bien, un uso excesivo de este recurso puede conseguir un efecto distinto al inicialmente previsto. El espacio negativo ayuda, entre otras cosas, a enfatizar contenidos y a mejorar la legibilidad, pero abusar de él no consigue que un mal contenido pase a ser bueno o que un diseño poco usable se arregle sin otras modificaciones, más allá de que sí contribuye a quitar ruido.

A continuación listamos los 5 principales efectos positivos del espacio en blanco en el diseño web:

- Mejora de la usabilidad. Ayuda a ordenar elementos, a que el usuario pueda focalizar su atención en ellos.

- Priorizar contenidos. El espacio negativo permite dar importancia a aquellos elementos que realmente son relevantes. No todo tiene que estar above the fold.

- Da elegancia, estilo.

- Facilita una buena experiencia de usuario en un diseño web adaptativo. Porque el espacio en blanco y la organización en bloques ayuda a que una buena forma de organización en experiencia desktop se traslade a tablet y smartphone.

- Es funcional y te permite poner el foco en toda tu propuesta de valor. Como hace Google, desde sus inicios.

En resumen, el espacio en blanco es muy relevante para conseguir buenas mejoras estéticas y de usabilidad en un sitio web. No arreglará desaguisados ni conseguirá que un mal diseño se convierta en uno bueno, pero difícilmente hará de un buen diseño uno malo. Sí es cierto que abusar del espacio negativo puede no ser tan beneficioso en el caso de marcas o productos que lo apliquen de forma indiscriminada sin que su propuesta de valor lo justifique.

Y también es verdad que la tendencia en los últimos años al minimalismo en el diseño web (a lo que ha contribuido la necesidad de conseguir una excelente experiencia de usuario en los dispositivos móviles) puede llevar a abusar del espacio en blanco en el diseño. Pero, como decimos, es difícil que este minimalismo se convierta en un problema.

¿Buscas un diseño web de calidad, pensado para destacar lo mejor de tu negocio y conseguir la mejor experiencia de usuario en cualquier situación? Contacta con nosotros, podemos ayudarte. Compruébalo.

¿Necesitas un nuevo sitio web? Curioso cómo el paso de los años afecta a los sitios web de la misma forma que a la ropa, a los peinados, a las películas y mil cosas más, ¿verdad? No queremos que nuestra tienda online se vea antigua, poco usable o que pierda efectividad o capacidad de seducción con el paso del tiempo, y para eso debemos repensarla cada cierto tiempo.

En ese proceso de repensar la web hay dos conceptos que es conveniente tener presente porque nos van a evitar muchos quebraderos de cabeza. Hablamos del wireframing y del prototyping, dos conceptos similares pero distintos que contribuyen a que tu nuevo sitio web sea útil y usable. Ambos te serán útiles en el proceso.

Lo primero es lo primero: definamos estos conceptos, ya que (no eres el único) a veces se confunden. Pero no queremos teorizar mucho, así que lo haremos sencillo con una descripción breve: con los wireframes muestras la disposición y organización de los contenidos de una página, con lo que es una herramienta imprescindible a la hora de plasmar una primera idea de estructura y una jerarquización de contenidos. El objetivo de un wireframe es la validación de la arquitectura de la información y poder plantear cambios en un estado prematuro cuando aún tienen bajo coste.

Así, un buen wireframe mostrará, entre otros, y sin necesidad de incluir diseño ni tipografías:

• Posición del logo
• Campos de búsqueda
• Breadcrumbs
• Headers
• Menús de navegación
• Cajas de organización de contenido por tipos
• Botones sociales y de contacto
• Footer

‍

Como ves, un  montón de información en forma de cajas que facilita enormemente a quien los tenga en sus manos comprender de manera muy visual cuál es la propuesta de organización del sitio web.

El prototyping, clave para valorar la experiencia de uso

Los wireframes te dan una idea muy clara de cuán útil y valiosa puede ser tu web. ¿En qué se diferencia el prototyping? Con el prototyping consigues un prototipo funcional, lo cual indica que puede ser probado, por lo tanto ya entra en juego la experiencia de usuario.

Es esa diferencia sustancial entre wireframing y prototyping la que hace que este último sea especialmente aconsejado para tiendas online en general, y para las partes más transaccionales en concreto. Cuanta más interacción con el usuario tenga un sitio web (incluyendo cajas de diálogo, pero no solamente), más necesario se hace el prototyping sin perjuicio del wireframing.

¿En qué otros aspectos (además del diálogo con el sistema durante una transacción o registro) es valioso el prototyping? Por ejemplo, en menús que utilicen la función "on mouse over" para mostrarse o contraerse, menús desplegables, sliders...

Por tanto, ambos conceptos, wireframing y prototyping te aportan perspectivas distintas pero valiosas cuando necesitas replantear un sitio web.

Usa ambos en función de lo que necesites; y aunque siempre se puede llegar a darle al wireframing un toque de experiencia de uso (con el paper prototyping, el que con diferentes papeles simulas las diversas funcionalidades), pero disponer de un prototipo realmente funcional de tu sitio web te será posiblemente más valioso, para hacer tests de usabilidad, por ejemplo.

Si quieres más información sobre cómo concebimos en Smartbrand el diseño y desarrollo web, la innovación en Internet y cómo tenemos un enfoque 360º para que tu negocio maximice el ROI en su apuesta online, no te pierdas lo que dicen nuestros clientes, o contacta y te contamos.

El diseño, en general, y el diseño web, en particular, son disciplinas complejas, cambiantes. Evolucionan en el tiempo, y son sensibles a modas y también a evoluciones técnicas que abren nuevas posibilidades.

Esto hace que lo que un día se percibe como maravilloso al cabo de un cierto tiempo puede ser calificado como aburrido, muy visto o, claro que sí, antiguo y obsoleto.

Y no solo eso, sino que además, y ya poniendo el foco en el diseño web, tema central de este post, un diseño web debe cumplir toda una serie de requisitos que van más allá de realizar una creación "partiendo de la nada". El diseño es inspiración, por supuesto, pero el diseñador web debe también:

• Conocer cuál es la audiencia. No es lo mismo un target joven que uno senior, o dirigirse a hombres específicamente, o a mujeres, o a ambos...
• Conocer cuáles son los objetivos del sitio web y diseñar pensando en ellos. ¿Se trata de una tienda, queremos vender? ¿Un magazine, queremos que lean o se suscriban? ¿Una consultora, queremos que nos llamen o contacten?
• Tener en cuenta el medio, y por tanto diseñar pensando en optimizar el tiempo de carga de la página. Y en todos los dispositivos necesarios. Bonito sí, pero rápido también, y ahora más que nunca, cuando ya hace tiempo que la rapidez de carga forma parte del algoritmo de Google y numerosos estudios muestran los devastadores efectos (vía uso del "back" del navegador) de unas décimas de segundo de más en el tiempo de carga de la página.

En definitiva, el diseñador web debe trabajar conjuntamente con los desarrolladores web, el equipo de marketing, de e-commerce, de contenidos, con todos. La relación con el cliente no siempre es fácil, pero en Smartbrand sabemos cómo hacer que funcione. El secreto es la empatía, junto con unas gotitas de sentido común.

Dicho esto, existen una serie de principios y buenas prácticas que son comunes a todo buen diseño web y que se encuentran en las mejores páginas web desde el punto de vista del diseño.

Son esos principios y prácticas los que queremos detallaros en este artículo. Las buenas prácticas son cosecha propia, en Smartbrand hacemos diseño web, te animamos a ver nuestros casos de éxito. En cuanto a los principios básicos del diseño web, utilizaremos el magnífico infográfico de la agencia canadiense Paper Leaf Design.

Los 4 principios del diseño web

• Contraste: todos los elementos únicos y específicos del diseño deben distinguirse unos de otros. Puede conseguirse mediante el uso de colores, tonos, formas o elementos de dirección.
• Repetición: la repetición da cohesión al diseño web.
• Alineación: Cuando se utiliza la alineación correctamente, cada elemento del diseño da la sensación de estar visualmente conectado con otro elemento, lo que da cohesión al diseño web. Nada parece fuera de lugar.
• Proximidad: la proximidad también favorece la cohesión en el diseño web. Si dos elementos están relacionados entre sí, es mejor que estén cerca el uno del otro.

‍

Seguir estos 4 principios evita muchos quebraderos de cabeza, son una buena base; pero el diseño web es mucho más, como decíamos al inicio del post. Por eso, a continuación os detallamos algunas de las buenas prácticas que por nuestra experiencia diaria sabemos que funcionan, y que conviene aplicar.

Buenas prácticas en el diseño web

Composición:

• La composición debe guiar al usuario visualmente. Se debe distinguir las áreas de información, navegación principal, secundaria, local, etc.
• Establecer áreas "verticales". Sobre todo en páginas principales o portales de información.
• Cabecera y pie: el encabezado presenta la identidad gráfica del sitio y el pie (por lo general) presenta el origen del sitio y enlaces acerca del sitio.

‍

Dimensiones:

• Como diseñadores web tenemos siempre en cuenta todo tipo de plataformas y sus distintas dimensiones de pantalla.

‍

Elementos de navegación:

• La navegación principal debe destacar claramente.
• El diseño web debe ayudar al usuario a saber dónde está. Los cambios de colores o ubicaciones pueden desorientar.

‍

Color:

• El color afecta a la sensación del sitio web.
• Es siempre preferible un diseño limpio, sin excesos.
• Es preciso encontrar el contraste adecuado entre colores.
• Conviene mantener la consistencia de los colores según la funcionalidad de los elementos.
• Mejor no usar colores vivos en tipografías.

‍

Tipografía:

• Escoger una tipografía legible es definitivamente muy importante.
• El tamaño y el interlineado son muy importantes para una mejor lectura.
• Un diseño web eficiente utiliza Web-safe fonts, es decir, fuentes conocidas y de uso extendido que minimicen el riesgo de que los usuarios vean el contenido en una fuente distinta a la elegida.
• No abusar de demasiadas fuentes o estilos en una misma página.

‍

Imágenes:

• El uso excesivo de imágenes en una página resulta poco funcional.
• Toda imagen debe ser optimizada para web (para reducir el tiempo de carga).
• Es preciso tener en cuenta que hay imágenes de diversos tipos: las que apoyan al contenido y las que son parte de la identidad del sitio web.
• El diseño web debe establecer tamaños en las imágenes que sean consistentes y constantes en todo el site. Por ejemplo, con 3 dimensiones como máximo: pequeñas, medianas y grandes.

‍

Seguir estos principios y buenas prácticas del diseño web es la mejor forma de comenzar a cubrir las expectativas de los clientes. Si necesitas un diseño web de calidad que sea eficiente para tu marca, tus objetivos y tu audiencia, contacta ahora con nosotros.