Modeling Wireframes for Mobile Apps and Web Pages

Webinar February 2015
In this webinar you will learn how to:
  • Design robust, traceable wireframes for iOS and Android
  • Leverage predefined device patterns and modern interface controls
  • Engage stakeholders and incorporate feedback to improve application design

Do you need to design interfaces for mobile devices, apps or web pages? Enterprise Architect 12 adds a comprehensive suite of interface design tools – helping you to develop better mobile apps and web pages.

Scott Hebbard
Scott Hebbard

Explore the Example Wireframe Model

We have provided the example Enterprise Architect model used in the webinar.
Example model: wireframe-android-ios-interface-example-model.eap Download the Enterprise Architect Wireframe Example Model

Questions from the Audience

Click on a question to see the answer.


 What version of Enterprise Architect supports the mobile wireframe diagram types used in the webinar?

Enterprise Architect version 12.

Enterprise Architect 12 introduced 4 new diagram types, including Android, Apple, Dialog and web page wireframes. These new diagram types allow you to design high-fidelity User Interface Wireframes for Web pages, Windows Dialogs, Apple and Android mobile devices. The webinar also showcases other new Enterprise Architect 12 features including the Navigation bar and improved Common Dialog Properties.

 Is wireframing available in all Enterprise Architect editions?

Yes. The new wireframe diagram types are available in all editions of Enterprise Architect.

 What are the advantages of creating wireframes in Enterprise Architect over say Photoshop or a Paint Program?

Unlike a traditional image editing tool, Enterprise Architect offers comprehensive traceability and integration with communication tools, including Element Discussions and Team Review. Built-in communication tools engage stakeholders, helping to identify and resolve problems early in the development cycle. Pre-built wireframe patterns help reduce development time. Now you can create the wireframe, code, requirements, classes, use cases and test cases all in a single model-driven development environment.

 Does the Navigation toolbar replace the Project Browser?

No. The Navigation toolbar is a convenient alternative to the Project Browser, that can help provide model context. It identifies the location of the Package you are currently working in, and provides options to change the focus to another level of the Package's branch, perform relevant operations on the Package, and locate other Packages in the model.

For more information on the Navigation toolbar, see the Enterprise Architect 12 release page:

 Is the model used for the presentation available online?

Yes. Download mobile-wireframe.eap to explore the model.

 Can Enterprise Architect version 12 be run using CrossOver app ( i.e. mac compatible)?

Yes. For more details, see our CrossOver instructions.

Reporting, Deployment and Client Feedback

 Can we deploy the wireframe to clients/end users to elicit feedback?

Yes. There are numerous methods for distributing and deploying wireframes to clients and end users. Enterprise Architect can generate a variety of reports formats including RTF, PDF, DocX and HTML reports. This makes it very easy to disseminate wireframe models to your clients and end users. You can learn more from our reporting video demonstration. (The video discusses reporting requirements, but the same ideas apply to wireframe models.)

It is also possible to use EA Lite to distribute the wireframes to clients and end users. The advantage of this approach is the ability to use Element Discussions and other communication tools to elicit feedback and embed that feedback into the model repository.

 Can we generate HTML pages from the wireframes prepared by Enterprise Architect?

Yes. Enterprise Architect 12 supports the generation of HTML documentation, including wireframe models and diagrams.

 Can you link diagrams to objects, so that the actual navigation can be demonstrated by stepping through screens?

Yes. In the webinar I used a Composite Diagram structure to link a button to a new diagram. When you generate HTML documentation, it is possible to click buttons and navigate to the appropriate screen, helping users to appreciate how the navigation actually works.

Wireframe Questions

 Can you explain how you linked from a button on one screen to the next? How can you link from a button on an interface screen to another interface screen?

  1. Select the button that will link to the new diagram.
  2. Right-click and choose from the context menu: New Child Diagram | Select Composite Diagram
  3. Choose the appropriate diagram and click OK.

 Is it possible to change the names of the tabs?


  1. Select the Tab Host (Tab Control) element in your diagram.
  2. Open the Properties by double-clicking the element.
  3. Select the Tabs tag in the Wireframing properties tab.
  4. Edit the tab names by clicking the Edit Tagged Value Notes toolbar button.

You can even specify which tab is highlighted as the default Tab. The screenshot below shows this in Enterprise Architect's Tagged Values:

Edit Tagged Value

 Is a wireframe design available for querying its elements via the API?


Code Engineering Questions

 Can you forward engineer for Android/Java or iOS/Objective C?

Only from a class diagram, not directly from the wireframe itself.

You can however establish links between UI elements and Requirements, using that as a basis to build a comprehensive Class model. Enterprise Architect can forward engineer code from a class model. Enterprise Architect can also be used to write code in Java and Objective C.

Support for Additional devices

 Will Enterprise Architect support a wireframe for the new iPhone 7 device/platform?

We currently support a large range of apple devices and would consider updating the profile if and when the iPhone 7 is officially released.

 Do you plan on supporting Windows phone in addition to Android and Apple?

Yes. A wireframe for Windows Phone is currently under development, but we do not have a scheduled release date at this time.

 Is it possible to import Balsamiq or Axure wire frames?

No. Import from Balsamiq and Axure is not currently supported.