Super Guide on How to Write Web Design and Development Tutorials

Door globecom op zo, 2014-12-28 14:28

Are you ready to get started writing about Web Design?

A few months back, I wrote an article called “Secrets of Learning Web Design and Getting Paid While Doing So”, where I introduced how writing about web design can improve your knowledge and at the same time make yourself some money.

It was a real success judging by the response it got. Many of you wanted to take on the challenge. Today I am going to take the first step by revealing the secrets of writing top quality tutorials.

Writing is an art which needs to be mastered through practice. So let’s take the first step of a long journey as a web design writer.

Keep in mind that we have two major goals. Learning web design and use that knowledge to generate a good income. We have chosen writing as the path which takes us towards our goals.

This is what You wanted to Know

I received hundreds of suggestions, questions and concerns when we published my article (linked above). It wasn’t a surprise to see that all of you that wanted to follow this path had two major questions:

How to write web design and development tutorials on popular topics and get noticed?
How to get writing opportunities with popular design blogs and get paid?

Nothing can be achieved instantly. So I’ll start with answering the first question throughout this article. Once you establish yourself as a good writer, we can see how to get paid for writing.

Your Focus as a Writer

As a beginner, your ultimate goal should be to get as much feedback as possible, regardless of whether or not it’s all positive, from your readers.

Positive feedback means that:

You are providing what readers expect you to provide.
You are increasing the possibility of getting paid for writing.

Negative feedback means that:

Your content is common and the readers are not interested in seeing more of the same tutorials.
You are providing content that has mistakes, due to lack of knowledge. Feedback will help you learn and not repeat the same mistakes in the future.

Don’t try to produce content just to get negative feedback and learn from it. Instead try to be controversial.

The definition of controversial is: giving rise, or likely to give rise, to public disagreement.

When you write about controversial topics, always make sure to state that what you’re writing is your opinion. Don’t ever state that your opinion is right or the best way of doing things, but that it is the way you prefer to do things.

Responsive design might be a good topic for sharing controversial opinions. Everyone is saying that RWD is the future of web design. You could mention that RWD isn’t yet the right solution by talking about the layout issues in fluid grids or bandwidth issues on mobile devices.

Before starting to write for web design blogs, you should be familiar with what makes the best content. The following infographic illustrates the crucial aspects of what makes the best content.

Credit – http://www.mattaboutbusiness.com/what-makes-the-best-website-content-infographic/trackback/

Now let’s pick some topics to write.

Pick Trending Tutorial Types

Every tutorial is unique in its nature of expressing ideas even though they make get different results from readers. You will always have ups and downs with each new tutorial. Picking the right type of tutorials will help you to stay on top. Certain types of tutorials are preferred by users and it’s wise to learn about them to make it success. Following is a list of top trending tutorials to get more results as writers.

Screencasts

preview-large-basicwebdesignvideocoursepart2

A screencast is a video recording of your computer screen while you explain how to do something. These are one of the most popular type of tutorials, as readers can see how it is actually designed in real time. In order to do screencast tutorials you will need a quality microphone, screen recording software, and a lot of practice to get it right.

Now let’s look at some general guidelines for creating quality video tutorials.

Make sure to explain every step in a simple manner while going through the tutorial. Since most people are visual learners, they tend to ignore the explanation.
Include some background information about the tasks you are doing. For example, consider a situation where you design a responsive layout. Using media queries is one of the core tasks in responsive design. Before you start working with media queries, provide a brief introduction about what they are.
Usually we create the design first and finalize with necessary modifications before starting the screencast. Then we do the design again for the readers by recording it. Since we have done it before, we know what exactly will happen at each stage and ideally we’ll show the output after every step so that viewers will know the importance of each step.

Creating a video tutorial is an extremely entertaining task compared to writing tutorials. Also readers also seem to prefer video tutorials. So here at 1WD we decided to create some awesome video tutorials for web design beginners. As a beginner tutorial writer, these resources will help you to master the art of screencasts.

Here are some of the top screencasts for you to learn,

Step by Step Design and Coding Tutorials

Even though screencasts are popular, there are not many video tutorial resources online compared to those for written tutorials. Therefore the next most popular type of tutorial are step by step design tutorials.

In these tutorials, you have to create a complete design or part of a design from scratch. Most of these tutorials have a demonstration of the design and code files for the readers to download. Hence the final output will be a working design ready to be used by your readers.

As a beginner, you should be mainly focusing on these type of tutorials as it doesn’t require you to be as experienced. You can design whatever you want and teach readers how to be more creative with the given design.

So let’s take a look at some cool examples for step by step design tutorials.

Writing these type of tutorials is not difficult as long as you have some creativity and knowledge of the expectations of your readers. Here are some guidelines I recommend following for step by step design tutorials.

Break the design code into small chunks and explain separately.
Include screenshots of important steps of your tutorial.
Make sure to have a demo for the tutorial in every possible situation. It would also be ideal if you can show the demo after each important step so that readers know what they are doing.

Trendy Tutorials

This is another popular type of tutorial since every designer and developer wants to stay up to date with the latest techniques. Even though I refer to is as trendy, we can also consider the latest versions of a popular library or service for these type of tutorials.

Responsive web design is the most popular trending topic currently. Also the new features of the latest WordPress version is another popular topic.

Success of these tutorials depend on how early you publish them. You will get more results when you publish a tutorial just after a new version has been released or new concept has been introduced.

This list contains some tutorials on current trends for your reference.

Now you have the knowledge of choosing the right type of tutorial to be a successful tutorial writer. The next most important step is to know how to structure your posts to get more attention from readers.

Catch the Attention – Make it Easy on the Eye

There is no point in writing tutorials unless people read and use them. So getting visitors to see your tutorials is important for writers and website owners. The most important thing is the first impression on your article.

There are hundreds of websites that have tutorials on web design and most of the regular readers will be looking at their favorite sites on a consistent basis. They definitely they don’t have enough time to read all those articles. So how do you get them to read yours?

“Time is what we want most,but what we use worst.”
― William Penn

It’s a must to grab their attention instantly within the first few sections of a tutorial. A catchy heading is one way of grabbing attention. Once you have their attention it’s important to keep them interested through the first few sections of the article. So let’s see how to structure posts properly to keep users interested and make it easy on the eyes to read.

Before we get started, let’s take a look at the structure and design of 1stWebDesigner tutorials for a perfect illustration of making it easy on the eye.

Screenshot-1712

You can see that the post is structured in a way that is easy for readers to go through the tutorial without any distractions.

Writing tutorials with long and continuous paragraphs is the easiest way of demotivating the reader. I tend to stay away from this kind of a tutorial as a reader since I cannot figure out whether the tutorial provides what I want.

I feel tutorials are well structured if the reader can trace the most important contents and get a summary of the tutorial just by looking at the post without reading much. Obviously it means that the tutorial should contain different sections, so that we can track the sections separately.

Let’s explore the different types of content to create well structured tutorials.

Headings. Headings are one of the most important factors in writing tutorials. There should be a set of main headings mentioning the main points of your tutorial. Then sub headings are necessary to break down main points into smaller points. Most tutorials on 1stWebDesigner use proper headings and you can refer to almost any of them to get an idea about proper headings.
Paragraphs. Tutorials should contain short paragraphs whenever possible. Don’t use more than 3-4 sentences in a paragraph. Readers get bored quickly when they have to read long paragraphs. Readers will have to read through the whole paragraph to get the idea. So keep it short and straight to the point.
Images or Screenshots. Images makes things easy for readers in design related tutorials. There are two types of images. First, using general images to display a picture related to the tutorial or some kind of a diagram. The second, and most widely used, is the screenshots where you capture the screen several times while doing the design. Screenshots are a must-have for tutorials which result in something the reader can download. After each important step you should be placing screenshots of your design for the reader. Consider the following image:
Source Codes. This content comes with design specific tutorials. Source code is a great way of breaking long paragraphs. Sometimes we see tutorials where we need paragraphs to break source code. This is a bad practice. It’s difficult for readers to understand a considerable amount of source code at once. Therefore you should be breaking the source code into smaller chunks and provide explanations inline with the codes. Also you need the support of a quality code formatting plugin. Following is a preview of effective usage of source codes in tutorials.
Demonstrations. I feel it is a must for design based tutorials which focus on a final result. The demo is the first thing readers are going to look at when it comes to tutorials. If a demo is not available, readers are not going to trust you with your code and tutorial. So it’s ideal to have a demo whenever possible. The quality of the demo makes a huge difference to the readers feedback. Sometimes our main target is to write a tutorial to teach a certain theory. In this case a demo is not the most important thing but readers will always look for the demo and decide the quality of tutorial based on that. So if you have a demo, make it awesome.Here is a list of tutorials with excellent demos.
Quotes. Quotes is a good way of giving the reader a break. It’s difficult to continuously read through a long article. So we can place important things as quotes to break the content and allows user to think for a moment.First thing is you need a specific design that helps differentiate the quotes from other content. Tuts+What Should You Quote?I would prefer including important theories, definitions and inspirational sayings. You can find many examples for quoting in this article as well.

Now having completed the guide on structuring tutorials, I bet you would like to have a look at a complete example of a well structured article. Learn Web Design The Right Way: Quit College And Start Sucking Blood by James Richman is a great example that illustrates the power of structuring.

Learn how the article is structured and include demo’s and code to create amazing tutorials with awesome content to catch the eye of your readers.

Less is More – Minimize the Scope

The scope of a tutorial plays a vital role in its success. In my opinion it is the first, and the most important, factor to be taken into consideration.

What is Scope?

According to dictionary.com, Scope is the extent of the area or subject matter that something deals with or to which it is relevant.Basically this means the amount of range we are going to cover in a specific topic.

So why am I telling you to minimize the scope of your tutorials?

Every writer wants to cover extensive topics such as “Responsive Web Design”, “WordPress Theme Design”, “CSS Preprocessors” etc. Now the problem is these topics are very broad and experts in the field have already published tutorials on them. As beginners, our tutorials on similar topics will go unnoticed due to the high percentage of quality tutorials already available on those topics.

Our goal is to find topics which are:

a common problem to readers.
not being answered by the experts.

In order to meet both of the criteria’s mentioned above, we need to minimize the scope until we find something unique to write.

Let’s consider a practical example for identifying the importance of scope.

Assume that you have been asked to write an article related to Responsive Web Design. Usually your first choice will be something like “How to Design Responsive Web Pages” or “What is Responsive Design?” Even though both of these sound good, there are dozens of articles and tutorials already available. It doesn’t mean that you can’t get good results, just that there will be an awful lot of competition.

Now you have to look for a topic with narrow scope to be successful. We can consider titles such as “How to Handle Fonts in Responsive Design” and “Responsive Design for Large Screen Resolutions” as good choices in this situation.

Fonts are vital for to a good design, but not many tutorials will explain how to use fonts and sizes in RWD. In RWD we talk about adjusting the design to suit mobile based devices which have smaller dimensions. No one talks about how to handle responsive design in monitors with large screen resolutions.

Here fonts and large screens is a very small part of the design. What you have to do is explain and discuss these small areas in detail using examples.

“It’s not always that we need to do more but rather that we need to focus on less.”
― Nathan W. Morris

So basically we have to choose a very narrow scope in a topic with a very large scope and try to write a complete tutorial explaining it all in detail. Success is guaranteed since your tutorial will be unique among other competitive web sites.

This article itself is a pretty good example for understanding scope. Here my title covers a wide range and shouldn’t be chosen in normal circumstances. Even though there are a lot of articles about writing tutorials, none of them talks specifically about writing on web design. Hence this topic seems good, even it covers a wide range.

An ideal topic to focus on from this article might be something like “How to Choose the Right Scope for Tutorials” or “Use of Source Codes in Design Based Tutorials”.

How Do You Choose the Right Scope?

There is no defined way of selecting the right scope. I’ll share the method I am using to find the topics with right scope.

First choose any kind of topic you want to write. Assume that you have chosen responsive design.
Now search and read tutorials and articles on the topic. Within these tutorials, you can find sub topics such as media queries,fluid grids, adaptive design etc.
Then search those keywords and see if there are a considerable amount of tutorials available. If not, select one of these keywords and write the article straight away.
There may be situations where the sub topics are also covered well by many other writers. If this is the case, go to question/answer sites like stackoverflow and search questions on those keywords. Then pick the keyword with the most questions and write a tutorial explaining the keyword or part of it.
If the tutorial becomes too long, break it into a series of parts and ask the readers to do something after each part to increase the feedback.

What’s Next?

You might have a good understanding on how to write tutorials on web design now. Next will be putting the theories into practice. For that you need to read lot of quality tutorials and write your own at the same time.

I hope you remember our main goal of “Learn and Earn”. We have covered the learning part through tutorial writing. At this stage you shouldn’t be focusing on the earning part.Once you become expert in design, money will come automatically through various kinds of ways.

Write tutorials and get ready to be a paid writer. Jamal will be covering how to earn money writing in one of his future articles.

Until then let me know your concerns and what else you expect from me to boost your web design career as a writer.