How 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.