The reverse engineering and stealing for learning

Have you ever tried to think how something works? Going back from complete product backwards into the bare principles? If yes you probably used reverse engineering. The definition of reverse engineering is: “It is a process of extracting knowledge or design information from anything man-made.” When you are practicing reverse engineering, you are trying to create, re-create or copy something already existing.

In web design, you can imagine reverse engineering as decomposing or deconstructing web page into individual elements and figuring out how does everything works and how can you replicate that. Let’s take a look how you can use reverse engineering and “stealing” for learning web design.

Learning through reverse engineering

Reverse engineering is great tool to enhance your design and development skills and to get better as Web Designer and Developer. One way of to use it for learning is to replicate already existing websites without looking at their code. Find some well designed page and take a screenshot of it, I use qSnap addon for Google Chrome, then jump into your IDE (brackets is very good and free) and try to create a copy of that page or even better, improve the overall design if you feel confident enough.

By doing this you will not only practice coding, a lot. You will learn how to find different ways to get things done. None says that you have to do walk only through beaten tracks, find your own. It might not look like that, but you are also going to level up your design skills. In order to replicate some design, you have to watch very carefully and examine every detail. With time as your design skill progress, you will start to ask yourself “Why is something designed in that particular way?” or “Would this be better here or there?”. This is great exercise for your creativity and reasoning. When you find a better way, always question the reason why is this better than the previous. Don’t do anything just because of sake of that, always look for reason and purpose.

Another way is to copy or “steal” only individual elements of the page. Many great designs on the Internet are rather Frankenstein’s monsters than sparks of pure independent inspiration. This is also how innovation often works. You join or intersect different industries or things or whatever and create something new from this connection. Web design is the same. You browse through many interesting websites and suddenly you spot beautiful navigation here, great looking footer there, smartly done interactive sidebar and other many things. What is easier than snap a picture of these websites or just of the elements which caught your attention.

Next thing you can do, if you have some time is to replicate the element right on in the moment on pages like Codepen.io. On this online IDE and similar ones you can easily re-create anything you can imagine like in your default “offline” IDE. This has an advantage of not postponing it for later or forgetting it at all.

When it comes to “stealing” parts of pages or individual element, don’t just copy and paste the code. This is pretty foolish and will teach you nothing. First, don’t copy anything you don’t understand. Find out how & why that particular stuff works and then re-write it by yourself. Try it without looking at the code at all. Challenge yourself a bit. By re-writing the code you will push yourself and train your memory much more than just by reading and copy & pasting. To prove this think back to your school days. Did you remembered better what did you hear or what did you hear and also make notes from? Exactly, the more senses you use the stronger is the connecting in your memory. Rule is simple … “If you want to use it, understand it and re-write it!”

Summary

Reverse engineering and stealing, when done right, can have significant impact and influence on your skills and learning curve. Don’t fall in love with the common illusion of independent creativity. The best designs are often composed from elements and parts originating on many other pages. Design and innovation in itself frequently emerges from intersections of different things which inspire you rather than from some spark of sudden creativity. This is what I consider as following the Picasso’s quote: “Good artists copy, great artists steal.”

If you liked this article, please subscribe so you don't miss any future post.

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal