How Beginners Can Design Like a Pro in Webflow

This article answers that question.

✓ What this article covers

• How a beginner can make a design that looks professional
• Roughly how long it takes to build a website in Webflow
• How to build a website for the least money in the least time

I build websites with Webflow for a living, earning around ¥300,000 a month from it. This blog is built and managed in Webflow too, and was made by working from a Webflow template.

Drawing on that experience, here is how a beginner can make a design that looks professional.

How a web beginner can use Webflow to make a design on a par with a professional

The procedure is the following five steps.

• [Step 1] Copy a website from the Webflow showcase
• [Step 2] Change the fonts
• [Step 3] Change the colors
• [Step 4] Photos and block widths
• [Step 5] Put the copy in

[Step 1] Copy a website from the Webflow showcase

All you do is pick a cloneable design from the Webflow showcase.

For showcase recommendations, see this article.

[Step 2] Change the fonts

Put a Japanese font into the site you cloned.
Safe choices are Google Fonts such as Noto Sans and Sawarabi.

For how to install fonts, go here.

[Step 3] Change the colors

Giving the footer a darker color than the rest of the site makes it look balanced.
If you are stuck on the overall background color, the tweet below from Kobayashi-san is a good reference.
They post information you can use in web production straight away, and there are plenty of other useful tweets there too. (The tweet is in Japanese, but the palettes in the image speak for themselves.)

[Step 4] Replace the photos

In my case I usually put the copy in first, but if you already have your photos ready, I recommend placing the photos first. The reason is that it lets you decide the structure of the site at the same time. It also makes writing the copy a little easier.

[Step 5] Put the copy in

Once the photos are in and you know where the information goes, add the copy along with them. If the font size is hard to read, adjust it slightly. Sixteen pixels is average for body text.

How long web production takes when a beginner starts with Webflow

Time for steps 1 to 5

Using the steps above, even a beginner can finish in about an hour. Detailed estimates are given template by template in the recommended templates article.

Time to prepare the materials

Structuring and writing the copy and preparing the images take the longest. For a single page, around five hours is a good estimate. If you are used to writing, it can be over in one to two hours.

Two ways for a beginner to build a website with Webflow with the least effort and the least money

Copy a simple template: ¥0 / 7 hours

This is the method described above, where you build everything yourself. Because you are building it yourself, the cost is ¥0.

The time it takes breaks down as follows.

• Steps 1 to 5: 1 hour
• Writing and preparing images: 5 hours
• Other adjustments: 1 hour‍
• Total: 7 hours

Outsource the photos and copy: from ¥30,000 / 1 hour

This is the method where you outsource the preparation of the copy and the photos. All you do yourself is a short questionnaire and steps 1 to 5.

If you commission me, the price is from ¥30,000 for the writing and photo preparation of a single page. This turns into a bit of an advertisement, but commissioning me is the easiest route.

The reason is that hiring a writer means the price moves with their rate, and it is hard work telling an inexperienced writer from a professional one. In my case there is no need to explain Webflow to me, and I can write copy that fits the template. I would say my experience as a web writer is more than adequate as well.

Even so, you are free to choose your own writer, so let me point you to where writers can be found.

You can find writers on Lancers, Coconala, and CrowdWorks. When you outsource, look the writer over carefully so your money is not wasted.

The time it takes, if you commission me, is about 30 minutes in total.

• Questionnaire: 15 minutes
• Checking the finished work: 15 minutes

First I send you a short interview sheet.
You fill it in, and I send back copy and photos that suit your website. The price can move up or down with the amount of text, so please get in touch first.

Conclusion: beginners can use Webflow

People say Webflow is hard for beginners, but
with the steps introduced here anyone can build a website easily.

Study a little design on top of that and you will be able to build a better website still.

Webflow can be started for free.
Start by registering and getting a feel for it.

For anyone who is thinking “I got lost halfway through,” “I want to outsource the build,” or “it has ended up looking somehow ugly,” I also take on fixes and production work, so if you run into trouble please feel free to get in touch.

‍

FAQ

How long does a beginner need to build a website in Webflow?

With the five-step method of copying a template, even a beginner can finish in about an hour. Add five hours for writing and images and one hour for other adjustments, and seven hours in total is the estimate.

Which Japanese fonts are recommended in Webflow?

Google Fonts such as Noto Sans and Sawarabi are the safe choice. If the font size is hard to read, adjust it slightly. Sixteen pixels is average for body text.

What is the cheapest way for a beginner to get a website?

Copy a cloneable design from the showcase and build everything yourself. Because you are building it yourself the cost is ¥0, and the time it takes is seven hours in total. If you outsource the photos and copy it is from ¥30,000, and all you do yourself is a short questionnaire and steps 1 to 5.

Can Webflow be started for free?

It can be started for free. Start by registering and getting a feel for it.