How to Write a Tutorial for a Blog

Hundreds of tutorials are rejected around the world every day. They sometimes return with a reply of kind rejection, which can be discouraging no matter how much time and effort was put into it. I am going to point out some of the important aspects to cover when creating a tutorial that you can submit to the multitude of amazing design, development, marketing, or pretty much any other tutorial featuring blog, especially ours.

WHO is your audience?

Are you teaching for a specific application? Are you sharing industry knowledge based on years of experience in your field? Are you covering new and uncharted territory with methods showing game changing style? For any of these situations you want to write for the experience level of your audience. Beginners in web development wont understand complicated jargon like DOM controllers, salting passwords, or XSS attacks. If these terms are a must, explain them thoroughly and have a link to a more in depth source that users can use to research further. On the same note if you are explaining an advanced project and for the sake of not having a fifty page writeup, make it clear to the reader what skill level you are intending to address. You should generally write in a casual manner and avoid a business-like tone or one that is demeaning to your student.

A second issue to consider is reader level. Non-technical topics such as marketing or beginner focused tutorials should have lots of descriptive images to support what may be new ideas or concepts. Break up the steps with these images (usually screen-shots of the project at that point) so the reader can make sure they are caught up. Alternatively for an advanced tutorial many basic steps can be covered all at once to get to the new or complicated method that you are trying to teach.

WHAT are you writing about?

While this may seem to be answered by your idea to even begin the tutorial writing process, you need to consider its value. Are there already five other very similar tutorials posted about your topic? Are any of them on the prominent blogs in the same field? There is no point in writing a tutorial about how to grunge up your logo if Smashing Magazine, PSDtuts, and Tutorial9 have already covered the exact same thing; unless you have something new to offer. Have you found a way to simplify the process or make it look more realistic?

I saw a tutorial on GoMediaZine about creating a repeatable pattern from a photograph texture, which was well written and thoroughly explained the process to anyone who didn’t want to figure it out for themselves. Reading through the comments though I came upon a user who explained a way to remove half the steps by using a different method to align the different sides.

Before you write any tutorial, think about what you are trying to teach the reader, and what you want them to take away from it. Using different wording can produce different outcomes for what people are able to take in and use themselves.

HOW will you teach the reader?

Video tutorials have become pretty popular with access to the tools to do so becoming more widely available and easier to use. You can use a screen-cast format, where you are recording the movements of what you do on screen and narrative over it, or you can use actual interview style footage that has been edited so that it fits in a concise lesson that users can follow. This method provides visual learners with insight into your methods that you may not even realize you do, such as workstation setup, layer organization, or prioritizing certain aspects of a project.

The most common method is a written tutorial broken down into steps. An important part of this is to have checkpoints where your reader can make sure they are at the same point as you and haven’t skipped over anything. Screenshots or code dumps are good at these checkpoints for the reader to compare their own work. having selectable code is important so that a reader can copy/paste that and save time, or compare line by line what may be different from theirs for debugging purposes.

A common but not necessary bonus is to include a downloadable finished PSD, FLV, or whatever other media you have just tutorialized for the reader to have at the end. This will allow them to compare the completed project to their own, but also gives them the ability to quickly modify your already finished setup for their own project. While that obviously doesn’t teach them anything, you can then admire your stolen work in places like Target, band merchandise, and spam websites 🙂

WHY are you writing a tutorial?

This question is more of a personality and reputation builder. Some people write tutorials because they want to share their knowledge with others and improve the field as a whole. Others may just do it because they get a check. Sometimes it is a “benefit for all” situation where publicity raises awareness of both the publisher, any highlighted applications in the content, and the author. Or it could just be for the lulz.

Hopefully you have a goal of teaching something to someone buried somewhere in your intent. This comes along with some important tips for writing: when explaining something, EXPLAIN IT. Don’t just say “add blur” but show the process path FILTER>BLUR>GAUSSIAN BLUR> set the bar to 12. Dont bother to write a tutorial if you cant spend more than 15 minutes dumping whatever comes into your head. Review your own tutrorial for spelling, grammar and clarity. Even better, have a friend read it and see if it makes any sense to them.

Final Tip: watch the comments on your tutorial, and try to answer any questions users may have.

If you would like to submit a tutorial to Uncharted Design, the original post invited readers to email us for review. We were always open to offers of joint work on development or design projects.