Wireframe Editor Guidelines

Our code generation engine is the result of 3 years of R&D and is still a work in progress. However, we find that the results it generates are really promising and we’re working hard to improve its capabilities every month. The following guidelines will help you make the best of it even in this early stages of development.

Verify the surface

You should only use a white blank surface, such as a piece of paper or a whiteboard.

👍 Do's

🚫 Dont's

Keep consistency

Make sure to have enough space in between your drawn elements. Also, try to stay consistent with your drawing pattern.

👍 Do's

🚫 Dont's

Frame your drawing

Frame your picture to fit just your drawing, and nothing else.

👍 Do's

🚫 Dont's

Elements overview & conventions

Here you can find an overview of all elements. For more information, you can see details of how each elements is represented below. 

Text labels

Draw labels and paragraphs of text using scribbles, lines, or written text.

Heading

Start with # and draw text by using scribbles, lines, or written text.

Link

Draw links by surrounding text or a scribble/line with squared bracelets.

Image

Draw images as a rectangle or a circle with a cross covering it. You can draw a background image too, although it has elements on top.

Button

Draw a button as a rectangle with text or a scribble/line inside.

Container

Draw a simple rectangle. It is better to enclose your wireframe with a surrounding container, or if you want to have certain elements positioned together.

Keep i that the algorithm works best when elements are grouped together. It's a lot harder for it to decide which element is next to which if they're out in the open. n mind

Checkbox

Draw only the checkbox icon. If you want to add a label, you'll have to draw a separate text element next to it.

Radio button

The same as the checkbox element. To add a label to the radio button, you'll have to draw a separate text element next to it.

Input

The input looks like a thin and wide container. No text should be added inside.  

Textarea

It looks like a normal container icon, but has a triangle in the bottom right corner.

Video

Draw a rectangle with a 'play' icon in the middle..

4.1 Text

Draw labels and paragraphs of text using scribbles, lines, or written text.

4.2 Heading

Start with # and draw text by using scribbles, lines, or written text.

4.3 Link

Draw links by surrounding text or a scribble/line with squared bracelets.

4.4 Image

Draw images as a rectangle or a circle with a cross covering it. You can draw a background image too, although it has elements on top.

4.5 Button

Draw a button as a rectangle with text or a scribble/line inside.

4.6 Container

Draw a simple rectangle. It is better to enclose your wireframe with a surrounding container, or if you want to have certain elements positioned together.

Keep in mind

 that the algorithm works best when elements are grouped together. It's a lot harder for it to decide which element is next to which if they're out in the open. 

Keep in mind

 that the algorithm works best when elements are grouped together. It's a lot harder for it to decide which element is next to which if they're out in the open. 

4.7 Checkbox

Draw only the checkbox icon. If you want to add a label, you'll have to draw a separate text element next to it.

4.8 Radio button

The same as the checkbox element. To add a label to the radio button, you'll have to draw a separate text element next to it.

4.9 Input

The input looks like a thin and wide container. No text should be added inside.  

4.10 Textarea

It looks like a normal container icon, but has a triangle in the bottom right corner.

4.11 Video

Draw a rectangle with a 'play' icon in the middle..