Design an App Landing Page in Photoshop

In this tutorial I will walk you through the design process of a simple and conversion-oriented app landing page. We’ll use the Tuts+ Android app for the demo, emphasizing its features and benefits, and employing calls to action throughout.

Essentials of High Conversion

When designing landing pages there are some things you need to get right to enjoy high conversion rates.

According to growth hacker Neil Patel,in order to have a competition-crushing landing pageyou need:

• A killer headline
• Persuasive subheadlines
• Pictures
• Explanation
• Value proposition or benefits
• Logical flow
  
• Trustworthy testimonials
  
• Powerful call to action
  

We’re going to implement all of the above elements to make our landing page as effective as possible.

AIDA Model

I highly recommend you take a look atEmploying AIDA Principles in Web Design by Shaun Cronin.AIDA stands for Attention, Interest, Desire and Action; and these principles can be applied to different situations which involve selling products or services.

Research shows that people don’t mind scrolling, so once you’ve created initial interest at the top of the page you shouldn't worry about making your landing page longer. This is necessary to tell a great story and add persuasive elements.

A/B Testing

Effective landing pages cannot simply be designed once and perform well. You have to keep testing with various combinations of copy, colors, call to action and other elements to achieve the best results.

For more information on this check outA Web Designer’s Introduction to A/B Testing by Siddharth Deswan.

Tutorial Assets

In order to follow along you will need some (freely available) assets:

• Photosfrom Unsplash
• PT Sansfont from Font Squirrel
• Usericon from Iconfinder
• Marker icon from Iconfinder
• Clock icon from Iconfinder
• Samsung Galaxy S5 Mockup by Martin Adamko

Get the Document Ready

Step 1

Begin by creating a new Photoshop document (File > New…) using the settings shown below. You’re free to use a canvas of whatever dimensions you prefer.

Step 2

Let’s set some guides so our layout has enough space and looks balanced. Setting some guidelines will ensure neatness and will help to define our website’s width for the purposes of this design. Go to View > New Guide… and set some guidelines. I usually choose 1000px as a starting point and add some guidelines from the corners so it has space to breathe.

Note: Guidelines used for this tutorial: vertical at 100px, 600px and 1100px.

Tip:You could also use theGuideGuidePhotoshop plugin to make this process even quicker.

Designing the Header Area

The header or area “above the fold” plays a very important role in engaging with users and ensuring that visitors stay on the website.

Our app landing page’s main function is to convince visitors to download the app. For that reason we’ll focus on the benefits of trying out the app and make it easy to download.

Step 1

Let’s first create a group called “Header” by clickingLayer > New > Group...or hitting the little icon at the bottom of the layers panel. After that grab a Horizontal Type Tool (T), choose PT Sans (Bold) 18px size font, set color to black #000000 and enter the name of your app to serve as a logo, place it on the top left corner right next to the first vertical guideline. Give it some space above so it doesn’t look cramped.

Step 2

Let’s create a call to action button that we’re going to reuse throughout our design to make sure that visitors take action. Create a new group called “CTA btn” and pick theRounded Rectangle Tool (U), set Radius to 2px, change the foreground color to lime green #17e594 and draw a 206x38px sized rectangle shape.

Now click the right mouse button on the layer, select Blending Options... and check theStroke option. After that apply a darker green #09ba74.

Pick theHorizontal Type Tool (T) again and enter the copy for our button. I’ve used PT Sans (Bold) 12px and the color white #FFFFFF.

Step 3

Now pick theRectangle Tool (T) and draw a 1200x600px (any color) rectangle shape and place it right below our minimal top navigation. I’ve left a25px gap between the logo and the shape as I did for the logo above so it’s consistent.

Now grab a Toolkit photo from Unsplash and place it above the rectangle shape layer. After that hold down theAlt key and mouse over the image layer until you see a little arrow pointing down, then release the mouse to create a Clipping Mask so the image is only visible in the area of the rectangle.

HitCMD+Tto resize the photo, making sure you hold down theShiftkey so you resize it proportionally.

Step 4

Let’s add a filter layer of gray so we make our background ready for copy and the app screenshot.

Change the foreground color to dark gray #222325 and create a new layer, then place it above the photo layer and once again create a Clipping Mask. After thathit Alt+Backspace to fill the layer with gray. Finally, reduce the layer's Opacity to 80%.

Step 5

Grab theHorizontal Type Tool (T) again, change the color to white #FFFFFF and using PT Sans (Bold) 48px size enter themain message. Make sure you give it a lot of space above.

Step 6

Now reduce the font size to 21px,select Normal font weight, enter a more descriptive message and place it below the main message. To make lines look balanced and easy to read increase the line height to at least 30px. Place the description below the main headline, in my case I moved40px down.

Step 7

Let’s repeat our call to action (CTA) button so it’s clear for the visitor what to do next after reading the copy. Find the “CTA btn” group and duplicate it by hitting CMD+J, after that place it below the secondary message.

Step 8

We’re done with the copy and main call to action, so let’s put an actual app preview to show how the app looks before people decide to download it.

Download the free Samsung Galaxy S5 mockupby Martin Adamko and place it into your document. After that, hold down theCMD key, click on all the layers that belong to that mockup and right-click to choose Convert to Smart Object. Use CMD+T to resize it and move to the right from our main copy and description.

After that, place your app screen on the smartphone mockup by hitting on the smart object layer and saving it. I’ve used a screenshot of a new Tuts+ Courses Android app.

Designing the Benefits Area

We’re done with the header. Minimize the group and create another one called “Benefits”.

Step 1

After that, pick theHorizontal Type Tool (T) again, change the color to the same dark gray #222325 we used for the filter (make your design consistent and cohesive instead of bringing more colors)and usingPT Sans (Bold) 30px enter a strong statement and place it below the header area, leaving plenty of space above it.

Step 2

Now we have a chance to convince our visitors why our app is worth downloading. Think of benefits over features so people can visualize themselves using it. Change the color to a subtle gray blue #6a7588 and enter a couple of lines explaining why people should use your app. I’ve gone forPT Sans (Regular) 21px with the line height set to 32px, the same setting as used for the secondary message in the header area.

Pay attention to the spacing between text blocks, leave enough space to give that light feeling to your design.

Step 3

Once again, let’s repeat the call to action (CTA) button so visitors who weren’t convinced earlier can take action rightafter reading your benefits copy. Duplicate the “CTA btn” group by hitting CMD+J and place it below the benefits copy. Move it into the “Benefits” group to make your document more organized.

Designing the Features Area

We’re done with the benefits area, so minimize the group and create a new one called “Features”. Here we will highlight some of the appfeaturesso visitors who want to know more and are already interested can find out more about the app.

Step 1

Change the foreground color to light gray #fbfbfb, we’ll use a different background color for the Features section to separate it from the rest. After that pick theRectangle Tool (U) and draw a 1200x700px sized shape that will serve as a background. Make sure to give the section space above.

Step 2

To set apart the Features area even more let’s put 1px horizontal lines between the backgrounds. Pick theLine Tool (U), set theWeight to 1px and change the color to a darker gray #eeeeee.

Tip: hold down Shift key to draw a perfectly horizontal line.

Step 3

Open up the “Benefits” group and find the headline layer, hit CMD+J to duplicate it and move into the “Features” group. Edit it to fit your needs and place it inside the previously created gray background.

Step 4

We’ll create three blocks of features with an icon, headline and a short description. Create a new group and call it “Feature 1” or something more descriptive.Head over to Iconfinder and download a48x48 pxuser icon. Click the right mouse button on its layer name and apply thefollowing options.

You may notice that we’re actually mimicking the button style so everything is consistent.

Step 5

Once again, duplicate the headline layer, place it inside the “Feature 1” group and using theHorizontal Type Tool (T) reduceits font size to 16px and line-height to 22px.

Step 6

Using the same Horizontal TypeTool (T)write down three short lines explaining your feature. Make sure to change the type color to the previously used gray blue #6a7588. Place below the icon and headline.

Step 7

Now minimize the group and duplicate it twice by hitting CMD+J. After that customize the duplicated groups tofit your app. For this tutorial I’ve used marker and clock icons from Iconfinder. Make sure to leave enough space between the blocks so it looks balanced.

Step 8

The more you show how the actual product looks the better, we’ll use a different perspective of our smartphone mockup. I’ve flipped the previously used Samsung Galaxy S5 mockup and replaced its screenshot found on Google Play. Right-click on the mockup layer at the top and select New Smart Object via Copy to create an independent copy.

To customize the smartphone mockup, click twice on the layer thumbnail and place your app screen there.

Designing the Testimonials Area

We’ll add some social credibility for our app by showing some testimonials from app users.

Step 1

Minimize all the groups and create a new one called “Testimonials”.Enter a section headline as we did before and place it below the “Features” group background leaving a consistent amount of space.

Step 2

Now open up the “Features” group, duplicate one of them and move it inside the “Testimonials” group. We’ll reuse the group for our testimonials. Edit the copy, changing the headline to a person’s name and description to the testimonial copy.

Remove the icon and, using theEllipse Tool (U),draw a circle shape. After that place the person’s profile photo above the circle shape layer and create a Clipping Mask. I’ve used a face from User Inter Faces.

Step 3

Finally, duplicate the freshly made testimonial group and customize it with different names, testimonials and profile photos.

Designing the Footer Area

Minimise the “Testimonials” group and create another one called “Footer”. We'll put a final call to action (CTA) button here and some links to inner website pages as most people scroll down to look for the site’s architecture.

Step 1

Head over to the “Header” group and, holding down theShift key, choose the rectangle shape and gray filter layers. After that hit CMD+J to duplicate them and move them into your new “Footer” group. Then place a photo of your choice between the rectangle shape and gray filter layers creating a Clipping Mask.

Step 2

Add another headline encouraging people to take action and download your app. Make it white #FFFFFF so it’s highly visible on the darker background. After that, duplicate the call to action (CTA) button and place it below the headline.

Step 3

Pick Horizontal Type Tool (T) again and enter some links of your website. I’ve used white #FFFFFF PT Sans (Regular) 16pxand a line-height of 29px.

Step 4

Duplicate your text layer and customize it to fit your app. After that, place acopyrightline at the very bottom of your footer leaving plenty ofspace above and below it.

Congratulations!

That’s it! We’re done with the theme design, now review your document layers, delete the unnecessary ones and hand it over to your developer, or, even better, code it yourself!