Diseño Web HotelSleep

Nueva forma de reservar tu estancia

Vision General

Objetivo

Mi principal objetivo ha sido crear una plataforma donde el usuario pueda descubrir alojamientos y realizar reservas de manera rápida y sencilla. He buscado diseñar una experiencia intuitiva, visual y accesible, que facilite la toma de decisiones.

Contexto

Este proyecto surge de la necesidad de mejorar la experiencia digital dentro del sector turístico. Por ello, he desarrollado una solución que permite visualizar espacios, consultar información relevante y navegar de forma clara, adaptándose a distintos tipos de usuario.

 

Impacto

Con esta propuesta pretendo mejorar la forma en la que los usuarios interactúan con servicios de alojamiento. La web permite optimizar la búsqueda y reserva, ofreciendo una experiencia cómoda, atractiva y eficiente.

NAVEGACIÓN DE FLUJO

He diseñado un mapa de navegación que organiza toda la experiencia dentro de la web. Mi objetivo ha sido que el usuario pueda moverse de forma lógica, clara y sin fricciones entre las distintas secciones. Gracias a esta estructura, es posible explorar habitaciones, consultar servicios y acceder a la reserva fácilmente, manteniendo siempre una navegación coherente.

 

iPhone 14 Plus - Black Midnight

Componentes Utilizados

En esta sección he utilizado distintos componentes clave para construir la interfaz. Cada uno cumple una función específica para garantizar usabilidad, claridad y adaptabilidad.

Mensaje de error

Este componente aparece cuando el usuario introduce información incorrecta o deja algún campo obligatorio sin completar. Su objetivo es avisar claramente del problema para que el usuario pueda corregirlo fácilmente.

Mensajes emergentes

Los mensajes emergentes sirven para mostrar información importante o confirmar una acción realizada por el usuario, como completar una reserva o guardar un hotel. Este tipo de mensaje aparece en pantalla durante unos segundos para informar sin interrumpir demasiado la navegación..

Calendario

El calendario permite al usuario seleccionar las fechas de entrada y salida del alojamiento. Está diseñado de forma clara para que el usuario pueda ver fácilmente los días disponibles y organizar su estancia.

Carrusel de imágenes

El carrusel de imágenes muestra diferentes fotografías de los hoteles o del entorno natural. El usuario puede desplazarse entre ellas para ver más detalles del lugar y tener una mejor idea del alojamiento antes de reservar.

. Icono de "Me gusta"

Este icono permite a los usuarios marcar los hoteles que más les gustan o guardar sus favoritos. De esta forma pueden encontrarlos fácilmente más tarde sin tener que buscarlos de nuevo.

Mapa interactivo

El mapa interactivo muestra la ubicación de los hoteles disponibles. Gracias a este componente el usuario puede explorar diferentes zonas y ver qué alojamientos hay cerca de cada ubicación.

Carrusel con diferentes opciones de hoteles

Este carrusel presenta varias opciones de hoteles que el usuario puede explorar deslizando horizontalmente. Cada opción incluye una imagen del alojamiento y un acceso rápido a más información.

Mensaje de recordatorio

Este componente sirve para recordar información importante al usuario, como completar algún paso del proceso de reserva o revisar los datos seleccionados.

Card de hotel con información

Las cards de hotel muestran la información básica de cada alojamiento, como la imagen, el nombre del hotel, la ubicación y algunos detalles principales. Estas tarjetas permiten comparar diferentes opciones de forma rápida y sencilla.

Investigación / Referencias​

Para desarrollar este proyecto me he basado en diferentes referencias del sector turístico y digital. Esto me ha permitido analizar tendencias actuales y aplicar buenas prácticas, creando una interfaz moderna, funcional y adaptada al usuario.

Video de interacciones

En este vídeo explico paso a paso cómo navegar por la web y cómo realizar una reserva. Mi objetivo es que el usuario entienda fácilmente cómo explorar alojamientos, seleccionar fechas y completar el proceso sin complicaciones.

Figma.logoCreated using Figma

Figma

He utilizado Figma como herramienta principal para diseñar la interfaz. Gracias a ello he podido prototipar, organizar componentes y trabajar la adaptabilidad, asegurando una experiencia coherente en distintos dispositivos.

Descubre más desde Portafolío_Jesús Gordillo Pardal

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo