() translation by (you can also view the original English article)
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.
- Fuente San Francisco
- Imagen de sala de estar con chimenea
- Imagen de dormitorio con gran alfombra blanca
- Imagen de salón con diseño de madera
- Conjunto de iconos sobre oficina y compras
- 20 iconos de hotel
- 12 iconos de pines de ubicación en mapa
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.
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.
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).
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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".
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 %.
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.
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 %.
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.
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.
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.
Paso 2
Asegúrate de que tu mesa de trabajo siga seleccionada y duplícala (Command+C > Command+V).
Paso 3
Concéntrate en la segunda mesa de trabajo y reemplaza la imagen oculta con esta: dormitorio con gran alfombra blanca.
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.
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.
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.
Paso 3
- 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.
- 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.
- 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.
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.
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.
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.
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.
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.
¡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!
Adobe XDTu primer wireframe con Adobe XD
Adobe XDNuevo curso: 15 atajos que ahorran tiempo en Adobe XD
Adobe XDCómo crear un prototipo UI con Adobe XD
SketchCómo crear borders en un solo lado en Sketch y Adobe XD
Adobe XDConsejo rápido: diseña un gráfico de flecha SVG en Adobe XD
Adobe XDCómo utilizar el ajuste responsivo y las restricciones en Adobe XD
