Tutorials Manual

depict is a web-based software that allows you to quickly draw simplified wireframes called breadboards.

This page contains complete features of depict. If you are looking for tutorials, please visit depict’s tutorials.

Places, items, and links

Core elements of breadboarding are places, items, and links.

Places

Top-level items represents places.

A place is an abstract concept that can be a screen, a dialog, a menu, or a popup. In the context of breadboarding, we deliberately use abstract terms to keep the focus on the content instead of specific UI elements.

Home
About
Contact

Items

Each place can have zero or more items. Indented lines represent items.

If a place Home has three items, it will look like this:

Home
  Header
  Main contents
  Footer

About
Contact

Items can have sub-items:

Home
  Header
    Logo
    Navigation
  Main contents
  Footer

About
Contact

Use - to make a separator:

Home
  Menu1
  Menu2
  -
  Menu3

Links

Items can be linked to other places. => symbols represent links.

Home

About
  Description
  Back to Home => Home

Now a place About contains two items, Description and Back to Home, and the Back to Home item is linked to the Home place.

You may omit the place name if the name of the item is the same as the name of the place.

Home

About
  Description
  Home =>

Type annotations

You may want to add more details to your breadboard as your work progresses. depict provides a set of type annotations to help you do that.

Type annotations are starting with a dot . and goes after the name of the item.

Type annotations for items

You can append .input or .button to an item to make it a text field or a button, respectively. Brackets at the beginning of the item will make it a checkbox. Parentheses at the beginning of the item will make it a radio button.

Sign-up
  Email .input
  Password .input
  [] Agree to ToS
  Sign-up .button

Type annotations for places

At the beginning of this manual, I mentioned that a place is an abstract concept. In the context of breadboarding, we deliberately use abstract terms to keep the focus on the content instead of specific UI elements.

But as your work progresses, you may want to add more details. For example, you may decide to make a place Home a page and a place Sign-up a dialog. Type annotations for places allow you to make your intent clear.

Home .page
Sign-up .dialog

Formal syntax and syntactic sugars

Symbols like [], (), and => are syntactic sugars for type annotations. You can use .link type annotation to make an item a link:

Home

About
  Description
  Home .link target=Home

This is equivalent to:

Home

About
  Description
  Home => Home

And again, this is equivalent to:

Home

About
  Description
  Home =>

Also, [] is a syntactic sugar for .checkbox and () is for .radio:

Sign-up
  Email .input
  Password .input
  Agree to ToS .checkbox

If you prefer consistency over brevity, you can choose to use formal annotation syntax.

Style annotations and wireframe mode

Types annotations are for semantic information, and style annotations are for representations.

In breadboarding, we intentionally ignore representations to keep the focus on the content. But as your work progresses, you may want to make your breadboard more concrete. Style annotations are here to help.

:row mode and :col mode

Add :row to a parent item to make its children aligned horizontally. Add :col to make its children aligned vertically, which is the default.

Home
  Header :row
    Logo
    Title
    Search .input
    Help

Since the item Header has :row style annotation, this section of the breadboard is now in the wireframe mode. The wireframe mode is rendered differently from the breadboard mode.

You may omit item name Header and just use style annotations to visually group related items:

Home
  :row
    Logo
    Title
    Search .input
    Help

:fill mode

Add :fill to an item to make it fill the remaining space. The following example shows how to use anonymous :fill item to make space between Title and Search:

Home
  :row
    Logo
    Title
    :fill
    Search .input
    Help

Mixed-fidelity prototyping

With style annotations, it is hard to say that the artifact you are working on is a breadboard. It is something between a breadboard and a wireframe, which is okay. (See Mixed-fidelity prototyping of User Interface)

Do not obsess over the consistency of fidelity. It is encouraged to add details only to the parts where it is necessary and leave the rest as is.

It is a excellent practice to start with simple breadboarding and gradually add more details where and when necessary. depict is specifically designed to support this workflow.

The following example shows a typical mixed-fidelity prototype:

Home
  Header :row
    Logo
    Search .input :fill
    Sign-in .button =>
  Main :row
    Categories :col
      Women
      Men
      Accessories
    Product List :col
      Product*3 :row
        Image
        Title => Product Detail :fill
        Price
  Footer :col
    About =>
    Copyright

Product Detail
  Product summary
  Product detail
  Reviews

Sign-in
  ID .input
  Password .input
  -
  Sign-in .button => Home

Miscellanous features

Embedding a board into websites

You can embed shared board as iframe or PNG image. Here’s how:

  • First, you have change the board’s visibility to “Anyone with the link” in the board’s settings.
  • Then, append .embed into the URL of the board. For example, if the URL of the board is https://depict.page/boards/abc123, the URL of the embeddable board is https://depict.page/boards/abc123.embed. You can also append .png to the URL to get a PNG image of the board. For example, the URL of the PNG image of the board is https://depict.page/boards/abc123.png.