How I Design A Website From Scratch (LIVE)

This post is updated daily. The “Day” titles mark when I’m making entries in the diary. This whole process could be completed a lot faster if I didn’t take the time to publish my notes here. .

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:

1041 up votes on reddit

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:

Day 1

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.com/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?

Text.

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)

Done!

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:

  • friendly
  • helpful
  • knowledgeable
  • new & different than what you’ve seen already
  • easy
  • trustworthy
  • a solution
  • expert
  • recipe/framework
  • smart
  • simple

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.

Reducing complexity

To ease my work with the list I reduced its length and divide it into three groups

simple smart helpful
easy knowledgeable
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.

Day 2

And we are back again with another episode of “Live Web Design Diary” with your host Rumen Dimitrov

Yesterday I barely scratched the surface of the project. As a diligent scientist I got samples, took them in my lab and started running tests on them, so to speak :) Nevertheless I managed to compress all the project characteristics in the table you are seeing above. The DNA is still not completely decoded, so I must reduce further:

I picked these three: simple, friendly, smart, because I think they are closer to the image Gerry wants to portray of her and her product: “the book describes a process, which will reduce your wandering what to write on your landing page. This way the experience becomes friendlier(less hassles) and steps simpler to follow through. Also, because you currently can’t do this alone, you either need help(hire somebody to do this for you) or you need to get to the next level(become smarter and hack the landing page copywriting issue)”

Picking a font family

Before even thinking about which font family to pick, let me lay down my limitations first, as this will help me narrow down my choices from the start:

  • I don’t have money to spend on this project, so paid font delivery services and paid web fonts are out
  • I respect the work of type designers, so no pirating of their work, converting it into font kits and uploading on my server

This leaves me with nothing but the most popular option out there: Google Fonts.

The state of Google Fonts

Google Fonts is chock-full of typefaces that have niche usage (if anybody uses them at all), bad kerning and tracking and poor glyph drawings. But, somewhere in the midst of that there are a couple well-drawn families that have the needed typographical versatility to be used as the main font family for a project.

Serif or Sans-serif?

It is said that serif fonts emphasise the horizontal structure of the line. They should be better for narratives, stories and fiction, where you want smooth and quick consumption of the content.

But after reading the copy, this is not the case with “The Absolute Beginner’s Landing Page Recipe”. Here we want the people to slow down a bit and pay attention to what we have to tell them. In order to understand that this product tackles exactly their problem they need to read the pain Gerry is talking about in the copy.

Also, most free serifs look kind of dated to me. The theme and tone of the text of the landing page I’m designing are set in the present digital times, so I’m looking for something modern/contemporary with a friendly/smart personality and simple looks. A sans-serif.

What looks simpler than a sans-serif font?

A sans-serif with no details, but I digress.

Now that I know I’m looking for a sans-serif font family let’s compile a list of the other characteristics, too:

  • sans-serif font family
  • should have at least 3 faces (regular, bold, italic) for me to even consider it as a main font family for the body copy
  • should have at least the common typographical “devices”—dashes, quotes, bullets, some alternatives/ligatures are a plus
  • should convey feelings of “friendly”/”smart” or “neutral”(the least favourable option)
  • should have a modern twist, hopefully

With this shopping list in place I head to google fonts

Google Fonts

Immediately I’m presented with the most popular font families—”cool, the community has done the job for me”, I think.

I won’t have to look at other poor choices. So now my task is to pick a couple of good-looking sans-serif families with enough styles/faces and compare them.

Side note: Why are these fonts popular? Mostly because (and this is my opinion) they have a lot of styles/faces, which give you huge flexibility as a designer when you are composing a layout and looking for different textures of the text block. Also these families are nearly complete, they could be used to write in most common languages. Also, some of them are neutral(think Helvetica) which makes them applicable almost everywhere with no detrimental side effects. Too bad, there will be no positive effects, too. Thought, what I’m looking for now, are positive effects.

Day 3

Yesterday I ended with a stack of fonts to choose from (Google Fonts yielded 182 sans-serif results). I’m going to get the first page of the most popular results and narrow down from there.

Here is the list of fonts I considered (in no particular order of importance or popularity):

  • Dosis
  • Ubuntu
  • PT Sans
  • Source Sans
  • Lato
  • Merriweather Sans
  • OpenSans

These fonts caught my attention, because each of them has something that fits the list of adjectives I settled upon.

Now let’s look at each of these in more detail and see what the character they embody is:

  • Dosis

    friendly, rounded, modern

  • Ubuntu

    (overly) techy, smart

  • PT Sans

    mix between ubuntu’s tech/futuristic look + simplicity

  • Source Sans Pro

    flexible (because of the many styles), no personality, giving off no emotion

  • Lato

    flexible, has a friendly personality (look at the ampersand, rounded corners of some of the letters)

  • Merriweather Sans

    details, modern shapes, pretty italic, slanted axis

  • OpenSans

    neutral, no character, upright axis

Day 4—The saga continues

I didn’t get much time to write here yesterday, so I’m making it up today

These definitions are based on the description of the font family (usually from the font designer) or my observations. I don’t plan on going in too much detail here for now (unless you ping me on twitter ;)). There is still a lot of work to be done. First—that’s an already overwhelmingly big list to choose from. So, I’ll try to cut it down, again, and simplify.

Cut again

I don’t like Ubuntu’s curves, lack of subtle detail and crude geometric shapes. Also its U screams dated “futurism” despite the overall positive tech look. And the tech look is not that I needed specifically, so Ubuntu is out.

Source Sans Pro—despite its 12 styles and very good hinting it still lacks the needed emotion. It is too strict, too neutral (even compared with OpenSans). This means Source Sans Pro goes out, too

Type interpretation(like colour meaning) is fairly subjective and based on the cultural associations we have. Of course there are other ways to label the lack of details in SS Pro or the geometric U in Ubuntu. These are just my interpretations. In this particular case I’m fairly inclined to trust them, because I’m part the audience that is going to visit the landing page and be interested in the ebook

List cutting, ep 2

I now have 5 fonts left. Let’s look them side by side:

5 fonts side by side

No-frills way to achieve that: (on OSX) Press Cmd+Shift+4, make screenshots of the pages demoing the fonts then select the the files on your desktop and press spacebar for instant preview. Click the four squares icon to show thumbnails and resize the overlay to inspect the images closely.

See the odd guy out? That’s number 5, Dosis. Why am I even considering it? Because it is friendly(round terminals), geometric meaning some kind of precision… buuut it is going out, because its positivity may come over the top in long blocks of text. The perception of the copy will be closer to comic-friendly, not friendly-useful. Nevertheless it is good in small doses, so Dosis is out for now, but may be considered for headlines. Not sure yet.

Cut to the bone

To get to a single font family I have to continue reducing the list. But I can’t think of any other criteria at this level of samples. So, I need to look the fonts in a different light. I have to see them applied on real content. I have to read the content and see if the message I get resonates with the feeling the glyphs create. After all that’s why I’m going through all this trouble of picking a font family that resonates with the direction of the content. So, let’s see how this works out in practice.

Dressing the content in a typeface

I’m at a fork on the road again.

The need — “To find a font-content match I want to read the copy in a google font of my choice”.

The problem—Google encourages you to preview the fonts in Typecast, but Typecast won’t let me paste my custom text. Maybe that would work once I have an account in their system, but I don’t want to create an account. Also, even if I were able to paste it in things like forms and styling would be lost.

The solution? Or a concept of a solution—I want to apply the google font on the original page. I don’t want to fiddle with code through my browser’s Developer Tools. So I need something that could take the page, apply a google font of my choice and have me look at it. After some googling I stumbled upon Typewonder!

It did make my choice more enjoyable :)
It did make my choice more enjoyable :)
Gathering samples

So, now that I have the tool that could get me the samples I want I went through the process of opening 4 copies of typewonder.com in 4 separate tabs, loading the sansmagi.cc/book/ URL and assigning them the typefaces in question: Merriweather Sans, Open Sans, PT Sans, Lato.

Time for close-up analysis

I looked for a block of text that has enough details and I started flipping between the tabs and inspecting the results live in the browser.

Below you see crops of the screenshots from the tabs:

Click to view the image in actual size
Click to view the image in actual size

Day 5

Last time I reduced the list to just 4 fonts and got the same copy set in four of them. Now, what did I spot in each of them?

Analysis of the samples

Merriweather Sans

Pros:

  • looks a bit heavier on the page
  • good looking lower case “g”
  • i really dig the italic ‘k’ & ‘e’
  • the apostrophe and comma look nice
  • details on bigger sizes

Cons:

  • the squashed ampersand

Open Sans

Pros:

  • good legibility
  • good italic f

Cons:

  • the m-dash falls down
  • except for the lowercase g it looks too sterile (even the apostrophe)

PT Sans

Pros:

  • the lack of spurs for of b, g, p, q bring the typeface closer to the character of Ubuntu
  • the curving of l is a nice touch—clearly passes the 1Il test legibility test

Cons:

Can’t think of any, except for the lack of detail in the single story g, which was intended. This actually is part of the charm of the font.

Lato

Pros:

CHARACTER! PERSONALITY!

  • the open ampersand is beautiful
  • the y that contrasts with the two storey g
  • the geometric o, C (closer to a circle). Reminds me of Futura
  • Smaller x-height (compared to the rest) makes me feel like I’m reading an old-style serif typeface.

Cons:

Can’t think of any. The font family looks complete

The verdict

Before I pronounce the “verdict”, let me remind you why am I looking at these options and not going with the first sans serif that I came across:

I’m searching for a typeface that has the character to communicate the feelings I get from the copy for the page

No, the page won’t be useless if I don’t find the perfect sans-serif font. Heck, it won’t die if I don’t find a typeface that communicates the same message, either. But it is that kind of detail that separates professional design from mediocre design.

As I noted before—tastes are subjective. That’s why I’m laying out all the resoning behind my choice.

So, here comes the verdict.

Merriweather Sans is good, with friendly details. What I get from the details (look at terminals, spurs and mostly anywhere one line joins another) is “playful, intricate”… but the ampersand is downright ugly. There, I said it.

Other than the fine details that would be visible mostly in headings the typeface looks pretty generic. So Merriweather Sans is out.

Open Sans is even more generic than Merriweather Sans—it lacks the fine details. It reads better in different sizes, it is flexible, because of its many weights… but it is sterile. I would use it on the doors of a lab. Or anywhere I would put Helvetica. In an interface, may be. Also, comparing it with the other typefaces I notice that the m-dash falls below the middle of the x-height. That’s not a crime, but combining all of the cons is enough to take it out in favor of options with more personality traits. Open Sans is out, too.

PT Sans is like Ubuntu+Open Sans—it has the techy character (coming from the spurless design of the g, b, q). The ampersand is so-so. If I haven’t got Lato I would go with this one. But because there is Lato, PT Sans is out, too.

The font family I’m going to use for the page copy of “the Absolute Beginners Landing Page Recipe” is… Lato.

Here is a final ranking of the typefaces in question:

  1. Lato
  2. PT Sans
  3. Merriweather Sans
  4. Open Sans
  5. Dosis

Last word about Lato:

Compared with PT Sans it speaks differently. If PT Sans sounds “clean, classic, pinch of tech” Lato is more like “friendly, elegant, definite (the straight lines, the geometric O/C)”. Lato is the typeface I would set a story in. The typeface I would dress my words in when I talk to people about other human matters. Which is what marketing and copywriting is—you have to know how other people think. Web design (at this step) is very much about the people.

Now that all the choice justification took place, it is time to move on. Readability and proportion await us.

Next time

I’ll explain how I chose the font size for the body text and how this number will become the basis of the structure of the website.


Want to read more?

Just refresh the page in about 5 or 10 minutes. I’m currently working on this. Come back tomorrow around noon UTC+3 for the latest update.

P.S.: The insights from the website design I’m doing live + in-depth description of each step of the process will be included in the book I’m currently working on, called Harmonious Web Design.

By the way…

I wrote a design email-course that explains in detail some of the principles that guide my design decisions, you should check it out:
Get the Rest of the Course