How to Create a Wireframe

Wireframes are an important step in the development of any website or mobile app. They allow your team to quickly layout all the necessary elements in a visual way before writing a single line of code.

A wireframe will let you illustrate to clients or stakeholders what you mean by a hero image, a light box, navigation and how those elements will come together on a page.

Add Wireframe Symbols

Any wireframe template opens with a set of relevant tools and libraries docked to the left hand side of your drawing area. You'll have access to common UI elements like buttons, menus, images, panels, and more. To add a new element to your design, simply drag and drop a shape from the library to the page.

Modifying Wireframe Symbols

SmartDraw makes it really easy to add or remove elements from certain wireframe symbols where it makes sense to modify the number of items shown. You can easily insert new menu items, create additional selection choices, add check boxes and radio buttons, add tabs, and more.

For example, you can drag and drop a list of menu items for your iOS UI and click on Insert to add an additional selection to the element. You can also do the same using the right-click menu.

Adding an Icon

You can also add icons to select wireframe symbols like drop-down menus. Menus have three columns: one for an icon, one for the text labels, and one for shortcuts on the right. Select the menu item you want to add an icon to, go the SmartPanel to the left of your drawing area and click on Add Icon. This command is also available from the right-click menu. You can choose one of the existing icons or even import your own. To remove an icon, simply select the icon and hit Delete.

Adding a Separator

To add a separator into a menu, you can select the menu element and click Add Separator in the SmartPanel.

Toggle Controls for Prototyping

You can really simulate future user interactions and contextual menus using smart wireframing symbols that let you toggle conditions. This is especially useful when trying to show usability for mobile app designs. You can toggle settings, checkboxes, and radio buttons on and off as necessary. Just click the toggle to change its setting.

Exact Pixel Dimensions

All of SmartDraw's wireframing symbols will show their pixel dimensions when selected. You'll note that the rulers around the drawing area also show pixels to help you line up elements.

You can resize shapes to exact pixel dimensions by typing their height and width right into the dimension display. If you use the mouse to resize an element, you'll see their dimension change in real time.

Collaborate on Your Wireframe

Share your wireframe or UI design with any team member or client using your SmartDraw account or any of the integrated cloud storage services like Dropbox^®, Google Drive^™, Box^®, or OneDrive^®.

You can also insert your wireframe into Microsoft Word^®, Excel^® PowerPoint^® with a single click.

SmartDraw also makes it easy to add comments, text callouts, or mark elements for deletion or change.