The System I Use To Write

There are countless amounts of written tutorials out there on the web on a variety of topics. If you’re one of those who need to be constantly putting content after content out there, wouldn’t you love to know of ways to speed up your writing and make you more efficient? In this article, I’ll be presenting a system that I use to do just that.

This guide applies to tutorials, but could also apply to other forms of expository writing.

How do you create your tutorials involving step-by-step instructions? Previously, I would just start writing, without a pre-planned approach of going about it. I would be explaining some step and be in a nice state of concentration, then I’d reach a point where I had to include a picture or some other media for a more visual description. I would be jolted out of my flow as I tried to look for a suitable image or take a screenshot. This happened frequently, and it slowed down my writing and prevented me from focusing properly.

However, with time I developed a system (open for further refinement of course) that I now use to improve the speed at which I write tutorials, whether on Medium on or my blog, or anywhere else.

There are four major stages in this system:

1. Outline

Quickly write out a short summary of the entire article to have a clear and full picture of the knowledge you’re trying to pass across. You can include key points that you’re going to explain later on. Don’t worry about expressing yourself very well at this point. You just want to get a grasp of what the entire article will be like. As you create this first draft, you will encounter points in the tutorial where you’ll need to include demonstrations like imagery, video, code (for a programming tutorial), etc. Use identifiers like img:, code: and video: to mark them.

Here’s a sample article, where I’m writing about how to use colour in CSS:

2. Demonstrate

After laying out the foundations of your article, the next step would be to start including the necessary assets required for demonstrating the steps in the article to the user. If you need to add some code, write it now and include it. Embed any videos you need to make reference to and create relevant screenshots.

Here I’m including HTML and CSS code in the article to show how to use the background-color property:

I also included a snip, showing how the file containing the code would look when a browser opens it:

I did the same when describing the color prop. Markup and styles to show how to use it:

And how it would look in a browser:

3. Explain

At this point, you should start explaining the key points of your article in more detail. Now is the time to put in the mental effort required to express yourself suitably and present your steps and directions properly. Don’t worry about text formatting, image captions or adding links yet. These things will hamper adequate concentration and break your flow.

For this step in the article, here’s what I put out — a short intro and an explanation for the background-color property:

I did the same for the color property:

4. Polish

This is the final stage, where you add headings, links, image captions, and fix possible misspellings. Make it look good.

I used a picture of a nice colourful bunch of flowers for the cover image:

And the article was done.

Why Use This System?

1. Write multiple articles concurrently

With this structured approach, you can create multiple articles at once. For example, you could outline 5 different articles at a go, then add demos to them later all at once.

2. Stay in the flow

The most mentally tasking stage of writing an article is the point when you need to express yourself and put your thoughts into words. By batching tasks that don’t require much concentration together — “shallow” work (as coined by Cal Newport in Deep Work), you can give yourself long uninterrupted time chunks to focus on creating valuable content and enjoying the flow state.

This is the system I use to write my articles now, and it has definitely made a difference in my creation speed and level of concentration.