Wireframe-editor-guidelines - teleporthq.io | AI-Wired Front-End Development Platform

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.

Clean White Paper - OK

👍 Do's

Grid Paper - Not OK

🚫 Dont's

Keep consistency

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

Clean drawing - OK

👍 Do's

Sketch Drawing - Not OK

🚫 Dont's

Frame your drawing

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

Framed Drwaing - OK

👍 Do's

Misaligned Drawing - Not OK

🚫 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. 

Elements overview convension

Text labels

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

text labels

Heading

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

Heading

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.

image

Button

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

button

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. 
Container

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.

Checkbox

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.

Radio Button

Input

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

Inputinput with text - not OK

Textarea

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

text area

Video

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

video

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..

Start now for free and try the Wireframe Editor

Get Started
made-with-teleport