Cómo crear webs para hoteles que emocionan
Hoy en día el diseño web es cada vez más complejo dado el entorno multidispositivo en el que nos encontramos, donde el tráfico se reparte entre ordenadores de escritorio, portátiles, tabletas y móviles, cada uno con diferente tamaño de pantalla. Por lo tanto, no es recomendable que diseñamos con sólo un dispositivo en mente, sino que debemos de tener en cuenta puntos específicos de usabilidad de cada dispositivo. Y ojo, los smartwatches y pantallas táctiles de coches se suman a la lista de dispositivos. Es imprescindible tener una web accesible para todos los dispositivos, que puede ser responsiva o adoptiva. Una web responsiva reestructura independientemente de la pantalla del dispositivo automáticamente todos los elementos y contenidos de una web. Una web adoptiva tiene su propia programación para ajustar el diseño a los diferentes dispositivos con la opción de poder ofrecer en ella contenidos diferentes. Aunque cada una tiene sus ventajas y desventajas, no es contenido de este blog post entrar en esta discusión, a nivel de tendencias de diseño ambas opciones siguen las mismas pautas:
1. NAVEGACIÓN ONE PAGE: PIENSA EN DISEÑO WEB MOVIL PRIMERO
Anteriormente cuando planificábamos un nuevo diseño web, pensábamos primero en la web escritorio para posteriormente adaptarla a las pantallas más pequeñas como las tabletsa o móviles. Los usuarios están acostumbrados a navegar por toda la información de una sola página, haciendo scroll hacía abajo, sin tener que navegar por botones o menús de navegación. Menos click y más scroll; “Scrolling is winning over clicking” Cuando pensamos en un diseño nuevo, pensamos primero en el diseño móvil. El reto está en saber encajar un nivel de arquitectura más profunda de la información (a menudo con el apoyo de menús en cascada en el escritorio) para poder traducirla bien en el móvil y no obligar al usuario a navegar por demasiados pasos hasta llegar al contenido. Ejemplo: Hotel The Ritz Paris
2. STORYTELLING ANIMADO E INTERACCIÓNES EXPERIMENTALES
Los estudios demuestran que la gente recuerda el 10% de lo que escucha, el 20% de lo que lee y el 80% de lo que ve y hace, por esto el storytelling visual a través de imágenes, infografías dinámicas o videos es tan importante. Por el otro lado, la creación de contenido escrito es importante no solamente para el SEO, sino también para generar conversación y interacción alrededor del contenido con los usuarios, ya que son susceptibles de compartirlo en las redes sociales. La tendencia del futuro es poder desarrollar contenidos a medida para dirigirse a los usuarios basándose en sus preferencias y en su comportamiento online. Y además crear experiencias interactivas con mensajes para interaccionar con la página, ya sea suscribiéndose a una newsletter, pulsando algún botón, o contestando alguna pregunta por parte del usuario. 3. IMÁGENES Y VÍDEOS DE ANCHO COMPLETO
Las imágenes y videos de gran formato (single screen layout) a pantalla completa desplazan a los pequeños sliders como centro de atención. Tienen el efecto de televisión o de portada de revista para garantizar un impacto visual de gran calidad visual y crear sensaciones. Ejemplo: Nassau Paradise Island 4. MENÚS MOVILES EN ESCRITORIO
Cada vez se ven más webs escritorios con menús tipo móvil; laterales o menús no visibles de entrada como los llamados “menús hamburguesa”. Menús cuya funcionalidad permite que los elementos de la misma se mantengan ocultos, dejando de esta manera la web más “limpia” y mostrándolos sólo al realizar alguna interacción con él. Ejemplo: Rawnet 5. DIFERENCIACIÓN POR LAS TIPOGRAFÍA CON PERSONALIDAD La mayoría de las webs utilizan tipografías clásicas como la Helvetica, la Rockwell, la Bodoni o la Futura. Pero esto limita el diseño de una web, sobre todo cuando la tipografía es parte de la diferenciación de la imagen de marca. Una de las reglas en diseño es no mezclar más de tres tipografías, pero se pone de moda la diversidad de fuentes en una sola página. Ejemplo: ACE Hotel o Naumihotel 6. CARD DESIGN O DISEÑO MODULAR El Diseño basado en módulos sigue las líneas de diseño de Instagram o Pinterest. Su ventaja es la flexibilidad de diseño, ya que los cuadros se colocan según el ancho de las diferentes pantallas. Además, las secciones se pueden ver de forma individual o como parte de un conjunto mayor. Ejemplo: Airnbnb 7. SIMPLICIDAD, DISEÑO MINIMALISTA Lo Menos es más: ya no se utilizan los biseles, brillos, degradados, texturas, sombras o relieves. Gracias al diseño plano (flat design) se simplifica el aspecto de las webs y las hace más rápidas ya que al utilizar elementos gráficos planos aumentan el rendimiento. La necesidad de una navegación ágil y con unos tiempos de espera bajos, influenciada por las tabletas o smartphones, hacen que el diseño tenga que cumplir con estos requerimientos. Ejemplo: Spotify La web es nuestro escaparate y la herramienta perfecta para envolver al futuro cliente en el ambiente que va a vivir en nuestro hotel. El diseño de la web es muy importante, para proporcionar una buena experiencia y contar historias. El reto está en conseguir un equilibrio perfecto entre un atractivo diseño emocional y una buena usabilidad sin que la web sufra un tiempo de carga larga.