Building a Landing Page from scratch

So you’ve got a product–or someone hired you to market their product–or your mom wrote a sewing book and she wants you to make a website for it and you can’t say no because she’s your mom.

Whatever the reason, you now find yourself at a point where you need a landing page. And, classic you, the page needs to be more than a 1990’s era monster (I’m with you on this one.)

So where do you start? Do you go to a site like Wix or Squarespace and throw something together? Well, you COULD. But that won’t convert customers very well… and it won’t feel very personal to the user.

With that in mind, you decide to design and build your own landing page. Huzzah! You’ve taken the first step–now there’s just four more to go.

  1. Decide to make the page yourself
  2. Copy writing
  3. Planning/Sketching
  4. Designing
  5. Transfer to web

Copy Writing

I always-regardless of if I’m doing work for a client or myself-start every design project with the copy, the content. Designing before writing leads straight to a terrible page, mostly because you end up writing copy that fills in pre-determined gaps rather than actually delivering information.

You’ll see people sketching up (or worse, actually coding) the layout or design of their product or web page before actually writing the page. It’s like making a cool bottle design for a drink that doesn’t exist.

(I mean, if you’re a package designer working on your portfolio, go ahead. But if you’re trying to start a soda company, you probably want a drink before you want a bottle.)

So I always start with the copy. And while I’m not going to drag on about copy writing, it IS the key to a great landing page. I’ll try to make this part quick for you-here’s how I write copy:

I look up to make people–Nathan Barry, Neville Medhora, Tim Ferris, and Noah Kagan, to name a few. Some of these wonderful people have written books or made cool online video courses, most of which I’ve consumed whole-heartedly. One of these such courses, Kopy Kourse, by Neville Medhora taught me the basics for great copy. (You can get the course here!)

Neville and many other experts advocate using the AIDA method. Some of you may know a version of it from Glengarry Glen Ross (NSFW):

While the video does a good job glossing over it, let’s change it up a bit and dive in. For our purposes, AIDA works like this…

A–Attention

This is the headline, the flashy image, the first three seconds that buys us the next ten. This is, for those of you who’ve studied pick up, the Opener. The attention section of your copy needs to do exactly what it sounds like–it needs to grab the user’s attention; it needs to be a slick image with a clear and intriguing headline.

It should appeal directly to your customer’s problem and let them know that you’re ready to talk about it.

In the Camila’s Lemonade Stand (CLS) landing page, the title says:

The school system won’t teach your kid entrepreneurship, but Camila will.

This headline spells out the problem and mentions the solution… quickly. Quickly enough, hopefully, that visitors will at least look down at the accompanying fold graphic, which I hadn’t made yet.

I thought of the picture at this stage, though. It’s important to figure out what graphics will accompany your text, even if you don’t figure out where or how (that’s for later).

I decided that I wanted a non-photo-realistic 3D picture of the book. Basically, I wanted to make the user understand who the hell Camila was–a character in a children’s book–without having to read beyond the title. The combination of your header and fold graphic should make the user want to read at least the first paragraph.

Another header example could be Double your eBook Sales Revenue in 10 Days. This works extremely well for a few reasons–it targets only those who are potential customers (eBook authors/publishers), it spells out the problem (low revenue), and proposes a solution (doubling it in 10 days).

I–Interest

All of the text in the top part of the page builds the reader’s interest; it recognizes her problem and builds on it. Warning: do not to talk about yourself or your product much in this part.The reader already knows you have a product, he knows you’re going to try to sell him your product, and you know what? He doesn’t care about you. He cares about himself (not your company.)

So, what don’t you do here to pique interest? Talk about yourself and your product and your company. No one cares how you came up with the idea or where you’re located–they care about their problem (the one you need to solve.)

Delve into their issue–show that it’s bigger than even they think. Show that it’s serious: not just some annoyance. Statistics are especially useful here:

Barely 50% of the nation’s 4 million ninth graders enter postsecondary education, and less than 20% receive a degree within four years.

A small amount of text, sure, but it packs a punch. I planned to make the font a little bigger than the standard body text; that way, if a visitor is on the edge about continuing after the header, she’ll see one small piece of text and say Okay, I’ll read a few more lines before clicking away.

This is important–it’s the first 3 seconds that buy you the next ten that buy the next 30 that buy the next two minutes, and so on, all the way up to the actual purchase. So the interest section, especially the first part of it, needs to compel the visitor to continue.

D–Desire

In the video, Baldwin calls this Decision, which describes what the visitor’s end response should be, but I, and many others, prefer to label it Desire because it reminds us what we need to evoke in our readers.

This is the section where you can finally talk about your product. This should be the longest section; after all, you need to explore as many angles as you can. I.e. Some people will scroll down until they hit a video or picture. For others, it’s testimonials. Some want to see small text blocks that they can easily digest.

If you have a demo version of your product or some smaller item you can give away for free, include an email opt-in here, too. That way you can start emailing them with offers and bring them back to the landing page often (some studies show that people need to see something on average 7 times before they commit to buying it.)

Write about features, benefits, specs, everything–this is the long copy that drives sales. Interested people will want to hear about all the amazing ways you’re going to solve their problem, so take this time and tell them.

When writing this section, don’t spend too much time worrying about the order of the content (i.e. the videos, graphics, testimonials, etc.), just get all the pieces down and arrange them later.

Because the reader is already interested, he’ll stick around through the bits that don’t appeal to his reasoning so long as you have a part that does.

For the CLS landing page, I wrote down all these building blocks one at a time. When I started, I knew I wanted to list the many lessons that the book teaches–with an image of all the book’s characters (kinda a monkey see–monkey do type thing.)

I remembered that I videotaped a bunch of readings we did at local schools, so embedding one of those videos sounds nice. That way potential buys can see not only the content of the book but also how children react to it.

Okay, what else… Testimonials! We had a bunch of quotes from the kids and teachers at the readings, so I could put a few of those in there. And we have a bunch of reviews on Amazon I can pick from. So that gave me a pretty dense testimonial section.

Then I thought, someone more technical might appreciate a piece on how we made the book and how it’s designed to teach. To illustrate this, I wrote up sections on execution and approach, which would play nicely with an example page of the book.

Basically, in this section, take your time and think of all the possible ways you might convince someone to buy. Then go through and tackle them one by one.

A–Action

This is the shortest part–you ask for their money by giving them a call to action and a payment gateway. We have two versions of CLS–print and Kindle–so it was pretty easy to figure out price points (8.99 and 4.99). I like to offer different packages at different price points, a la Nathan Barry.

For example, we’re working on a companion guide for Camila’s Lemonade Stand that I could add at a higher price point, giving the user three options. Offering multiple options forces the visitor to compare your product against different versions of itself rather than to anything else on the open market. In this section, make sure to include a strong call to action: buy! or whatever action you want from the user.

Planning and Sketching

So, once you’ve written out all the text for your landing page, you need to start designing. Now, that doesn’t mean go jump on your computer–so far, unless you’ve typed all your sales copy, you shouldn’t have even touched a computer.

You should design by hand. Then tweak those designs… by hand. Only start working on the computer after you’ve decided everything that you can: colors, patterns, text size, graphics, and–of course–layout.

To do this, I write out every element, or unit of information, I need to put into the page: headers, text blocks, block quotes, videos, and so on. I list them all out so I know what I need to fit into the page and in what order I need to fit them.

Then I pair up pieces that absolutely have to go together. For example, the header for the video section needs to be next to the video element (duh). A little more engaging than that obvious example, though:

I want the three introduction paragraphs, one of which is a block quote, to be next to an image of the book’s cover. I believe I mentioned that earlier… Anyway, it’s those kinds of connections that you need to find and write down.

Then–finally–you can begin designing. It might not be what you imagined yet though.

Take a stack of post-it notes and draw out the groupings of elements–one group per note. Draw multiple versions of each grouping on multiple notes so you can pick from them later.

Once you have all the possible elements–in all their many groupings–in all their myriad arrangements–start assembling the post-it notes so the page begins to take form. The beauty of doing things this way is that you can try a hundred different layouts and orders without locking yourself into anything.

example post-it notes

As soon as you nail down the perfect layout, think about the backgrounds, the section transitions, and more. Write down as much as you can about each little piece:

Should this graphic have a drop shadow?

What kind of background color does this section need? What texture?

How large should I make this type? What typeface should I use?

What iconography should I include?

What accent color works well for this content? Where should I use it?

These questions need answers before making your way to the computer. Once you have all characteristics written down, you’re ready to move onto the computer.

Designing

For this type of work, I always design with Photoshop, then either transfer it directly to HTML and CSS for the site or recreate it in WordPress (which I’ll do in this example). Now, while I won’t go over how to recreate the design in HTML and CSS in THIS piece, I’m sure I’ll come back to that for another page down the line. So why do design in Photoshop and not directly in WordPress?

Well, I always recommend doing design work in Photoshop over other programs; it offers so much flexibility and, once you get the hang of it, there’s really no substitution. Write first, then design, then create. Don’t try to combine the final two steps in WordPress.

Anyway, my love affair with Adobe aside, let’s open Photoshop and make a new file. It should be big–like, really big. 1200 px wide and 8000 px tall should to at first, we can crop the height as we need down the road.

Click Ctrl+R to turn your rulers on, then drag from the left ruler to create some vertical guides. Create a 6 column grid with a guide every 200px. We’ll use the middle four columns for content, leaving the far left and far right columns as margins.

Alright, now start by making a rectangle that fills the entire canvas. I like the make the fill white; do this so you can easily read whatever you write on the page. (That grey/white check pattern for ‘transparent’ is impossibly difficult to read text on.)

Then make text blocks for each piece of text you’ll be including in the page. No need to style them right now, we’ll come back and do that later. Once you have each text block on the page, start positioning them in the layout you sketched out with your post-it notes.

Like everything we’ve done, the text comes first. To speed this process along, know that Ctrl+T selects the Type tool and that Ctrl+C… well, you know how to Copy/Paste. When you do this, make sure not to position them in absolute terms on the page–position your text blocks relative to the ones around it, just as you did on your post-it notes. Later, we’re going to group all the text and graphics of each segment and arrange them. Until then, though, don’t nail anything down.

Landing Page with text

(PSD available below)

Then we move onto the graphics. For the example page, I wanted a number of images. First was a mockup of the book at the top of the page, then was a picture of all the characters just after some copy, then a spread from the book with callouts to explain why the book is so wonderful. I also wanted a video of a reading. And, finally, I wanted a picture of one of the book’s characters down in the FAQ section of the page.

That’s five graphics–not too bad. Especially considering that the book’s illustrator could provide me with the pictures of the characters (supplying two of the graphics), and I already filmed, mixed, edited, and uploaded a video from a reading.

That leaves two graphics: the book mock for the top of the page and the book spread with callouts. I’ll give really, really quick explanations of how I made these graphics here, but to get a more in-depth look, download the PSDs at the end and mess around with them.

(There are probably ‘better’ ways of making each of these graphics, this is how I did them, and they look good to me.)

To make the book mockup:

  1. Open the book cover PNG or PSD
  2. Add white rectangle of the same size overtop of the cover, move it 3 pixels to the left (with the left arrow key) and 1 pixel down (with the down arrow key).
  3. Rasterize the shape by right clicking the layer and selecting Rasterize Layer.
  4. Use the Polygonal Lasso Tool to cut off the top left and bottom right corners (5 px) of the rectangle at 45 degree angles. If this is unclear, download the PSD and see what I mean.
  5. Use the Eyedropper Tool to select the color of the top left pixel of the book cover.
  6. Create an 8×8 square with the rectangle tool with no stroke and a fill of the same color from the cover.
  7. Cut the same top left corner off this rectangle (after rasterizing it) as you did in step 3.
  8. Place this rectangle under the white rectangle but above the cover–position it so it lines up with the cover at its top edge and reveals a one pixel line on top of the white rectangle’s top left corner.
  9. Change your primary color to a medium (40%+) grey, and make one pixel lines from the top left to the top right of the white rectangle, do the same from top right to bottom right. You should be able to fit 2 on the top and two on the right (alternate white background and grey lines.)
  10. Copy the cover layer and place the copy on top of everything. Move it 8 pixels to the left and six pixels down.
  11. Using the Rectangle Marquee Tool, select the far left 10-14 pixels of this layer. Select the Gradient tool and set it to black-to-white and change the opacity to 24%. Then do a stroke from right to left; this will slightly darken the selected 10-14 pixel column. This will serve as the spine.
  12. Before deselecting, go to Select>Inverse. Change your gradient’s opacity to 14% and do a small stroke from left to right to transition the stem a bit.
  13. Use the Polygonal Lasso Tool to select a section of the layer starting at the top right corner and cutting diagonally through the cover, selecting the top left side of the cover. Use the Gradient of white-to-transparent and do a broad strong from top right to bottom left, adding a gloss to the cover.
  14. Make a line with no fill and no stroke the length of the book cover and move it to the bottom of the book. Make this layer the bottom layer. Then go into Effects>Drop Shadow and add a shadow at a 90 degree angle, a Distance of 27px, a Spread of 42%, and a Size of 27. The Opacity should already be set to 75%, but double-check. Position the invisible line so that the drop shadow looks as though it’s being cast by the book.

When you’ve done all this, it should look something like this:

Book cover mockup

Now onto the book mockup with callouts.

  1. Purchase a magazine mockup (here’s an example) with Smart Objects from Creative Market. (Creative Market is a wonderful resource for designers.)
  2. Go into the document and edit the Smart Objects. Drop in either scans of the book or images you have from producing it.
  3. Save and update the Smart Objects. (You can stop here if you don’t need callouts.)
  4. Add text alongside the book mock for your callouts.
  5. Create a circle with no fill and a grey stroke of .5pt and a weight of 5px.
  6. Hold Shift and add a line leading from the circle at a right angle out about 150 pixels. This will attach the line and the circle.
  7. Go to Effects>Drop Shadow and set the Angle to 30 degrees, the Distance to 7px, the Spread to 1%, and the Size to 4px.
  8. Duplicate this layer as needed, click Ctrl+T to transform (rotate) the duplicates as needed.

I can’t include this PSD because I paid for the magazine mockup, but here’s what it should look like when you’re done.

Book spread mockup

Now, before we place these and our other images into the page, let’s move back to the text. We need to style it all so we can figure out the correct spacing on the page before putting in the graphics, so go to Window>Paragraph Styles and make sure it’s checked.
Or go to Window>Workspace and click Typography. When you can see the paragraph styles tab, start making your paragraph styles: H1, H2, H3, H4, H5, p, Pullquote, and Pullquote author.

Click the New Style button, which looks like the new layer button you’re probably familiar with,  and fill in all the fields you figured out when we planned the page. That means typefaces, weights, italics and bold, tracking, letting, and so on.

For a full breakdown of what all these mean and how they operate on the page, check out Ellen Lupton’s Thinking with Type. I highly recommend reading it if you’re a designer or want to be one.

Anyway, the page you’ll enter all this information in looks like this:

Text Style Edit Box

Once you’ve input all your different text styles, it’s time to apply them to the copy on your page. Click T to open the type tool, then click on one of your pieces of text; say, a header. Then go over and click on the paragraph style you want that header to be. It’s that simple. Yes, you’ll probably have to move it around and maybe realign it to make it look right, but you’ve pretty much got it.

After you’ve styled all the text and rearranged it as needed, the page should look something like this:

Landing Page with styled text

Notice the variation in size, weight, and font? You want a clear typographical hierarchy in your work; that early planning starts paying off now.

Alright, the page is starting to look nice. Let’s drop in those graphics we made or found earlier to fill out the page, then we’ll come back and fill in the finishing touches.

Start by clicking File>Place Linked. This will open a file browser where you can pick the graphics from earlier and put them into the page. I like to use linked images so you can make a change the linked picture and it will automatically update within the page.

Go ahead and place your graphics. Remember, if you need to resize any of them, click the button that links the proportions of the image so they don’t come out looking stretched or squished. Again, you’ll probably need to move some text around to make space (mostly just moving segments down to create the vertical space you need.)

It should look something like this when you’ve put the images in:

Landing Page with graphics

Now we can get to those finishing touches: ornamentation, iconography, backgrounds, calls to action, etc. Let’s start with any buttons or icons, since these will use the accent color we decided on when planning the page. At the end, you can download a PSD with my color palette for this project.

Color Palette

Use the Shape and Text tools to make any buttons and add any flair you want on your page. You’ll see in the PSD how I did this; essentially, you can just make simple shapes-circles, rectangles, and so on-then just type over them.

To add icons, you can either use a vector icon set or an icon font like FontAwesome. I recommend the latter since it’s easy to use and has a web version, that way you won’t need to do much to get your design looking the same online.

To use FontAwesome for icons, go to its website, download the font file, install it, and use their online cheatsheet. If you have any questions about this process, feel free to comment below and I’ll get back to you.

Now, to add the background, just go down to the bottom layer, below all the content, and draw rectangles with the fill color set to your background. If you want a patterned background, you can set the rectangle’s fill to be any pattern you have in Photoshop.

Here’s what the page looks like after some stylistic additions; again, all of this was done with the Shape and Type tools:

Final Landing Page

So that pretty much covers designing the page. You’ve placed and styled your copy, you’ve created some great looking graphics, you’ve added some flair and a background. It’s looking good!

And since you took the time at the beginning to plan it all out, the page actually makes sense as a whole. Now it’s a matter of moving this all online. For that part, at least within the context of this tutorial, we’ll use WordPress. Soon I’ll do another page in HTML and CSS and show you that process. For now, though, let’s check out WordPress.

Transfer to Web

WordPress is a really powerful tool; because it’s pretty open to developers, you can get a plugin or theme to match almost any purpose. There are themes specific to realtor businesses, plugins that help you take appointment requests, and widgets to populate your sidebars with anything you can imagine.

It’s no wonder one fifth of the internet runs on WordPress. We’ll use it here because it’s easier and faster than hard-coding your landing page. Also because it offers built-in responsiveness, making our landing page accessible to anyone.

Look through the WordPress themes on ThemeForest to find the right theme for your landing page. You should be looking for ample shortcode documentation, aesthetic features that match your design, and responsiveness. (I use ThemeForest for almost every WordPress-based project; nowhere else can you find such a wide variety of themes.)

For this project I’m using the theme Angle by Oxygenna. Once you’ve found the theme you want to use, download it from your Purchases page; you’ll want to download the Installable Zip file only.

After installing WordPress on your server-the process for which varies based on your hosting service-you need to login to your admin panel and navigate to Appearance>Themes and click Add New Theme. Then click upload, select your theme Zip, install it, and activate it.

The process from here on out differs based on both your theme and your design. For me, I needed to adjust the colors in my themes Palettes to match the red and light blue theme from my designs. Then I created a new page and, using the visual layout builder that came with Angle, I input my copy in the right order and location.

Then I went through and used the same layout builder to put in any graphics. Then I did some custom HTML and CSS work to make it look exactly how I wanted it to-don’t worry, though, this is largely unnecessary; I just wanted to.

Normally, the WordPress system is so easy to use that you can create a page without any external help, but if you need help with your specific theme, use its designer’s support line (you can find this on the theme’s ThemeForest page) or if you need help with WordPress as a whole, here’s a link to some really great tutorials.

Now go to a place like MailChimp and sign up, create a list, and make a quick button so you can get email subscribers on your page. MailChimp is super easy to use and has plenty of guides for you.

Once you’ve made a button with MailChimp, take it’s code and put it into your WordPress page down there at the bottom.

Once you’ve recreated your design in WordPress, it should look something like this.

PSD download only works on desktops and tablets. Come back to this page from there!

Comments

  1. Brilliant! I’ve always wanted to see the process broken down and this does a great job of doing. Thanks so much for taking the time! All the best.

    1. Author

      Hey Hugh!
      Thanks for the comment! Any other project you’d like to see broken down? I’m trying to figure out what to write about next.

      -Lucas

Leave a Reply