Research is important to help you define your direction and goals.

1. User Interview.

Ask people from different backgrounds questions like below.

  • What kinds of things are interesting and useful when they view other personal websites.
  • How is your exploring experience? if you already have one.

2. Personal Requirements.

Ask yourself questions like below.

  • What’s the aim of the building the website?
  • What do you want to show?
  • Are they meet your aim?
  • Is there anything need to improve? if you already have one.

3. Analysis.

  • Define the Target and Users (Visitors). For me, the target of my website is to tell visitors that I’m a and what I design. My visitors generally are designers, headhunters, HRs and clients. They may come from social media, design platforms, and my resume link. Giving them a strong impression on my ability and style is my target.
  • Refine Requirements. Collect feedbacks and requirements together, and use the method, like Persona, Customer Journey Map, etc. to summarize the function and content of the website. My old website did not have a good compatibility for display and looked a little ugly, thus I wanted to update it from two aspects.
  • Assess the Resource,to determine the final requirements and the deadline. I was a novice programmer, therefore complex functions and animations were beyond my capability at that time. I ultimately decided to make the four most important pages: Home, Portfolio, Work Details and About. The other functions, like comments and works filter, would be iterated in the future. In this vision, I wanted to focus on the details, eg. responsive web design, animation, loading and so on.


I did spent a little time on design, cause there are not too much functions and contents. However, I still follow the general design process — sitemap ->wireframes -> visual design.

1. Sitemap.

Organize the functions and contents in a structural way. In general, the sitemap of a personal website is quite simple.


2. Wireframes.

Representing the skeletal framework of a website, wireframes show the basic layout of contents and the relationship among each page.


3. Visual Design.

I made a brief guideline, which was based on my personal branding.


Learning coding had always haunted me until I started to build my website.

I used Atom and Chrome DevTools to code and debug. The process is a cycle of code -> compile ->debug and will repeat again and again until everything is OK. There are some tips I suggest is helpful for the like me.

  • Just do it. Knowing every detail about HTML, CSS, and Javascript is unnecessary. Just coding while learning.
  • Learn from others. It’s really helpful to learn from other excellent websites by reading their codes. However, that’s not mean to do the copy and paste work. Understanding the method, and converting to your inner knowledge is the point.
  • Keep searching. Don’t know how to achieve the wanted effects? Too many bugs? Why does it not work? Actually, everyone meets the similar questions, so that you are not alone. Take it easy to deal with problems one by one. Use Google to search keywords, and the majority of problems can be solved. If there is no proper answer, go to online communities, like Stack Overflow, to ask other expert developers.
  • Track Statistics. Once start a website, the top 1 goal is to get more traffic and subscribers. A tool to track statistics is vital, for it helps you to understand visitors and make a data-driven decision of each iteration. I use Google Analytics to do this. Sign up Google account, follow it’s steps to get tracking code and paste it into the head of HTML files. Then, you can monitor your website anytime and anywhere. Google Analytics also provides tutorials on the Youtube.
Google Analytics


After completing the above steps, the final work is to upload the codes and media resource (e.g. images, videos, sounds) from localhost to server.

Check out the website online, and invite friends to test it. If there is no problem, you can public the domain name (URL) on social platforms to welcome new visitors.

That’s the end of building a website, but the beginning of operating it.

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here