How I Design A Website From Scratch (LIVE)

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:

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

To be continued

Overcoming your fears of “big” web projects

Did you know that ants are omnivores? They eat both plants and animals.

And when I say "animals", I don't mean something just a little bit bigger than an ant, like a bee, I mean much larger animals, like… birds. If you have the nerve, google "ants eating a bird".

So, what does this have to do with web design?

A lot.

Picture this: an African elephant lying on its side and sleeping. A very ambitious ant comes and bites the back of its leg.

Question: Does the ant have to chew?

I'm just joking :D The real question here would be,

Could an ant eat an entire elephant?

I mean, ants eat birds, so, technically, if there are enough ants…

But what if there is just one ant? Is it possible that it could eat 5.5 tons of matter alone?

Now imagine that elephant is actually that big scary web design project you're working on. Or even worse—the project you haven't taken, because it is big and scary!

When you look at it you feel like a tiny ant. You feel like an ant that couldn't possibly take apart the largest animal on Earth.

Paralyzed, you think:

Ugh, I'm just not smart enough, good enough, or fast enough to do even a simple job on odesk or elance. I'm kind of intimidated to go searching for paid freelance work at this point.

I totally get where you're coming from. I've been the ant a lot of times.

We all have. And our ant mouths don't grow that much during our lives. We don't get bigger. We just get wiser and our strategy changes.

But when you don't have a strategy, looking at a web design project is intimidating because of:

  1. The size of the elephant. You're thinking of eating an entire elephant. You've no idea how to do that and you get overwhelmed by the sheer volume of the thing.
  2. The size of your bite. You think you have to bite, chew and swallow an entire elephant at once—impossible!

How to eat an elephant (or "How to start and finish your first web design project")

Like an ant. With a strategy.

Remember our ambitious ant? Well, to eat the elephant it kept going back and tirelessly (we know how ants are) took small pieces, one by one.

In a day, one of elephant's toenails were gone.

In a month, the whole elephant was gone.

The ant eventually took it apart and ate it, piece by piece.

But not the pieces we normally think about like trunk, ears, legs… no. It worked at it in tiny, tiny bits.

If the elephant was sliced into pieces and you just knew that you had to carry 100 of these tiny blocks today from point A to point B, you'd be a happy ant. That's a clear and achievable task.

But if your task was "carry that elephant by yourself from point A to point B", you'll feel overwhelmed, because, you can't carry a whole elephant. You are just an ant. That would be impossible.

It's the same with a web design project.

If somebody could tell you "Pick a typeface that represents this adjective", then "Make this headline stand out from the rest of the text" and so on, your tasks would be relatively easy. Not because they don't involve actual work, but because they are simple and well defined. They are within your reach.

Well, that somebody is you. You are the one who has to determine what your tasks are.

And you have the power to make this easy on you.

Here's how you could go about a web design project without feeling overwhelmed:

Step 1: Chop

The first thing you need to do is chop your project into small manageable tasks. The tasks have to be so small and clear that you can do each of them in under an hour. The moment you do that, you'll feel comfortable. You'll feel like you're making progress each time that you scratch off a task.

There is no limit as to how small your tasks should be. The smaller, the better.

Do you think "Make a web site" is a single task? A task that is well defined and you know exactly what completing it looks like? I bet it is not.

Can you do it in an hour? Though you can make a website in an hour I doubt it is what you want it to be.

But "Using the brand's colour scheme Pick a contrasting colour that could be used for highlights and button hover states" is a small and clear task that can be done in less than an hour.

Step 2: Pack a dish of the finest meat first

Once you have the chopped pieces you will see that not all of them are of equal importance, value and taste. Not all of them are from the fine meat parts of the elephant.

Your next step is to pick only the finest ones, the ones that are the most important—their number will be far less than the total sum of elephant pieces. These are the tasks without which you won't have a website at all.

Focus only on these pieces. You want a very small number of teeny-tiny elephant pieces that you can eat in one session.

Make sure you don't overeat—a puking ant will be reluctant to get up and eat another batch of elephant meat tomorrow.

The goal at this step is to get to v0.1 of your project as fast as possible.

For example

v0.1 of a website would just be you having the copy semantically marked up in an .html file.

So, the most important task at this point would be "Get the copy". It's not "Choose a font" or "Choose colours".

At the same time, having the contents of each page in HTML format basically gives you a website. You can ship it now. It is ready. Far from perfect, but it is able to serve the core purpose—get the content in the hands of the audience. Of course you would want it to be better than this. That's what the third step is for:

Step 3: Go back and eat another batch of elephant meat

So, you ate your first, most-important and most-precious batch of elephant meat. These were the delicacies.

If you have chosen correctly you should have got the core of the problem out of your way.

You got the v0.1 of your project. Pat yourself on the back. :)

The solution might be sketchy, but it is a solution. It may take some more rounds to release it, but every version gets better.

Going back and making it site better is another iteration. Which produces another version of that site.

Working in iterations is probably the most important, most basic skill you'll ever need as a web designer.

When you've done something many times (many iterations), every next iteration adds up to your knowledge of what worked and what didn't in the past. In the end you've discovered what you know works for sure.

By shortening the work cycles you also shorten the learning cycles. And because we learn the most when we look back at something you give yourself more opportunities to look back, assess and build experience. All in the same project.

Also, iterations help you get this out of your way:

OMG, I have. to. nail. this. design! I have this one chance to do it!

You don't. It's not set in stone. You can always go back and choose another font, experiment with the white space, switch the layout and so on.

But when you have a finished product (though not perfect), it's much easier to tune the details.

When you complete something you feel happy. And the results you get from having many iterations are what makes you feel successful.

Takeaways

  1. Don't pile a list of tasks that you think you need to do. Pick the most important set of tasks that will help you finish and release a version of your product.
  2. When you get the structure right, it's much easier to add detail and more detail, and more detail. Don't start with the details. Start with the structure.
  3. Each released version is a small win. Whether we like to admit it or not, we all have a psychological need to see our efforts rewarded. I do and you do, too. You have to be able to feel that you're making progress. And you are the one who decides what counts as "making progress". Hack your rules so that you win every time. To do so, lower your standards, because:
  4. Completing many small tasks creates momentum and puts you on a roll—you want to work more and more. Before you know it, you'll have eaten the elephant.

Go ant! You have the strategies and tools needed. Elephants are shit-scared of you now :)

P.S. Still not sure how to complete your first web design project?

No problem. You'll have the chance to peek over my shoulder as I work on chopping a small elephant and explaining exactly what I do and how I do it on each step.

All of that info will be in the ebook I'm writing where I detail the way I go about designing a website. Inside I describe a step-by-step process using a real-world project as an example. More info coming soon!

How to get work when starting out as a web designer (and you still don’t have a portfolio)

You’ve been learning HTML, CSS, and JavaScript and have just built a simple WordPress Theme from scratch.(Congrats! That’s not a small feat!)

You can do at least basic website development but, sigh, that won't get clients swarming your inbox or a job at a digital design agency.

So, what now? Experienced people on reddit say that you have to start building your portfolio.

And there you go: re-designing and re-developing a website for a non-profit. For free.

Continue reading How to get work when starting out as a web designer (and you still don’t have a portfolio)

Feel stuck after learning HTML&CSS? Here’s how to create websites on your own

You have read a few books on HTML & CSS and know how to create websites yourself.

You know how to find the resources you need (when you don't know what to do).

The thing is, you are not sure where to go from here.

Every book and article you read is just the same stuff: explains html, tags, and css selectors, properties etc.

More front-end matters and less what you truly feel missing… an answer to the question that made you reach for books in the first place.

Now that you know HTML and CSS what is the next step to actually start creating websites yourself?

Do you have to learn how to:

  • lay them out
  • design them
  • put everything together?

Or is there something else?

Continue reading Feel stuck after learning HTML&CSS? Here’s how to create websites on your own