In this tutorial, you will learn how to create an elegant landing page design for the fictional thank-you diary service.
We will start with the markup, very quickly developing a layout using Adobe Photoshop. We will use some basic and medium complexity techniques to create this design, and then be able to redo it. Let’s start!
Materials for the lesson
To follow the lesson steps you will need some (free) materials:
- Archive with source materials
Preparing a document
We’ll start by creating a new Photoshop document. To do this, go to the menu File> Create (File> New). Use the settings shown below. You can create a document of any preferred size, there is no fixed width on the Internet.
Let’s add some guides to give our template enough space and make it balanced. I do not always use a pre-defined grid, but installing guide lines will ensure accuracy and help determine the width of our site. Go to menu Browse> New Guide (View> New Guide) and install some guides. I usually choose 1000px for the width of the site and add a few lines around the edges to save space.
Note: Guides used in this lesson: vertical on 200px, 500px, 700px, 900px and 1200px.
Tip: You can also use Photoshop GuideGuide plugin to speed up the process.
According to Photoshop Etiquette, we organize everything neatly so that it is easy to manage the document and edit it. Let’s create three groups of layers and name them Headline, Content, Basement. To create a group, go to the menu Layers> New> Group (Layer> New> Group) and name each one as stated above. To quickly create groups, click on the folder icon in the layers panel.
Working on the header area
The header or “over the fold” zone (whatever that means in the modern world) plays a very important role in interacting with the user and ensuring that the visitor remains on the site. For the template for this landing page, I use a photograph of two people sitting on a bench; one of them holds his hands in the air, demonstrating positive emotions and happiness.
First, let’s create a blog background. In the Header group draw a black rectangle. # 000000 colors using a tool Rectangle (Rectangle Tool). In my case, I drew a size figure 1400x728px and put it on top of the document.
Now load the photo of Chillin ’in the sun, drag it into the Photoshop document and place it over the layer with the rectangle. Rename the image layer to something understandable, for example, I used IMG. Press and hold the button Alt and move the mouse pointer to the layer with the photo until you see a small arrow pointing down, then left-click and release it. You just created clipping mask (Clipping Mask). To complete, reduce Opacity (Opacity) layer img to 70%, so that the text we put on top is readable.
Now click Ctrl + T, to resize a photo to your needs.
The board: Hold the button Shift and you can transform the photo proportionally.
Now let’s create a global navigation for our landing page so that people can navigate the site.
Create a new group called “Navigation”, place it under the “Heading” group. After that, select the tool Rectangle (Rectangle Tool) and draw a white rectangle between the first and last vertical guide. Set the height to 60px, so that navigation elements can “breathe” and look neat. Finally, move the navigation block to 30px down to get a zero gravity effect that looks great with our image.
Now let’s draw a logo and add some links to give our panel a usable look. For the logo, I just wrote “Grttd” using the font Playfair Display (Bold Italic) by size 26px and dark gray # 0e0e0e.
For navigation links I used a font. Source Sans Pro 14px with increased spacing between letters. For the main call to action “Sign up” I used Fatty (Black) green # 96c218 Colour. We are done with the “Navigation” group, so roll it up by clicking on the small triangle icon next to the group name.
Let’s write an inspirational message that accompanies the name and general idea of the site. I will use a large boldface with a subtitle explaining the concept in more detail.
Since we have a rather dark background, for the upper part it is more logical to use pale text to create a high contrast and ensure readability. I used white #FFFFFF typed text Source Sans Pro (Black) 80px with line height 86px. Put it around on 120px below the navigation bar, so that the text has enough space, and it is perceived as important.
Now let’s add a subtitle that will clarify the overall concept and answer some questions that users may have. To create a nice typographic combination, let’s mix the main header font. sans serif with elegant font serif, which we have already used in the logo.
For more inspiring combinations, rate: Google Web Fonts Typographic Project and the article A Beginner’s Guide to Pairing Fonts.
I used white for this tutorial. #FFFFFF font Playfair Display (Italic) by size 26px and moved it to 40px below from the main title.
Let’s add something more attractive so that the visitor can see the advantage of being on the site. The gratitude diary is based on recording things you are grateful for, so a bit of social proof would be a good idea, showing people to someone already using the service and showing something more seductive, such as continuous gratitude.
Create a new group, name it “Example”, then select the tool Ellipse (Ellipse Tool) and hold down the Shift key and draw a circle. In my case its size 60x60px. After that, place someone’s face over the circle and hold the key Alt, move the mouse over the circle layer until you see a small arrow pointing down, then left-click and release it to create a clipping mask. You can now resize the image by clicking Ctrl + T.
For this tutorial, I used a random face with User Inter Faces.
Pro advice: hold the button Shift, to resize or draw proportionally.
Now we need to place the indicator of continuous notes. Let’s create another circle, this time a smaller one and place a number in it. Simple, but understandable and excellent job with their work. For the color of the circle, I reused the old green # 96c218 Colour. In my case, the size of the circle 30x30px, the text inside is white #FFFFFFSource Sans Pro (Bold) 14px.
Now let’s call our user and explain what the number means. Choose a tool Horizontal text (Horizontal Type Tool), enter the name and length of the uninterrupted use of the service. In my case, I used the font PT Serif (Bold Italic) 16px for name and Source Sans Pro (Regular) 13px for an explanation. Make sure the line height is large enough for the elements to “breathe.”
Great, the last thing we will do before moving to the “Content” group. We need an item Call to Action (Call To Action – CTA) so that the user can do something after seeing the images and read the headers. Create a new group “CTA”, set the main color to white #FFFFFF and select tool Rectangle (Rectangle Tool). After that draw a rectangle, in my case its size 280x60px. Note the consistency of the height of the button and the navigation bar.
After that, write a convincing description for the button. I used “START LIVING>”, the color is the same dark gray # 0e0e0e, font Source Sans Pro (Semibold) 16px with tracking (Tracking) 140.
Now we are done with the “Headline” group. Let’s open the “Content” group and create another one – the “Description”. We will place a noticeable headline with a more detailed description of the entire site. It is important to repeat the CTA element, so the user will not need to think much, and he will be able to take action when he is ready.
Choose a tool Horizontal text (Horizontal Type Tool) and look for a “strong” font for your headline. In my case, I used a beautiful and elegant, but authoritative looking Playfair Display (Black) 60px. Make sure that this header has enough free space, I shifted it to 100px down from the title image.
Choose a tool Horizontal text ( Horizontal Type Tool), then create a rectangle by clicking and dragging the mouse pointer. In my case, it is a block of size. 600x140px, in which I put persuasive text to force the user to click on the button. For a pure visual hierarchy, the description text should be smaller and less heavy. In our example, gray was used. # 666666 font PT Serif (Regular) 18px, line height 28px. The entire item needs to be shifted to 50px down from the headline to get a clean and professional layout.
After reading the text, the user may want to try the service, so it will be reasonable to repeat the button of the CTA element. Open the “Header” group, find the “CTA” group and duplicate it by clicking Ctrl + J. After that, move it to “Description” and change the color of the button to the previously used green. # 96c218, for text we use white #FFFFFF Colour. Slide the button on 50px down for a consistent distance between elements.
Looks good for now. Let’s place a simple line that visually separates the description block from the text. Choose a tool Line (Line Tool), install Thickness (Weight) on 1px and draw a horizontal line from the first to the last vertical guide. In the lesson I used light gray # e6e6e6, which is not too noticeable, but it does its job well.
Pro advice: hold down Shift, to draw a perfectly straight line.
Now we are done with the “Description” block, so it’s time to move on. Create a new group called “Inspiration”. After that duplicate the title layers and descriptions from the Description group and move them to the created group. In the picture below is my example:
Go to the group “Title”, find the folder “Example” in it. Duplicate the whole group by clicking Ctrl + J, then go to the Inspiration group. We will reuse our example from the top and show some user stories to inspire the visitor to act.
Rename the group to “Stories” and get rid of the green indicator. We will also need to change the text color to dark gray. # 0e0e0e, so that it is readable on a white background. Use a different image for the avatar and write the person’s view and location in a brighter gray. # 666666, to influence the visitor more.
After that create a text block with a size of about 300x160px, using a tool Horizontal text (Horizontal Type Tool) and write an example of a message in the diary of thanks. I used the font PT Serif (Italic) 16px dark gray #666666, previously used.
Now double duplicate the group “Stories”, change the avatars, names and descriptions. Place the two groups horizontally, leaving enough spaces between them, and place the previously used line below them.
Now that we’ve finished with the Inspiration group, let’s move on to the last section of our landing page. The final CTA element (with some additional details) will encourage users to register by entering an email address.
Create a group called “Email”, go to the previous folder to find the layer with the title, then duplicate it by pressing Ctrl + J, and move it to the newly created group. Change the title to something prompting for action and move it around 100px down from the line, while maintaining consistency.
Fine! Now set the base color to light gray. # f5f5f5, select instrument Rectangle (Rectangle Tool) and draw a block for the email field. It should be the same height as the main CTA button, and the width is not so important. In my case, its size 430x60px. Then select the tool Horizontal text (Horizontal Type Tool) and write “Enter your email” or something like that. Make sure you use a fairly dark text that will be easy to read.
Now go to the “Description” group on the layers panel and find the “CTA” group. Duplicate it by clicking Ctrl + J, then move to the “Email” group. Put the button to the right of the email field and center the entire element.
We are almost done! Let’s fold all the groups and open the Basement folder. Set the base color to dark gray. # 2d2d2d and using the tool Rectangle (Rectangle Tool), draw a full width rectangular shape with a height of about 230px. This will be the background for the basement, which will help to highlight the content zone.
Go to the folder “Navigation” and the layer with the logo, duplicate them by clicking Ctrl + J, then go to the “Basement” group. Change color to white #FFFFFF, then move the navigation around 50px below the edge of the rectangle.
Finally take the tool Horizontal text (Horizontal Type Tool) and place some links that may be useful to users. Be sure to group the links for ease of navigation. For the lesson, I took the font Source Sans Pro (Semibold) 16px for group headers and PT Serif (Regular) 14px for the links themselves.
Fine! We are done with the design of the layout, so now check the layers, delete the unnecessary ones and give the template to your developer, and better turn it into a working site. I touched on some basic techniques and showed my workflow for developing web layouts, I hope you learned something.
I will be glad to hear your feedback and see the results of this lesson!