Help

This sandbox prototype lets you create and manipulate different aspects of your UX design using commands.

At the moment, this prototype allows you to create wireframes, scenarios and very simple personas.

Wireframing

Introduction

A wireframe is stored in ux source code. You manipulate this using text commands.

A wireframe is defined as a rectangle divided into a group of smaller rectangles. Each block (rectangle) has a unique name, shown in the middle.

A very simple example of ux source:

menu
content
footer

Will result in this wireframe:

(TrueUX provides image- and text rendering)

------------------------------------------------------------
|                                                          |
|                           menu                           |
|----------------------------------------------------------|
|                                                          |
|                         content                          |
|----------------------------------------------------------|
|                                                          |
|                          footer                          |
------------------------------------------------------------

You create and manipulate blocks by writing commands. You cat set attributes like the relative size or the component type of block (image, checkbox, etc).

The default height of a block is 2 rows. The default width of a block is 1 column, and this is relative to the other blocks on the same row.

Text commands

Commands are ordered like this: action selection(s) > parameter(s).

For example update content > height=4. To speed things up, you can shorten it to u content>h4 and if content is the only block starting with an c, type u c>h4.

How a wireframe is divided

A ; splits horizontally, and a / splits vertically.

Examples

add left; middle; right

------------------------------------------------------------
|                   |                  |                   |
|        left       |      middle      |       right       |
------------------------------------------------------------

add side bar; top/bottom

------------------------------------------------------------
|                            |                             |
|                            |             top             |
|                            ------------------------------|
|                            |                             |
|          side bar          |           bottom            |
------------------------------------------------------------

Actions

All actions:

Some examples

u video; quote > h4 sets the height of the video and quote to 4 rows.

ab video Adds the video at the bottom of the wireframe. That it's relative to the last row is implicit here.

d .2 deletes the second row.

d .2 3 deletes the block(s) at the third position of the second row.

u con > cb updates all blocks that start with the letters con to be of component button. For instance contact and concert video

u .1; .3 > a3 updates both row 1 and row 2 to have attention value of 3, resulting a highlight.

u .1 .3 > a3 updates using a range selection. Both row 1, 2 and 3 will get attention value of 3, resulting a highlight.

Selections & movement

The most straightforward way to make a selection is to refer to a block in a command like u banner > a3. It is also possible to have selections not explicitly in your command.

Pre-selections

After you did an action, the manipulated blocks are still highlighted. They are pre-selected ready for a command to act on it.

For example after you created a block via ab footer you follow up with u h1 to set the height of the footer to 1 row.

The program is quite smart in differentiating between using the pre-selection or making a new selection.

If you type u h1 it will use the pre-selection, but if you add the > to become u h1 > it will interpret the h1 as a selection.

If you want to get rid of the pre-selection, press escape, or just send an empty command by pressing enter again.

Move selection

You can move your current (pre) selection using control+arrow key. If you use control+arrow left it will move the selection left of the selection(s) you had.

It's also possible to use VIM movement keys (hjkl), so control + h will also move your selction to the left.

Expand selection

By adding shift to your movement commands, the selection is not moved, but expanded. So control+shift+arrow left will expand your current selection leftwards. This allows you to quickly select a group like a couple of tabs in a row.

Components

Component types define the function of the block. You can use shortcuts to set them.

For instance, u click > component'button' is the same as u click > cb.

All shortcuts:

Icon shortcuts

Icons can be set with shortcut commands like this: u contact > isearch. So you type i before the name of the icon. Icons based on these svg files, there is no preview or full list at the moment. You'll have to guess.. Sorry.

Other attributes

Besides height and component, there is are many others. Here is the complete list

Anything you're missing? Send us a tweet or send a message to Julius or Jochem.



TrueUX is an experimental tool for creating wireframes and simple scenarios as fast as possible, using text commands.

TrueUXapp.com  |  Twitter @TrueUXapp  |  Disclaimer: All is at your own risk.  |  Privacy: What you create can be publicly viewed. Logs are kept to analyse usage.