Designing a Landing Page Using AIDA Principles

In this tutorial we will learn how to design a landing page from scratch, utilizing AIDA marketing principles in the process. Not only will you learn many design techniques within Adobe Photoshop, you will also learn about the theory behind the decisions made – knowledge that can be applied to your very own designs.

Landing Pages are a fairly common occurrence on the web and they have a specific purpose: encouraging a user to take action. Usually the action they want is for the user to buy a product, sign-up to a service or share the page. Fortunately, we can, through design, optimize a page to increase the chances of this happening.

AIDA is a term that describes a process to go through when selling a product or service. The acronym stands for Attention, Interest, Desire and Action. Although it is a marketing term, we can use design to achieve each one of these steps - and that is exactly what we will be doing in the following tutorial. Ready? Let's get started.

Step 1: Setting Up the Document

Let's begin by setting up our Photoshop document. Start a new file by selecting File > New and set a width of 1000px and a height of 1850px. The resolution should be set to 72, color mode to RGB and background color to White.

Step 2: Adding Guides

We are actually going to be working with a design width of 960px, the extra space on the document will give us a bit of breathing room. 960px has become a bit of a standard width in the last few years, made popular by frameworks such as 960.gs.

We are going to add some guides to our document by selecting View > New Guide. Insert a position of 20px and select ‘Vertical’ for orientation. Repeat this step again but enter 980px for the position.

We should now have a document with guides at 20px inside either end giving us a 960px width to work with.

Step 3: Creating the App Icon

We are going to use an app for the subject matter of the landing page and as such we are going to incorporate an app icon as the logo. This would not be how you would usually go about designing an app icon, but it will serve for the purposes of this tutorial.

We will be positioning our logo and title in the most appropriate part of the page – the top left corner. Go ahead and add a guide 20 pixels below the top of the page (View > New Guide > Horizontal/20px).

Then, grab the Rounded Rectangle Tool (U) and create a shape using the color #3EBECA. Use the drop-down menu at the top of the page to enter the following settings:

This will be the ‘frame’ of our icon and now we need to add some depth to the inside of the shape. Once again use the Rounded Rectangle Tool (U) to create a shape with the following settings. Use the color #148E99.

We also need to apply the following layer styles to increase the effect. Right click this layer in the Layer Panels, select ‘Blending Options’ and use the following settings:

We now need to add an inner section to the icon. Again, we are going to use the Rounded Rectangle Tool (U) to create a shape using color #333333 and the following settings:

We also need to give it an inner stroke using Layer Styles. Apply the following settings:

Now we are just going to add a simple star icon inside this base we have created. Select the Custom Shape Tool (U) and find the solid, five pointed star shape. Use the following settings:

We are also going to add a drop shadow to the star using Layer Styles and the settings below:

Finally, to finish off our app icon, we are going to add a shadow underneath. Create a new layer below all of the others and grab the Ellipse Tool (U) with the color #666666 and create a shallow shape that is just slightly narrower than the width of the icon.

We then need to blur to edges of this shape so go to Filter > Blur > Motion Blur and apply a blur with a Distance of 25px and an Angle of 0.

The shadow now looks better, but it still has some sharp edges. Once again we need to apply a blur, but this time a Gaussian blur. Go to Filter > Blur > Gaussian Blur and use a radius of 3.5px.

And that is our app icon complete. To keep organised, it is best we group all of the individual layers of this icon into a folder – as we will also be using it again later on. We will also need to nudge our icon to the right slightly to compensate for the shadow so it still remains inside our guides.

Step 4: Page Heading

Next, we are going to add the name of our app together with a tagline. The result should look something like the following:

The font used for the ‘Wonderapp’ text is Bebas Neue. Bebas Neue is a free font that you can find here – we will be using this font throughout this design. The following settings and Layer Styles were applied to the text:

Font: Bebas Neue
Size: 50pt
Anti-Aliasing: Smooth
Color: #4E4E4E

For the tagline, a 1px, #E0E0E0 dividing line was used to separate it from the title. 10px spacing was left either side of the line. The following font settings were used for the tagline:

Font: Arial
Size: 18pt
Anti-Aliasing: Smooth
Color: #C7C7C7

That is the header section complete. Group all of these elements into a folder named ‘Header’ and move on to the next step.

Step 5: Inserting the iPhone

Once again, since the subject of this landing page is an iPhone app, we are going to incorporate an image of an iPhone into the design. There are many iPhone assets around the web, but we are going to use this one over at 365PSD. Once you have downloaded the file, open it in Photoshop. The phone we want to use is located under Portrait > Black in the layers panel. Right-click this folder (‘Black’), select ‘Duplicate Group’ and select your original document from the drop-down menu.

At this point you should end up with an absurdly large iPhone filling the screen in the document you have just copied it to. We are going to resize it by selecting Edit > Transform > Scale with the iPhone layer highlighted. At the top of the page we want to enter 30% for both height and width.

The iPhone should now be a reasonable size to work with.

Now that we have the iPhone in our document, we need to make a few changes to it. Firstly, expand the folder set-up to show all of the sub-folders.

We are going to delete the whole ‘4 Body’ folder and the ‘Shadow’ folder because we will not be using them. After doing that, we are going to expand the ‘4S Body’ folder to show all of the component parts. Find the layer ‘Glass’ and click the small black arrow on the right of the layer to reveal the layer effects. We want to hide the effect ‘Outer Glow’ as it is causing a shadow-like effect around the phone. Do this by clicking on the small eye icon next to the effect.

Once we have removed this shadow the edges of our iPhone should be nice and crisp.

Step 6: Adding the Shadow

Now that we have the iPhone set-up just how we want it we are going to customize it slightly.

Firstly, as we have just deleted the shadow folder, we are going to add our own shadow to give the iPhone some added realism – just like we did with the app icon. Add a new layer right at the bottom of the ‘Black’ folder, beneath all of the sub folders. Grab the Ellipse Shape Tool (U) and draw a shallow ellipse shape which is slightly narrower than the width of the iPhone. Use color #666666.

Right-click this ‘Shadow’ layer and select ‘Rasterize Layer’. Next go to Filter > Blur > Motion Blur. Set the Angle at 0 and the Distance to 75 pixels.

Now go to Filter > Blur > Gaussian Blur and set a radius of 5.0 pixels. You should end up with a subtle shadow that is only slightly wider than the iPhone. Position the shadow just underneath the phone so it appears it is standing on a surface.

Step 7: Changing the Screen

We are now going to change the screen of the iPhone to suit our needs. In this case we are just going to display a background with the logo of our fictitious app. To change the screen go to the folder set-up for the phone, in the Layers Panel, and expand ‘Screen’ and double-click the layer ‘Display’ which is a smart-object.

Inside the smart-object you will find a simple folder set-up. We are simply going to use the app icon and title we created earlier together with a pixelated background you can find at Subtle Patterns. Place these elements in a layer above all of the others.

AIDA: A - Attention

The iPhone and its display will help cover the first step in the AIDA principles – attracting attention.

The size of the phone relative to the rest of the page will draw the user’s attention by itself and we can also utilize the display of the phone to help this process. Attractive imagery and the use of a slider in the live version would also draw the user’s eyes.

The iPhone and imagery also serves a purpose of clearly and quickly communicating that the nature of this website revolves around a mobile app.

Step 8: The Feature Area

We are now going to create the main feature area of the page. Create a new layer and select the Rounded-Rectangle Tool (U) with a corner-radius of 3px and a color of #9ECACE. Draw a shape that is the width between the two guides and to a height that is equal to the screen of the iPhone. It should look something like this:

Position the iPhone so that it is 20px inside the right-hand guide (measure from the edge of the shadow). Also position our new feature area (along with the iPhone) so it is 20px below the lower edge of the app icon.

Now that it is positioned correctly, we are now going to add some subtle styling to the feature area. Head over to Subtle Patterns and grab the Diagonal Noise texture. Open it in Photoshop and define it as a pattern (Edit > Define Pattern). Right-click your feature area layer, select 'Blending Options' and add a Pattern Overlay using the new texture and use the following settings:

A drop shadow with the following settings should also be applied:

We are also going to go ahead and add a slight glow behind the iPhone just to give it a bit more emphasis. Select the Gradient Tool (G), with a Radial white to transparent gradient. Add a new layer, above the feature area but below the iPhone and name it ‘Glow’.

Click near the center of the iPhone and drag in a straight line left until you are about an equal distance away from the edge of the phone. You can see this below:

Step 9: Adding Content

Now that we have that set up, we can begin adding some content to our featured area. The featured area will have 20px of padding all around so we will need to compensate for this when adding our text – you can add another guide to help you with this. Select the Type Tool (U) and use the following settings:

Font: Bebas Neue
Size: 48pt
Anti-Aliasing: Sharp
Color: #FFFFFF

Type the heading 'Everything You Ever Wanted in an App' into your featured area and leave 20px of padding to the left and above the text.

We are also going to add a subtle drop-shadow just to give it some added definition. You can use the following settings:

AIDA: A - Attention

Alongside the iPhone, this headline will also attract the attention of the user – after all that is the purpose of a headline. Large text in a prominent position on the page will indicate the importance of this element. The actual text within the headline can then be used to further entice the user.

We will now add some filler text just below the headline. Ordinarily this would be a brief introductory paragraph about the product or service your landing page revolves around. Since this is a fictitious app, we are simply going to include some Lorem Ipsum using the following settings:

Font: Arial
Size: 16pt
Anti-Aliasing: Sharp
Color: #FFFFFF

Select the Type Tool (T) and click and drag to create a selection that is the same width of the headline and simply insert some text such as below.

We are going to position this text 30px below the headline and give it a subtle drop shadow to sharpen it up. Use the settings below:

Step 10: Call to Action

Now we are going to add some call to action buttons below our text. Once again we are going to use our Rounded-Rectangle Tool (U) with a border-radius of 3px and a color of #45858B. With the tool selected, go to the toolbar above the canvas and use the following settings:

Make sure you check ‘Snap to Pixels’ to ensure our button has pixel-perfect edges. With these settings entered, simply click on the canvas to create a button this size. Position this button 30px below the paragraph of text.

OK, now we are going to add a number of Layer Styles to our button element. You can use the following settings:

With that, we need to type some text inside the button. Type the text ‘Learn More’ and use the following settings:

Font: Arial
Size: 16pt
Weight: Bold
Anti-Aliasing: Smooth
Color: #00363B

We are also going add a slight highlight to the bottom of the text using a drop shadow. Use the following settings:

Now to create a second button beside the first. This button will invite the user to download the app right away. We will use the same process as before to create the shape for the button. Use the Rounded-Rectangle Tool (U) with a 3px border-radius and a color of #2D929A to create a button that is 171px by 46px. Place this button 20px to the right of the first button.

We are going to re-use the same Layer Styles from our previous button. Right-click on the previous button shape in the layers panel and select ‘Copy Layer Style’.

Right-click on the layer of our second button and click ‘Paste Layer Style’. This should give us a button that looks pretty similar.

Now to add some text and a phone icon to the button. We are using the phone icon from Gentleface available here. Once you have downloaded the icon, place it into your document using File > Place. Place the icon inside the second button 10px from the left edge and add the following Layer Styles:

Once we have done that, we are now going to add some text to the button. Select the Type Tool (T) and enter ‘Download Now’ using the following settings:

Font: Arial
Size: 16pt
Weight: Bold
Anti-Aliasing: Smooth
Color: #084247

Below that, enter the text ‘from the App Store’ using the same settings, except use font size 12.5pt. Finally, copy the layer styles from the small phone icon we used earlier and apply them to both lines of text. Your button should now look like this:

AIDA: A - Action

The ultimate purpose of a landing page is generally to get a user to take action, whether it is to buy, download or subscribe. Buttons are a great way to present these call-to-action elements.

In this case, we are presenting the user with options. Firstly, if the user is interested, we invite him to learn more about our product. Further information and application of the AIDA principles may be what is needed to convert this user into a buyer.

On the other hand, our user may be willing to take immediate action and we need to provide him an easy and direct method to do so early on our page. This is our primary call-to-action and therefore this button is larger, brighter and more detailed than the first.

Step 11: Price Tag

Finally, to round off our feature area, we are going to add a simple area to display the price of our app.

Once again, grab the Rounded Rectangle Tool (U) with a 3px border-radius and a color of #49A8AE. Create a shape that is 75px by 48px and place it level with the buttons next to the iPhone. We want the right hand edges of this shape to be hidden behind the phone.

We have also given this shape a 1px, #3C9398 inside stroke using Layer Styles.

Add the price using the Type Tool (T) with the following settings:

Font: Bebas Neue
Size: 25pt
Anti-Aliasing: Sharp
Color: #FFFFFF

Enter the text “$3.99” and align it in the center of the shape. We are also going to add a slight drop-shadow to the text.

This pretty much wraps up our feature area. Don’t forget to keep naming and grouping your layers to keep organised.

Step 12: Getting Social

We are now going to add a small section for some social media icons. Firstly, we will be using the beautiful social media icons from Rogie King at Komodo Media, so go over and grab them now.

Before we start using the icons, we just need to add a bit of text. Type ‘Connect With Us’ 30px below the bottom edge of the feature area using the following settings:

Font: Bebas Neue
Size: 20pt
Anti-Aliasing: Sharp
Color: #4E4E4E

Once we have done that we can now add our icons. Go to File > Place and select the 32px Facebook icon and place it 30px to the right of our text. Add the text ‘Facebook’ 10px to the right of the icon using the following settings:

Font: Arial
Size: 12pt
Weight: Bold
Anti-Aliasing: Smooth
Color: #4E4E4E

Repeat the process with Twitter, Google Plus and RSS Feed Icons each time placing them 30px to the right of the previous text.

Step 13: Some More Big Text

OK, so we are going to continue to move down the page and keep applying AIDA principles. We are going to attract the user’s attention once again with some big text.

Add a new guide right at the bottom of the iPhone, underneath the shadow. You can do this manually by clicking the ruler area at the top of your document and dragging down to where you want to place it.

We are going to enter the text ‘See What WonderApp Can Do For You’ right underneath this line using the following settings:

Font: Bebas Neue
Size: 48pt
Anti-Aliasing: Sharp
Color: #4E4E4E - Word 'WonderApp' in #93C4C9

We are then going to nudge it down by 50px to provide a decent amount of white space between each section. Center the text horizontally and add another guide line above and below the text.

Step 14: Adding Columns

The document needs to be split into three equal-sized columns, so we are going to add a few more vertical guides. We are working with a 960px width so each column will be 300px with a 30px margin either side of the central column. Taking into account the 20px padding we already have at the edges of the document, we want guides positioned at 320px, 350px, 650px and 680px.

Each of these columns will contain a heading and a small paragraph. Add another horizontal guide 50px below the bottom of our headline text to keep consistent spacing.

We are going to re-use the small app icon surround we used in the heading. Right-click the folder containing your app icon and select ‘Duplicate Folder’. Move the duplicated app icon further down the page to the top-left of the first column. Feel free to delete the small star shape we used for the icon.

We need to make the app icon slightly smaller so click on the entire folder layer and go to Edit > Transform > Scale and set the height and width to 75%.

We are now going to insert another little icon into our surround. We will be using the Stopwatch icon from Scott Lewis at The Noun Project, which you can find here. Download and extract the .ZIP file. You will need to open the .SVG file and re-save the image in .PNG format so we can use it within Photoshop. Once you have done that, place the .PNG into the document using File > Place.

We are now going to re-size the icon to 25% and give it a color overlay (Layer > Layer Style > Color Overlay) using the color #F1F1F1. You should now have something like below.

Enter the text ‘Save Time’ for our heading 10px to the right of the icon using the following settings:

Font: Bebas Neue
Size: 32pt
Anti-Aliasing: Sharp
Color: #4E4E4E

Adding in a small amount of filler text using Lorem Ipsum 20px below the icon will complete this column. Use the following settings for your text:

Font: Arial
Size: 14pt
Anti-Aliasing: Sharp
Color: #909090

This should provide us with something like the following:

We are going to repeat a similar process for the next two columns although with some minor changes. To speed the process up, you can organise everything in your first column into a single folder and duplicate this folder for the other columns.

Once you have duplicated your first column, position the elements correctly into the second column. We are going to change ‘Save Time’ to ‘Save Money’ and replace the stopwatch icon with a dollar symbol. You can use the following settings for the dollar symbol:

Font: Arial
Size: 24pt
Weight: Bold
Anti-Aliasing: Sharp
Color: #F1F1F1

We are also going to change up the Lorem Ipsum text as well, just for a little variation. It should look something like below:

Repeat the process once again of duplicating your group and position the elements into the third column. This time the heading text will change to ‘Save Energy’ and we are going to use another icon from The Noun Project, this time a battery icon available here. Download the icon and use the same process as before to extract it and place it into your document.

We are going to rotate the icon 90 degrees anti-clockwise so it is standing up (Edit > Transform > Rotate), reduce the size to 25% and give it the same color overlay as the first icon. We are also going to change up the filler text.

With that, our benefits section is pretty much complete. Remember to keep your folders named and organised as best as possible.

AIDA: I - Interest

You will see this type of section a lot on landing pages as it can be an effective tool in helping to convert the visitor. Rather than selfishly boast about our product and the features it has, which may mean little to the customer (especially when it comes to technology) we are focusing on the benefits to the customer and how it will positively impact their lives.

To communicate the benefits, we have used bold, direct headings combined with icons to further highlight the points. We do not want to overwhelm the visitor so we have limited it to three key benefits along with a short, snappy explanation for each.

Step 15: Big Name Clients

We are going to move onto a new section, so once again place a guideline directly underneath the text and a second 50px below to keep consistent spacing.

In this section, we will be displaying the logos of clients that use our product.

Start off by using the Rounded-Rectangle tool to draw a shape that is the full width of our available space (960px) and 100px in height. Use a 3px border-radius and a color of #E2E2E2.

We are going to enter some text on the left-hand side of this shape. Use the Type Tool (T) to enter the words ‘Proudly Used By’ using the following settings:

Font: Bebas Neue
Size: 20pt
Anti-Aliasing: Sharp
Color: #4E4E4E

Now to enter some of our client’s logos. For the purposes of this tutorial, we are simply going to use the logos of some of the Envato Marketplaces; which you can download from here. Once you have downloaded the file, open the .PSD with Photoshop.

We are going to use the full-sized, light version of the logo. For example the Graphicriver logo we are using is named ‘graphicriver-light’ within the Layers Panel. Duplicate the folder over to your landing page document.

Once you have done that, convert the ‘graphicriver-light’ folder to a Smart-Object by right-clicking the folder and selecting ‘Convert to Smart Object’. We then want to reduce the size of the layer to 85% by using Edit > Transform > Scale. Place the logo 20px to the right of our text ‘Proudly Used By’.

We are going to repeat this process with the Themeforest, Photodune and Codecanyon logos, each time reducing them to 85% of their original size and placing them 20px to the right of the previous logo.

AIDA: D - Desire:

The third step in the AIDA principle is Desire; getting the user to want the product we are offering. In this case we are utilizing social proof in order to create this desire. We are proudly displaying that large, successful companies use our product and therefore implying that the product must be good if they are using it.

You will often see this in many forms, such as a design company listing big-name clients they have worked with or awards they have won. It can be an effective tool.

Step 16: Testimonials

OK, we are going to move on to a new section, so place a guide directly underneath the ‘client’ area and a second, as usual, 50px further down the page. Create a new folder and name it ‘Testimonials’ as we are going to add three testimonials to the third column of the page.

Grab the Rounded Rectangle Tool (U) and create a shape in the third column that is 300px wide by 100px high. Use a 3px border-radius and a color of #E2E2E2.

To indicate that this is a testimonial and that we are quoting someone directly, we are going to add some quotation marks to the shape. To do this, grab the Type Tool (T) and enter a single quotation mark 10px inside the top-left corner of the shape. Use the following settings:

Font: Arial
Size: 72pt
Anti-Aliasing: Smooth
Color: #C1C1C1

We are now going to add a manufactured testimonial for the purposes of this tutorial. You can choose to write whatever you wish, or you can use the same text as below using the following settings:

Font: Arial
Size: 14pt
Style: Italic
Anti-Aliasing: Sharp
Color: #4E4E4E

Time to add a little section to show who exactly the testimonial was from, including a small thumbnail depicting the person. To begin with, draw a 50x50px shape with the Rounded Rectangle Tool (U) using a 3px border-radius. Position this shape 10px below the bottom of the testimonial box.

This shape will be a mask for our image. For the purposes of this tutorial I’ve used this image from sxc.hu but feel free to use one of your own choosing. Place the image into your document and shrink it to a reasonable size so the person will be recognizable within the 50x50px thumbnail.

To create the mask, move your image over the top of the thumbnail shape. Position the image so the person’s face will be clearly visible.

Once you have the image positioned correctly, click the ‘Create Layer Mask’ icon underneath the Layers Panel.

You should now be left with just the part of the image that was within the thumbnail shape area. We now just need to add a name and their business separated by a line. Space all of these elements 10px apart from each other and use the settings below.

Font: Bebas Neue
Size: 20pt
Anti-Aliasing: Sharp
Color: #4E4E4E

Line: 1x25px, #4E4E4E

Just as we did with the three columns, we are going to speed the process up by grouping all of the elements of this testimonial into a folder and duplicating the folder to give us a second, identical testimonial. Go ahead and do this and place the duplicate 30px below the first.

We are going to change everything up slightly, so you can go ahead and enter your own details or use the same ones as below. The image used for the avatar can be found here.

Once again, repeat the process so we have three testimonials. The image used below can be found here.

AIDA: D - Desire

Just as with the client list, the aim of the testimonials is to increase the desire for our product using social proof. Users are more likely to trust the word of actual people who have used the product; especially if they are well known and respected. Think of the many celebrity endorsements you see on television.

As we are moving down the page we are also progressing through the AIDA principles. We grabbed the user’s attention using the feature area at the top of the page (also providing an instant-purchase option), piqued their interest with a list of benefits and increased the desire for the product using social proof. Time we move on to the next section.

Step 17: Adding a Video Element

OK, we are now going to create another section that will almost act as a second ‘feature’ area that will contain a few different elements.

To get started, once again grab the Rounded Rectangle Tool (U) and create a shape that is 630x560px using a 3px border-radius and a color of #9ECACE. Then copy the Layer Styles from the background of our first feature area at the top of the page and apply it to the one we have just created.

The first element we are going to add to this section will be a placeholder for a video. This can obviously be replaced by an actual embedded video player if the site was live. Use the Rectangle Tool (U) to create a shape is 400x200px using the color #2F2F2F. Position the player 20px inside the top edge of this section and center it horizontally.

OK, we are just going to add some styling to this video element. Grab the Pen Tool (P) and use a pure white color (#FFFFFF) to create a ‘gloss effect’ triangle over the top-left side of the placeholder.

Lower of the opacity of this layer all the way down to just 3% so the end result is pretty subtle.

We are also going to add a mock play button on top of the player. Use the Rounded Rectangle Tool (U) with a 3px border-radius to create a shape that is 75x75px. Use color #000000 at 50% Opacity and place this shape in the center of the placeholder.

Now we are going to use the Polygon Tool (U) to create our play symbol. Select the tool and use the Geometry Options panel to set the sides to 3 and the radius to 20px.

Add a Gradient Overlay to your triangle shape. Under Layer Styles, use the following settings:

Finally, to add a bit more emphasis to the video element, we are going to add a glow behind it, just as we did with the iPhone. Select the Gradient Tool (G) and use a radial gradient that transitions from pure white (#FFFFFF) to transparent. Click the center of the video element and drag right to the edge of the shape.

AIDA: A - Attention

We need to grab the user’s attention once again, and using video is one of the best ways to do it. Video will allow us to show of the best features of the product using movement or animation combined with sound; two things sure to attract attention.

Step 18: The Features

Since we have already explained some of the benefits of the product, we are now going to display some noteworthy features below our video placeholder. To help us accomplish this, we are going to use some nice little icons made by Jory Raphael available here. These icons are a small sample of his excellent Symbolicons Block set, found here.

Once you have downloaded the sample icons, open the file with Photoshop. Duplicate the icon named ‘chat’ into your landing page document. Place the icon 50px below the bottom of the video placeholder and 20px from the left of the container element. Hide all layer styles currently applied to the icon (this will apply to all of the icons we use).

10px to the right of the icon, type the words ‘Push Notifications’ using the following settings:

Font: Arial
Size: 20pt
Anti-Aliasing: Sharp
Color: #FFFFFF

Also apply the following drop shadow using Layer Styles:

Underneath our heading ‘Push Notifications’ we are going to provide a description of the feature in a couple of lines of text. You can choose to include your own text or use the same as below. 10px below the icon we have used the following settings for the text:

Font: Arial
Size: 14pt
Anti-Aliasing: Sharp
Color: #414141

To keep organised and speed things up we are once again going to group these three individual elements into a folder named ‘Feature 1’ and we are going to duplicate it. Place the duplicated elements 20px below the first.

We are going to change the ‘chat’ icon to the ‘mail’ icon from the same set. Also change the heading to ‘Sync with Email’ and the description text to match.

Repeat the process again, but this time position the duplicated elements in the second column to the right of the first. Use the ‘search’ icon and the heading ‘Attention to Detail’.

Finally, duplicate the elements once again and place them 20px below the previous set. Replace the search icon with the ‘account’ icon and use the heading ‘Custom Settings’ and change the text accordingly.

AIDA: I - Interest

Although, as mentioned, AIDA promotes communicating benefits rather than features, we already have them covered. Some users may be interested in the features of the app, especially to how they compare to similar products. Try to keep features short and jargon-free as much as possible.

Step 19: The Second Call to Action

To complete this section, we are going to add a second call-to-action element below our list of features.

To begin with, we are going to recycle the download button we used earlier at the top of the page. Find the button folder, duplicate it and place it 30px below the bottom row of features to the right-hand side.

20px to the left of the button, we are going to use the Type Tool (T) and enter the words ‘Interested? Of course you are! Get it now.’ Use the following settings:

Font: Arial
Size: 20pt
Anti-Aliasing: Sharp
Color: #FFFFFF

We are also going to use the same drop-shadow we used on our feature headings above, so go ahead and copy the Layer Style and apply it the text we have just entered.

Once you have done that, center both of the elements in relation to the container element.

AIDA: A - Action

This is our second and final call-to-action element and it provides the user with a second opportunity to download the app after all of the AIDA principles have been executed.

Once again we are making it easier for the user to download our product by providing a second button. Presenting multiple call-to-action elements is important but we must be careful to not make the user feel pressured. As always, balance and moderation is the key.

Step 20: The Footer

Finally, we are going to finish off the page with a conventional footer area. Within the footer we are going to include some typical elements such as a mailing list sign–up form and a Twitter Feed.

Start off by using the Rectangle Tool (U) to produce a shape that is 1000px wide by 220px high. Use the color #9ECACE and place the shape 100px below the bottom of the previous element. You should be left with a 10px gap at the bottom of the document.

Like we did with the benefits, we are going to split the footer up into three distinct columns with the help of the guides we have already set up. We will start with just a little section explaining a bit about the app.

To begin with, we are going to duplicate both our app icon and title that we used in the header. Duplicate both elements and position them in the top-left of the first column. Nudge both elements down so they are 20px below the top edge.

We need to add a copyright statement below the ‘WonderApp’ words. Select the ‘WonderApp’ text with the Type Tool (T) and reduce the size to 48px. We are then going to nudge the top of the text to be level with the top of the icon.

Font: Arial
Size: 12pt
Style: Italic
Anti-Aliasing: Sharp
Color: #FFFFFF

20px beneath this element, we are going add a short piece of text providing information about the app. The following sentence was used:

‘WonderApp is an amazing app available for the iPhone, iPad and iPod Touch.’

The following font settings were used:

Font: Arial
Size: 14pt
Anti-Aliasing: Sharp
Color: #4E4E4E

Step 21: Newsletter Sign-Up

In the next column, we are going to invite the user to subscribe to our mailing list. Appropriately, we are going to begin with the words ‘Subscribe to our Mailing List’ using the following settings:

Font: Arial
Size: 18pt
Anti-Aliasing: Sharp
Color: #FFFFFF

We are also going to apply the same drop shadow we have previously used on our white heading text, such as that found in the feature section. Copy that Layer Style and apply it to this text.

Below this heading we are going to add a friendly little bit of text that says the following:

‘Get free news and updates about the app delivered straight to your inbox.’

We are going to use the following settings for the text:

Font: Arial
Size: 14pt
Anti-Aliasing: Sharp
Color: #4E4E4E

OK, so we are going to need a simple form to allow the user to enter their email. Grab the Rectangle Tool (U) and create a shape that is 225x35px and 20px below the previous element. Use the color white (#FFFFFF) and give it the following Stroke settings using Layer Styles:

Finally, enter some placeholder text such as ‘Email Address’ inside the box using the following settings.

Font: Arial
Size: 12pt
Anti-Aliasing: Sharp
Color: #4E4E4E

So we now need a button in order for the user to submit the form. This time grab the Rounded Rectangle Tool (U) and create a shape that is 100x35px. Use the color #45858B, a 3px border-radius and position the shape 10px below the text box.

We are going to re-use the same Layer Styles we applied to the ‘Learn More’ button in the feature area. Go ahead and copy the layer styles from that button and apply them to this one. Once you have done that, use the Type Tool (T) to enter the text ‘Subscribe’, in the center of the button, using the following settings:

Font: Arial
Size: 12pt
Anti-Aliasing: Sharp
Color: #0B474D

Step 22: Twitter Feed

Time to move on to our final column, which will be a Twitter feed, a feature you can find on many websites. Let’s start by using the Type Tool (T) to enter the heading ‘Latest WonderApp Tweets’. Use the following settings:

Font: Arial
Size: 18pt
Anti-Aliasing: Sharp
Color: #FFFFFF

Also, apply the same drop-shadow we used on the heading in the previous column.

Now we just need to enter a couple of fictitious tweets. Feel free to add your own tweets or use the same as below. The following settings were used for the text:

Font: Arial
Size: 12pt
Weight: Regular
Anti-Aliasing: Sharp
Color: #4E4E4E

Links:

Weight: Bold
Color: #FFFFFF
Decoration: Underlined

Timestamp:

Weight: Bold
Color: #4E4E4E

Both tweets are separated by a 20px gap. A simple text link was also added 30px below inviting the user to follow us.

Step 23: Finishing Touch

To finish off the design we are going to change the background color of the document to the very subtle off-white color #F5F5F5. That completes our landing page design!

Conclusion

I hope that you enjoyed the tutorial and you are able to take what you have learned and not only use it in your next projects, but also expand and improve on it. Thanks for reading!