What you'll need
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).
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).
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.
The theoretical flow of Dishy was written down on paper and illustrated by boxes, arrows, and basic text (see Figure 2).
Starting with the initial experience with the app, the pencil and paper wireframe identifies the general flow and purpose of the app:
- What users should be able to do when they first open the app?
- See general info about the app
- Search using text or voice
- Search meal options / view search results
- Select meal and review details
- Add to order or go back
- Start payment process or keep shopping
- Rate experience or write review
- Global actions user can perform throughout the app
- Set location
- Edit profile
- Access account
- Review shopping cart
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.
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.
- Open Adobe Experience Design CC.
- 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.
- Double click the title of the default artboard, name it Welcome Screen, and press Return (see Figure 3).
- 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.
- 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).
- Draw a smaller square or circle for the voice search icon next to the search field.
- 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).
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.
- Click the title of the Welcome Screen artboard, hold the OPT key, and drag it to the right to duplicate the artboard.
- Double click the title and change it to My Stuff.
- 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.
Six screens have a header bar at the top as well as the menu bar at the bottom.
- Create a duplicate of the My Stuff artboard just to the right and name the new artboard Set Location.
- 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.
- Click the Align Top icon to align the rectangle (make sure it is still selected) with the top of the artboard (see Figure 7).
- Duplicate the Set Location artboard for the 5 additional artboards that have both a header and menu bar at the top and bottom.
- Name the artboards Search Results, Customize Order, Your Order, Foodies, and Checkout (see Figure 8).
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.
- Click the Search Results title to select that artboard. Use CMD + to zoom in to see the artboard better.
- 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).
- 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).
- Select the Text tool and add placeholder text (e.g., Meal 1) in the top left of the new rectangle.
- Add text to the top right of the rectangle and add a placeholder price (e.g., $12).
- 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).
- Click Repeat Grid while the square is still selected.
- Drag the green handle on the right until 5 squares are created (see Figure 12).
- Place your cursor between 2 of the boxes and drag until they are spaced closer together (see Figure 13).
- Drag your cursor to select the group rectangle, five squares and the text. Make sure you do not grab the header bar above it.
- Select Object > Group (CMD + G) to group the items.
- Click Repeat Grid.
- Drag the green handle down the length of the artboard.
- Place your cursor between 2 of the grouped items and drag to adjust spacing between grid items (see Figure 14).
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).
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.
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
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.
- Click Prototype (or CTRL + Tab) to switch to Prototype mode.
- Click the big rectangle at the top of the Welcome Screen artboard.
- Click the blue arrow to the right and drag until you connect to the Search Results artboard.
- Set the values to Slide Up, Ease In, and .4s (see Figure 17).
- Select the Customize Order artboard.
- 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).
- 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
- Select Edit > Select All (or CMD + A) to show all of the wired interactions (see Figure 19).
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.
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.
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.
- Click to enter Design mode.
- 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).
- Click outside of the selection to de-select the rectangles.
- Shift + click to select all of the rectangles that represent the menu bar on most screens.
- Click the Fill icon in the Properties Inspector and set the Hex value to #F6F6F6 and uncheck the Border checkbox (see Figure 24).
- 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).
- 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).
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.
- CMD + click inside the Repeat Grid on the My Stuff artboard to select the Rate rectangle.
- Set the border radius to 22. Notice each of the rectangles in the Repeat Grid now have rounded corners (see Figure 27).
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)
- CustomizedOrder_page.png image to Customize Order artboard
- profileImage to My Stuff artboard
- 6_bbqshrimp to Foodies artboard (see Figure 31)
You can copy and paste svg images, such as the rating star icons, from Illustrator:
- 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.
- 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).
- Click into the set of icons to select the star icon and use CMD + C to copy.
- 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).
- Hold shift and drag a handle to resize the star while scaling so it fits inside the square (see Figure 34).
- Select the repeat grid holding the search results and select Ungroup Grid.
- Delete all but the first group with the updated star icons.
- Re-group the items and select Repeat Grid again and drag to create the list with the updated icons (see Figure 36).
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).
Add remaining repeating images to the following artboards (see Figure 38):
- Your order
- My Stuff
- Ratings stars
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).
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
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).
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!