Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Cómo crear un diseño de UI para reservaciones de hotel en Adobe XD

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Itzel Alvarez (you can also view the original English article)

What You'll Be Creating

En este tutorial aprenderás cómo crear un diseño para reservaciones de hotel en Adobe XD. Al tratarse de Adobe XD, podremos hacer mucho más que sólo un diseño estático; construiremos un prototipo interactivo y animado.

Para comenzar, revisaremos algunos componentes comunes de cualquier diseño UI para reservaciones de hotel. Entonces, ¿qué incluiremos?

  • Al usar formas y trazados básicos y técnicas de construcción de formas vectoriales, aprenderás cómo crear íconos de línea y botones.
  • Al usar transiciones y animaciones, aprenderás como convertir tu diseño final en un prototipo interactivo.
  • Por último, aprenderás como añadir imágenes de archivo para este proyecto de administración de hoteles en Android.

Para obtener más inspiración o saber cómo ajustar o mejorar tu diseño de aplicación de reservaciones de hotel, puedes encontrar bastantes recursos en GraphicRiver.

Lo que necesitarás:

Necesitarás los siguientes recursos para crear este diseño de aplicación para reservaciones de hotel. La mayoría está disponible en Envato Elements, donde con una suscripción tienes acceso a descargas ilimitadas. También puedes encontrar alternativas gratuitas con las que podrás trabajar si no necesitas la calidad de los recursos premium.

1. Cómo crear una mesa de trabajo

Inicia Adobe XD y abre el menú desplegable debajo del icono de teléfono en la pantalla de bienvenida. Selecciona la plantilla de iPhone XR/XS Max/11 (414 x 896) para crear una mesa de trabajo de 414 x 896.

new artboard

2. Cómo agregar el deslizador de imagen en un diseño de aplicación para reservaciones de hotel

Paso 1

Descarga esta imagen de sala de estar con chimenea y arrástrala dentro de tu documento. Asegúrate de que se quede seleccionada y ve al inspector de Property.

Marca el icono de bloqueo para restringir el ancho y la altura de tu objeto seleccionado y cambia Height a 370. Ingresa 0 en los cuadros de entrada X y Y para colocar tu imagen en la parte superior de tu mesa de trabajo, tal como se muestra en la siguiente imagen.

add image

Paso 2

Selecciona la herramienta de Rectángulo (R) y crea una forma de 370 x 414 px. Colócala como se muestra en la siguiente imagen, asegúrate de que se queda seleccionada y ve al inspector de Property.

Desactiva el Border existente con la casilla de verificación y luego haz clic en el cuadro de colores de Fill y cambia el color a negro (#000000).

rectangle tool

Paso 3

Con la herramienta de Selección (V), selecciona tu imagen junto con el rectángulo negro, haz clic derecho dentro de tu selección y ve a Mask this Shape (Shift+Command+M).

mask this shape

Paso 4

Selecciona la herramienta de Rectángulo (R) y mantén presionada la tecla Shift para crear fácilmente un cuadrado de 30 px. Asegúrate de que se queda seleccionado y ve al inspector de Property.

Primero, ingresa 20 en el cuadro X y 69 en el cuadro Y para colocar tu objeto seleccionado como se muestra en la siguiente imagen, luego ve a los atributos de Appeareance. Ajusta el corner radius a 2, desactiva el Border y cambia el color de Fill a #223065.

rounded corners

Paso 5

Ve a View > Show Square Grid (Command+') para activar la cuadrícula en tu mesa de trabajo. Concéntrate en la parte superior de tu mesa de trabajo y haz clic en el nombre para tener la configuración de Grid en el inspector de Property. Ingresa 1 en ese cuadro de entrada y luego haz clic en el cuadro de color. Cambia el color a #C7C7C7 y baja la Opacity al 50 %.

Regresa a tu mesa de trabajo y concéntrate en el cuadrado redondeado. Selecciona la herramienta de Línea (L) y crea un trazado vertical de 9 px. Asegúrate de que se queda seleccionado y ve al inspector de Property. Desactiva el Fill y cambia el color de Border a blanco (#FFFFFF). Regresa a tu mesa de trabajo y haz doble clic en tu trazado vertical para ingresar al modo de edición. Sólo selecciona el punto de anclaje inferior y arrástralo 9 px a la derecha, tal como se muestra en la segunda imagen.

pen tool square grid

Paso 6

Ve a View > Show Square Grid (Command+') para desactivar la cuadrícula. Asegúrate de que el trazado vertical que hiciste en el paso anterior siga seleccionado y duplícalo (Command+C > Command+V). Selecciona este duplicado, ve al inspector de Property y haz clic en el botón de Flip Horizontally.

Mantén presionada la tecla Shift, selecciona los dos trazados blancos que forman tu símbolo de X y colócalos como se muestra en la tercera imagen.

flip horizontally

Paso 7

Selecciona tu cuadrado redondeado y duplícalo (Command+C > Command+V). Selecciona este duplicado, mantén presionada la tecla Shift y arrastra tu nueva forma a la derecha, como se muestra en la siguiente imagen.

Copia el icono de corazón de este conjunto de iconos sobre oficina y compras y pégalo dentro de tu documento. Ajusta su Width a 10 y cambia el color de Fill a blanco, luego colócalo como se muestra en la imagen final.

move copy heart shape

Paso 8

Selecciona la herramienta de Elipse (E) y mantén presionada la tecla Shift para crear fácilmente un círculo de 30 px. Asegúrate de que se queda seleccionado y ve al inspector de Property.

Primero, ingresa 20 en el cuadro X y 319 en el cuadro Y para colocar tu objeto seleccionado como se muestra en la siguiente imagen, y luego ve a los atributos de Appeareance. Desactiva el Border y cambia el color de Fill a #EBEFFC.

circle tool

Paso 9

Ve a View > Show Square Grid (Command+') para activar la cuadrícula.

Selecciona la herramienta de Línea (L), crea un trazado vertical de 8 px y colócalo como se muestra en la siguiente imagen. Asegúrate de que se queda seleccionado y ve al inspector de Property. Desactiva el Fill y cambia el color de Border a #223065.

Haz clic cerca del medio de este trazado para agregar un nuevo punto de anclaje y arrástralo 4 px a la izquierda, como se muestra en la siguiente imagen.

arrow path

Paso 10

Selecciona el círculo y el trazado de flecha resaltado en la siguiente imagen y Agrúpalos (Command+G).

Haz una copia de este grupo (Command-C > Command-V), colócala como se muestra en la tercera imagen (X 364 Y 319) y luego voltéalo de manera horizontal.

arrow button

3. Cómo agregar texto y la caja de reseñas en un diseño de UI para reservaciones de hotel

Paso 1

Selecciona la herramienta de Texto (T), haz clic dentro de tu mesa de trabajo y escribe "Departamento céntrico y acogedor". Asegúrate de que se queda seleccionado y ve al inspector de Property.

Selecciona la fuente San Francisco Compact Display, cambia el tamaño a 24 y el estilo a Semibold, luego cambia el color de Fill a #223065.

text tool

Paso 2

Copia los iconos de estrella de este conjunto de iconos de vector sobre oficina y compras, pégalos dentro de tu documento. Cambia su Width a 20 y cambia el color de Fill a #FFC800, luego colócalo como se ve en la última imagen.

star shape

Paso 3

Con la herramienta de Texto (T), escribe "4.8". Asegúrate de que se queda seleccionado y ve al inspector de Property.

Selecciona la fuente San Francisco Compact Display, cambia el tamaño a 18 y el estilo a Medium, luego cambia el color de Fill a #FEC82E.

yellow text

Paso 4

Selecciona la herramienta de Rectángulo (R), crea una forma de 374 x 30 px y colócala como se muestra en la siguiente imagen. Ajusta el corner radius (radio de las esquinas) a 5, desactiva el Border y cambia el color de Fill a #F5F7FD.

rounded rectangle

Paso 5

Con la herramienta de Texto (T) escribe "1083 reseñas". Asegúrate de que se queda seleccionado y ve al inspector de Property.

Selecciona la fuente San Francisco Compact Display, ajusta el tamaño a 16 y el estilo a Light, luego cambia el color de Fill a #223065.

text

Paso 6

Concéntrate en el grupo de la derecha con el trazado de círculo y de flecha. Haz doble clic en él para seleccionar solamente el trazado de flecha y cópialo (Command+C). Pega la copia (Command+V) y colócala como se muestra en la segunda imagen.

copy arrow path

4. Cómo crear e importar iconos en nuestro diseño de aplicación para reservaciones de hotel

Paso 1

Selecciona la herramienta de Rectángulo (R), crea una forma de 60 px y colócala como se muestra en la siguiente imagen. Ajusta el corner radius a 5, desactiva el Border y cambia el color de Fill a #F5F7FD.

rounded square

Paso 2

Selecciona la herramienta de Elipse (E) y crea un círculo de 22 px. Desactiva el Fill, cambia el color de Border a #223065 y marca el botón de Inner Stroke.

circle border

Paso 3

Con la herramienta de Rectángulo (R) crea una forma de 3 x 12 px y colócala como se muestra en la siguiente imagen. Asegúrate de que se queda seleccionada y ve al inspector de Property.

Haz clic en el botón Different radius for each corner e ingresa los números que se muestran debajo. Desactiva el Fill, cambia el color de Border a #223065 y marca el botón de Inner Stroke.

different radius for each corner

Paso 4

Con la herramienta de Rectángulo (R) crea un cuadrado de 7 px y colócalo como se muestra en la siguiente imagen. Asegúrate de que se queda seleccionado y ve al inspector de Property.

Haz clic en el botón de Different radius for each corner e ingresa los números que aparecen debajo. Desactiva el Fill, cambia el color de Border a #223065 y marca el botón Inner Stroke.

different radius for each corner

Paso 5

Selecciona las dos formas resaltadas en la primera imagen, ve al inspector de Property y haz clic en el botón Add.

Con la herramienta de Rectángulo (R) crea un cuadrado de 3 px y colócalo como se muestra en la siguiente imagen. Asegúrate de que se queda seleccionado y ve al inspector de Property.

Haz clic en el botón de Different radius for each corner e ingresa los números que aparecen debajo. Desactiva el Fill, cambia el color de Border a #223065 y marca el botón Inner Stroke.

add button

Paso 6

Selecciona las tres formas resaltadas en la primera imagen y Agrúpalas (Command+G). Selecciona este grupo y colócalo como se muestra en la tercera imagen.

parking icon

Paso 7

Con la herramienta de Texto (T), escribe "Estacionamiento". Asegúrate de que se queda seleccionado y ve al inspector de Property.

Selecciona la fuente San Francisco Compact Display, cambia el tamaño a 10 y el estilo a Thin, luego cambia el color de Fill a #223065.

parking text

Paso 8

Selecciona el icono de texto y el cuadrado redondeado resaltado en la siguiente imagen. Mantén presionadas las teclas Option y Shift y arrastra a la derecha una copia de tu selección, como se muestra en la siguiente imagen. Asegúrate de dejar un espacio de aproximadamente 20 px entre el original y la copia. Concéntrate en las copias, cambia el texto a "Gimnasio" y reemplaza el icono de estacionamiento con el icono de mancuerna de este paquete de 20 iconos de hotel.

Repite esta técnica tres veces más. Recuerda siempre dejar 20 px de espacio entre cada conjunto de formas y reemplaza el texto y los iconos como se muestra en las siguientes imágenes. Todos los iconos los encuentras en este paquete de 20 iconos de hotel.

import hotel icons

5. Cómo agregar texto y un botón pequeño a nuestro diseño de UI para reservaciones de hotel

Paso 1

Copia el icono de flecha de estos 12 iconos de pines de ubicación en mapa y pégalo dentro de tu documento. Ajusta el Width a 16 y colócalo como se muestra en la primera imagen.

Con la herramienta de Texto (T) escribe lo que se muestra en las siguientes imágenes. Usa la fuente San Francisco Compact Display, cambia el tamaño a 16 y el estilo a Light, luego cambia el color de Fill a #223065.

pink arrow

Paso 2

Selecciona la herramienta de Elipse (E), crea tres círculos de 4 px y colócalos como se muestra en las siguientes imágenes. Desactiva el Border y cambia el color de Fill a #223065.

tiny circles

Paso 3

Selecciona la herramienta de Rectángulo (R), crea una forma de 372 x 2 px y colócala como se muestra en la siguiente imagen. Desactiva el Border y cambia el color de Fill a #F5F7FD.

thin rectangle

Paso 4

Selecciona la herramienta de Elipse (E), crea un círculo de 10 px y colócalo como se muestra en las siguientes imágenes. Desactiva el Border y cambia el color de Fill a #F5F7FD.

tiny circle

Paso 5

Selecciona la herramienta de Pluma (P) y crea un trazado simple de flecha como se muestra en la siguiente imagen. Asegúrate de que se queda seleccionado y ve al inspector de Property. Desactiva el Fill y cambia el color del Border a blanco.

tiny arrow

6. Cómo agregar botones de entrada

Paso 1

Selecciona la herramienta de Rectángulo (R), crea una forma de 177 x 30 px y colócala como se muestra en la siguiente imagen. Ajusta el corner radius a 5, desactiva el Border y cambia el color de Fill a #EBEFFC.

rounded rectangle

Paso 2

Selecciona la herramienta de Elipse (E), crea un círculo de 12 px y colócalo como se muestra en las primeras imágenes. Desactiva el Border y cambia el color de Fill a #5E78FB. Con la misma herramienta, crea un círculo de 8 px y colócalo como se muestra en la segunda imagen. Desactiva el Border y cambia el color de Fill a negro.

Selecciona los dos círculos que hiciste en este paso y haz clic en el botón Subtract del inspector de Property.

circles subtract

Paso 3

Con la herramienta de Rectángulo (R) crea una forma de 12 x 8 px y colócala como se muestra en la primera imagen. Selecciona este rectángulo negro junto con la forma que hiciste en el paso anterior y haz clic en el botón Subtract del inspector de Property.

Selecciona la herramienta de Elipse (E) y crea un círculo de 8 px. Desactiva el Fill, cambia el color de Border a #5E78FB, marca el botón de Inner Stroke y no olvides aumentar Size a 2.

rectangle subtract

Paso 4

Selecciona la herramienta de Rectángulo (R), crea un cuadrado de 14 px y colócalo como se muestra en la siguiente imagen. Ajusta el corner radius a 2, desactiva el Border y cambia el color de Fill a blanco.

white rounded square

Paso 5

Selecciona la herramienta de Línea (L), crea una línea horizontal de 8 px y colócala como se muestra en la primera imagen. Desactiva el Fill, cambia el color de Border a #5E78FB y asegúrate de que el Size esté en 1.

Duplica este trazado (Command+C > Command+V), selecciona la copia, ve al inspector de Property y ajusta el ángulo de rotación a 90 grados.

plus button

Paso 6

Selecciona el cuadrado redondeado y los dos trazados que forman el signo de más. Mantén presionadas las teclas Option y Shift y arrastra a la izquierda una copia de tu selección, tal como se muestra en la siguiente imagen. Deja un espacio de 8 px entre el original y la copia. Concéntrate en las copias, selecciona el trazado vertical y bórralo.

minus button

Paso 7

Con la herramienta de Texto (T) escribe "2 ADULTOS". Usa la fuente San Francisco Compact Display, cambia el tamaño a 14 y el estilo a Light, luego cambia el color de Fill a #5E78FB.

text

Paso 8

Duplica el texto y las formas que se muestran en la siguiente imagen. Coloca las copias como se muestra debajo y reemplaza el texto "2 ADULTOS" con "0 NIÑOS".

button

7. Añade botones a nuestro diseño de UI

Paso 1

Selecciona la herramienta de Rectángulo (R), crea una forma de 110 x 100 y colócala como se muestra en la siguiente imagen. Ajusta el corner radius a 5, desactiva el Border y cambia el color de Fill a #EBEFFC.

rounded square

Paso 2

Selecciona la herramienta de rectángulo (R), crea una forma de 110 x 40 y colócala como se muestra en la siguiente imagen. Desactiva el Border y cambia el color de Fill a blanco.

white rectangle

Paso 3

Con la herramienta de Texto (T) escribe "REGISTRO". Usa la fuente San Francisco Compact Display, cambia el tamaño a 12 y el estilo a Semibold, y luego cambia el color de Fill a #5E78FB.

text

Paso 4

Con la herramienta de Texto (T) escribe "21". Usa la fuente San Francisco Compact Display, cambia el tamaño a 32 y el estilo a Bold.

Con la misma herramienta, escribe "FEBRERO". Usa la fuente San Francisco Compact Display, cambia el tamaño a 12 y el estilo a Light.

text

Paso 5

Selecciona la herramienta de Rectángulo (R), crea dos formas de 2 x 10 y colócalas como se muestra en la siguiente imagen. Desactiva el Border y cambia el color de Fill a #EBEFFC.

tiny rectangles

Paso 6

Duplica el texto y las formas que se muestran en la siguiente imagen. Coloca las copias como se muestra debajo y reemplaza la información del texto con el que se muestra en la segunda imagen.

duplicate buttons

Paso 7

Selecciona la herramienta de Rectángulo (R), crea una forma de 110 x 100 y colócala como se muestra en la siguiente imagen. Ajusta el corner radius a 5, desactiva el Border y cambia el color de Fill a #5E78FB.

rounded square

Paso 8

Con la herramienta de Texto (T) escribe "8 NOCHES". Usa la fuente San Francisco Compact Display, cambia el tamaño a 12 y el estilo a Semibold, luego cambia el color de Fill a blanco.

Con la misma herramienta, escribe "$504". Cambia el tamaño a 32 y el estilo a Bold. Escribe "$63/NOCHE". Cambia el tamaño a 12 y el estilo a Light.

text

8. Agrega un botón fijo al prototipo interactivo

Paso 1

Selecciona la herramienta de Rectángulo (R), crea una forma de 414 x 124 y colócala como se muestra en la siguiente imagen. Desactiva el Border y cambia el color de Fill a blanco.

white rectangle

Paso 2

Asegúrate de que el rectángulo que hiciste en el paso anterior siga seleccionado y concéntrate en el inspector de Property.

Activa Shadow con la casilla de verificación pequeña, ingresa los números que se muestran en la siguiente imagen y haz clic en el cuadro de color de este efecto. Cambia el color a #5E78FB y baja la Opacity a 4 %.

shadow

Paso 3

Selecciona la herramienta de Rectángulo (R), crea una forma de 374 x 60 px y colócala como se muestra en la siguiente imagen. Ajusta el corner radius a 5, desactiva el Border y cambia el color de Fill a #FD6C88.

pink rounded rectangle

Paso 4

Asegúrate de que tu rectángulo redondeado rosa siga seleccionado y concéntrate en el inspector de Property.

Activa Shadow, ingresa los números que se muestran en la siguiente imagen y haz clic en el cuadro de color de este efecto. Cambia el color a #FD6C88 y baja la Opacity a 30 %.

pink shadow

Paso 5

Con la herramienta de Texto (T) escribe "RESERVAR AHORA" y coloca el texto como se muestra en la siguiente imagen. Usa la fuente San Francisco Compact Display, cambia el tamaño a 20, el espaciado entre caracteres a 100 y el estilo a Bold, luego cambia el color de Fill a blanco.

button text

Paso 6

Selecciona el rectángulo blanco, el rectángulo redondeado rosa y el texto "RESERVAR AHORA" y agrúpalos (Command+G).

Asegúrate de que está seleccionado, ve al inspector de Property y marca Fix Position When Scrolling. Esta sencilla opción te ayudará después con tu prototipo de diseño final. Este grupo se quedará en la pantalla aunque te desplaces a lo largo de tu diseño.

ABCD

9. Cómo multiplicar mesas de trabajo

Paso 1

Haz clic en el nombre de tu mesa de trabajo para activar los tiradores de tamaño. Arrastra hacia abajo el tirador inferior y aumenta la altura de tu mesa de trabajo a 1020 px.

resize artboard

Paso 2

Asegúrate de que tu mesa de trabajo siga seleccionada y duplícala (Command+C > Command+V).

duplicate artboard

Paso 3

Concéntrate en la segunda mesa de trabajo y reemplaza la imagen oculta con esta: dormitorio con gran alfombra blanca.

change image

Paso 4

Duplica la segunda mesa de trabajo (Command+C > Command+V). Concéntrate en esta tercera mesa de trabajo y reemplaza la imagen oculta con esta: salón con diseño de madera.

change image

10. Cómo convertir tu diseño de UI para reservaciones de hotel en un prototipo interactivo

Paso 1

Cambia del Design mode al Prototype mode.

Concéntrate en la imagen de la primera mesa de trabajo y haz clic en el grupo de la flecha derecha. Haz clic en el botón de flecha azul y arrástralo sobre la segunda mesa de trabajo para conectarlas. Ve al inspector de Property para configurar el comportamiento de la interacción. Selecciona Tap como el activador, selecciona Transition y una animación de Dissolve y mantén los atributos por defecto de Easing y Duration.

Cuando hayas terminado, puedes hacer clic en el botón Preview para echarle un vistazo a tu prototipo.

prototype

Paso 2

Sigamos con el prototipado. Concéntrate en la segunda mesa de trabajo, haz clic en el grupo de la flecha derecha y conéctalo con la tercera mesa de trabajo, haz clic en el grupo de la flecha derecha y conéctalo con la primera mesa de trabajo.

prototype

Paso 3

  1. Concéntrate en la primera mesa de trabajo, haz clic en el grupo de la flecha izquierda y conéctalo con la tercera mesa de trabajo.
  2. Ve a la segunda mesa de trabajo, haz clic en el grupo de la flecha izquierda y conéctalo con la primera mesa de trabajo.
  3. Ve a la tercera mesa de trabajo, haz clic en el grupo de la flecha izquierda y conéctalo con la segunda mesa de trabajo.
prototype

11. Cómo expandir un prototipo

Paso 1

Selecciona la tecla Shift y haz clic en los nombres de tus tres mesas de trabajo para seleccionarlas. Mantén presionada las teclas Shift y Option y duplica tu mesa de trabajo como se muestra en la siguiente imagen.

prototype

Paso 2

Concéntrate en las tres mesas de trabajo que agregaste en los pasos anteriores. Selecciona los cuadrados redondeados que están detrás de los iconos de corazón y cambia el color de Fill a #FD6C88.

prototype

Paso 3

Concéntrate en la primera mesa de trabajo, haz clic en el cuadrado superior derecho con las esquinas redondeadas y conéctalo con la mesa de trabajo que está debajo.

prototype

Paso 4

Concéntrate en la segunda mesa de trabajo, haz clic en el cuadrado superior derecho con esquinas redondeadas y conéctalo con la mesa de trabajo que está debajo. Ve a la tercera mesa de trabajo y haz lo mismo.

prototype

Paso 5

Por último, conecta los cuadrados redondeados rosas con las mesas de trabajo que están debajo de cada una de esas formas.

Cuando termines, haz clic en el botón Preview y prueba tu prototipo, tal como se muestra en el video de producto final.

prototype

¡Felicidades! ¡Tu plantilla para aplicación de reservaciones de hotel está terminada!

Así es como debería verse. Espero que hayas disfrutado este diseño de aplicación para hoteles y que puedas aplicar estas técnicas en tus futuros proyectos. ¡No dudes en compartir tu resultado final en la sección de comentarios!

Siéntete libre de modificar el diseño final de aplicación para reservaciones de hotel y darle tu estilo. Puedes encontrar inspiración para diseños de aplicaciones para hoteles en GraphicRiver, además de soluciones interesantes para crear la mejor aplicación para hoteles de Android.

¿Quieres aprender más sobre Adobe XD?

Tenemos montones de tutoriales en Tuts+, de nivel principiante a intermedio ¡échales un vistazo!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.