How to Create a Hotel Booking UI Design in Adobe XD
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.
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:
- San Francisco font
- Living room with fireplace image
- Bedroom with big white carpet image
- Wooden design of lounge image
- Vector Icons Set about Office and Shopping
- 20 Hotel Icons
- 12 Map Location Pin Icons
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.
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.
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).
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 .
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.
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.
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.
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.
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.
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.
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.
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”.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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%.
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.
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%.
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.
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.
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.
Step 2
Make sure that your artboard is still selected and duplicate it (Command-C > Command-V).
Step 3
Focus on the second artboard and replace the masked image with this one: Bedroom with big white carpet.
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.
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.
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.
Step 3
- Focus on the first artboard, click the left arrow group and connect it with the third artboard.
- Go to the second artboard, click the left arrow group and connect it with the first artboard.
- Move to the third artboard, click the left arrow group and connect it with the second artboard.
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.
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.
Step 3
Focus on the first artboard, click the top-right square with rounded corners and connect it with the artboard below it.
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.
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.
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!
Adobe XDYour First Wireframe With Adobe XD
Adobe XDNew Course: 15 Time-Saving Shortcuts for Adobe XD
Adobe XDHow to Create a UI Prototype Using Adobe XD
SketchHow to Create One-Sided Borders in Sketch and Adobe XD
Adobe XDQuick Tip: Design an SVG Arrow Graphic in Adobe XD
Adobe XDHow to Use Responsive Resize and Constraints in Adobe XD
from Envato Tuts+ Tutorials https://ift.tt/3b1jcGm
Comments
Post a Comment