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

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, just send an empty command by pressing enter again.

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 > imail. So you type i before the name of the icon. View image below for the current set of icons you can use.


Cheat sheet in case you're using commands. So "mail" can be used with command "u contact > imail". Meaning that you want to update the contact block to show the icon "mail". pic.twitter.com/95SDi41TvH

— TrueUX (@trueuxapp) February 23, 2018

Missing icons, or have other questions? reply on this tweet, or send a private message!

Other attributes

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

Scenario building

A scenario is (at the moment) a list of wireframes. The corresponding article can be read here. In the source you list the names of the files like this:

home.uxw
about.uxw

Use the save source button to keep changes to the scenario. You can actually use the wireframing commands like ab or d to a great extent, but it doesn't really add much value.

You can also add notes in the source code of a wireframe, which are reflected in the scenario. To do this, add # Notes at the bottom of the source file, the text that will be placed below, will also be shown below your wireframe. Like so:

# Notes
This is a note.

Don't forget to press save.

Create persona

Create persona in the menu. Use u .. > n'note for current persona file' to add a note. A .. always refers to current file, you can also do u ..mike.uxp > n'note for mike' to set the note without opening that file.

The persona is rather limited for now, in the future the aim is to let you connect it to scenarios.

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.