Website design (development) workflow in Japan

website creation workflow

Chibi

I’m thinking about being a freelance web designer.
I always get trouble communicating with my clients.

Chibi

Chibi

What’s the process to make a website for my client?

If you have these questions, I’m here to help you.

This is an ultimate step by step bigginers guide to make a website for a client.

Step 1
Website Audit
Interview your client and get information as much as you can
Step 2
Information Architecture
Create a sitemap to see how much is the workload.
Step 3
Submit Quotation
Now you know what they want and how much work it takes. Estimate the cost and submit your quotation. 
Step 4
Contract and Payment
After your client accept your offer, make a contract and receive a half payment in advance. 
Step 5
Wireframe
Wireframe is a blueprint of the top page to decide the layout and contents.
 
Step 6
Design
Create the website design by Photoshop or Illustrator, Skitch etc. You could outsource your work after this phase.
Step 7
Coding
Create website by coding with HTML/CSS/Javascript etc. 
Step 8
CMS building
If your client wants to update contents by their own, build in CMS such as WordPress etc. 
Step 9
Provide with Traning
Provide with raining on how to update contents, CSS etc. 

Chibi

A lot of work…
Yes. But some clients are very particular with the design etc. It’s all for the best.

heyshoworldwide

Fyi, I have been working for web development for 6 years and made a lot of website for 5 star hotels.

I also worked for freelance at the same time and learned a lot from mistakes.

Hope I can share some useful information with you.

Step 1: Website Audit (Interview)

Ask questions and get as much information as you can.

Here is a template for website audit. Would be the best to meet your client in person and ask questions, not sending this form through E-mail. They usually don’t like any document works.

Download Website audit template file (Jump to Online Excel)

Step 2: Sitemap (Information Architecture)

sitemap

This is to estimate how much work we are getting.

Excel is the easiest way to manage it. Here is the template for you.

Download Sitemap Template file (Jump to Online Excel)

Step 3: Submit a quotation

After creating their sitemap, you will be able to estimate the cost for website creation based on the project outline and how many pages you are going to create.

Download Quotaion Sheet Template (Jump to Online Excel)

Step 4: Sign a contract

quotation

If your client accept your offer, sign a contract.

It is important to put a note in the contract, for example the maximum number of modifications etc. 

Download Website Design Agreement Template (Jump to Online Exel)

Step 5: Receive the half payment

Payment

It is common to receive the half payment in Japan before you get to work on a design.

Who knows your client might not pay you and keep ignoring after you submit your work?

 Download  Microsoft Office Invoice Templates (Jump to Online Exel)

Step 6: Submit a wireframe

Wireframe is a design to show the content’s layout and structure for the website top page or sub page.

It’s always good to share with your client how you organize the layout and information before start working on the actual design.

 Ref  Use Wireframe Templates to design websites and mobile apps | Microsoft

Step 7: Ask for logo, texts and images

It usually takes time for the client to prepare those materials.

There are some websites for dummy texts and images in case.

 Ref  Ipsum Lorem (for dummy texts)

 Ref  placeholder.com (for dummy images)

Step 8: Create design

Some people skip this step to cut the cost but I would recommend you to create design first by Adobe Photoshop / Skitch / Illustrator etc.

You could outsource the design on cloud sourcing website such as Upwork, freelancer.com etc.

Step 9: Coding for home page and subpage template

Framework like Bootstrap would make your job much easier since you don’t have to worry about responsive design and css.

All you have to do is build the components and customize CSS.

Make sure it works on mobile and check if there are any errors before submitting.

Step 10: Build on CMS (WordPress etc)

CMS (Contents Management System) enables your client update the website without HTML/CSS knowledge.

It’s got huge demand because frequency of updating and creating new content is a key factor to get traffic to your website.

Step 11: Provide with training for contents creation

I’ve seen tons of websites that does not have formatted contents strategy which makes me feel harder to scroll on their website.

Good websites generally have a good guideline for contents on the page to make it looks nicer.

Provide with training sessions or documentation of the guideline to those who in charge of contents creation so that they would not mess up the website after a few years.

Step 12: Get approval and send invoice to your client. Receive the rest of payment.

Approval

Keep in touch with your client, and make sure if they are satisfied with your work. 

Don’t be afraid to ask your client to introduce you a new client.

Conclusion

Generally speaking, begginers tend to struggle communicating with clients.

It’s not all about skills, but we need to have a project managing skill as well.

Success is not final, failure is not fatal: it is the courage to continue that counts

by Winston Churchill

Thanks for reading my article.

If you like the article, please share or leave your comment.

https://heysho.com/en/wp-content/uploads/2018/08/guy1.png
Heysho

Arigato!

Leave a Reply

Your email address will not be published. Required fields are marked *