The process of building websites
The process of building websites
Feiliang Zhou

The process of building websites

#webdev#CSS#beginners#programming

The process behind building a website

  1. Define
  2. Plan
  3. Sketch
  4. Design and build
  5. Test ans optimize
  6. Launch
  7. Maintain and update
#1 Define the project

  • Define WHO the website is for. Is it for yourself? For a client of your agency or your freelancing business

  • Define WHAT the website is for. In other words, define business and user goals of your website project (Providing information? Selling something? Entertaining the users?)

    Business goal example: Selling premium dog food User goal example: Finding high-quality dog food for good price

  • Define a target audience. Be really specific if possible and if it makes sense for your website

#2 Plan the project
  • Plan and gather website content: copy(text), images, videos, etc.
  • Content is usually provide by the client, but you also can help them produce and find some content (simply finding free images is easiest, but if they want copy, charge them for extra)
  • For bigger sites, plan out the sitemap: what pages the site needs, and how they are related to one another (content hierarchy)
  • Based on the content, plan what sections each page needs in order to convey the content's message, and in which order
#3 Sketch layout and component ideas
  • Think about what components you need, and how you can use them in layout patterns
  • Get ideas out of your head: sketch them with pen and paper or with some design software (e.g. Figma)
  • This is and iterative process, experiment with different components and layouts, until you arrive a first good solution
  • You don't need to sketch everything, and don't make it perfect. At some point, you're ready to jump into HTML and CSS
#4 Design and build the website
  • Use decisions, content and sketches from Steps 1, 2, 3 to design and build the website with HTML and CSS (designing in the browser)
  • You already have the Layout and components that you selected in Step 3. In this step, you need to design the actual visual styles
  • Create the design based on selected website personality, the design guidelines and inspiration
  • Use the client's branding (if it exists already) for design decisions whenever possible: colors, typography, icons, etc.
#5 Test and optimize
  • Make sure website works well in all major browsers (Chrome, Safari, Edge, Firefox)
  • Test the website on actual mobile devices, not just in DevTools
  • Optimize all images, in terms of dimensions and file size
  • Fix simple accessibility problems (e.g. color contrast issues)
  • Run the lighthouse performance test in Chrome DevTools and try to fix reported issues
  • Think about Search Engine Optimization (SEO)
#6 Launch the masterpiece
  • Once all work is done, everything is perfect, and you got approval from your client (or yourself), it's time to share your masterpiece with the world!
  • Upload your website to a hosting platform. There are countless platforms.
  • Choose and buy a great domain name, one that represents the brand well, is memorable and easy to write
#7 Maintain and keep updating the website
  • Launching is not the end
  • Keep the website content updated over time. If you're working with a client, you can create a monthly maintenance contract (recurring revenue)
  • Install analytics software (e.g. Google Analytics or Fathom) to get statistics about website users. This may inform future changes in the site structure and content
  • A blog that is updated regularly is a good way to keep users coming back, is also good for SEO.