Designing the User Interface

After you have finished creating a paper prototype of your app, you are ready to move to creating a digital wireframe.

What is Wireframing

example of wireframe using electronic platform with this type of information denoted:
103 x 23
Logo
sccgov
Welcome and Overview of App
Information
DMV
A-Z Services
Business
Forms
Law & Justice
Do It Online
Home
Forms
Search
Contacts
Pay Online
Saved
Help Wireframing is the step in the design process where you begin to lay out your screens in a software program that emulates your mobile device. There are many software tools available online to use for this purpose. Investigate a few of the programs listed in the sidebar to see how they work.

Since App Inventor will allow you to design the app in the Design View and see the results in the emulator or phone immediately, it can be used for this process.

Designing Your App

As you design your app, remember the enhancements introduced in the previous lessons. Consider these questions: Which information is the most important. How can you make it stand out? Which of the enhancements introduced can you incorporate? What is the correct order or sequence needed? Make adjustments from your paper prototype as necessary as you create the interface in the Design View.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION