Designing a contact list (full app)

With Justinmind, you can create a contact list in your mobile prototypes. You can use the same steps to create a wish list or a to-do list too.

In this tutorial, we’re going to create a contact list that allows the user to delete or favorite a contact, as well as share it with other mobile users. We’ll use On Swipe Left & Right mobile gestures to allow the user to drag the screen from one side to another, and use the options available in each location.

interactive-protoypes-animation-gif-wishlist

To create a contact list in your prototype, follow the steps below:

Designing your contact list

  1. Create a new mobile prototype.
    • Drag a a header and place it at the top of the canvas.
    • Remove the buttons on the left and the right.
  2. Drag a Table widget to the canvas and rename it “Contact-slide_1”. The Table will display the contact’s information including name, location, contact avatar and interactive options: delete, favorite and share.
    • Add four columns and one row to the Table.
    • Click within the Table and you will find that there are four cells named 1, 3, 5 & 7: rename them A, B, C & D respectively.
  3. Resize the table cells as follows: Cells A, C & D  to 70 x 70 px and Cell B to 375 x 70 px.
  4. Finally, reposition the Table so that the vertical edges of Cell B are in line with the vertical edges of the canvas, as shown below in the image.
    • 2-interactive-prototypes-wishlist-table-widget-ui
  5. Select Cell A and add a Delete button to it.
    • In the Properties palette, add a background color to the cell (in our example, we’ve used red).
    • When this cell is tapped, the user will be able to delete the corresponding contact.
  6. Now, select Cell B and in the Properties palette under Layout, change the cell’s layout to “Free layout”. This cell will display the contact information, including name, location, a contact avatar, and information about whether this contact has been favorited by the user.
    • Drag a Hotspot, two Images and two Text widgets into it, placing these elements within the cell to match our example.  
    • Ensure that the Hotspot is the first element in the cell (placed above the rest in the Outline palette) and resize it to fill the entire cell. 
    • 2a-interactive-prototypes-layout-settings
  7. In the Image on the far left, add a contact avatar.
    • In the Image on the far right, add an icon that represents a favorite contact, such as a Star or a Heart icon.
    • This icon should be an SVG file so that you can change the color of the image.
    • In the Properties palette, change the color of the SVG image to gray, to give it an unselecte’ appearance until it has been activated by the user.
  8. In the top Text box, write the name of the contact and in the bottom, write their location.
  9. Next, select Cell C and drag an Image widget within it.
    • Add the same SVG image that you used in Cell B to represent a favorite contact.
    • Change the color of the SVG file to yellow and add a background color to the cell (in our example, we’ve used blue).
    • When this cell is tapped, the favorite image in Cell B will be shown and the contact will be displayed as a favorite, (i.e. will change color to appear active).
  10. Select Cell D and drag another Image widget within it.
    • Add an icon to the Image that will represent a contact sharing icon, to match our example.
    • Add a background color to the cell (in our example, we’ve used green).
    • When this cell is tapped, a pop up will appear on the screen with options for the user to share this contact across a number of different mediums.
    • 3a-interactive-prototypes-wishlist
  11. Right click on the Table and select the option “Group in Dynamic Panel”.
    • Change the height of the Dynamic Panel to 604 px and ensure that the bottom edge of the Dynamic Panel rests on the bottom edge of the canvas.
    • 8a-interactive-prototypes-wishlist-group-widgets
  12. Finally, add a Floating Menu widget.
    • In the Properties palette, mark it as hidden and resize it to match our example (375 x 667 px).
    • Customize it with Image and Button widgets to create a contact sharing pop up menu as we have in the right screen of the image below.
    • Ensure that it is not placed in the Dynamic Panel (check the Outline palette). 
    • 7-interactive-prototypes-wishlist-share-menu
  13. Go to the Outline palette and ensure that the order of the UI elements reads as follows:
    • Contact share pop up menu
    • Header
    • Dynamic Panel

Adding events to your contact list 

  1. First of all, we’re going to create the event that will make the favorite and share options appear on the right when the user swipes left.
    • Go to Cell B in the Table and select the Hotspot.
    • Go to the Events palette and create an “On Swipe Left” + “Move” event, selecting the “Contact-slide_1” group as the element that will be swiped (from the Outline palette).
    • Below, set the left position to fixed; -140 px and the top to current.
    • Add a “Linear” easing effect at 300 ms.
    • Click “OK”.
      • 9-interactive-prototypes-events
  2. Back in the Events palette, select the “add condition” link on the left of this event. The Condition builder will appear.
    • Drag the “Contact-slide_1” group to the term in the conditional expression, followed by ‘=’ and the type ‘0’ into the term that follows.
    • Click “OK”.
    • 10-interactive-prototype-event
  3. Back in the Events palette, click on the “Else” option on the left of the event you’ve created. 
    • Add another “On Swipe Left” + “Move” event, selecting the “Contact-slide_1” group as the element that will be swiped.
    • This time, leave the left position as fixed; 0 px and set the top to current.
    • Add a “Linear” easing effect at 300 ms.
    • Click “OK”. 
  4. On the right of this event, select the “Else add condition” link. the Condition builder will appear.
    • Drag the “Contact-slide_1” group to term in the conditional expression, followed by ‘=’ and the type ‘70’ into the term that follows.
    • Click “OK”.
  5. Next, we’re going to create the event that will make the delete option appear on the left when the user swipes right.
    • In the Events palette, create another event. This will be an “On Swipe Right” + “Move” event, selecting the “Contact-slide_1” group as the element that will be swiped.
    • Below, set the left position to fixed; 70 px and the top to current.
    • Add a “Linear” easing effect at 300 ms.
    • Click “OK”. 
    • On the right of this event, select the “add condition” link. The Condition builder will appear.
    • Drag the “Contact-slide_1” group to the term in the conditional expression, followed by ‘=’ and the type ‘0’ into the term that follows.
    • Click “OK”.
  6. Now, click on the “Else” option on the left of the event you’ve created created.
    • Add another “On Swipe Right” + “Move” event, selecting the “Contact-slide_1” group as the element that will be swiped.
    • This time, leave the left position as fixed; 0 px and set the top to current.
    • Add a “Linear” easing effect at 300 ms.
    • Click “OK”. 
    • On the right of this event, select the “Else add condition” link. The Condition builder will appear.
    • Drag the “Contact-slide_1” group to the term in the conditional expression, followed by ‘=’ and the type ‘-140’ into the term that follows.
    • Click “OK”.
  7. Now, we’ll create an event that will ensure that the contact is deleted upon tapping the delete icon.
    • Go to Cell A and select the Delete icon image.
    • Go to the Events palette and create an “On Tap” + “Hide” event, selecting the “Contact-slide_1” group as the component to be hidden.
    • Below, add a “slide up” effect with a “Linear” easing effect at 300 ms.
    • Click “OK”.
  8. Next, we’ll create and event that will ensure that the star in Cell B will become active (yellow) upon tapping the star in Cell C.
    • Go to Cell C and select the favorite Star icon image.
    • Go to the Events palette and create an “On Tap” + “Change Style” event, selecting the favorite Star icon in Cell B as the element to change the style of.
    • Below, tick the color option and make the color change to yellow.
    • Click “OK”.
  9. Finally, we’ll create an event that will ensure that the contact sharing pop up menu appears upon tapping on the contact sharing image in Cell D.
    • Select the contacting sharing image in Cell D and create an “On Tap” + “Show” event, selecting the pop up Floating Menu as the element that will be shown upon simulation.
    • Below, add a “fade” effect at 500 ms.
    • Click “OK”.
  10. Right click on the Table and select “duplicate” to create more contacts. Be sure to change the contact avatar, name and location in the relevant cell in each instance.

And that’s it! Click “Simulate” to view and interact with your prototype.

You can download our example here.