How To Create A Landing Page From Scratch

By Max Snitser on Oct 12, 2018

Do you have a product or service that you'd like to promote? You need a base where you can land your clients and customers to get signups or collect emails before your launch. Facebook pages or similar tools aren't sustainable. Your marketing materials and efforts should lead somewhere. Basically, you need the central resource. You need a landing page. Even if you have a website already, a landing page is a different concept. It's a single page that consists of essential information, a message that you'd like visitors to see.

In this article, I want to share my process of creating a landing page from scratch. I do not use online tools or frameworks. So it might be more interesting for people who aware of technologies that most static sites are powered on.

There are debates about where to start. Some people start with content. You can write your message as plain text and then push it further to design stage and work on graphics and sections to make the message easier to consume for visitors. You can go as far as making videos and animations to explain your idea in the best way possible. However, most of the time people don't have that much time and resources to cover so many areas. Moreover, it's not necessary to put everything that's possible in one page or at least in the first version of it.

Brainstorm Ideas

I usually start with some general ideas and a mood board where I can think abstractly about the landing page I want to create.

However, you don't have to do it in the same way. I'm a designer first, writer second. So I do think most of the time visually. Also, it's easier for me to imagine the design concept during the brainstorming process, but some people are better in expressing themselves in writings or a video format.

Also, I'm trying to find the latest real landing pages that I like regarding content and design. The most important part here is that they should be real, not like concepts on Behance or Dribbble. It's good to have a look on designs there, but only visually.

Most of the designs aren't real there. So I go through landing pages of the most successful products like Basecamp, MailChimp, Slack, and really fresh products that I can find on Producthunt.

Along with the research on layouts, content and design trends, I went through @ProductHunt to check the latest releases and how makers position their #product on the #market pic.twitter.com/BBQxwZzQra Ã¢â‚¬â€ Max Snitser (@MaxSnitser) October 5, 2018

Then I create a blank canvas in Sketch (vector graphics editor I use for everything).

It's always intriguing to see a blank canvas and it's a struggle to limit the flow of endless thoughts to come up with something certain pic.twitter.com/aG037OqApt Ã¢â‚¬â€ Max Snitser (@MaxSnitser) October 5, 2018

Structure And Content

The next big thing for me is to design a wireframe where I define info and action blocks that I want to have on my page. During this process, I usually think about the content part. It's faster and more comfortable for me to do both things at this one stage of work. Why faster? Because I don't have to redo things if let's say I write a copy first and then think about the visual representation of it.

One important thing that I have in mind during all this creative process is to move fast and having small iterations.

Because if I feel that something holds me for an extended period of time, it's already inefficient. I lose time and from my practice, the time I spend on solutions do not correlate in any way with the quality of the solution.

The first draft has the most important information I want to put on the page.

Came up with some great ideas in the form of #wireframes for the #landing page. I'll be checking it Tomorrow with a fresh mind and continue working on it. And now I'm going to do something else... pic.twitter.com/ebDCLGsqna Ã¢â‚¬â€ Max Snitser (@MaxSnitser) October 5, 2018

Now I understand what to do next, the amount and kind of graphics it needs, what technology to use to implement it and how time approximately it takes.

Visual Look

As for the design, it's usually difficult to say when the concept is ready. It's an artistic part of the work, and sometimes it involves activities like brand development even on early stages like pre-launch. I usually try not to spend much time doing many variations and choosing one of them. Since it can go to a dead end or it is hard to choose one. So I brainstorm ideas, put several examples I like on the mood board that I mentioned earlier and during the content and structure part of the work I think about the creative part of it in the background. It allows me to save some time and be efficient at the same time. So when I'm done with the wireframes, I already have some ideas in my mind of how to visually represent it. I mean colors, fonts, images, style and sometimes even some details I'd like to show.

I try to come up with a couple of illustrations or intro block that should build an impression and set a tone and then it's a question of consistency, and work on details.

So I went through the Yesterday's work on #wireframes, fixed paddings, alignment in certain place and Today I'm working on the #design concept, graphics, and content. This is what I have at the moment: pic.twitter.com/X8VoPdkjLe Ã¢â‚¬â€ Max Snitser (@MaxSnitser) October 6, 2018

So I drew illustrations and other graphics and put everything in place to get a feeling of how everything works. I usually work on different parts of the page randomly, not from top to bottom. It helps me to implement things that I already know how to do quickly and then fill blank spaces. You can't go wrong if you do it like this regarding speed and consistency.

I believe human graphics will help me to show how the #product is user-centered. I mean User eXperience. #ux pic.twitter.com/HgSmJ9imNj Ã¢â‚¬â€ Max Snitser (@MaxSnitser) October 6, 2018

Coding

I usually do not wait until my design is ready at 100% to start the coding phase.

As soon as I'm confident on 100% or at least 90% about some of the blocks I designed or created wireframes for I can start implementing it to see how it looks and works in the browser. It helps me to take into account certain things when I continue designing other parts of the page.

New day, new adventures. #Coding the #landing #page Today. I'm going to stop my perfectionist and release the 1st rough version of it during the day and fix/add things later. pic.twitter.com/tXPHFD64gS Ã¢â‚¬â€ Max Snitser (@MaxSnitser) October 9, 2018

I prefer to use the simplest technologies possible and keep my code clean and simple. Things I use are HTML, CSS, jQuery and sometimes plain JavaScript. All of this requires some knowledge, but even if you remove JavaScript and jQuery from the equation, you still can do very decent solutions that look well on web and mobile screens at the same time. Moreover, you can delegate parts of the work where you don't have any skill or knowledge.

The Result

I spent one week working on the landing page from the idea to launch, but that was not the only project I was working on at that time. Also, I didn't have an everyday workplace. Mostly, I worked from cafes sometimes with a horrible internet connection.

Anyway, I built a great solution to explain my product and collect emails from people who are interested in it. So I can make an announcement for the audience.

You can check the live landing page here: spry.blog

One fantastic thing here is that I can make updates or add more blocks and information to this landing right after the launch. So I don't have to wait for a fully ready website to launch it. I implemented the essential part at this moment of time, and right now I'm going to build from it. So it's already working, and I can tweak and upgrade it any time I want.

If you don't know code or design

Alternatively, you can delegate the whole thing. In this case, perhaps you know the whole process of creation.

If you don't know any of this

One more alternative can be using online services and builders to do all these things on the very high level. However, it's hard to build unique solutions and stand out from the crowd by using these services. Since they have certain limitations and at some point to push the boundaries you'll need to figure out how to implement some custom solutions or even do changes to the design layout.

Hope you found it useful. Please let me know if you're interested in more articles like this by subscribing in the form below.

Have a good week,

Max