
Create a Realistic Coin in Affinity Photo
February 23, 2022
How to Create an Old Western Wanted Poster
May 5, 2023How to Create a Travel App in Affinity Designer

In this tutorial, you’ll learn how to create a travel app in Affinity Designer. Most app designs are created with software such as Figma, Sketch, or Adobe XD where you can use wireframes and other UI/UX design tools. However, app designs can also be made in Affinity Designer.
Before you learn to create a travel app, go to the following links to download the images, icons, and fonts used in the tutorial. Click Download PNG for the icons.
- Church
- Las Vegas
- Train
- Tokyo
- Bali
- Malta
- Hiking icon
- Cycling icon
- Skiing icon
- Username icon
- Map pinpoint icon
- Home icon
- Bali temple
- Roboto font
- Montserrat font
Creating the Login Page
The first thing we’ll do in order to create a travel app is to create the login page.
Step 1
First, go to File > New. Select Devices and click iPhone X/XS. This is the latest iPhone version that Affinity Designer has right now. In the Layout section, make sure the Create Artboard box is checked. Change the Document Units to Pixels. Then, click Create.
Step 2
Next, select the Artboard. Press CTRL + Shift and drag a copy of the artboard to the right. Then, select the duplicated artboard and press CTRL + Shift. Drag another copy of the artboard to the right of the first duplicated artboard.
Step 3
In the Layers Panel, select the original artboard and name it Login Page. Next, select the first duplicated artboard and name it Explore Page. Then, select the third artboard and name it Booking.
Step 4
Select the Login Page artboard. Next, grab the Rectangle tool from the Tools Panel. Draw a rectangle that covers the artboard. Make sure you stretch it slightly past the artboard. In the Layers Panel, click the Lock icon to keep the rectangle in place.
Step 5
Press CTRL + R to activate the rulers if they aren’t showing.
Step 6
Now, grab the Move Tool. Then, drag a guideline onto the document about 137 px in from the left side of the artboard. After that, drag another guideline onto the artboard and place it 982 px in from the right side of the artboard.
Step 7
Next, go to the Swatches Panel. Double click the fill color to bring up the Color Chooser. Then, set the color of the rectangle to the following hex code # 3085ED.
Step 8
After that, grab the Artistic Text tool from the Tools Panel. Click on the document and type Travetopia (combo of the word travel and utopia). Place the text towards the top of the document and center it. Go to the Font Size to resize the text.
Step 9
With the text layer still selected. Go to the Font Family. Set the text to Roboto Bold. Then, select the Travel part of the text. Go to the Swatches Panel and set it to the following hex code # EDE830. After that, select the second part of the text. Set its color to the following hex code # 30ED44. Center the text layer.
Step 10
Once you’ve done that, grab the Rectangle tool from the Tools Panel. Take the tool and draw a rectangle in the same area you see on the screen. Go to the Swatches Panel and set the rectangle to the following hex code # F4F9FF.
Step 11
With the rectangle still selected, go to the Context Toolbar. Set the Corner to Rounded and set it to 50%. Grab the Move Tool. Press CTRL + Shift and drag a copy of the rectangle beneath the original one. Repeat this step again. This time, make the duplicated rectangle slightly smaller. Then, set the color of this rectangle to the yellow color in the text which is #EDE830.
Step 12
Now, grab the Artistic Text Tool from the Tools Panel. Take the tool and place it above the first rectangle we created. Click in the area and type Email Address. Then, press CTRL + Shift and drag a copy of the text on top of the second rectangle we created. Type Password. Now, select both text layers and change the color to the yellow color we’ve been using which is #EDE830.
Step 13
Grab the Move Tool. Select the second text layer. Press CTRL + Shift and place a copy of the text on top of the yellow rectangle. Select the text and change the color to white. Then, type Login and resize the text making it bigger. Make sure the text is centered inside of the rectangle. Set the color of the text to the following hex code # F9F9F9.
Step 14
Next, grab the Artistic Text tool. Take the tool and click inside the first rectangle we created and type an email address. I typed janedoe@gmail.com. Select the text and go to the Swatches Panel. Change the color of the text to the following hex code # 717171.
Step 15
After that, grab the Ellipse Tool from the Tools Panel. Take the tool and press CTRL + Shift, 77then draw an ellipse. Set the color of the ellipse to the same color as the email address which is # 717171.
Step 16
With the ellipse still selected, press CTRL + Shift and drag a copy of the ellipse next to the original one. Then, press CTRL + J to make more duplicated ellipses inside of the rectangle until it reaches the right side. Select all the ellipses. Press CTRL + G to group them together. Label the group Password Holder.
Step 17
Grab the Move Tool. Press CTRL + Shift and drag a copy of the Password text beneath the second rectangle. Place it on the right side and type Forgot Password.
Step 18
Once you’ve done that, press CTRL + Shift and drag a copy of this text layer beneath the login button. Type Create a New Account. Select the text and change it to the green color we used earlier which is #30ED44.
Creating the Explore Page
Step 19
Grab the Rectangle Tool from the Tools Panel. Take the tool and draw a rectangle that covers the artboard. Go to the Swatches Panel and set the rectangle to the following hex code #F9F9F9.
Step 20
Next, grab the Move Tool again. Grab a guideline from the left side and place it around 100 px from the right edge of the artboard. Then, place a guideline from the top to 2326 px from the bottom of the artboard. After that, drag a guideline from the top and place it 108 px from the top of the artboard. Then, go to the View menu and click Lock Guides.
Step 21
Now, grab the Rectangle Tool. This time, draw a small rectangle on the left side. Then, press CTRL + Shift and drag a copy of the rectangle beneath the original one. Then, press CTRL + J to make one more duplicate of the rectangle. Select the three rectangles. Go to the Swatches Panel and change them to the blue color we previously used which is #3085ED. Then, press CTRL + G to group the rectangles together. Label the group Menu.
Step 22
After that, grab the Artistic Text Tool from the Tools Panel. Take the tool and click below the menu we created. Next, type Where do you. Then, press CTRL + Shift to drag a duplicate of the text beneath the original one. Type Want to go? Set the color of the text to black.
Step 23
Once you’ve done that, grab the Rectangle Tool from the Tools Panel. Take the tool and draw a rectangle beneath the text we added. Go to the Swatches Panel and set the color of the rectangle to the following hex code #EEEEEE. Then, go to the Swatches Panel and lower the Opacity of the fill color to 58%.
Step 24
Now, grab the Artistic Text Tool. Take the tool and click in the rectangle. Type Search. Set the color of the text to black. Then, go to the Swatches Panel and lower the Opacity of the text color to 40%. Place the text where you see it on the screen.
Step 25
Grab the Ellipse Tool from the Tools Panel. In the Swatches Panel, get rid of the fill color. Select the stroke color and set it to the following hex code # C7C7C7. Make sure the Opacity is set back to 100%. Now, go to the Stroke Panel and set the Width of the stroke to .8 pt. Then, draw an ellipse inside of the rectangle on the right side.
Step 26
Next, grab the Rectangle Tool from the Tools Panel. Go to the Swatches Panel and get rid of the stroke color or press Shift + X. Select the fill color and set it to the same color as the ellipse.
Step 27
Select both the ellipse and the rectangle. Press CTRL + G to group them together. Label the group Search Icon.
Step 28
Now, grab the Move Tool. Press CTRL + Shift and drag a copy of one of the black text layers beneath the rectangle. Type Recommended Places. Make the size of the text smaller (18 pt).
Step 29
Next, grab the Rectangle Tool from the Tools Panel. Take the tool and draw a rectangle beneath the Recommended Places text. Then, get rid of the fill color of the rectangle and its stroke color. Go to the Context Toolbar and set the Corner to Rounded and set the percentage to 15%.
Step 30
Go to File > Open and drag the image of the beach onto the document. In the Layers Panel, drag the image layer inside of the rectangle layer. Go to the Transform Panel and turn on the Lock Aspect Ratio. Then, grab the Move Tool and resize the image.
Step 31
With the Move Tool still active, press CTRL + Shift and dry a copy of the rectangle to the right of the original one. Then, press CTRL + J to make a second duplicate of the rectangle. In the Layers Panel, delete the images inside of the duplicated rectangles.
Step 32
Next, select the first duplicated rectangle. Then, go to File > Open and drag the image of the man holding an umbrella onto the document. After that, drag the image into the rectangle and resize it.
Step 33
Go to File > Open and drag the third image onto the document. Then, in the Layers Panel, drag the image into the third rectangle. With the Move Tool, resize the image the way you see it on the screen.
Step 34
34. Now, grab the Artistic Text tool. Take the tool and place it on the bottom right corner of the Bali picture. Type the word Bali and set the color of the text to white. Make sure the Opacity is at 100% in the Swatches Panel. Select the text. Then, go to the Font Family and change the text to Montserrat Bold. Resize the text making it smaller.
Step 35
Press CTRL + Shift and drag a copy of the text onto the second picture and in the bottom right corner. Type Tokyo.
Step 36
Do the same steps again and drag the text onto the third image. Then, type Barcelona.
Step 37
After that, grab the Artistic Text tool. Place it on the right side of the Recommended Places text. Next, type See All.
Step 38
Grab the Rectangle tool from the Tools Panel. Draw a small rectangle under the See All text. Set the color of the rectangle to the green color we’ve been using which is # 30ED44.
Step 39
Once you’ve done that, grab the Move Tool. Press CTRL + Shift and drag a copy of the Recommended Places text beneath the images. Type Popular Places. Then, select all three rectangles with the images in it along with the text. Press CTRL + Shift and drag a copy of them beneath the popular places text. Also, press CTRL + Shift and drag a copy of the See All text and the rectangle.
Step 40
Select the rectangles and delete the images inside of them. Next, select the first rectangle. Then, go to File > Open and select the image of the coastal city. In the Layers Panel, drag the image into the first rectangle.
Step 41
Now, go to File > Open and select the image of Las Vegas. Then, drag the image into the second rectangle.
Step 42
After that, go to File > Open and select the image of the train and drag it onto the document. Then, in the Layers Panel, drag the image into the third rectangle.
Step 43
Select the text on the first image. Type Malta. After that, select the text on the second image and type Las Vegas. Then, select the third text on the third image and type Switzerland.
Step 44
Next, select the Popular Places text. Press CTRL + Shift and drag a copy of the text beneath the second set of rectangles. Type Categories. Select the See All text. Then, press CTRL + Shift and drag a copy of the text and the rectangle down.
Step 45
Grab the Rectangle Tool from the Tools Panel. Take the tool and draw a rectangle beneath the Categories text. Then, go to the Context Toolbar and set the Corner to Rounded.
Step 46
After that, grab the Artistic Text tool and click beneath the hiker icon. Type Hiking.
Step 47
Select the icon. Right-click on the image and select Layer Effects check the Color Overlay box and select it. Go to Color and select RGB Hex Sliders. Then, enter the hex code # for the yellow color we previously used which is #EDE830. Select all three elements. Then, press CTRL + G to group them together.
Step 48
With the group selected, press CTRL + Shift and drag a copy of the group beside the original. Double click on the text and type Cycling.
Step 49
Go to File > Open and select the icon of the man on the bike and drag it onto the document. Grab the Move Tool and resize the icon. Double click the hiking icon and delete it. Place the cycling icon here.
Step 50
With the icon selected, go to the Layers Panel and click the fx layers effect icon. Check the Color Overlay box and select it. Next, go to Color. Select RGB Hex Sliders and enter the hex code for the yellow color we’ve been using which is #EDE830.
Step 51
Select the cycling group. Next, press CTRL + Shift and drag a copy of the group to the right. Click on the text and type Skiing.
Step 52
Now, click on the cycling icon here and delete it. Go to File > Open and drag the skiing icon onto the document. Resize the icon with the Move Tool and place it where the cycling icon was. Make sure it’s inside of the group.
Step 53
Select the skiing icon. Now, click the fx icon. Check the Color Overlay box and select it. Then, go to Color and enter the hex code for the yellow color #EDE830. Make sure the icon is inside of the group.
Step 54
Next, grab the Rectangle Tool from the Tools Panel. Draw a rectangle towards the bottom of the document. Set the color of the document to the green color from the Swatches Panel. The hex code for this is #30ED44. In the Context Toolbar, set the Corner to Rounded and the % to 40%.
Step 55
Now, go to File > Open and select and drag the icon of the house, the profile icon, and the map pin icon onto the document. Grab the Move Tool and resize and arrange the icons the way you see them on the screen on the green rectangle.
Step 56
Press the Shift key, then take the Move Tool and select the 3 icons we placed on the green rectangle. Now, go to the Layers panel and select the fx icon. Check the Color Overlay box and select it. Then, go to Color and enter the hex code # for the yellow color we’ve been using which is #EDE830.
Creating the Booking Page
The final page needed to create a travel app is the booking page.
Step 57
After that, grab the Heart tool from the Tools Panel. Draw a heart on the green rectangle. Set the color of the rectangle to the yellow we’ve been using.
Step 58
In the Layers Panel, label this artboard Booking. Select this artboard.
Step 59
Grab the Rectangle tool from the Tools Panel. Draw a rectangle that covers half of the artboard. Next, go to the Swatches Panel and get rid of the fill color and stroke color of the rectangle.
Step 60
After that, go to File > Open and select the image of the temple and drag it onto the document. Then, in the Layers Panel, drag the image layer into the rectangle layer. Grab the Move Tool and resize the image. Make sure the Lock Aspect Ratio is turned on.
Step 61
Once you’ve done that, grab the Rectangle tool. Draw a rectangle that covers the image. Go to the Swatches Panel and set the color of the rectangle to the following hex code #3085ED.
Step 62
With the rectangle still selected, go to the Layers Panel. Set the Blend Mode to Soft Light and lower the Opacity to about 30%. In the Layers Panel, drag the rectangle into the other rectangle with the image. Make sure the blue rectangle is on top of the image layer.
Step 63
Now, grab the Rectangle Tool from the Tools Panel. Take the tool and draw a rectangle that covers the bottom part of the image. Go to the Swatches Panel and set the color of the rectangle to the green color we’ve been using which is #30ED44. Next, go to the Layers Panel and lower the Opacity of the rectangle to 50%.
Step 64
Next, grab the Artistic Text tool. Take the tool and click on the green rectangle in the top left corner. Type Bali, Indonesia. With the text selected, go to the Font Family. Set the text to Montserrat Bold.
Step 65
After that, grab the Heart Tool from the Tools Panel. Take the tool and draw a heart across from the Bali text on the right side. Press CTRL + Shift to do this. With the heart selected, get rid of the fill color, and select the stroke color. Set the stroke color of the heart to the yellow we’ve been using which is #EDE830. Go to the Stroke Panel, and set the Width of the stroke to 1.5 pt.
Step 66
Now, grab the Rectangle tool. Draw a rectangle that covers the bottom half of the artboard. Press Shift + X to change the fill color to the stroke color. Then, set the color of the rectangle to white.
Step 67
Select the Bali text. Press CTRL + Shift and drag a copy of the text onto the white rectangle.
Step 68
After that, select the text and change the color to black. Type Overview and resize the text making it smaller.
Step 69
With the Overview text still selected, press CTRL + Shift and drag a copy of the text to the middle of the rectangle. Next, press CTRL + J to make another copy of the text. Select the text layer in the middle and type Gallery. Then, select the second duplicated text layer and type Reviews.
Step 70
Grab the Rectangle tool and draw a rectangle beneath the Overview text. Set the color of the rectangle to the orange color. The hex code for it is #ED8630.
Step 71
Now, grab the Star tool from the Tools panel. Press CTRL + Shift and draw a star on the left side below the orange rectangle. Next, press CTRL + Shift and drag a copy of the star next to the original one. Then, press CTRL + J three times to make more duplicates of the star. There should be a total of 5 stars. Select the stars and change the color to the yellow color. Select all the stars. Then, press CTRL + G to group the stars together. Label the group Stars.
Step 72
Grab the Move Tool. Press CTRL + Shift and drag a copy of the Overview text beside the stars. Resize the text to make it slightly smaller. Then, type 5 (4,751 Reviews). Select the 5. Then, go to the Font Style and set it to Bold. After that, select the (4,751 Reviews) text. Go to Font Style and set it to Regular from the Montserrat font family. Grab the Move Tool and resize the text layer.
Step 73
Once you’ve done that, grab the Frame Text Tool from the Tools Panel. Take the tool and draw a text frame box. Next, type what you see on the screen into the text frame.
Step 74
Now, select the text in the text frame. Go to the Font Family and set the text to Roboto Regular. Then, go to the Paragraph Leading in the Context Toolbar and set it to 18 pt.
Step 75
Grab the Rectangle tool. Take the tool and draw a rectangle that covers part of the text. Set the color of the rectangle to white.
Step 76
Next, grab the Gradient tool from the Tools Panel. Draw a gradient from the top of the rectangle to the bottom in the center.
Step 77
After that, select the top color stop. Set the color to white. Now, go to the Swatches Panel and lower the Opacity of the fill to 80%. Then, select the bottom color stop and set it to white.
Step 78
Now, grab the Artistic Text tool. Draw a rectangle beneath the gradient rectangle. Next, go to the Swatches Panel and double click on the fill color. Set the color of the rectangle to the following hex code #F9F9F9.
Step 79
Go to the Context Toolbar and set the Corner to Rounded and the Percentage to 10%.
Step 80
Once you’ve done that, click the fx icon in the Layers Panel. Check the Outer Shadow box and select it. Set the Opacity to 25%, Radius to 8 px, Offset to 1 px. By default, the Blend Mode should be Multiply, the Color is black, and the Angle is set to 315 degrees. Check the Scale with Object box.
Step 81
Next, grab the Artistic Text tool. Click on the rectangle we just created. Type what you see on the screen. Select the $2,000 and set it to bold. Then, select (6days) and set it to regular.
Step 82
With the text layer selected. Press CTRL + Shift and drag a copy of the text above the original. Select the text and set it to regular. Then, type Duration and place the text layer above the 6 days. Go to the Font Size and set it to 10 pt.
Step 83
After that, grab the Rectangle Tool. Draw a rectangle inside of the bigger rectangle. Go to the Swatches Panel and set the rectangle to the blue color we’ve been using. Then, go to the Context Toolbar and set the Corner to Rounded and the Percentage to 25%.
Step 84
Now, grab the Artistic Text tool. Click inside of the rectangle we just created and type Book Now. Select the text and set it to white. Then, bold the text. Set the Font Size to 18 pt.
Step 85
Grab the Arrow Tool from the Tools Panel. Draw an arrow beside the Book Now text. Go to the Context Toolbar and set the Ends to None. Then, set the color of the arrow to the yellow color we’ve been using.
Step 86
Next, select the blue rectangle, the book now text, and the yellow arrow. Press CTRL + G to group these elements together. Label the group Book Now Button. 87. After that, go to the Explore Page artboard. Select the green rectangle and the yellow icons on them. Press CTRL + G to group them together. Then, press CTRL + Shift and drag a copy of this group onto the Booking artboard. Place the group 60 px from the white-ish rectangle we created for the booking info.
Congratulations, this tutorial is complete. You now know how to create a travel app design in Affinity Designer. For more Affinity Designer tutorials, check out this article on creating a retro cassette tape illustration.