This post is updated daily.
Soon after I published this article Feel stuck after learning HTML&CSS? Here’s how to create websites on your own I decided to share it on reddit—after all that’s the place I got the inspiration for the article from. To my amazement this happened:
Getting to 1000+ upvotes on reddit is not a small feat. What truly astonished me though were the positive comments how useful this information was to people and how badly they needed an example to see it applied in practice. So that’s what I’m going to do here—I’ll build a page using these same techniques and will document the process step by step. Here we go:
I was wondering how to make the example as practical as possible, so after a short discussion with Gerry I decided to design the landing page of her book “The Absolute Beginner’s Landing Page Recipe”. This way the project will be practical and the results beneficial for both of us.
0. Gather the needed resources
To actually get to the design stage I need a couple of things—a direction and something to design. The “something” is the content of the page, because it holds the DNA of the whole project. It is the most important part of the page, the part intended to be read and convey a message to the visitor. The content part was easy—as this page is already live I got access to it’s text.
So, to be clear on the direction (and to make sure I wasn’t missing anything) I sent Gerry the following questions:
1. Who is this website intended for?
It's intended for 25-30 year old tech-savvy online startup owners (bootstrappers), generally male. They hang out in http://reddit/r/startups http://discuss.bootstraped.fm http://news.ycombinator.com http://quora.com
2. What valuable resources for the target audience are going to be on the site?
There will be a free chapter of the book that is promoted. They have to be able to download it quickly and easily by submitting their email.
3. What is the predominant format of content?
4. How is the content going to be published?
In the form of text. The valuable resource they have to download will be a PDF file.
5. What kinds of devices are going to access the site?(platforms, screen sizes)
All types of devices but generally, the focus is on desktop computers because people on desktops are much more likely to engage with the page which is mostly text and to read the file that they downloaded (that's what my stats say).
6. Do they have anything specific about them that can influence the use of the site?
Hmm. They don't like to read too much according to my visitor recordings. They don't like walls of text. They are easily distracted, I guess.
7. Are there any technical requirements coming from the specifics of the content?
I can't think of any. It's just text.
8. How would people feel when they use the site?
They should feel excited about downloading the free content.
9. What would happen with people after they’ve used the site?
They should feel excited about reading the sample chapter I sent them. They should go read their email.
10. What do you want to encourage people to do after they used the site?
In the best possible case, they would start reading the sample chapter right away. The business goal is to get their email and to give them something valuable in return and to get them excited about consuming that content at the moment.
11. How do you imagine them after consuming the content?
They can't wait to get their hands on the actual book when it's available.
12. What are their values? How are they communicated through shape and color?
I don't think there is a brand in question. The colour is the orange from the theme, I guess.
Generally speaking, the brand should feel friendly and helpful. I think that's the mood. The message is "I like helping people and this is how I can help you, the startup owner, right now".
Frankly, the answers did shed some light on the project, but it is never enough. To actually get to know more about the content I had to actually dive into it.
1. Read the content
“But why are you reading the content”?
As I mentioned earlier it holds the DNA of the whole project, because the page without the content would mean nothing. It would be just an empty vessel. So I started reading the content, not for fun, but analysing it, taking notes of the style, the tone searching for any emotion (or lack of it) that I could turn into an adjective. That adjective(s) would later be used to describe parts of the design, thus like a living organism the DNA will be present everywhere.
Reading, reading…(yes, you should go here and read it too)
Not to neglect the answers to the questions, I extracted the following from them:
Generally speaking, the brand should feel friendly and helpful. I think that's the mood. The message is "I like helping people and this is how I can help you, the startup owner, right now"
Sifting through the content…
I started building a list of likely adjectives and themes that describe it:
- new & different than what you’ve seen already
- a solution
What started as a list of adjectives turned into a list of keywords. These keywords could be used to describe the characteristics in the content that I want to emphasise and convey through the design. Also I can now use them to search for fonts and illustrations and easily check if they fit the DNA of the content or not.
To ease my work with the list I reduced its length and divide it into three groups
|friendly||“I got this”|
And next comes font selection. But, as it turns out I’m already late for my dance class, so you’ll read more about it tomorrow.