When you look at the user stories of the TaskAgile applications that we just wrote, they are clear and small. But they omit important details that developers need in order to start the implementation.

In fact, user stories are only starting points for discussions on requirements. For example, when you look at a story login, you would ask questions such as, do we need to add a placeholder for each input field? Do we need to add labels for these fields? If we do, should the labels be to the right of the fields or above the fields? Different people can have different ideas about how to implement a user story.

Creating wireframes for user stories can help everybody understand what needs to be built. And you can link wireframes back to user stories which will become the pointers of implementation details.

You can use paper and pencils to create the wireframe or write them on a whiteboard. These two ways are straightforward, but not maintainable and not easy to be shared within the team online. You can also use online wireframe tools to create wireframes.

Another way to create a wireframe, which is the way we will use, is to use PowerPoint or Keynote. Here are some tips for using these tools for creating wireframes:

• Tip 1: Set the Slide Size to the same size as your display's resolution. For example, if your display resolution is 1280 pixels x 800 pixels, in PowerPoint, go to the Page Setup and type in 1280 pixels and 800 pixels. By default, PowerPoint will convert these values from a pixel unit to an inch unit. The benefit of this is that, when you play the slide, it will be in fullscreen. And for all of the elements on the page, you can give them values using the same measurement. For example, you can set the input field to be 30 pixels high by 350 pixels wide. The following is a screenshot of how the log in page wireframe appears in PowerPoint:

• Tip 2: Use Master Slides to create page templates. When there are several pages that share the same elements, creating page templates using Master Slides can save you time when you need to change those shared elements on multiple pages.
• Tip 3: Use Font Awesome to create icons. Font Awesome 5 (http://fontawesome.com) provides almost 1,000 free icons. You can download its free version and install the fonts on your computer. If you're using Keynote, you can add text and type home, and then select Font Awesome 5 as its font and Keynote will change the text to the home icon. If you're using PowerPoint, after installing the font, you will need to go to Font Awesome Cheatsheet (https://fontawesome.com/cheatsheet) and copy an icon itself, not the text, and then paste it in PowerPoint. If you copy a solid icon, remember to change the font to Font Awesome 5 Free Solid in PowerPoint.
• Tip 4: Use Lock to prevent elements from being selected. This tip only applies to Keynote. In Keynote, you can select a shape and then right-click on it and choose Lock from the menu to lock the shape so that it cannot be selected. This is quite useful when you don't want to freeze shapes on the slide.
• Tip 5: Practices make perfect. The more wireframes you create with PowerPoint or Keynote, the better your skills will be.

With PowerPoint or Keynote, you can also create simple UI designs in the same way you create wireframes. The only difference is that you need to pay more attention to details, such as the text colors, background colors, border sizes, and border colors. The following is a screenshot of TaskAgile's board page UI created with Keynote:

No matter what tool you use to create them, wireframes are always an efficient way to communicate your ideas to the rest of the team. You can use them to clarify requirements and explore UI alternatives by creating wireframes of different solutions for the same user story.