In this tutorial I’ll guide you through the process of designing an elegant landing page for a fictional “gratitude log” service. We’ll start off totally from scratch, drafting the layout with Adobe Photoshop in no time. We’ll be using some basic and intermediate techniques to create this design with conversion in mind. Let’s get it started!
Tutorial Assets
In order to follow along you will need some (freely available) assets:
- Chillin’ in the sun photo from Skitterphoto
- PT Serif font from Font Squirrel
- Playfair Dislay font from Font Squirrel
- Source Sans Pro font from Font Squirrel
- User avatars from User Inter Faces
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–the web is not fixed width, after all.
Step 2
Let’s set some guides so our layout has enough space and looks balanced. I don’t always use a predefined grid, but setting some guidelines will ensure neatness and will help to define our website’s width. Go to View > New Guide… and set some guidelines. I usually choose 1000px as a website width and add some guidelines from the corners so it has space to breathe.
Note: Guidelines used for this tutorial: vertical at 200px, 500px, 700px, 900px and 1200px.
Tip: You could also use the GuideGuide Photoshop plugin to make this process even quicker.
Step 3
Sticking to Photoshop etiquette we’ll keep things organized and therefore easy to navigate and edit. Let’s create three layer groups named Header, Content and Footer. To create groups go to Layer > New > Group… and give each one a title as mentioned. For quick creation of a group just click the folder icon.
Designing the Header Area
The header or area “above the fold” (wherever that is these days) plays a very important role in engaging with users and ensuring that visitors stay on the website. For this landing page layout I will use a shot of two people sitting on a bench; one of them holding hands up in the air portraying positive emotions and happiness.
Step 1
Let’s first create the background of the blog. Inside the “Header” group draw a black #000000 colored rectangle shape using the Rectangle Tool (U). In my case I drew a 1400x728px sized rectangle and placed it at the top of the document.
Now download the Chillin’ in the sun photo, drag it to the Photoshop document and place it above the rectangle layer. Rename the image layer to something you’ll recognize later, in my case I’ve used IMG. After that hold down the Alt key and mouse over the photo layer until you see a little arrow pointing down, then release it. You have just created a Clipping Mask. Finally reduce the IMG layer Opacity to 70% so the text we’ll put on top will be more readable.
Now hit CMD+T and resize the photo to fit your needs.
Tip: hold down Shift key to transform proportionally.
Step 2
Now let’s create a global navigation for our landing page so people can navigate through the website.
Create a new group called “Navigation”, place it inside the “Header” group . After that pick the Rectangle Tool (U) and draw a white rectangle shape between the first and the last vertical guidelines. Make it around 60px in height so the navigation items will have some space to breathe and look clean. Finally move it 30px down from the top so we can have this floating effect that nicely stays on our image.
Step 3
Now let’s place a logo and some links to make our navigation bar look like something people can use. For the logo I’ve simply written “Grttd” using Playfair Display (Bold Italic) font 26px size and color dark grey #0e0e0e.
For the navigation links I’ve used Source Sans Pro 14px with extended spacing between the letters. For the main call to action “Sign Up” I’ve used Black and the color green #96c218. We’re done with the “Navigation”, so minimize it by clicking on the little triangle icon next to the group name.
Step 4
Let’s write an inspiring message accompanying the image and overall idea of the website. I’ll use a huge bold typeface with a sub-headline that explains the concept in more detail.
As we have a pretty dark background for our upper area it is wise to use pale text in order to create high contrast and ensure readability. I’ve used white #FFFFFF Source Sans Pro (Black) 80px with a line-height of 86px. Place it about 120px below the navigation bar so the message has enough space around to be perceived as important.
Now let’s place the sub-headline that will clarify the whole concept and answer some questions visitors may have. To create a nice typographic combination let’s mix the main sans serif headline with the elegant serif font we used previously for the logo.
For more inspiring font combinations check out: Google Web Fonts Typographic Project and A Beginner’s Guide to Pairing Fonts.
For this tutorial I’ve used white #FFFFFF 26px Playfair Display (Italic) font and placed it 40px below the main headline.
Step 5
Let’s add something more engaging so the visitor can see the benefit of staying on the website. A gratitude log is based on recording the things you’re grateful for, so some social proof would be a good idea, showing people someone actually using it and showing something more desirable like a streak.
Create a new group called “Example”, then pick the Ellipse Tool (U) and, holding down Shift, draw a circle. In my case it’s 60x60px. After that put someone’s face on the top of the circle layer and, holding down the Alt key, mouse over the layer until you see a little arrow pointing down, then release it to create a Clipping Mask. Now you can resize the image if needed by clicking CMD+T.
For this tutorial I am using a random face from User Inter Faces.
Pro tip: hold down Shift key to draw/resize proportional shapes.
Now we need to put an indicator of consecutive logs. Let’s create another circle shape, this time smaller, and place a number inside it. Simple, but understandable, and does the job. For the circle color I’ve reused the previously used green #96c218. In my case it’s size is 30x30px and the text inside is white #FFFFFF Source Sans Pro (Bold) 14px.
Finally let’s give our person a name and clarify what this number stands for. Pick the Horizontal Type Tool (T) and enter a name and streak length. In my case I’ve used PT Serif (Bold Italic) 16px for the name and Source Sans Pro (Regular) 13px for the streak. Make sure to use a line height large enough so the elements have space to breathe.
Great, one last thing before moving to the content area. We need a strong Call To Action (CTA) so the user can do something after having seen the visuals and read the headlines. Create a new group called “CTA”, set the foreground color to white #FFFFFF and grab the Rectangle Tool (T). After that draw a rectangle shape, in my case its size is 280x60px. Notice the consistency in height previously used for the navigation bar.
After that, enter some persuasive copy for the button. I’ve used “START LIVING →”, the color being as previously used on the navigation bar dark grey #0e0e0e, font Source Sans Pro (Semibold) 16px with tracking set to 140.
Step 6
Now we’re done with the “Header”. Let’s open up the “Content” group and create another one called “Description”. We’ll put a strong headline followed by more detailed description of the whole website. It is important to repeat the Call To Action (CTA) so the user doesn’t have to think too hard, but is still able to take action whenever ready.
Pick the Horizontal Type Tool (T) and choose a powerful font for your headline. In my case I am using the beautiful and elegant, yet authoritative-looking Playfair Display (Black) 60px. Make sure to give this beast a lot of space to breathe, I’ve moved it 100px down from the header image.
Now using the same Horizontal Type Tool (T) make a rectangle by clicking and dragging it. In my case it is a 600x140px sized box where I put some persuasive copy for the users to make up their mind to click on the CTA. To establish a clear visual hierarchy the description text should be smaller and not that heavy. In my example I use gray #666666 PT Serif (Regular) 18px, line height 28px. The whole element is moved down by 50px from the headline to give this a clean and professional look.
After reading the copy our visitor may be convinced to give it a try, so it’s wise to repeat the Call To Action (CTA) button once again. Open up “Header” group, find the “CTA” group and duplicate it by hitting CMD+J. After that move it to within the “Description” group and change the button color to our previously used green en #96c218 and for the text use white #FFFFFF. Move it down 50px from the copy to have consistent spacing.
Looking great so far. Let’s put a simple line to visually separate the description block from the next one. Pick the Line Tool (U), set Weight to 1px and draw a horizontal line across the first and the last vertical guidelines. In my case I’ve used a light gray color #e6e6e6 which is not too strong, but does the job perfectly.
Pro tip: hold down the Shift key to draw a perfectly straight line.
Step 7
Now we’re done with the “Description” block it’s time to move on to the next one. Create a new group called “Get Inspired”. After that duplicate the headline and description layers from the “Description” group and move them into the “Get Inspired” group. Edit the layers and change the copy. Below is my example:
Now navigate to the “Header” group and find the “Example” group. Duplicate the whole group by hitting CMD+J and move it into the “Get Inspired” group. We’ll reuse our example from the top and show some user stories to inspire our visitor to take action.
Rename the group name to “Story” and get rid of the green indicator. Also, you will need to change the text color to dark gray #0e0e0e so it is readable on a white background. Use another image for the avatar and write the person’s position and location in lighter gray #666666 so people can relate more to that person.
After that, create a text box of around 300x160px size using the Horizontal Type Tool (T) and write an example of gratitude log update. I’ve used PT Serif (Italic) 16px size dark grey color as used before #666666.
Now duplicate the “Story” group twice and change the avatars, names and descriptions. Place these two groups in horizontal order leaving equally-spaced gaps between and put a line after all these groups as we used before.
Step 8
Now, as we are done with the “Get Inspired” group, let’s move on to the last section of our landing page. The final Call To Action (with some more details) will encourage visitors to sign up by entering an email address.
Create a new group called “Email” and navigate to the previous group to find a headline layer then duplicate it by hitting CMD+J and move it into newly created group. Change the headline to something encouraging and move around 100px below the line to maintain consistency.
Great! Now set the foreground color to light gray #f5f5f5 and pick the Rectangle Tool (U) to draw a box for an email field. It should be the same height as our main Call To Action (CTA) button, though the width doesn’t matter that much. In my case it is 430x60px. Then grab the Horizontal Type Tool (T) and write “Enter your email” or something similar, make sure you use a dark color so it is easily readable.
Now head over to the “Description” group in our layer panel and find the “CTA” group. Duplicate it by hitting CMD+J and move it into the “Email” group. Place the button right next to the email field and center the whole element.
Step 9
The end is near! Let’s minimize all the groups and open up the “Footer” group. Set the foreground color to dark gray #2d2d2d and, using the Rectangle Tool (U), draw a full width rectangle of about 230px in height. This will be our footer background and will distinguish the content area with its contrast.
Go ahead and find the “Navigation” group and logo layer, duplicate it by hitting CMD+J and move it to the “Footer” group. Change the color to white #FFFFFF and move it around 50px below the edge of the footer rectangle.
Finally, pick up the Horizontal Type Tool (T) and put some links that users may find useful. Make sure to group your links so they are easily associated. In my case I’ve used Source Sans Pro (Semibold) 16px for link group headlines and PT Serif (Regular) 14px for link titles.
Congratulations!
That’s it! We’re done with the layout design, so now review the layers, delete the unnecessary ones and hand it over to your developer, or even better code it yourself. I’ve touched upon some basic techniques and demonstrated my workflow for designing web layouts, I hope you’ve learnt something.
I’d love to hear your feedback and see the outcomes of this tutorial!
Extra Resources
If you’re new to Landing Page Design, we’d recommend a number of introductory tutorials to get you up to speed with the basics:
- Landing Page Design Principles: Open Assignment - Accompaniment to the Tuts+ course by Adi Purdila
- A Beginner’s Guide to Successful Conversion by Ian Yates
- Tips for Designing Niche Landing Pages by Keir Whitaker
