Tutorials Manual

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

This document demonstrates the process of designing a mobile messenger app using depict.

Figuring out key screens, elements, and connections between places

Breadboarding is advantageous than wireframing because of its simpler format, which makes it easier to create and edit.

Here are the main screens of a mobile messenger:

  • The home screen showing a list of existing conversations
  • Starting a new conversation
  • Continuing an existing conversation

For now, we’re not going to think about the specifics of what each screen looks like, whether it’s a standalone screen or a dialog that appears on top of an existing screen.

When you enter the text below into the editor located on the left-hand side of the screen, a breadboard will be generated on the right-hand side.

Home
Start new conversation
Conversation

The “Home” screen should have a list of conversations and a button to start a new conversation. An asterisk (*) next to “Conversation” indicates that there are multiple conversations. The arrow (=>) indicates a connection between places.

Home
  Start new conversation =>
  Conversation*

Start new conversation

Conversation

The “Start new conversation” contains a field for the recipient’s phone number, a field for new message, and a Send button. Pressing the Send button sends the message and returns you to the “Home” screen.

Note that the label of an item and the label of destination are different. In this case, you can write the destination name next to the arrow like this: Send => Home.

Home
  Start new conversation =>
  Conversation*

Start new conversation
  Recipient
  Message
  Send => Home

Conversation

I would like to incorporate additional details. Specifically, the conversation list should include a profile image and a preview of the latest message for each item. You can simply use indentation.

Home
  Start new conversation =>
  Conversation*
    Profile pic
    Latest message

Start new conversation
  Recipient
  Message
  Send => Home

Conversation

It would be nice if clicking on a message would take you to a “Conversation” 0screen, and clicking on a profile image would take you to a screen showing profile information.

Home
  Start new conversation =>
  Conversation*
    Profile pic => Profile
    Latest message => Conversation

Start new conversation
  Recipient
  Message
  Send => Home

Conversation

The “Profile” screen is colored red because it wasn’t in the original design. You can easily create “Profile” screen by pressing the Cmd + . (Ctrl + . in Windows) shortcut over the letters, or by clicking the add link icon in the diagram. You don’t need to type screen names by hand.

Home
  Start new conversation =>
  Conversation*
    Profile pic => Profile
    Latest message => Conversation

Start new conversation
  Recipient
  Message
  Send => Home

Conversation

Profile

On second thought, it would be better to go to “Conversion” rather than “Home” after hitting “Send” on “Start new conversation.” Also it would be nice to have a button to go to “Home” on each screen.

Because of the simplicity of the breadboarding, the cost of change is very low.

Home
  Start new conversation =>
  Conversation*
    Profile pic => Profile
    Latest message => Conversation

Start new conversation
  Home =>
  Recipient
  Message
  Send => Conversation

Conversation
  Home =>

Profile
  Home =>

Now there are handful of arrows, but that’s okay because you can select a specific item to highlight only the arrows associated with that item. For example, to highlight only the arrows to “Home”, you can click “Home” or move the cursor over the “Home” in the editor.

Gradually and selectively increase fidelity

While the “Home” and “Start new conversation” are somewhat fleshed out, “Conversation” and “Profile” are mostly empty.

Although it’s typical to aim for consistent levels of fidelity in a single design document, it’s not always obligatory. In many cases, it’s more effective to enhance the level of fidelity as and when required.

It is a good time to add more particulars. We aim to have distinct screens for “Home”, “Start new conversation”, and “Conversation”, whereas “Profile” should be a dialog. To clarify your design intentions, add annotations such as .page or .dialog.

Home .page
  Start new conversation =>
  Conversation*
    Profile pic => Profile
    Latest message => Conversation

Start new conversation .page
  Home =>
  Recipient
  Message
  Send => Conversation

Conversation .page
  Home =>

Profile .dialog
  Home =>

Let’s be a little more precise for “Start new conversation”: we want to specify that “Recipeint” and “Message” are text fields and “Send” is a button. We can do this by adding the .input and .button annotations to each item.

Home .page
  Start new conversation =>
  Conversation*
    Profile pic => Profile
    Latest message => Conversation

Start new conversation .page
  Home =>
  Recipient .input
  Message .input
  Send .button => Conversation

Conversation .page
  Home =>

Profile .dialog
  Home =>

Finally, let’s add style annotations such as :row and :col to specify the layout of Start new conversation page.

Home .page
  Start a new conversation =>
  Conversation*
    Profile pic => Profile
    Latest message => Conversation

Start a new conversation .page
  Header :row
    Home =>
    :fill
    About
    Help
  Main :col
    Recipient .input
    Message .input
    -
    Send .button => Conversation

Conversation .page
  Home =>

Profile .dialog
  Home =>

Starting with a simple breadboard, we were able to flesh out the design by gradually increasing fidelity. We were able to create a mixed-fidelity prototype that allows us to quickly refine design idea.

See also