Create a low-fidelity design in Adobe XD, for Windows 10 Anniversary Update and Mac OS, to define the overall structure and interaction of an app. Then, fine-tune the design to transition to a high-fidelity prototype.

Introduction

Before you begin creating the detailed designs and navigation of each screen in a mobile or web app, you and your team have likely have spent a great deal of time planning it.

Turn your lo-fi wireframes and design notes into a functional prototype with Adobe Experience Design CC (Preview). Follow this step-by-step tutorial that takes you from planning to production in a few basic steps (see Figure 1).

Figure 1. Plan an app using low-fidelity prototypes

Sample app

Throughout this tutorial, we’ll use the fictional Dishy app as a reference. Dishy lets users search for restaurants that deliver in their area (see Video 1).

Video 1. Low to high fidelity design and prototyping (no audio)

Users can set their location, search food menus using text or voice search, read detailed descriptions of menu items, add items to their shopping cart, and pay with a credit card directly from their mobile device. The app will notify the user as to when their order is ready and let’s users rate the service they received.

Users can also access their account information to change their payment information and location.

1. Create a low-fidelity prototype

The theoretical flow of Dishy was written down on paper and illustrated by boxes, arrows, and basic text (see Figure 2).

Figure 2. Early planning stages

Starting with the initial experience with the app, the pencil and paper wireframe identifies the general flow and purpose of the app:

  1. What users should be able to do when they first open the app?

    • See general info about the app 
    • Search using text or voice
  1. Search meal options / view search results

  2. Select meal and review details

  3. Add to order or go back

  4. Start payment process or keep shopping

  5. Rate experience or write review

  6. Global actions user can perform throughout the app

    • Set location
    • Edit profile
    • Access account
    • Review shopping cart

2. Start a high fidelity prototype

Now that we have the general steps identified, we can start the process to create a high fidelity design in Adobe XD.

In this step, we'll plan about the app at the macro level. That is, let’s think about the overall flow from screen to screen rather than the micro interactions between individual elements.

Adobe XD includes a variety of UI Kits that can give you a head start. For the Dishy app, we’ll start from scratch to create a low fidelity design and prototype. In this section, we’ll design the Welcome Screen and Search Results. Designing these screens provides the general considerations for creating low fidelity prototypes in Adobe XD.

3. Design with basic shapes

The Welcome Screen includes the name of the app, a text search field, a voice search icon, intro text, and a menu bar at the bottom. We can create a lo-fi design for this page using basic shapes and placeholder text.

  1. Open Adobe Experience Design CC.

  2. Select the appropriate device size from the Welcome Screen, or enter a Custom Size.

    Note: The samples in this tutorial are based on the iPhone 6.

  3. Double click the title of the default artboard, name it Welcome Screen, and press Return (see Figure 3).
Figure 3. Name the Welcome Screen artboard

  1. Select the Rectangle tool from the toolbar on the left and click and drag to place it approximately in the middle of the artboard to serve as a placeholder for the search field.

  2. Select the rectangle with the Selection tool (V) and use CMD + D to duplicate the rectangle and drag it to the bottom as a placeholder for the menu bar. Hold Shift while dragging to maintain alignment (see Figure 4).
Figure 4. Use CMD + D to duplicate elements

  1. Draw a smaller square or circle for the voice search icon next to the search field.

  2. Copy placeholder text from the web and paste it on the Welcome Screen artboard. Place the text between the search field and menu bar.

    Note: Adobe XD adds the copied text as area text that you can resize and position as necessary (see Figure 5).
Figure 5. Copy and paste placeholder text from the web

  1. Select File > Save to name and save the file to your computer.

4. Duplicate artboards

Many of the screens in your app will likely have assets that are consistent across screens. For example, the menu bar and header are persistent across most of the screens in the Dishy app.

Rather than drawing these each time you add a new artboard, you can draw one artboard and duplicate it as many times as necessary. The sample Dishy app has 2 screens (Welcome Screen and My Stuff) which have the menu bar at the bottom. Since we’ve already drawn the Welcome Screen, let’s create the My Stuff artboard.

  1. Click the title of the Welcome Screen artboard, hold the OPT key, and drag it to the right to duplicate the artboard.

  2. Double click the title and change it to My Stuff.

  3. Use the Select tool to drag and select the text search, voice search, and placeholder text on the new Search Results screen and hit Delete (see Figure 6).

    The only element left is the rectangle at the bottom that serves as the menu bar.
Figure 6. Delete unnecessary elements

Six screens have a header bar at the top as well as the menu bar at the bottom. 

  1. Create a duplicate of the My Stuff artboard just to the right and name the new artboard Set Location.

  2. Draw a rectangle across the top and have it stretch the width of the artboard. This will serve as the placeholder for the header bar.

  3. Click the Align Top icon to align the rectangle (make sure it is still selected) with the top of the artboard (see Figure 7).
Figure 7. Align objects to top of artboard

  1. Duplicate the Set Location artboard for the 5 additional artboards that have both a header and menu bar at the top and bottom.

  2. Name the artboards Search Results, Customize Order, Your Order, Foodies, and Checkout (see Figure 8).
Figure 8. Name artboards

5. Design with Repeat Grid

The Repeat Grid feature is typically used to repeat grouped items on a screen. With lo-fi designs in Adobe XD, you can also use the Repeat Grid to save time aligning objects, or even nest repeat grids inside other repeat grids. 
 
The Search Results screen consists of a group of objects repeated down the screen. Each group includes a picture of the meal, description, price, distance, and rating icons. The rating icons, 5 stars, can also be defined as a repeat grid to make aligning easier.

Let’s create the group that will represent the first list item.

  1. Click the Search Results title to select that artboard. Use CMD + to zoom in to see the artboard better.

  2. Drag the bottom handle of the Search Results artboard to make longer. This will make the design scrollable to show content below the original edge of the artboard.

    A dashed line appears indicating where content will scroll beyond the visible viewport area (see Figure 9).
Figure 9. Create scrolling artboard

  1. Draw a rectangle just below the header bar. It should stretch the width of the artboard and have a height about 4 times higher than the header bar (see Figure 10).
Figure 10. Draw image placeholder

  1. Select the Text tool and add placeholder text (e.g., Meal 1) in the top left of the new rectangle.

  2. Add text to the top right of the rectangle and add a placeholder price (e.g., $12).

  3. Draw a small square below the meal placeholder text. Hold shift while drawing the rectangle to constrain it to a square. You can review the W and H settings in the Property Inspector to confirm the size. This will represent the first "star" in the ratings below the meal option (see Figure 11).
Figure 11. Use the Property Inspector to configure shape settings

  1. Click Repeat Grid while the square is still selected.

  2. Drag the green handle on the right until 5 squares are created (see Figure 12).
Figure 12. Use Repeat Grid to align objects

  1. Place your cursor between 2 of the boxes and drag until they are spaced closer together (see Figure 13).
Figure 13. Click and drag to adjust spacing between objects in a Repeat Grid

  1. Drag your cursor to select the group rectangle, five squares and the text. Make sure you do not grab the header bar above it.

  2. Select Object > Group (CMD + G) to group the items.

  3. Click Repeat Grid.

  4. Drag the green handle down the length of the artboard.

  5. Place your cursor between 2 of the grouped items and drag to adjust spacing between grid items (see Figure 14).
Figure 14. Adjust spacing between grouped objects

6. Finish the lo-fi design

Use the techniques above to complete the lo-fi design of the remaining artboards for the app. Or, you can open Step6.xd from the Dishy lo to hi fi project files which includes all of the finished lo-fi designs for the Dishy app (see Figure 15).

Figure 15. Artboards with completed lo-fi design

7. Define basic interactions

Once you have completed the lo-fi designs for each of the artboards, you can wire the app to simulate the interaction between screens.

You can marquee select (drag select), or Shift+select, to select multiple artboards and move them. You can also use the Arrange buttons or menu options to arrange the selected artboards.

You can also use the starter file, Step7.xd. Refer to Figure 16 as a possible arrangement. 

Figure 16. Arrange artboards to create interactions

8. Batch transition types

Again, we’ll think about this phase at the macro level and define the general navigation from screen to screen, or from one general hot spot to the next screen. This way, we can test the overall flow of the app without getting too weighed down in the details.

Note: Another benefit of using the Repeat Grid throughout the lo-fi designs, is that it groups objects together to create big hit points rather than keeping items as individual elements. This can save a lot of time when you want to test the overall flow of the application.

Adobe XD lets you define one of five transition types between screens:

  • Slide Left
  • Slide Right
  • Slide Up
  • Slide Down
  • Dissolve

You can also define the easing and the duration of the transition itself. Adobe XD defaults to the most recent settings you chose, so it can speed up the process of wiring your app if you batch as many transitions of one type together. 

For example, if you have 5 interactions that should Slide Up and Ease In for .4 seconds, you can define those sequentially.

  1. Click Prototype (or CTRL + Tab) to switch to Prototype mode.

  2. Click the big rectangle at the top of the Welcome Screen artboard.

  3. Click the blue arrow to the right and drag until you connect to the Search Results artboard.

  4. Set the values to Slide Up, Ease In, and .4s (see Figure 17).
Figure 17. Configure settings to create interaction between screens

  1. Select the Customize Order artboard.

  2. Click the blue arrow and drag to connect to the Your Order artboard. Note the settings are the same as your most recent selection (see Figure 18).
Figure 18. Define interactions at the macro level

  1. Create the same interaction between the following artboards:

    • Welcome screen (menu bar) to My Stuff
    • My Stuff (meal list repeat grid) to Foodies
    • Foodies (restaurant repeat grid) to Rate
  1. Select Edit > Select All (or CMD + A) to show all of the wired interactions (see Figure 19).
Figure 19. Batch transition types

  1. Wire the rest of the artboards as desired (see Figure 20).
Figure 20. Define interactions between all artboards

  1. Click Preview and click through the screens to test your prototype (see Figure 21).
Figure 21. Preview the prototype to test interactions

If you need to make corrections, you can do so without closing the Preview window. Just make the necessary changes to your prototype and the updates take effect immediately in your preview.

Note: Be sure to check out the Create and share interactive prototypes tutorial for more details on how to create, test, and share prototypes in Adobe XD. 

Add the finishing details

The design at this point looks a bit basic, but Adobe XD includes features to add the aesthetics needed to make this a high-fidelity design fairly quickly.

9. Batch edits on shapes

Many of the objects across the artboards have similar properties such as rounded corners and consistent background and text colors. They all have the same rounded corners.

  1. Click to enter Design mode.

  2. Shift + click to select the standalone rectangles that serve as the menu bar at the bottom of most screens and the order buttons on the Your Order and Checkout artboards (see Figure 22).
Figure 22. Select all rectangles that should have rounded corners

  1. Make sure the Same radius for all corners icon is selected and set the value to 22 (see Figure 23).
Figure 23. Set rounded corners on rectangles

  1. Click outside of the selection to de-select the rectangles.

  2. Shift + click to select all of the rectangles that represent the menu bar on most screens.

  3. Click the Fill icon in the Properties Inspector and set the Hex value to #F6F6F6 and uncheck the Border checkbox (see Figure 24).
Figure 24. Set the background color for the rectangles

  1. Set the Hex value to #F1323B for the 2 additional fields on the Your Order and Checkout screens and disable the Border (see Figure 25).
Figure 25. Set the background color for Order buttons

  1. Shift + click to select the text labels on the button and set the Fill color to #FFFFFF to change the text to white (see Figure 26).
Figure 26. Set the text to white

10. Batch edits on Repeat Grids

Batch edits on objects within Repeat Grids can save time when refining lo-fi designs. Any style edits made within a Repeat Grid are treated globally.

  1. CMD + click inside the Repeat Grid on the My Stuff artboard to select the Rate rectangle.

  2. Set the border radius to 22. Notice each of the rectangles in the Repeat Grid now have rounded corners (see Figure 27).
Figure 27. Set border radius on objects within a Repeat Grid

  1. Set the background color of the rectangle to #F1323B and the text to #FFFFFF (see Figure 28).
Figure 28. Set remaining style changes for Repeat Grid objects

  1. Apply these changes to the rest of the rectangles on the artboards (see Figure 29).
Figure 29. Apply style changes to remaining rectangles

11. Use shapes as image placeholders    

Basic shapes such as rectangles and circles can serve as placeholders for imagery. Drag and drop images from Finder into single shapes, or those grouped in a Repeat Grid, to refine the design.

You can drag a single image on to a shape and it will fill the shape. Open Finder and navigate to the exercise folder you saved to your desktop. Drag the following images from Finder:

  • map1.png to Set Location artboard (see Figure 30)
Figure 30. Add map image to Set Location artboard

  • CustomizedOrder_page.png image to Customize Order artboard

  • profileImage to My Stuff artboard

  • 6_bbqshrimp to Foodies artboard (see Figure 31)
Figure 31. Place images from Finder to shape placeholders

You can copy and paste svg images, such as the rating star icons, from Illustrator:

  1. Open the icons_all.ai file in Illustrator and use CMD + A, then CMD + C to select all of the icons and copy them to the clipboard.

  2. Switch to Adobe XD and use CMD + V to paste the icons to the pasteboard (the empty gray area around the artboard (see Figure 32). 
Figure 32. Copy SVG graphics from Adobe Illustrator CC

  1. Click into the set of icons to select the star icon and use CMD + C to copy.

  2. Click into one of the small squares in a repeat grid on the Search Results screen and use CMD + V to paste it (see Figure 33).
Figure 33. Paste Illustrator graphics into a Repeat Grid

  1. Hold shift and drag a handle to resize the star while scaling so it fits inside the square (see Figure 34).
Figure 34. Resize objects within a Repeat Grid

  1. Use the arrow keys to move the icon as needed (see Figure 35).
Figure 35. Use arrow keys to position elements

  1. Select the repeat grid holding the search results and select Ungroup Grid.

  2. Delete all but the first group with the updated star icons.

  3. Re-group the items and select Repeat Grid again and drag to create the list with the updated icons (see Figure 36).
Figure 36. Re-group items to create an updated Repeat Grid

Drag multiple images from the SearchResults_page folder in the practice files in Finder into Repeat Grid on the Search Results artboard (see Figure 37).

Figure 37. Drag images into Repeat Grid

Add remaining repeating images to the following artboards (see Figure 38):

  • Your order
  • My Stuff
  • Foodies
  • Ratings stars
Figure 38. Add the remaining repeating images

Note: In some cases, I do not want the repeat grid styles applied globally. For example, the ratings stars on the Filters Selected artboard have different colors. So, the first thing to do is to ungroup that Repeat Grid and then apply a unique color to the stars as necessary (see Figure 39).

Figure 39. Ungroup Repeat Grids when styles should be applied independently

12. Finish your design

Many of the techniques you need to finish the high-fidelity design are covered here. The Create designs for web and mobile apps tutorial demonstrates more techniques you can use to finish your designs, including:

  • Styling text
  • Using Boolean Operations to draw icons
  • Copying and pasting imagery from Photoshop and Illustrator

13. Update the interactions

Although the interactions you wired in Prototype mode may largely be intact, you will likely need to do some level of updating. For example, rather than wiring interactions at the macro level, you will need to create interactions from an individual element, such as a search field or button to another artboard.

Note: Check out the Create and share interactive prototypes tutorial for more details on creating interactive prototypes (see Figure 40). 

Figure 40. Finish wiring the interactions for the app

Conclusion

The information in this tutorial was based largely on Elaine Chao Finnell’s Going from Lo-fi to Hi-fi in Adobe XD’s Preview Release. Elaine’s article has additional details that are very helpful, so be sure to check it out!

Was this page helpful?
Yes
No