diff --git a/README.md b/README.md
index c228ef3..0c9f316 100644
--- a/README.md
+++ b/README.md
@@ -1,68 +1,48 @@
# Contourer
-Tool for creating svg contours for stickers images.
+Tool for creating svg contours for images.
-## Example
+![](docs/assets/contourer-app.gif)
-| **Original image** | **Contour with margin 0** | **Contour with margin 10** |
-|-------------------------------|---------------------------------|----------------------------------|
-| ![](assets/examples/phil.png) | ![](assets/examples/phil_0.svg) | ![](assets/examples/phil_10.svg) |
+## Example
As an original image you should use png pic with a transparent background.
-## How it works
-
-| Get an image | Create a shade |
-|-------------------------------------|-------------------------------------|
-| ![](assets/how-it-works/step-0.svg) | ![](assets/how-it-works/step-1.svg) |
-
-| Find a contour | Extend the shade |
-|-------------------------------------|-------------------------------------|
-| ![](assets/how-it-works/step-2.svg) | ![](assets/how-it-works/step-3.svg) |
-
-| Color it black | Trace a shade |
-|-------------------------------------|-------------------------------------|
-| ![](assets/how-it-works/step-4.svg) | ![](assets/how-it-works/step-5.svg) |
-
-| Remove filling | Сombine with image |
-|-------------------------------------|-------------------------------------|
-| ![](assets/how-it-works/step-6.svg) | ![](assets/how-it-works/step-7.svg) |
-
-
+## Improvements
+
+Fork me and feel free to ask questions, report bugs and open pull requests. Check out [developer's guide](docs/how-it-works.md).
## License
diff --git a/docs/assets/contourer-app.gif b/docs/assets/contourer-app.gif
new file mode 100644
index 0000000..6ca3868
Binary files /dev/null and b/docs/assets/contourer-app.gif differ
diff --git a/assets/examples/phil.png b/docs/assets/examples/phil.png
similarity index 100%
rename from assets/examples/phil.png
rename to docs/assets/examples/phil.png
diff --git a/docs/assets/examples/phil.svg b/docs/assets/examples/phil.svg
new file mode 100644
index 0000000..60d597e
--- /dev/null
+++ b/docs/assets/examples/phil.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/assets/examples/phil_10.svg b/docs/assets/examples/phil_blue_10.svg
similarity index 99%
rename from assets/examples/phil_10.svg
rename to docs/assets/examples/phil_blue_10.svg
index 5fa8bc6..d9f91e3 100644
--- a/assets/examples/phil_10.svg
+++ b/docs/assets/examples/phil_blue_10.svg
@@ -1,3 +1,3 @@
\ No newline at end of file
diff --git a/assets/examples/phil_0.svg b/docs/assets/examples/phil_red_0.svg
similarity index 100%
rename from assets/examples/phil_0.svg
rename to docs/assets/examples/phil_red_0.svg
diff --git a/assets/how-it-works/step-0.svg b/docs/assets/how-it-works/step-0.svg
similarity index 100%
rename from assets/how-it-works/step-0.svg
rename to docs/assets/how-it-works/step-0.svg
diff --git a/assets/how-it-works/step-1.svg b/docs/assets/how-it-works/step-1.svg
similarity index 100%
rename from assets/how-it-works/step-1.svg
rename to docs/assets/how-it-works/step-1.svg
diff --git a/assets/how-it-works/step-2.svg b/docs/assets/how-it-works/step-2.svg
similarity index 100%
rename from assets/how-it-works/step-2.svg
rename to docs/assets/how-it-works/step-2.svg
diff --git a/assets/how-it-works/step-3.svg b/docs/assets/how-it-works/step-3.svg
similarity index 100%
rename from assets/how-it-works/step-3.svg
rename to docs/assets/how-it-works/step-3.svg
diff --git a/assets/how-it-works/step-4.svg b/docs/assets/how-it-works/step-4.svg
similarity index 100%
rename from assets/how-it-works/step-4.svg
rename to docs/assets/how-it-works/step-4.svg
diff --git a/assets/how-it-works/step-5.svg b/docs/assets/how-it-works/step-5.svg
similarity index 100%
rename from assets/how-it-works/step-5.svg
rename to docs/assets/how-it-works/step-5.svg
diff --git a/assets/how-it-works/step-6.svg b/docs/assets/how-it-works/step-6.svg
similarity index 100%
rename from assets/how-it-works/step-6.svg
rename to docs/assets/how-it-works/step-6.svg
diff --git a/assets/how-it-works/step-7.svg b/docs/assets/how-it-works/step-7.svg
similarity index 100%
rename from assets/how-it-works/step-7.svg
rename to docs/assets/how-it-works/step-7.svg
diff --git a/docs/development.md b/docs/development.md
new file mode 100644
index 0000000..a6daf90
--- /dev/null
+++ b/docs/development.md
@@ -0,0 +1,36 @@
+# Development
+
+To run your local copy of Contourer for development follow these steps
+
+## Install
+
+Clone repository
+
+```sh
+$ git clone https://github.com/stickerum/contourer
+$ cd contourer
+```
+
+Install Node.js dependencies
+
+```sh
+$ npm i
+```
+
+## Run Contourer
+
+To process image with Contourer pass path to this image
+
+```sh
+$ npm start
+```
+
+## Pack binaries
+
+Create binary files to use Contourer on production by the following script.
+
+```sh
+$ npm run pack
+```
+
+Binaries for Linux, macOS and Windows will be created in `build` directory.
diff --git a/docs/how-it-works.md b/docs/how-it-works.md
new file mode 100644
index 0000000..806267c
--- /dev/null
+++ b/docs/how-it-works.md
@@ -0,0 +1,49 @@
+# How it works
+
+Step by step explanation of Contourer's work.
+
+## Get a source image
+
+![](assets/how-it-works/step-0.svg)
+
+## Create a shade
+
+Paint black each non transparent pixel
+
+![](assets/how-it-works/step-1.svg)
+
+## Find a contour
+
+For each black pixel we check his 8 adjacent pixels. If one of them is transparent then target pixel is on the contour of image.
+
+![](assets/how-it-works/step-2.svg)
+
+## Extend the shade
+
+Each contour's pixel should be «enlarged» to the margin size. We do this to create contour that places with a distance to image.
+
+![](assets/how-it-works/step-3.svg)
+
+## Color it black
+
+Actually we don't draw this red contour. This step is for better understanding the process.
+
+![](assets/how-it-works/step-4.svg)
+
+## Trace a shade
+
+Now we have a shade that should be traced. At the end of this step Potrace will return a vectorized copy of this shape. We use modified version of [node-potrace](https://github.com/stickerum/node-potrace) so we able to set up color for shape's stroke.
+
+![](assets/how-it-works/step-5.svg)
+
+## Remove filling
+
+Returned vectorized shape doesn't have any filling. It also was done for understanding.
+
+![](assets/how-it-works/step-6.svg)
+
+## Сombine with an original image
+
+The last step is combine svg contour and image to one file. To do this we encode source image to base64 and add it to svg code.
+
+![](assets/how-it-works/step-7.svg)