How To Design Your Own Website From Scratch Like Professionals Do

Planning & approach to a website design project

For long I’ve wanted to start a series on how to design your own website like a professional website designer. This has a two-fold purpose:

  1. To give an insight on what is takes to design a website, like a professional, not like a rookie.
  2. To help people understand the internals of what goes on and into the process and learn new skills.

This is the first post in the series and I am hoping to cover a lot in this series; especially the nuts and bolts, citing external resources and some pro tips on how things are done. I will reserve these details for the next post. Let’s start with an overview of what goes into designing a website like a PRO:

A simplistic approach to the design process

Typically people have a very simplistic understanding of what goes into a website:

  1. Install WordPress
  2. Find a great theme
  3. Customize it
  4. Install plugins
  5. Verify functionality and launch

The professionals’ approach to website design

However professionals take a more thought-through approach to the entire process.

  1. What are you trying to achieve with the website? Short-term goals, long-term goals, how will success be measured.
  2. Depending on these goals the next step is to determine if it’s going to be a theme customization or if it is going to be a full custom design.
  3. Do you have an existing website? Where does it fall short? What does it do well?
  4. How content is going to be structured, what content goes where… how many key views are going to be there?
  5. How are we going to draw eyeballs and drive traffic to the website?
  6. What will the conversion funnel look like?
  7. How can we build a subscriber list?
  8. Determining the call-to-action and the conversion process.
  9. Technical implementation: wireframing / design mockups, creating the actual design in Photoshop / Sketch / Illustrator, implementing it into the actual site using code (hand-written or plugin-based etc).
  10. Reviewing and optimizing the site for mobile-friendliness and hiDPi devices.
  11. Pre-launch optimization (W3C Validation, Cross-browser testing, etc).
  12. Performance analysis and ongoing improvements / evolution.
  13. Executing the search and social media strategy.
  14. Designing the content strategy that works for your website.
  15. Additions and improvements (adding new features, creating landing pages, etc.).

As you can see these two approaches are poles apart. While one focuses on technical implementation, the other focuses on business success. It’s this approach that determines if your website will survive beyond the first three months.

Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works. –Steve Jobs

It’s not design, it’s engineering and web-architecture!

Thus you can see that the skills required to professionally execute such a process are different. It not only takes craftsmanship but also a knack for planning the process to the last detail and devising a success strategy.

Excited about designing your own website? Interested in learning a trick or two from a pro? Watch this space for the upcoming post in series. And do not forget to subscribe.

Part 2: Understanding What It Takes To Design Your Own Website Like A Professional

Posted In:

UX & Frontend Design, Diy-design

Comment on How To Design Your Own Website From Scratch Like Professionals Do

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