When I got started in web development, I never knew where to start when creating a new website. I was overwhelmed by possibilities as if I was looking at a blank canvas and didn't know what to draw.

Over time I came up with a process that helped me not only getting started. It also helped to make the websites more user-friendly and better looking.

In this post, I want to share this process.

The Preparation

As a first thing, I force myself to close the code editor, as I'm always tempted to just dive into coding right away.

Then I start to think of the purpose of the website. Do I want to inform the visitor about something? Do I want them to sign up on some newsletter or is it something totally different?

Now having this in mind, I'll think of what people most probably visit this site for. This can be things like business hours, pricing, follow-up links, or any other kind of information.

Afterward, I write down what I want to say/show on my website. This doesn't have to be the final version of your texts. Normally I spend time in the end to polish copywriting.

The most important part here is to bring your content into a structure that makes sense. Use lists, tables, paragraphs, quotes and more.

Now having your content structured you can get started on making it look good.

The Design

Often I already have ideas for the specific elements in my mind. But it sure helps to check out other websites for inspiration.

I don't look at the whole website for inspiration. Instead, I look at the specific structures, I came up with when I wrote down the content. This way I don't force my content into some template, which doesn't really match. This could look like this:

Then I take a paper and draw the structure of my site by roughly sketching the elements I have in mind or that I've found on my research.

Afterward, it depends on the scope of the project if I convert this drawing into a proper design by using design tools like Figma, Sketch, or Adobe XD. Usually, I skip this step as I mostly work on small projects.

The Coding

Then the (for me) fun part can begin: coding the website.

First of all I decide if I want to go with a design library or want to create everything from scratch, depending on the design/draft, created in the previous step.

I rarely finish the whole website in one take. That's why I always leave TODOs and refactoring comments in the code or in the README, while I'm in the flow of coding. This helps me to get back into the project when I don't feel motivated. I just pick up a small refactoring and often end up coding more than I originally planned to.

Finalizing it

When I'm happy with the result I always verify that:

• the website is fast with Lighthouse or Pagespeed Insights
• the website is accessible with WAVE
• that the website has proper SEO with Seoptimer

What's your process? How does it differ?
Please let me know in the comments :)

Cheers, Vincent