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

How to Create a Hotel Booking UI Design in Adobe XD

by
Difficulty:IntermediateLength:LongLanguages:
What You'll Be Creating

In this tutorial, you will learn how to create a hotel booking app design in Adobe XD. Being Adobe XD we’ll be able to build much more than just a static design; we’ll be building an interactive, animated prototype.

To begin with we’ll walk through some common components of any hotel booking UI design. So what will we be covering?

  • Using basic shapes, paths, and vector shape building techniques, you will learn how to create line icons and buttons.
  • Using transitions and animations, you will learn how to turn your final design into an interactive prototype.
  • Finally, you’ll learn how to add stock images to this hotel management Android project.

For more inspiration on how to adjust or improve your final hotel booking app design, you can find plenty of resources at GraphicRiver.

To learn more about Adobe XD, try our free course on Adobe XD auto-animate.

What You Will Need:

You will need the following resources in order to create this hotel booking app design. Most of these are available from Envato Elements, where a single subscription allows you unlimited downloads. You can also find free alternatives to work with if you don’t need the quality of premium assets:

1. How to Create an Artboard

Launch Adobe XD and open the drop-down menu below the phone icon on the welcome screen. Select the iPhone XR/XS Max/11 (414 x 896) template to create a 414 x 896 artboard.

new artboard

2. How to Add the Image Slider in a Hotel Booking App Design

Step 1

Download this Living room with fireplace image and drag it inside your document. Make sure that it stays selected and go to the Property inspector.

Check the lock icon to constrain the width and hight of your selected object and change the Height to 370. Enter 0 in the X & Y input boxes to place your image in the top side of your artboard, as shown in the following image.

add image

Step 2

Pick the Rectangle tool (R) and create a 370 x 414 px shape. Place it as shown in the following image, make sure that it stays selected and go to the Property inspector.

Disable the existing Border using the check box and then click the Fill color well and change the color to black (#000000).

rectangle tool

Step 3

Using the Select tool (V), select your image along with the black rectangle, right click inside your selection and go to Mask this Shape (Shift-Command-M).

mask this shape

Step 4

Pick the Rectangle tool (R) and hold down the Shift key to easily create a 30 px square. Make sure that it stays selected and go to the Property inspector.

First, enter 20 in the X box and 69 in the Y box to place your selected object as shown in the following image, and then go to the Appearance attributes. Set the corner radius to 2, disable the Border and change the Fill color to #223065.

rounded corners

Step 5

Go to View > Show Square Grid (Command-') to activate the grid on your artboard. Focus on the top side of your artboard and click the name to get the Grid settings in the Property inspector. Enter 1 in that input box and then click the color well. Change the color to #C7C7C7 and lower the Opacity to 50%.

Get back to your artboard and focus on the rounded square. Pick the Line tool (L) and create a 9 px vertical path. Make sure that it stays selected and go to the Property inspector. Disable the Fill and change the Border color to white (#FFFFFF). Return to your artboard and double click on your vertical path to enter the edit mode. Simply select the bottom anchor point and drag it 9 px to the right, as shown in the second image.

pen tool square grid

Step 6

Go to View > Show Square Grid (Command-') to disable the grid. Make sure that the vertical path made in the previous step is still selected and duplicate it (Command-C > Command-V). Select this copy, go to the Property inspector and click the Flip Horizontally button.

Hold down the Shift key, select the two white paths that make up your X symbol and place them as shown in the third image.

flip horizontally

Step 7

Select your rounded square and duplicate it (Command-C > Command-V). Select this copy, hold down the Shift key and drag your new shape to the right as shown in the following image.

Copy the heart icon from this Vector Icons Set about Office and Shopping and paste it inside your document. Set its Width to 10 and change the Fill color to white, and then place it as shown in the final image.

move copy heart shape

Step 8

Pick the Ellipse tool (E) and hold down the Shift key to easily create a 30 px circle. Make sure that it stays selected and go to the Property inspector.

First, enter 20 in the X box and 319 in the Y box to place your selected object as shown in the following image, and then go to the Appearance attributes. Disable the Border and change the Fill color to #EBEFFC.

circle tool

Step 9

Go to View > Show Square Grid (Command-') to activate the grid.

Pick the Line tool (L), create an 8 px vertical path and place it as shown in the following image. Make sure that it stays selected and go to the Property inspector. Disable the Fill and change the Border color to #223065.

Click somewhere in the middle of this path to add a new anchor point and drag it 4 px to the left as shown in the following image.

arrow path

Step 10

Select the circle and the arrow path highlighted in the following image and Group them (Command-G).

Add a copy of this group (Command-C > Command-V), place it as shown in the third image (X 364 Y 319) and then flip it horizontally.

arrow button

3. How to Add Text and the Review Box in a Hotel Booking UI Design

Step 1

Pick the Text tool (T), click inside your artboard and add the “Cozy Central Apartment” text. Make sure that it stays selected and go to the Property inspector.

Select the San Francisco Compact Display font, set the size to 24 and the style to Semibold, and then change the Fill color to #223065.

text tool

Step 2

Copy the star icon from this Vector Icons Set about Office and Shopping and paste it inside your document. Set its Width to 20 and change the Fill color to #FFC800, and then place it as shown in the final image.

star shape

Step 3

Using the Text tool (T), add the “4.8” text. Make sure that it stays selected and go to the Property inspector.

Select the San Francisco Compact Display font, set the size to 18 and the style to Medium, and then change the Fill color to #FEC82E.

yellow text

Step 4

Pick the Rectangle tool (R), create a 374 x 30 px shape and place it as shown in the following image. Set the corner radius to 5, disable the Border and change the Fill color to #F5F7FD.

rounded rectangle

Step 5

Using the Text tool (T), add the “1083 Reviews” piece of text. Make sure that it stays selected and go to the Property inspector.

Select the San Francisco Compact Display font, set the size to 16 and the style to Light, and then change the Fill color to #223065.

text

Step 6

Focus on the right group with the circle and the arrow path. Double click it to only select the arrow path and copy it (Command-C). Paste the copy (Command-V) and place it as shown in the second image.

copy arrow path

4. How to Create and Import Icons in Our Hotel Booking App Design

Step 1

Pick the Rectangle tool (R), create a 60 px square and place it as shown in the following image. Set the corner radius to 5, disable the Border and change the Fill color to #F5F7FD.

rounded square

Step 2

Pick the Ellipse tool (E) and create a 22 px circle. Disable the Fill, change the Border color to #223065 and check the Inner Stroke button.

circle border

Step 3

Using the Rectangle tool (R), create a 3 x 12 px shape and place it as shown in the following image. Make sure that it stays selected and go to the Property inspector.

Click the Different radius for each corner button and enter the numbers shown below. Disable the Fill, change the Border color to #223065 and check the Inner Stroke button.

different radius for each corner

Step 4

Using the Rectangle tool (R), create a 7 px square and place it as shown in the following image. Make sure that it stays selected and go to the Property inspector.

Click the Different radius for each corner button and enter the numbers shown below. Disable the Fill, change the Border color to #223065 and check the Inner Stroke button.

different radius for each corner

Step 5

Select the two shapes highlighted in the first image, go to the Property inspector and click the Add button.

Using the Rectangle tool (R), create a 3 px square and place it as shown in the following image. Make sure that it stays selected and go to the Property inspector.

Click the Different radius for each corner button and enter the numbers shown below. Disable the Fill, change the Border color to #223065 and check the Inner Stroke button.

add button

Step 6

Select the three shapes highlighted in the first image and Group them (Command-G). Select this group and place it as shown in the third image.

parking icon

Step 7

Using the Text tool (T), add the “Parking” piece of text. Make sure that it stays selected and go to the Property inspector.

Select the San Francisco Compact Display font, set the size to 10 and the style to Thin, and then change the Fill color to #223065.

parking text

Step 8

Select the icon the text and the rounded square highlighted in the following image. Hold down the Option and the Shift key and drag a copy of your selection to the right, as shown in the following image. Make sure that you’re leaving a 20 px gap between the original and the copy. Focus on the copies, change the text to “Gym” and replace the parking icon with the dumbbell icon from this 20 Hotel Icons pack.

Repeat this technique three more times. Always remember to leave a 20 px between each set of shapes and replace the text and icons as shown in the following images. All the icons can be found in this 20 Hotel Icons pack.

import hotel icons

5. How to Add Text and a Small Button to Our Hotel Booking UI Design

Step 1

Copy the arrow icon from this 12 Map Location Pin Icons and paste it inside your document. Set its Width to 16 and place it as shown in the first image.

Using the Text tool (T), add the pieces of text shown in the following images. Use the San Francisco Compact Display font, set the size to 16 and the style to Light, and then change the Fill color to #223065.

pink arrow

Step 2

Pick the Ellipse tool (E), create three 4 px circles and place them as shown in the following images. Disable the Border and change the Fill color to #223065.

tiny circles

Step 3

Pick the Rectangle tool (R), create a 374 x 2 px shape and place it as shown in the following image. Disable the Border and change the Fill color to #F5F7FD.

thin rectangle

Step 4

Pick the Ellipse tool (E), create a 10 px circle and place it as shown in the following images. Disable the Border and change the Fill color to #F5F7FD.

tiny circle

Step 5

Pick the Pen tool (P) and create a simple arrow path as shown in the following image. Make sure that it stays selected and go to the Property inspector. Disable the Fill and change the Border color to white .

tiny arrow

6. How to Add Input Buttons

Step 1

Pick the Rectangle tool (R), create a 177 x 30 px shape and place it as shown in the following image. Set the corner radius to 5, disable the Border and change the Fill color to #EBEFFC.

rounded rectangle

Step 2

Pick the Ellipse tool (E), create a 12 px circle and place it as shown in the first images. Disable the Border and change the Fill color to #5E78FB. Using the same tool, create an 8 px circle and place it as shown in the second image. Disable the Border and change the Fill color to black.

Select both circle made in this step and click the Subtract button from the Property inspector.

circles subtract

Step 3

Using the Rectangle tool (R), create a 12 x 8 px shape and place it as shown in the first image. Select this black rectangle along with the shape made in the previous step and click the Subtract button from the Property inspector.

Pick the Ellipse tool (E) and create an 8 px circle. Disable the Fill, change the Border color to #5E78FB, check the Inner Stroke button and don’t forget to increase the Size to 2.

rectangle subtract

Step 4

Pick the Rectangle tool (R), create a 14 px square and place it as shown in the following image. Set the corner radius to 2, disable the Border and change the Fill color to white.

white rounded square

Step 5

Pick the Line tool (L), create an 8 px horizontal line and place it as shown in the first image. Disable the Fill, change the Border color to #5E78FB and make sure that the Size is set to 1.

Duplicate this path (Command-C > Command-V), select the copy, go to the Property inspector and set the rotation angle to 90 degrees.

plus button

Step 6

Select the rounded square and the two paths that make up the plus sign. Hold down the Option and the Shift key and simply drag a copy of your selection to the left, as shown in the following image. Leave an 8 px gap between the original and the copy. Focus on the copies, select the vertical path and delete it.

minus button

Step 7

Using the Text tool (T), add the “2 ADULTS” piece of text. Use the San Francisco Compact Display font, set the size to 14 and the style to Light, and then change the Fill color to #5E78FB.

text

Step 8

Duplicate the text and shapes shown in the following image. Place the copies as shown below and replace the “2 ADULTS” piece of text with “0 CHILDREN”.

button

7. Add Buttons to Our UI Design

Step 1

Pick the Rectangle tool (R), create a 110 x 100 px shape and place it as shown in the following image. Set the corner radius to 5, disable the Border and change the Fill color to #EBEFFC.

rounded square

Step 2

Pick the Rectangle tool (R), create a 110 x 40 px shape and place it as shown in the following image. Disable the Border and change the Fill color to white.

white rectangle

Step 3

Using the Text tool (T), add the “CHECK IN” text. Use the San Francisco Compact Display font, set the size to 12 and the style to Semibold, and then change the Fill color to #5E78FB.

text

Step 4

Using the Text tool (T), add the “21” text. Use the San Francisco Compact Display font, set the size to 32 and the style to Bold.

Using the same tool, add the “FEBRUARY” text. Use the San Francisco Compact Display font, set the size to 12 and the style to Light.

text

Step 5

Pick the Rectangle tool (R), create two 2 x 10 px shape and place them as shown in the following image. Disable the Border and change the Fill color to #EBEFFC.

tiny rectangles

Step 6

Duplicate the text and shapes shown in the following image. Place the copies as shown below and replace the text information with the one shown in the second image.

duplicate buttons

Step 7

Pick the Rectangle tool (R), create a 110 x 100 px shape and place it as shown in the following image. Set the corner radius to 5, disable the Border and change the Fill color to #5E78FB.

rounded square

Step 8

Using the Text tool (T), add the “8 NIGHTS” piece of text. Use the San Francisco Compact Display font, set the size to 12 and the style to Semibold, and then change the Fill color to white.

Using the same tool, add the “$504” piece of text. Set the size to 32 and the style to Bold. Add the “$63/NIGHT” piece of text. Set the size to 12 and the style to Light.

text

8. Add a Fixed Button to the Interactive Prototype

Step 1

Pick the Rectangle tool (R), create a 414 x 124 px shape and place it as shown in the following image. Disable the Border and change the Fill color to white.

white rectangle

Step 2

Make sure that the rectangle made in the previous step is still selected and focus on the Property inspector.

Activate the Shadow using the tiny checkbox, enter the numbers shown in the following image and then click the color well of this effect. Change the color to #5E78FB and lower the Opacity to 4%.

shadow

Step 3

Pick the Rectangle tool (R), create a 374 x 60 px shape and place it as shown in the following image. Set the corner radius to 5, disable the Border and change the Fill color to #FD6C88.

pink rounded rectangle

Step 4

Make sure that your pink rounded rectangle is still selected and focus on the Property inspector.

Activate the Shadow, enter the numbers shown in the following image and then click the color well of this effect. Change the color to #FD6C88 and lower the Opacity to 30%.

pink shadow

Step 5

Using the Text tool (T), add the “BOOK NOW” piece of text and place it as shown in the following image. Use the San Francisco Compact Text font, set the size to 20, the character spacing to 100 and the style to Bold, and then change the Fill color to white.

button text

Step 6

Select the white rectangle, the pink rounded rectangle and the “BOOK NOW” text and Group them (Command-G). 

Make sure that it's selected, go to the Property inspector and check the Fix Position When Scrolling. This little option will help later when your prototype de final design. This group will stick on the screen whenever you’re scrolling through your design.

ABCD

9. How to Multiply Artboards

Step 1

Click the name of your artboard to activate the size handles. Drag down the bottom handle and increase the height of your artbaord to 1020 px.

resize artboard

Step 2

Make sure that your artboard is still selected and duplicate it (Command-C > Command-V).

duplicate artboard

Step 3

Focus on the second artboard and replace the masked image with this one: Bedroom with big white carpet.

change image

Step 4

Duplicate the second artboard (Command-C > Command-V). Focus on this third artboard and replace the masked image with this one: Wooden design of lounge.

change image

10. How to Turn Your Hotel Booking UI Design Into an Interactive Prototype

Step 1

Switch from Design mode to Prototype mode.

Focus on the image from the first artboard and click the right arrow group. Click the blue arrow button and drag it above the second artboard to connect the two artboards. Go to the Property inspector to set-up the behaviour of the interaction. Set Tap as the trigger, select Transition and a Dissolve animation and keep the default Easing and Duration attributes.

Once you’re done, you can click the Preview button to have a look at your prototype.

prototype

Step 2

Let’s continue prototyping. Focus on the second artboard, click the right arrow group and connect it with the third artboard. Move to the third artboard, click the right arrow group and connect it with the first artboard.

prototype

Step 3

  1. Focus on the first artboard, click the left arrow group and connect it with the third artboard. 
  2. Go to the second artboard, click the left arrow group and connect it with the first artboard. 
  3. Move to the third artboard, click the left arrow group and connect it with the second artboard.
prototype

11. How to Expand a Prototype

Step 1

Select the Shift key and click the names of your three artboards to select them. Hold down the Shift and the Option keys and duplicate your artboard as shown in the following image.

prototype

Step 2

Focus on the three artboards added in the previous steps. Select the rounded squares that lie behind the heart icons and change the Fill color to #FD6C88.

prototype

Step 3

Focus on the first artboard, click the top-right square with rounded corners and connect it with the artboard below it.

prototype

Step 4

Focus on the second artboard, click the top-right square with rounded corners and connect it with the artboard below it. Move to the third artboard and do the same thing.

prototype

Step 5

Finally, connect the pink rounded squares with the artboards that lie above each of these shapes.

Once you’re done, click the Preview button and test your prototype, as shown in the final product video.

prototype

Congratulations! Your Hotel Booking App Template is Finished!

Here is how it should look. I hope you’ve enjoyed this hotel design app and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section!

Feel free to adjust the final hotel booking app design and make it your own. You can find great hotel design app inspiration at GraphicRiver, with interesting solutions to create the best android hotel app.

Want to Learn More About Adobe XD?

We have loads of tutorials on Tuts+, beginner to intermediate level, take a look!

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.