The process of developing NiceHTML

STAGE I

Creating an interface model.

1. First I grouped the elements of the HTML layout as a graph and connected all links.

2. Then I redrew the scheme, removing unnecessary elements.

3. I replaced all with the signs and built on the final version of the interface mechanism.

4. I put all functions in order of importance, starting with the most important (top-down).

5. Then I began to calculate all the possible next steps for each element.

6. In the process the new elements revealed and added to the pic 4.

7. The elements are studied in details, allowing to understand the direction of their visualization.

8. The systems consisting of the elements with the lowest level of importance, compiled and structured.

9. View of the program for the selected menu "Layer". Too much details and piling up a large number of elements.

10. The attribute settings are removed from the submenu and pushed to the left panel.

STAGE II

Sketching.

1. When creating a new file, we have the main panel on the left and an empty field at the right. We can add a layer or table to the field and open the "Styles" panel or Settings.

2. To add new layer just drag the Add Layer icon on the field or tap on this icon and then tap on the field. After that the arrows with margins and sizes will appear. You can reduce and enlarge the values of them with moving your finger sideways.

3. Pulling the area at the edges of the layer, we can change the size of the layer.

4. Pulling the area inside the layer, we can drag the layer.

5. "Border" panel. Choice of color and type of border. When you click on any numeric value the numeric panel opens for easy entry.

6. "Background" panel. We can drag the picture from the pre-defined folder with images to the field, customize the background color or apply a style. The positioning of the image relative to the layer is configured using the arrows around the image (left - top, middle, bottom, right - left, middle, right).

7. "Text" panel.

8. "Link" panel. Input link into the field and select a file from the file manager.

9. "Image" panel.

10. "Form" panel.

11. Adding a table.

12. Settings. The partial adjustment of all kinds of elements of the program (choice of color options, thickness, type). Meta tags.

13. Linking to a parent layer.

14. HTML-editor with storing frequently used tags and fast dragging.

15. The Project menu.

16. Checking site in the browser.

STAGE III

Prototyping (click on the images below to enlarge them).