How To Create A Landing Page From Scratch
Do you have a product or service that you'd like to promote? You need a base to 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, it would be best if you had 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 consisting 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 are 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 the 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 unnecessary to put everything possible on one page or at least in the first version of it.
Brainstorm Ideas
I usually start with some general ideas and a mood board to 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 at 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 at designs there, but only visually.
Most of the designs aren't really 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.
Then I create a blank canvas in Sketch (vector graphics editor I use for everything).
Structure And Content
The next big thing for me is to design a wireframe where I define the 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.
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 does not correlate with the quality of the solution.
The first draft has the most important information I want to put on the page.
Now I understand what to do next, the amount and kind of graphics it needs, what technology to use to implement it, and how much 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 in 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 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 them. I mean colors, fonts, images, style, and sometimes even details I'd like to show.
I try to come up with a couple of illustrations or intro blocks that should build an impression and set a tone, and then it's a question of consistency and work on details.
So I drew illustrations and other graphics and put everything in place to feel how everything works. I usually work on different parts of the page randomly, not from top to bottom. It helps me implement things that I already know how to do quickly and fill blank spaces. You can't go wrong if you do it like this regarding speed and consistency.
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.
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 the web and mobile screens simultaneously. 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 solution to explain my product and collect emails from people interested in it. So I can make announcements to 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 now, 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 a 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. At some point, to push the boundaries, you'll need to figure out how to implement some custom solutions or even make changes to the design layout.
I hope you found it useful. Please let me know if you're interested in more articles like this by subscribing to the form below.
Have a good week,
Max